@sapudex/web-components 2.24.0 → 2.25.1

package/src/MastheadShell.hbs

@@ -72,47 +72,56 @@
             </div>
         {{/if}}
         {{#if hasSearch}}
-          <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-            <udex-masthead-item
+            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
+                <udex-masthead-item
                     class="udex-masthead-shell__search-btn"
                     icon="search"
                     part="search-button"
                     @click="{{handleSearchClick}}"
-                    accessible-name="search">
-            </udex-masthead-item>
-          </div>
+                    accessible-name="{{openSearchButtonAccessibleNameText}}"
+                    icon-alt="{{openSearchButtonAccessibleNameText}}">
+                </udex-masthead-item>
+            </div>
+        {{/if}}
+        {{#if hasJoule}}
+            <div
+                class="udex-masthead-shell__joule udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleJouleClick}}">
+                <slot name="joule"></slot>
+            </div>
         {{/if}}
         {{#if hasCart}}
-          <div
-                  class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleCartClick}}">
-            <slot name="cart"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCartClick}}">
+                <slot name="cart"></slot>
+            </div>
         {{/if}}
         {{#if hasSupport}}
-          <div
-                  class="udex-masthead-shell__support udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleSupportClick}}">
-            <slot name="support"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleSupportClick}}">
+                <slot name="support"></slot>
+            </div>
         {{/if}}
         {{#if hasProfile}}
-          <div
-                  class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleProfileClick}}">
-            <slot name="profile"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleProfileClick}}">
+                <slot name="profile"></slot>
+            </div>
         {{/if}}
         {{#if hasCountrySelector}}
-          <div
-                  class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                  @ui5-item-click="{{setSelectedItem}}"
-                  @click="{{handleCountrySelectorClick}}">
-            <slot name="countrySelector"></slot>
-          </div>
+            <div
+                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
+                @ui5-item-click="{{setSelectedItem}}"
+                @click="{{handleCountrySelectorClick}}">
+                <slot name="countrySelector"></slot>
+            </div>
         {{/if}}
         {{#if hasMobileMenuButtons}}
             <udex-masthead-item

package/src/MastheadShell.ts

@@ -17,7 +17,7 @@ import "@ui5/webcomponents-icons/dist/search.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { MAIN_LINKS } from "./generated/i18n/i18n-defaults.js";
+import { MAIN_LINKS, SEARCH } from "./generated/i18n/i18n-defaults.js";
 import UDExMastheadItem, { UDExMastheadDropdownItemAction } from "./MastheadItem.js";
 import UDExMastheadMenu from "./MastheadMenu.js";
 import UDExControlButton from "./ControlButton.js";
@@ -28,6 +28,7 @@ import type UDExMastheadCountrySelector from "./MastheadCountrySelector.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
@@ -104,7 +105,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the mobile menu button closer.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
+ * @param {AnalyticsName} analyticsName The analytics name for the mobile menu close event
  */
 @event("mobile-menu-close", { bubbles: true })
 
@@ -124,7 +125,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the search close button.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the search close click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -135,7 +136,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is opened.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
+ * @param {AnalyticsName} analyticsName The analytics name for the search opened event
  */
 @event("search-opened", { bubbles: true })
 
@@ -143,15 +144,26 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the search panel is closed.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the mobile menu open event
+ * @param {AnalyticsName} analyticsName The analytics name for the search closed event
  */
 @event("search-closed", { bubbles: true })
 
+/**
+ * Fired event when the user clicks the joule button trigger.
+ *
+ * @public
+ * @param {AnalyticsName} analyticsName The analytics name for the joule click event
+ * @param {PointerEvent} originalEvent The original pointer event
+ * @param {HTMLElement} sourceNode The source element that fired the event
+ * @param {UDExMastheadItem} [item] The masthead item that was clicked
+ */
+@event("joule-click", { bubbles: true })
+
 /**
  * Fired event when the user clicks the cart button trigger.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the cart click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -162,7 +174,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the support button trigger.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the support click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -173,7 +185,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the profile button trigger.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the profile click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -184,7 +196,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the country selector button trigger.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the country selector click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -195,7 +207,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the logo.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the logo click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -206,7 +218,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the site label.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the site label click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -217,7 +229,7 @@ type UDExMastheadShellAnalyticsNameEventDetail = {
  * Fired event when the user clicks the co-brand.
  *
  * @public
- * @param {AnalyticsName} analyticsName The analytics name for the search click event
+ * @param {AnalyticsName} analyticsName The analytics name for the co-brand click event
  * @param {PointerEvent} originalEvent The original pointer event
  * @param {HTMLElement} sourceNode The source element that fired the event
  * @param {UDExMastheadItem} [item] The masthead item that was clicked
@@ -230,6 +242,7 @@ class UDExMastheadShell extends UI5Element {
     "mobile-menu-close": UDExMastheadShellAnalyticsNameEventDetail,
     "search-opened": UDExMastheadShellAnalyticsNameEventDetail,
     "search-closed": UDExMastheadShellAnalyticsNameEventDetail,
+    "joule-click": UDExMastheadShellBaseEventDetail,
     "cart-click": UDExMastheadShellBaseEventDetail,
     "support-click": UDExMastheadShellBaseEventDetail,
     "profile-click": UDExMastheadShellBaseEventDetail,
@@ -290,6 +303,14 @@ class UDExMastheadShell extends UI5Element {
   @slot({ type: HTMLElement })
     cart!: Array<UDExMastheadItem>;
 
+  /**
+   * Slot for joule menu
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    joule!: Array<UDExMastheadItem>;
+
   /**
    * Slot for avatar
    *
@@ -450,6 +471,15 @@ class UDExMastheadShell extends UI5Element {
   @property()
     closeButtonAccessibleName?: string;
 
+  /**
+   * Defines an accessible name for open search icon
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    openSearchButtonAccessibleName?: string;
+
   /**
    * Defines an accessible name for the close mobile menu button
    *
@@ -513,6 +543,7 @@ class UDExMastheadShell extends UI5Element {
   static i18nBundle: I18nBundle;
 
   _searchOpener!: UDExMastheadItem | null | undefined;
+  _desktopSearch!: UDExSearch | null | undefined;
   _mobileMenu!: UDExMastheadMobileMenu | null | undefined;
   _handleResizeBound: ResizeObserverCallback;
   _rootHolder!: HTMLElement | null | undefined;
@@ -533,9 +564,10 @@ class UDExMastheadShell extends UI5Element {
   onAfterRendering() {
     this._rootHolder = this.mastheadHolder;
     this._searchOpener = this.searchOpener;
+    this._desktopSearch = this.desktopSearchSlot;
     this._mobileMenu = this.mastheadMobileMenu;
 
-    if (this._isSearchOpened) {
+    if (this._isSearchOpened && this._desktopSearch) {
       this.focusSearchInput();
     }
 
@@ -671,11 +703,19 @@ class UDExMastheadShell extends UI5Element {
   handleCartClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("cart-click", e);
+    this.mobileMenuReset();
+  }
+
+  handleJouleClick(e: PointerEvent): void {
+    e.stopPropagation();
+    this.fireMastheadEvent("joule-click", e);
+    this.mobileMenuReset();
   }
 
   handleProfileClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("profile-click", e);
+    this.mobileMenuReset();
   }
 
   handleSupportClick(e: PointerEvent): void {
@@ -686,6 +726,7 @@ class UDExMastheadShell extends UI5Element {
   handleCountrySelectorClick(e: PointerEvent): void {
     e.stopPropagation();
     this.fireMastheadEvent("country-selector-click", e);
+    this.mobileMenuReset();
   }
 
   handleOpenMobileMenu(): void {
@@ -708,6 +749,7 @@ class UDExMastheadShell extends UI5Element {
     this._closeBtnClicked = true;
     this.fireMastheadEvent("search-close-click", e);
     this.closeSearch();
+    this.resetSearch();
   }
 
   handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent): void {
@@ -719,11 +761,8 @@ class UDExMastheadShell extends UI5Element {
   }
 
   focusSearchInput(): void {
-    const searchSlot = this.querySelector<UDExSearch>("[udex-search]");
-    if (searchSlot) {
-      const input = searchSlot.shadowRoot!.querySelector<HTMLElement>("input");
-      input?.focus();
-    }
+    const input = this._desktopSearch?.shadowRoot!.querySelector<HTMLElement>("input");
+    input?.focus();
   }
 
   focusPreviousMenuItem(item: UDExMastheadItem): void {
@@ -752,6 +791,12 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
+  resetSearch(): void {
+    if (this._desktopSearch) {
+      this._desktopSearch.value = "";
+    }
+  }
+
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
     if (clickedItem) {
@@ -774,6 +819,7 @@ class UDExMastheadShell extends UI5Element {
     const buttonsArray: Array<UDExMastheadItem> = [
       ...this.menuItems,
       ...this.exploreSAP,
+      ...this.joule,
       ...this.cart,
       ...this.support,
       ...this.profile,
@@ -931,6 +977,13 @@ class UDExMastheadShell extends UI5Element {
     this.fireDecoratorEvent(eventName, eventDetails);
   }
 
+  mobileMenuReset(): void {
+    if (this._isMobileMenuOpen) {
+      this._mobileMenu?.showFirstLevelMenu();
+      this._mobileMenu?.resetSearch();
+    }
+  }
+
   /**
    * Close the search panel.
    * @public
@@ -987,6 +1040,7 @@ class UDExMastheadShell extends UI5Element {
     (this.mobileBtn as UDExMastheadItem).selected = false;
     this._isMobileMenuOpen = false;
     this._mobileMenu?.showFirstLevelMenu();
+    this._mobileMenu?.resetSearch();
 
     if (this.bodyOverflow) {
       this.removeOverflowBody();
@@ -1007,6 +1061,10 @@ class UDExMastheadShell extends UI5Element {
     ];
   }
 
+  get desktopSearchSlot(): UDExSearch | null {
+    return this.querySelector<UDExSearch>("[udex-search]");
+  }
+
   get searchOpener(): MastheadItemType {
     return this.shadowRoot?.querySelector(".udex-masthead-shell__search-btn");
   }
@@ -1071,6 +1129,10 @@ class UDExMastheadShell extends UI5Element {
     return !!this.exploreSAP.length;
   }
 
+  get hasJoule(): boolean {
+    return !!this.joule.length;
+  }
+
   get hasCountrySelector(): boolean {
     return !!this.countrySelector.length;
   }
@@ -1111,8 +1173,12 @@ class UDExMastheadShell extends UI5Element {
     return !this.isAtMostBreakpointSizeM && this.isMainMenuVisible;
   }
 
+  get openSearchButtonAccessibleNameText(): string {
+    return this.openSearchButtonAccessibleName || translate(UDExMastheadShell, SEARCH);
+  }
+
   get mainNavigationAriaLabel(): string {
-    return UDExMastheadShell.i18nBundle.getText(MAIN_LINKS);
+    return translate(UDExMastheadShell, MAIN_LINKS);
   }
 
   get isSimpleExploreMode(): boolean {

package/src/MessageStrip.ts

@@ -15,6 +15,7 @@ import {
   MESSAGE_STRIP_CLOSE_BUTTON,
 } from "./generated/i18n/i18n-defaults.js";
 import { UDExMessageStripDesign, UDExMessageStripStatusType } from "./types/MessageStrip.js";
+import translate from "./utils/translate.js";
 
 // Template
 import MessageStripTemplate from "./MessageStripTemplate.js";
@@ -81,7 +82,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   getTranslation(text: I18nText): string {
-    return UDExMessageStrip.i18nBundle.getText(text);
+    return translate(UDExMessageStrip, text);
   }
 
   textStatusTypeMapping(): Record<string, string> {

package/src/MessageStripTemplate.tsx

@@ -19,7 +19,7 @@ export default function MessageStripTemplate(this: UDExMessageStrip) {
         "ui5-message-strip-root-hide-icon": this.shouldHideIcon,
         "ui5-message-strip-root-hide-close-button": this.hideCloseButton,
         "ui5-message-strip-root--critical": this.isDesignWarning,
-        [this.designClasses]: true,
+        ...(this.designClasses ? { [this.designClasses]: true } : {}),
       }}
       id={this._id}
       role="note"

package/src/Pagination.ts

@@ -11,14 +11,13 @@ import {
   PAGINATION_PAGE,
   SELECTED,
   ACTIVATE_PAGE,
-  FIRST_PAGE,
-  LAST_PAGE,
   PREVIOUS_PAGE,
   NEXT_PAGE,
   CURRENT_PAGE,
   DISABLED,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
+import translate from "./utils/translate.js";
 
 // Template
 import PaginationTemplate from "./PaginationTemplate.js";
@@ -211,18 +210,18 @@ class UDExPagination extends UI5Element {
     if (!this.pages) {
       return "";
     }
-    return ` ${UDExPagination.i18nBundle.getText(OF)} `;
+    return ` ${translate(UDExPagination, OF)} `;
   }
 
   get paginationAccessibleName(): string {
     if (this.typeShort) {
       return this.paginationShortAccessibleName;
     }
-    return `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}`;
+    return `${translate(UDExPagination, CURRENT_PAGE)} ${this.currentPageIndex + 1}`;
   }
 
   get pageAccessibleName(): string {
-    return UDExPagination.i18nBundle.getText(PAGINATION_PAGE);
+    return translate(UDExPagination, PAGINATION_PAGE);
   }
 
   get paginationShortAccessibleName(): string {
@@ -230,43 +229,31 @@ class UDExPagination extends UI5Element {
   }
 
   get activatePageAccessibleText() {
-    return UDExPagination.i18nBundle.getText(ACTIVATE_PAGE);
-  }
-
-  get firstPageAccessibleName(): string {
-    if (this.currentPageIndex === 0) { return UDExPagination.i18nBundle.getText(FIRST_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(FIRST_PAGE)}. ${this.activatePageAccessibleText} 1`;
-  }
-
-  get lastPageAccessibleName(): string {
-    if (this.pages && this.currentPageIndex === (this.pages - 1)) { return UDExPagination.i18nBundle.getText(LAST_PAGE); }
-    return `${UDExPagination.i18nBundle.getText(LAST_PAGE)}. ${this.activatePageAccessibleText} ${this.pages}`;
+    return translate(UDExPagination, ACTIVATE_PAGE);
   }
 
   get previousPageAccessibleName(): string {
-    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
     if (this._prevButtonPseudoDisabled || this.prevButtonDisabled) {
-      const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
-      return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)} ${effectiveDisabledText}`;
+      const effectiveDisabledText = this._prevButtonPseudoDisabled ? `${translate(UDExPagination, DISABLED)}` : "";
+      return `${translate(UDExPagination, PREVIOUS_PAGE)} ${effectiveDisabledText}`;
     }
-    return `${currentPageText} ${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
+    return `${translate(UDExPagination, PREVIOUS_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex}`;
   }
 
   get previousBtnTooltip(): string {
-    return !this.prevButtonDisabled ? `${UDExPagination.i18nBundle.getText(PREVIOUS_PAGE)}` : "";
+    return !this.prevButtonDisabled ? `${translate(UDExPagination, PREVIOUS_PAGE)}` : "";
   }
 
   get nextPageAccessibleName(): string {
-    const currentPageText = `${UDExPagination.i18nBundle.getText(CURRENT_PAGE)} ${this.currentPageIndex + 1}.`;
     if (this._nextButtonPseudoDisabled || this.nextButtonDisabled) {
-      const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${UDExPagination.i18nBundle.getText(DISABLED)}` : "";
-      return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)} ${effectiveDisabledText}`;
+      const effectiveDisabledText = this._nextButtonPseudoDisabled ? `${translate(UDExPagination, DISABLED)}` : "";
+      return `${translate(UDExPagination, NEXT_PAGE)} ${effectiveDisabledText}`;
     }
-    return `${currentPageText} ${UDExPagination.i18nBundle.getText(NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
+    return `${translate(UDExPagination, NEXT_PAGE)}. ${this.activatePageAccessibleText} ${this.currentPageIndex + 2}`;
   }
 
   get nextBtnTooltip(): string {
-    return !this.nextButtonDisabled ? `${UDExPagination.i18nBundle.getText(NEXT_PAGE)}` : "";
+    return !this.nextButtonDisabled ? `${translate(UDExPagination, NEXT_PAGE)}` : "";
   }
 
   get pagination(): Page[] {
@@ -415,8 +402,8 @@ class UDExPagination extends UI5Element {
     const isCurrent = index === this.currentPageIndex;
 
     const accessibleName = isCurrent ? `
-    ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}, ${UDExPagination.i18nBundle.getText(SELECTED)}` : `
-    ${this.pageAccessibleName} ${index + 1} ${UDExPagination.i18nBundle.getText(OF)} ${this.pages}`;
+    ${this.pageAccessibleName} ${index + 1} ${translate(UDExPagination, OF)} ${this.pages}, ${translate(UDExPagination, SELECTED)}` : `
+    ${this.pageAccessibleName} ${index + 1} ${translate(UDExPagination, OF)} ${this.pages}`;
 
     return accessibleName;
   }

package/src/PhoneNumberField.ts

@@ -9,7 +9,7 @@ import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delega
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
-  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS,
+  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
 import type { Country } from "./data/CountryListISO3166.js";
 import { CountryListDB } from "./data/CountryListISO3166.js";
@@ -18,6 +18,7 @@ import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExButton from "./Button.js";
 import UDExStatusMessage from "./StatusMessage.js";
+import translate from "./utils/translate.js";
 
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
@@ -611,9 +612,9 @@ class UDExPhoneNumberField extends UI5Element {
 
   get valueStateTypeMappings(): Record<UDExPhoneNumberFieldValueState, string> {
     return {
-      "Success": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      "Standard": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_INFORMATION),
-      "Error": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Success": translate(UDExPhoneNumberField, VALUE_STATE_SUCCESS),
+      "Standard": "",
+      "Error": translate(UDExPhoneNumberField, VALUE_STATE_ERROR),
     };
   }
 
@@ -626,7 +627,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get readOnlyStateText() {
-    return UDExPhoneNumberField.i18nBundle.getText(READ_ONLY);
+    return translate(UDExPhoneNumberField, READ_ONLY);
   }
 
   get ariaDescribedById(): string {
@@ -646,7 +647,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get countrySelectorAriaLabel(): string {
-    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
+    return this.accessibleName || `${translate(UDExPhoneNumberField, COUNTRY_SELECT)} ${this.label}`.trim();
   }
 
   get countryIso(): string {

package/src/ProgressBar.ts

@@ -8,6 +8,7 @@ import {
   VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, VALUE_STATE_INFORMATION,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExProgressBarValueState from "./types/ProgressBar.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
@@ -54,10 +55,10 @@ class UDExProgressBar extends ProgressIndicator {
 
   valueStateTextMappings(): Record<string, string> {
     return {
-      [UDExProgressBarValueState.Error]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_ERROR),
-      [UDExProgressBarValueState.Warning]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_WARNING),
-      [UDExProgressBarValueState.Success]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      [UDExProgressBarValueState.Information]: UDExProgressBar.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      [UDExProgressBarValueState.Error]: translate(UDExProgressBar, VALUE_STATE_ERROR),
+      [UDExProgressBarValueState.Warning]: translate(UDExProgressBar, VALUE_STATE_WARNING),
+      [UDExProgressBarValueState.Success]: translate(UDExProgressBar, VALUE_STATE_SUCCESS),
+      [UDExProgressBarValueState.Information]: translate(UDExProgressBar, VALUE_STATE_INFORMATION),
     };
   }
 }

package/src/PromoTile.ts

@@ -19,6 +19,7 @@ import { UDExPromoTileColorScheme, UDExPromoTileMode } from "./types/PromoTile.j
 
 // Styles
 import PromoTileCss from "./generated/themes/PromoTile.css.js";
+import translate from "./utils/translate.js";
 
 export enum UDExOrientation {
   Vertical = "Vertical",
@@ -254,7 +255,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   get promoTileContainerText(): string {
-    return this.accessibleName || this.header || UDExPromoTile.i18nBundle.getText(PROMO_TILE);
+    return this.accessibleName || this.header || translate(UDExPromoTile, PROMO_TILE);
   }
 
   get _showPictogram(): boolean {
@@ -266,7 +267,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   get _imageLabel(): string {
-    return this.imageLabel || UDExPromoTile.i18nBundle.getText(PROMO_TILE_ICON);
+    return this.imageLabel || translate(UDExPromoTile, PROMO_TILE_ICON);
   }
 
   handleCTAButtonClick(e: Event) {

package/src/RadioButton.ts

@@ -8,6 +8,7 @@ import {
 import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExRadioButtonValueState from "./types/RadioButton.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import RadioButtonCss from "./generated/themes/RadioButton.css.js";
@@ -66,13 +67,13 @@ class UDExRadioButton extends RadioButton {
   get valueStateText(): string {
     switch (this.valueState) {
     case UDExRadioButtonValueState.Error:
-      return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);
+      return translate(RadioButton, VALUE_STATE_ERROR);
     case UDExRadioButtonValueState.Success:
-      return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);
+      return translate(RadioButton, VALUE_STATE_SUCCESS);
     case UDExRadioButtonValueState.Information:
-      return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);
+      return translate(RadioButton, VALUE_STATE_INFORMATION);
     case UDExRadioButtonValueState.Warning:
-      return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);
+      return translate(RadioButton, VALUE_STATE_WARNING);
     default:
       return "";
     }

package/src/RatingBar.ts

@@ -8,6 +8,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
 import RatingBarTemplate from "./RatingBarTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import RatingBarCss from "./generated/themes/RatingBar.css.js";
@@ -102,7 +103,7 @@ class UDExRatingBar extends UI5Element {
   }
 
   get _ratingDescription(): string {
-    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;
+    return `${this.validatedRating} ${translate(UDExRatingBar, STARS)}`;
   }
 }