@sapudex/web-components 2.24.0 → 2.25.1

package/src/ImageGridTableItem.ts

@@ -0,0 +1,148 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { UDExTarget } from "./types/common.js";
+
+import ImageGridTableItemTemplate from "./ImageGridTableItemTemplate.js";
+
+// Styles
+import ImageGridTableItemCss from "./generated/themes/ImageGridTableItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTableItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-image-grid-table-item",
+  renderer: jsxRenderer,
+  styles: ImageGridTableItemCss,
+  template: ImageGridTableItemTemplate,
+})
+
+/**
+ * Fired event when the user clicks on the item link.
+ *
+ * @public
+ */
+@event("item-click", { cancelable: true, bubbles: true })
+
+class UDExImageGridTableItem extends UI5Element {
+  eventDetails!: {
+    "item-click": void,
+  };
+
+  /**
+   * Defines the text content of the component.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    content!: Array<HTMLElement>;
+
+  /**
+   * Defines the header text of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    headline?: string;
+
+  /**
+   * Defines the link label of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    linkLabel?: string;
+
+  /**
+   * Defines link URL
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    href?: string;
+
+  /**
+   * Defines the source URL of the image
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    src?: string;
+
+  /**
+   * Defines image alt text
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    alt?: string;
+
+  /**
+   * Defines tooltip on hover
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    tooltip?: string;
+
+  /**
+   * Defines target for the mage grid table item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._self;
+
+  /**
+   * Indicates whether the image grid table item is grayscale.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _grayscale = false;
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  fireLinkItemClickEvent(e: Event): void {
+    const executeEvent = this.fireDecoratorEvent("item-click");
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
+}
+
+UDExImageGridTableItem.define();
+
+export default UDExImageGridTableItem;

package/src/ImageGridTableItemTemplate.tsx

@@ -0,0 +1,48 @@
+import type ImageGridTableItem from "./ImageGridTableItem.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UDExLink from "./Link.js";
+
+export default function ImageGridTableItemTemplate(this: ImageGridTableItem) {
+  const rootClass = "udex-image-grid-table-item";
+
+  const image = (
+    <img
+      class={`${rootClass}__image`}
+      src={this.src}
+      alt={this.alt}
+      title={this.tooltip}
+    />
+  );
+
+  return (
+    <div class={rootClass}>
+      {!this.linkLabel && this.href
+        ? <a
+          class={`${rootClass}__image-holder`}
+          onClick={this.fireLinkItemClickEvent}
+          href={this.href}
+          target={this.target}
+          title={this.tooltip}>
+          {image}
+        </a>
+        : <div class={`${rootClass}__image-holder`}>{image}</div>
+      }
+      {this.headline &&
+        <span class={`${rootClass}__headline`}>{this.headline}</span>
+      }
+      <slot></slot>
+      {this.linkLabel &&
+        <div class={`${rootClass}__link-holder`}>
+          <UDExLink
+            onClick={this.fireLinkItemClickEvent}
+            target={this.target}
+            class={`${rootClass}__link`}
+            endIcon={slimArrowRight}
+            href={this.href}>
+            {this.linkLabel}
+          </UDExLink>
+        </div>
+      }
+    </div>
+  );
+}

package/src/ImageGridTableTemplate.tsx

@@ -0,0 +1,9 @@
+import type ImageGridTable from "./ImageGridTable.js";
+
+export default function ImageGridTableTemplate(this: ImageGridTable) {
+  return (
+    <div class="udex-image-grid-table">
+      <slot></slot>
+    </div>
+  );
+}

package/src/ImageGridTicker.ts

@@ -15,6 +15,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExImageGridTickerItem from "./ImageGridTickerItem.js";
 import ImageGridTickerItem from "./ImageGridTickerItem.js";
 import ImageGridTickerTemplate from "./ImageGridTickerTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ImageGridTickerCss from "./generated/themes/ImageGridTicker.css.js";
@@ -84,6 +85,7 @@ class UDExImageGridTicker extends UI5Element {
    */
   @property({ type: Boolean })
     grayscale?: boolean;
+
   /**
    * Indicates whether the image grid ticker is scrollable.
    *
@@ -344,8 +346,8 @@ class UDExImageGridTicker extends UI5Element {
 
   get playBtnTooltipText(): string {
     return this._isPaused
-      ? UDExImageGridTicker.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)
-      : UDExImageGridTicker.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);
+      ? translate(UDExImageGridTicker, PLAY_BUTTON_ACCESSIBLE_NAME)
+      : translate(UDExImageGridTicker, PAUSE_BUTTON_ACCESSIBLE_NAME);
   }
 }
 

package/src/ImageGridTickerItem.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
@@ -32,7 +33,18 @@ import ImageGridTickerItemCss from "./generated/themes/ImageGridTickerItem.css.j
   template: ImageGridTickerItemTemplate,
 })
 
+/**
+ * Fired event when the user clicks on the item link.
+ *
+ * @public
+ */
+@event("item-click", { cancelable: true, bubbles: true })
+
 class UDExImageGridTickerItem extends UI5Element {
+  eventDetails!: {
+    "item-click": void,
+  };
+
   /**
    * Defines the source URL
    *
@@ -74,6 +86,14 @@ class UDExImageGridTickerItem extends UI5Element {
       this.setAttribute("desktop", "");
     }
   }
+
+  fireLinkItemClickEvent(e: Event): void {
+    const executeEvent = this.fireDecoratorEvent("item-click");
+
+    if (!executeEvent) {
+      e.preventDefault();
+    }
+  }
 }
 
 UDExImageGridTickerItem.define();

package/src/ImageGridTickerItemTemplate.tsx

@@ -16,6 +16,7 @@ export default function ImageGridTickerItemTemplate(this: ImageGridTickerItem) {
     <div class={rootClass}>
       {this.href && this.href.length > 0
         ? <a
+          onClick={this.fireLinkItemClickEvent}
           class={`${rootClass}__link`}
           href={this.href}
           title={this.tooltip}>

package/src/InputGroup.ts

@@ -14,6 +14,7 @@ import {
   VALUE_STATE_ERROR,
   VALUE_STATE_SUCCESS,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
@@ -114,8 +115,8 @@ class UDExInputGroup extends UI5Element {
 
   get valueStateTypeMappings(): Record<string, string> {
     return {
-      "Success": UDExInputGroup.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      "Error": UDExInputGroup.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Success": translate(UDExInputGroup, VALUE_STATE_SUCCESS),
+      "Error": translate(UDExInputGroup, VALUE_STATE_ERROR),
     };
   }
 

package/src/List.ts

@@ -16,6 +16,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { ARIA_LABEL_LIST_MULTISELECTABLE, ARIA_LABEL_LIST_SELECTABLE } from "./generated/i18n/i18n-defaults.js";
 import ListTemplate from "./generated/templates/ListTemplate.lit.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ListCss from "./generated/themes/List.css.js";
@@ -456,7 +457,7 @@ class UDExList extends UI5Element {
       ? ARIA_LABEL_LIST_SELECTABLE
       : ARIA_LABEL_LIST_MULTISELECTABLE;
 
-    return this.accessibleName || UDExList.i18nBundle.getText(defaultText);
+    return this.accessibleName || translate(UDExList, defaultText);
   }
 
   get ariaLabelledBy(): string {

package/src/ListItem.ts

@@ -19,8 +19,9 @@ import UDExRadioButton from "./RadioButton.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
-  DELETE_BUTTON, EDIT_BUTTON, INDETERMINATE, SELECTED, UNSELECTED,
+  INDETERMINATE, SELECTED, UNSELECTED,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
 
@@ -389,17 +390,9 @@ class UDExListItem extends UDExListItemBase {
 
   get stateAccessibleName(): string {
     if (this.indeterminate) {
-      return UDExListItem.i18nBundle.getText(INDETERMINATE);
+      return translate(UDExListItem, INDETERMINATE);
     }
-    return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;
-  }
-
-  get editButtonAccessibleName(): string {
-    return UDExListItem.i18nBundle.getText(EDIT_BUTTON);
-  }
-
-  get deleteButtonAccessibleName(): string {
-    return UDExListItem.i18nBundle.getText(DELETE_BUTTON);
+    return `${this.selected ? translate(UDExListItem, SELECTED) : translate(UDExListItem, UNSELECTED)} `;
   }
 
   get itemDescribedBy(): string {

package/src/ListSelectAll.ts

@@ -10,6 +10,7 @@ import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit.js";
 import UDExListItem from "./ListItem.js";
 import type { UDExListItemBaseEvents } from "./ListItemBase.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -95,7 +96,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
 
   get selectAllLabel(): string {
     const hasLabel = this.label !== "undefined" && this.label?.length > 0;
-    return hasLabel ? this.label : UDExListSelectAll.i18nBundle.getText(SELECT_ALL);
+    return hasLabel ? this.label : translate(UDExListSelectAll, SELECT_ALL);
   }
 
   get additionalClassName(): string {

package/src/MastheadCountrySelector.ts

@@ -18,6 +18,7 @@ import AnalyticsName from "./types/AnalyticsName.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import type UDExMastheadShell from "./MastheadShell.js";
 import { NO_MATCHES_FOUND, RESULT_RETURNED } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadCountrySelectorCss from "./generated/themes/MastheadCountrySelector.css.js";
@@ -509,11 +510,11 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   get noMatchesFoundText(): string {
-    return UDExMastheadCountrySelector.i18nBundle.getText(NO_MATCHES_FOUND);
+    return translate(UDExMastheadCountrySelector, NO_MATCHES_FOUND);
   }
 
   get resultReturnedText(): string {
-    return UDExMastheadCountrySelector.i18nBundle.getText(RESULT_RETURNED);
+    return translate(UDExMastheadCountrySelector, RESULT_RETURNED);
   }
 
   get items(): Array<UDExMastheadMenuItem> {

package/src/MastheadItem.hbs

@@ -43,7 +43,7 @@
         role="{{accessibleRoleName}}"
         id="{{this._id}}"
         class="udex-masthead-item__btn {{additionalClass}}"
-        aria-expanded="{{selected}}"
+        aria-expanded="{{buttonAriaExpanded}}"
         aria-controls="{{this._id}}_dropdown"
         aria-describedby="{{ariaDescribedBy}}"
         aria-haspopup="{{hasDropdownSlot}}"

package/src/MastheadItem.ts

@@ -24,6 +24,7 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import type UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
@@ -638,7 +639,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get accessibleLabel(): string {
-    return this.accessibleName || this.innerText || (this.isProfileBtn ? UDExMastheadItem.i18nBundle.getText(PROFILE) : "");
+    return this.accessibleName || this.innerText || (this.isProfileBtn ? translate(UDExMastheadItem, PROFILE) : "");
   }
 
   get profileSlot(): UDExMastheadProfileMenu {
@@ -654,28 +655,34 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get openInNewWindowText(): string {
-    return UDExMastheadItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+    return translate(UDExMastheadItem, OPENS_IN_A_NEW_WINDOW);
   }
 
   get eventItemTitle(): string {
     if (this.isSearchBtn) {
-      return UDExMastheadItem.i18nBundle.getText(SEARCH);
+      return translate(UDExMastheadItem, SEARCH);
     }
     if (this.isCartBtn) {
-      return UDExMastheadItem.i18nBundle.getText(CART);
+      return translate(UDExMastheadItem, CART);
     }
     if (this.isProfileBtn) {
-      return UDExMastheadItem.i18nBundle.getText(PROFILE);
+      return translate(UDExMastheadItem, PROFILE);
     }
     if (this.isCountrySelectorBtn) {
-      return UDExMastheadItem.i18nBundle.getText(COUNTRY_SELECTOR);
+      return translate(UDExMastheadItem, COUNTRY_SELECTOR);
     }
     if (this.isSupportBtn) {
-      return UDExMastheadItem.i18nBundle.getText(SUPPORT);
+      return translate(UDExMastheadItem, SUPPORT);
     }
 
     return this.firstChild?.nodeValue?.trim() || "";
   }
+
+  get buttonAriaExpanded(): boolean | undefined {
+    if (!this.isSearchBtn) {
+      return this.selected;
+    }
+  }
 }
 
 UDExMastheadItem.define();

package/src/MastheadMenu.hbs

@@ -22,18 +22,39 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
         {{#if this.url}}
-            <udex-masthead-menu-item
-                id="category-{{categoryId}}"
-                type="Heading"
-                part="menu-item"
-                exportparts="menu-item"
-                accessible-role="link"
-                @click="{{../../handleMenuItemClick}}"
-                url="{{this.url}}"
-                label="{{this.category}}"
-                icon-end
-                has-border>
-            </udex-masthead-menu-item>
+            {{#if ../_isMobileMode}}
+                <udex-masthead-menu-item
+                    id="category-{{categoryId}}"
+                    type="Heading"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    label="{{this.category}}"
+                    has-border>
+                </udex-masthead-menu-item>
+                <udex-masthead-menu-item
+                    part="menu-item"
+                    accessible-role="link"
+                    exportparts="menu-item"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    label="{{../overviewHeaderLinkText}}"
+                    url="{{this.url}}"
+                    has-border>
+                </udex-masthead-menu-item>
+            {{else}}
+                <udex-masthead-menu-item
+                    id="category-{{categoryId}}"
+                    type="Heading"
+                    part="menu-item"
+                    exportparts="menu-item"
+                    accessible-role="link"
+                    @click="{{../../handleMenuItemClick}}"
+                    url="{{this.url}}"
+                    label="{{this.category}}"
+                    icon-end
+                    has-border>
+                </udex-masthead-menu-item>
+            {{/if}}
         {{else}}
             <udex-masthead-menu-item
                 id="category-{{categoryId}}"

package/src/MastheadMenu.ts

@@ -2,6 +2,8 @@ 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
@@ -14,6 +16,8 @@ import UDExDivider from "./Divider.js";
 import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
 import parseArrayFromString from "./utils/parseArrayFromString.js";
 import AnalyticsName from "./types/AnalyticsName.js";
+import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
@@ -116,6 +120,9 @@ class UDExMastheadMenu extends UI5Element {
   @property({ type: Boolean })
     _isMobileMode!: boolean;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);
@@ -205,6 +212,10 @@ class UDExMastheadMenu extends UI5Element {
     const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;
     return hasOneColumn ? rowClass : "";
   }
+
+  get overviewHeaderLinkText(): string {
+    return translate(UDExMastheadMenu, OVERVIEW);
+  }
 }
 
 UDExMastheadMenu.define();

package/src/MastheadMenuItem.ts

@@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
 import { UDExTarget } from "./types/common.js";
+import translate from "./utils/translate.js";
 
 import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
@@ -219,7 +220,7 @@ class UDExMastheadMenuItem extends UI5Element {
   }
 
   get openInNewWindowText(): string {
-    return UDExMastheadMenuItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);
+    return translate(UDExMastheadMenuItem, OPENS_IN_A_NEW_WINDOW);
   }
 
   get ariaDescribedby(): string | null {

package/src/MastheadMobileMenu.ts

@@ -11,11 +11,13 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import type UDExMastheadItem from "./MastheadItem.js";
+import type UDExSearch from "./Search.js";
 import UDExMastheadMenuItem, { UDExItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import AnalyticsName from "./types/AnalyticsName.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
 import type UDExMastheadShell from "./MastheadShell.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
@@ -550,7 +552,14 @@ class UDExMastheadMobileMenu extends UI5Element {
     return analyticsPath;
   }
 
-  closeMenu():void {
+  resetSearch(): void {
+    const search = this.search[0] as UDExSearch;
+    if (search && search.value) {
+      search.value = "";
+    }
+  }
+
+  closeMenu(): void {
     this._mastheadShell.closeMobileMenu();
     this._mastheadShell.mobileBtn?.focus();
   }
@@ -576,7 +585,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   }
 
   get overviewLinkText(): string {
-    return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);
+    return translate(UDExMastheadMobileMenu, OVERVIEW);
   }
 
   get exploreItem(): UDExMastheadItem {

package/src/MastheadProfileMenu.ts

@@ -26,6 +26,7 @@ import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/delegate/ResizeHandler.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import MastheadProfileMenuCss from "./generated/themes/MastheadProfileMenu.css.js";
@@ -398,23 +399,23 @@ class UDExMastheadProfileMenu extends UI5Element {
   }
 
   get btnBackText(): string {
-    return this._isMobileMode ? this.switcherAccountText : UDExMastheadProfileMenu.i18nBundle.getText(BACK);
+    return this._isMobileMode ? this.switcherAccountText : translate(UDExMastheadProfileMenu, BACK);
   }
 
   get listTitleText(): string {
-    return `${UDExMastheadProfileMenu.i18nBundle.getText(OTHER_IDENTITIES)} (${this.identitiesList.length})`;
+    return `${translate(UDExMastheadProfileMenu, OTHER_IDENTITIES)} (${this.identitiesList.length})`;
   }
 
   get addOrRemoveAccountText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(ADD_OR_REMOVE_ACCOUNT);
+    return translate(UDExMastheadProfileMenu, ADD_OR_REMOVE_ACCOUNT);
   }
 
   get switcherAccountText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(SWITCH_ACCOUNT);
+    return translate(UDExMastheadProfileMenu, SWITCH_ACCOUNT);
   }
 
   get logoutText(): string {
-    return UDExMastheadProfileMenu.i18nBundle.getText(LOGOUT);
+    return translate(UDExMastheadProfileMenu, LOGOUT);
   }
 
   get isAtMostBreakpointSizeM(): boolean {