@sapudex/web-components 0.138.0 → 0.147.0

package/src/CountrySelector.hbs

@@ -12,6 +12,8 @@
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
+        @ui5-search-keydown="{{handleKeyDownSearch}}"
+        @keydown="{{handleKeyDownDropdown}}"
         @ui5-handle-close-search="{{handleCloseSearch}}">
         {{> trigger}}
         {{searchableList}}
@@ -51,7 +53,6 @@
                 role="combobox"
                 aria-haspopup="true"
                 aria-expanded="{{_open}}"
-                ?active="{{_open}}"
                 ?required="{{required}}"
                 ?disabled="{{disabled}}"
                 ?readonly="{{readonly}}"

package/src/CountrySelector.ts

@@ -4,11 +4,16 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isEnter, isSpace, isBackSpace, isDelete,
+  isEscape, isTabPrevious,
+  isTabNext,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import TextField from "./TextField.js";
+import UDExTextField from "./TextField.js";
 import ValueState from "./types/common.js";
 import StatusMessage from "./StatusMessage.js";
 import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
@@ -25,7 +30,6 @@ import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-
 /**
  * @class
  *
@@ -55,7 +59,7 @@ import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
     UDExList,
     UDExListItem,
     UDExDropdown,
-    TextField,
+    UDExTextField,
     Button,
     StatusMessage,
   ],
@@ -271,7 +275,7 @@ class CountrySelector extends UDExSearchableListBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    CountrySelector.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    CountrySelector.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {
@@ -356,7 +360,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get selectedCountryName() {
-    return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName);
+    return this.selectedCountry ? this.getCountryLabel(this.selectedCountry.countryName, this.selectedCountry.localName) : "";
   }
 
   get flagAriaLabel():string {
@@ -408,7 +412,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this._dropdown.onClose();
+    this.getInput()?.shadowRoot!.querySelector<Button>("udex-control-button")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -416,7 +420,7 @@ class CountrySelector extends UDExSearchableListBase {
     const target = e.target as HTMLElement;
     const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
     this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-    this._dropdown.onClose();
+    this.dropDownClose();
   }
 
   handleKeyDown(e: CustomEvent) {
@@ -428,10 +432,13 @@ class CountrySelector extends UDExSearchableListBase {
     const key = keyEvent.key;
     if (isEnter(keyEvent) || isSpace(keyEvent)) {
       if (this._dropdown.open) {
-        this._dropdown.onClose();
+        this.dropDownClose();
       } else {
         this._dropdown.onTriggerClick();
       }
+    } else if (isBackSpace(keyEvent) || isDelete(keyEvent)) {
+      this.selectedCountry = undefined;
+      this._render();
     } else if (this.isLetterKey(key)) {
       this._dropdown.onOpen(this.getInput());
       this._search.focus();
@@ -452,7 +459,7 @@ class CountrySelector extends UDExSearchableListBase {
 
   handleTriggerClick() {
     if (this._dropdown.open) {
-      this._dropdown.onClose();
+      this.dropDownClose();
     }
   }
 
@@ -468,6 +475,28 @@ class CountrySelector extends UDExSearchableListBase {
     this.onSubmitSearch();
   }
 
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+
+    if (isTabPrevious(keyEvent)) {
+      this.dropDownClose();
+    }
+    if (isEscape(keyEvent)) {
+      keyEvent.preventDefault();
+      this.getDropdownPopover()?.close();
+    }
+  }
+
+  handleKeyDownDropdown(e: KeyboardEvent) {
+    if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
+      this.dropDownClose();
+    }
+  }
+
+  dropDownClose():void {
+    this.getDropdownPopover()?.close(false, false, true);
+  }
+
   handleResetSearch() {
     this.onResetSearch();
   }
@@ -489,12 +518,16 @@ class CountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<Search>("udex-search")!;
   }
 
+  getDropdownPopover() {
+    return this._dropdown.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
+  }
+
   getDropdown(): UDExDropdown {
     return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
   }
 
-  getInput(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-text-field")!;
+  getInput(): UDExTextField {
+    return this.shadowRoot!.querySelector<UDExTextField>("udex-text-field")!;
   }
 
   get effectiveAriaLabel(): string {

package/src/DatePicker.ts

@@ -224,7 +224,7 @@ class UDExDatePicker extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExDatePicker.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExDatePicker.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   async _getCalendar(): Promise<Calendar> {

package/src/Dropdown.ts

@@ -200,9 +200,10 @@ class UDExDropdown extends UI5Element {
     _direction?: string;
 
   static i18nBundle: I18nBundle;
+  _breakpointSizeXS = 640;
 
   static async onDefine(): Promise<void> {
-    UDExDropdown.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExDropdown.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onAfterRendering() {
@@ -269,6 +270,13 @@ class UDExDropdown extends UI5Element {
 
   afterDropdownOpen() {
     this.open = true;
+    const dropdownPane = this.getDropdownPane();
+    const dropdownPaneLeftOffset = +dropdownPane.style.left.split("px")[0];
+    if (dropdownPane.offsetWidth + dropdownPaneLeftOffset < this._breakpointSizeXS) {
+      this.style.setProperty("--udex-dropdown-left-offset", `${dropdownPane.style.left}`);
+    } else {
+      dropdownPane.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+    }
     this.fireEvent("after-open");
   }
 

package/src/FilterMenu.ts

@@ -295,13 +295,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   _search!: UDExSearch;
   _hasFooterButtons!: boolean;
   _popover!: ResponsivePopover;
-
-  onAfterRendering() {
-    this._search = this.getSearch();
-    this._popover = this.getPopover();
-    this._trigger = this.getTriggerButton();
-    this._hasFooterButtons = this.hasFooterButtons;
-  }
+  _breakpointSizeXS = 640;
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -313,6 +307,13 @@ class UDExFilterMenu extends UDExSearchableListBase {
     super.onBeforeRendering();
   }
 
+  onAfterRendering() {
+    this._search = this.getSearch();
+    this._popover = this.getPopover();
+    this._trigger = this.getTriggerButton();
+    this._hasFooterButtons = this.hasFooterButtons;
+  }
+
   handleSelectAll(e:CustomEvent): void {
     this.onFilterSelectAllHeaderPress(e);
     this.fireEvent("select-all");
@@ -436,6 +437,10 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterOpen(): void {
+    const popoverLeftOffset = +this._popover.style.left.split("px")[0];
+    if (this._popover.offsetWidth + popoverLeftOffset < this._breakpointSizeXS) {
+      this.style.setProperty("--udex-filter-menu-popover-left-offset", `${this._popover.style.left}`);
+    }
     this.fireEvent("after-open");
   }
 

package/src/Footer.ts

@@ -320,7 +320,7 @@ class UDExFooter extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExFooter.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExFooter.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   _handleResizeBound: ResizeObserverCallback;

package/src/InputGroup.ts

@@ -104,7 +104,7 @@ class UDExInputGroup extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExInputGroup.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExInputGroup.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get _items() {

package/src/List.ts

@@ -147,7 +147,7 @@ class UDExList extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExList.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExList.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/ListItem.ts

@@ -251,7 +251,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   static async onDefine(): Promise<void> {
-    UDExListItem.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM() {

package/src/ListItemBase.ts

@@ -112,7 +112,7 @@ class UDExListItemBase extends UI5Element {
     _icon?: string;
 
   @property({ type: String })
-    _tabIndex!: number | string;
+    _tabIndex!: string;
 
   get _effectiveTabIndex() {
     if (this.disabled) {

package/src/ListSelectAll.ts

@@ -46,7 +46,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExListSelectAll.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExListSelectAll.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleSelectAllPress() {

package/src/MastheadItem.ts

@@ -226,7 +226,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadItem.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM() {
@@ -262,16 +262,11 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
     }
   }
 
-  handleKeyEscapeMobile() {
-    const mastheadShell: MastheadShell | null = document.querySelector("udex-masthead-shell");
-    const mobileMenu = mastheadShell?.mastheadMobileMenu;
-    mastheadShell?.removeActiveMobileClass();
-    mastheadShell?.mobileBtn?.focus();
-    this.selected = false;
+  handleKeyEscapeMobile(): void {
+    const mastheadShell: MastheadShell = document.querySelector<MastheadShell>("udex-masthead-shell")!;
 
-    if (mobileMenu) {
-      mobileMenu.showFirstLevelMenu();
-    }
+    mastheadShell.closeMobileMenu();
+    mastheadShell.mobileBtn?.focus();
   }
 
   handleNavigationItemClick(e: Event): void {

package/src/MastheadMobileMenu.ts

@@ -122,7 +122,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onAfterRendering() {

package/src/MastheadProfileMenu.ts

@@ -122,7 +122,7 @@ class UDExMastheadProfileMenu extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExMastheadProfileMenu.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleUserLogoutItemClick(e: Event): void {

package/src/MastheadShell.hbs

@@ -8,7 +8,7 @@
             {{>siteLabel}}
         {{/if}}
 
-        {{#unless _isSearchVisible}}
+        {{#if isMainMenuVisible}}
             <div
                 class="udex-masthead-shell__main-menu"
                 data-menubar-item-expanded="true"
@@ -17,29 +17,35 @@
                     {{>item}}
                 {{/each}}
             </div>
-        {{/unless}}
+        {{/if}}
     </div>
 
-    {{#if _isSearchVisible}}
+    {{#if isSearchVisible}}
         <div class="udex-masthead-shell__search-container">
             <slot name="search"></slot>
         </div>
-        <div class="udex-masthead-shell__btn-holder">
-            <udex-control-button
-                class="udex-masthead-shell__close-search-btn"
-                size="Small"
-                icon="decline"
-                accessible-name="{{closeButtonAccessibleName}}"
-                @click={{hideSearch}}>
-            </udex-control-button>
-        </div>
-    {{else}}
-        <div class="udex-masthead-shell__right-menu">
-            <div
-                class="udex-masthead-shell__explore"
-                @ui5-item-click="{{setSelectedItem}}">
-                <slot name="exploreSAP"></slot>
+        {{#if _isSearchOpened}}
+            <div class="udex-masthead-shell__btn-holder">
+                <udex-control-button
+                    class="udex-masthead-shell__close-search-btn"
+                    size="Small"
+                    icon="decline"
+                    accessible-name="{{closeButtonAccessibleName}}"
+                    @click={{hideSearch}}>
+                </udex-control-button>
             </div>
+        {{/if}}
+    {{/if}}
+
+    {{#if isRightMenuVisible}}
+        <div class="udex-masthead-shell__right-menu">
+            {{#if hasExploreSAP}}
+                <div
+                    class="udex-masthead-shell__explore"
+                    @ui5-item-click="{{setSelectedItem}}">
+                    <slot name="exploreSAP"></slot>
+                </div>
+            {{/if}}
             {{#if hasSearch}}
                 <div class="udex-masthead-shell__search-icon">
                     <udex-masthead-item
@@ -77,6 +83,7 @@
                     <slot slot="dropdown" name="mobileMenu"></slot>
                 </udex-masthead-item>
                 <udex-masthead-item
+                    @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
                     @ui5-item-click="{{handleMobileCloseClick}}"
                     class="udex-masthead-shell__close-btn"
                     accessible-role="button"
@@ -124,7 +131,7 @@
 {{/inline}}
 
 {{#*inline "siteLabel"}}
-    {{#if homeUrl}}
+    {{#if siteLabelUrl}}
         <a
             @click="{{handleSiteLabelClick}}"
             role="link"

package/src/MastheadShell.ts

@@ -6,7 +6,9 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+  isLeft, isRight, isSpace, isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/search.js";
@@ -22,9 +24,7 @@ import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.l
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const mobileMenuActiveClass: string = "udex-masthead-shell_mobile-menu-open";
 const breakpointSizeM: number = 1279;
-
 /**
  * @class
  *
@@ -181,6 +181,15 @@ class UDExMastheadShell extends UI5Element {
   @property({ type: Boolean })
     bodyOverflow!: boolean;
 
+  /**
+   * Defines the visibility of the Search by default.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    showSearchByDefault!: boolean;
+
   /**
    * Defines sticky position for component
    *
@@ -251,12 +260,20 @@ class UDExMastheadShell extends UI5Element {
     siteLabelAriaLabel!: string;
 
   /**
-   * Defines if the search container is visible
+   * Defines if the search container is opened
    *
    * @private
    */
   @property({ type: Boolean })
-    _isSearchVisible!: boolean;
+    _isSearchOpened!: boolean;
+
+  /**
+   * Defines if the mobile menu is open
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMenuOpen!: boolean;
 
   /**
    * Defines if the close button was clicked
@@ -284,7 +301,7 @@ class UDExMastheadShell extends UI5Element {
 
     this.handleOutsideClick();
 
-    if (this._isSearchVisible) {
+    if (this._isSearchOpened) {
       this.focusSearchInput();
     }
 
@@ -302,12 +319,12 @@ class UDExMastheadShell extends UI5Element {
   }
 
   _handleResize(): void {
-    if (this.isMobileView) {
-      this._isSearchVisible = false;
+    if (this.isBreakpointSizeM) {
+      this._isSearchOpened = false;
     }
 
-    if (this._shouldHandleResize && this.isMobileView) {
-      this.resetMobileMenuOpenState();
+    if (this._shouldHandleResize && this.isBreakpointSizeM) {
+      this.closeMobileMenu();
       return;
     }
 
@@ -348,7 +365,7 @@ class UDExMastheadShell extends UI5Element {
 
   handleSearchClick(e: CustomEvent): void {
     e.stopPropagation();
-    this._isSearchVisible = true;
+    this._isSearchOpened = true;
     this.resetSelectedItems();
     if (this._searchOpener) {
       this._searchOpener.selected = false;
@@ -369,7 +386,7 @@ class UDExMastheadShell extends UI5Element {
   handleMobileMenuClick(e: CustomEvent) {
     e.stopPropagation();
     this.setSelectedItem(e);
-    this.addActiveMobileClass();
+    this._isMobileMenuOpen = true;
 
     if (this.bodyOverflow) {
       this.setOverflowBody();
@@ -378,12 +395,14 @@ class UDExMastheadShell extends UI5Element {
 
   handleMobileCloseClick(e: CustomEvent) {
     e.preventDefault();
-    this.removeActiveMobileClass();
-    this.setSelectedItem(e);
-    this._mobileMenu?.showFirstLevelMenu();
+    this.closeMobileMenu();
+  }
 
-    if (this.bodyOverflow) {
-      this.removeOverflowBody();
+  handleEnterAndSpaceOnCloseBtn(e: KeyboardEvent) {
+    e.preventDefault();
+    if (isSpace(e) || isEnter(e)) {
+      this.closeMobileMenu();
+      this.mobileBtn?.focus();
     }
   }
 
@@ -425,14 +444,6 @@ class UDExMastheadShell extends UI5Element {
     });
   }
 
-  addActiveMobileClass() {
-    this._rootHolder?.classList.add(mobileMenuActiveClass);
-  }
-
-  removeActiveMobileClass() {
-    this._rootHolder?.classList.remove(mobileMenuActiveClass);
-  }
-
   setSelectedItem(e: CustomEvent): void {
     const clickedItem: UDExMastheadItem = e.detail.item;
     if (!clickedItem) {
@@ -449,11 +460,12 @@ class UDExMastheadShell extends UI5Element {
   focusSearchBtn(): void {
     if (this._searchOpener) {
       this._searchOpener.focus();
+      this._closeBtnClicked = false;
     }
   }
 
   hideSearch(): void {
-    this._isSearchVisible = false;
+    this._isSearchOpened = false;
     this._closeBtnClicked = true;
   }
 
@@ -488,8 +500,8 @@ class UDExMastheadShell extends UI5Element {
     style.removeProperty("overflow");
   }
 
-  resetMobileMenuOpenState(): void {
-    this.removeActiveMobileClass();
+  closeMobileMenu(): void {
+    this._isMobileMenuOpen = false;
     this.resetSelectedItems();
     this._mobileMenu?.showFirstLevelMenu();
 
@@ -530,13 +542,29 @@ class UDExMastheadShell extends UI5Element {
     return !!this.search.length;
   }
 
+  get hasExploreSAP(): boolean {
+    return !!this.exploreSAP.length;
+  }
+
   get hasMobileMenuButtons(): boolean {
     return !!this.mobileMenu.length;
   }
 
-  get isMobileView(): boolean {
+  get isBreakpointSizeM(): boolean {
     return window.innerWidth <= breakpointSizeM;
   }
+
+  get isMainMenuVisible(): boolean {
+    return !this.showSearchByDefault && !this._isSearchOpened;
+  }
+
+  get isRightMenuVisible(): boolean {
+    return this.showSearchByDefault || !this._isSearchOpened;
+  }
+
+  get isSearchVisible(): boolean {
+    return this.showSearchByDefault || this._isSearchOpened;
+  }
 }
 
 UDExMastheadShell.define();

package/src/MessageStrip.ts

@@ -133,9 +133,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExMessageStrip.i18nBundle = await getI18nBundle(
-      "sap-ui-webcomponents-bundle",
-    );
+    UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   getTranslation(text: I18nText): string {

package/src/Pagination.ts

@@ -245,7 +245,7 @@ class UDExPagination extends UI5Element {
   }
 
   static async onDefine() {
-    UDExPagination.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   setActive(element: HTMLElement): void {

package/src/PasswordField.ts

@@ -194,7 +194,7 @@ class UDExPasswordField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPasswordField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   handleShowPassword(): void {

package/src/PhoneNumberField.ts

@@ -290,7 +290,7 @@ class UDExPhoneNumberField extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   get countrySelectorAriaLabel() {

package/src/RatingBar.ts

@@ -72,7 +72,7 @@ class UDExRatingBar extends UI5Element {
   _maxPercentage: number = 100;
 
   static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    UDExRatingBar.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onBeforeRendering(): void {