@ui5/webcomponents-fiori 0.0.0-11d529e8a → 0.0.0-1e08ebdef

package/dist/ShellBar.js

@@ -9,7 +9,7 @@ import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/search.js";
 import "@ui5/webcomponents-icons/dist/bell.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
@@ -111,6 +111,21 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * An object of strings that defines several additional accessibility texts
+		 * for even further customization.
+		 *
+		 * It supports the following fields:
+		 * - <code>profileButtonTitle</code>: defines the tooltip for the profile button
+		 *
+		 * @type {object}
+		 * @public
+		 * @since 1.1.0
+		 */
+		 accessibilityTexts: {
+			type: Object,
+		},
+
 		/**
 		 * @private
 		 */
@@ -362,12 +377,6 @@ const metadata = {
  * <li>product-switch</li>
  * </ul>
  *
- * In the context of <code>ui5-shellbar</code>, you can provide a custom stable DOM refs for:
- * <ul>
- * <li>Every <code>ui5-shellbar-item</code> that you provide.
- * Example: <code><ui5-shellbar-item stable-dom-ref="messages"></ui5-shellbar-item></code></li>
- * </ul>
- *
  * <h3>CSS Shadow Parts</h3>
  *
  * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
@@ -472,8 +481,6 @@ class ShellBar extends UI5Element {
 				this._overflowActions();
 			}, HANDLE_RESIZE_DEBOUNCE_RATE);
 		};
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	_debounce(fn, delay) {
@@ -621,7 +628,9 @@ class ShellBar extends UI5Element {
 			return {
 				...info,
 				classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
-				style: `order: ${shouldStayOnScreen ? 1 : -1}`,
+				styles: {
+					order: shouldStayOnScreen ? 1 : -1,
+				},
 			};
 		});
 
@@ -668,7 +677,9 @@ class ShellBar extends UI5Element {
 		for (let i = 0; i < itemsByPriority.length; i++) {
 			if (i < overflowCount) {
 				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
-				itemsByPriority[i].style = `order: -1`;
+				itemsByPriority[i].styles = {
+					order: -1,
+				};
 			}
 		}
 
@@ -686,9 +697,10 @@ class ShellBar extends UI5Element {
 		this._updateItemsInfo(newItems);
 	}
 
-	_toggleActionPopover() {
+	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		this.overflowPopover.showAt(overflowButton);
+		const overflowPopover = await this._getOverflowPopover();
+		overflowPopover.showAt(overflowButton);
 	}
 
 	onEnterDOM() {
@@ -729,10 +741,10 @@ class ShellBar extends UI5Element {
 
 		if (refItemId) {
 			const shellbarItem = this.items.find(item => {
-				return item.shadowRoot.querySelector(`#${refItemId}`);
+				return item._id === refItemId;
 			});
 
-			const prevented = !shellbarItem.fireEvent("item-click", { targetRef: event.target }, true);
+			const prevented = !shellbarItem.fireEvent("click", { targetRef: event.target }, true);
 
 			this._defaultItemPressPrevented = prevented;
 		}
@@ -768,6 +780,72 @@ class ShellBar extends UI5Element {
 		}, true);
 	}
 
+	/**
+	 * Returns the <code>logo</code> DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get logoDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
+	}
+
+	/**
+	 * Returns the <code>copilot</code> DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get copilotDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="copilot"]`);
+	}
+
+	/**
+	 * Returns the <code>notifications</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get notificationsDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="notifications"]`);
+	}
+
+	/**
+	 * Returns the <code>overflow</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get overflowDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="overflow"]`);
+	}
+
+	/**
+	 * Returns the <code>profile</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get profileDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="profile"]`);
+	}
+
+	/**
+	 * Returns the <code>product-switch</code> icon DOM ref.
+	 * @type { HTMLElement }
+	 * @public
+	 * @readonly
+	 * @since 1.0.0-rc.16
+	 */
+	get productSwitchDomRef() {
+		return this.shadowRoot.querySelector(`*[data-ui5-stable="product-switch"]`);
+	}
+
 	/**
 	 * Returns all items that will be placed in the right of the bar as icons / dom elements.
 	 * @param {boolean} showOverflowButton Determines if overflow button should be visible (not overflowing)
@@ -782,12 +860,15 @@ class ShellBar extends UI5Element {
 				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 				priority: 4,
 				domOrder: this.searchField.length ? (++domOrder) : -1,
-				style: `order: ${this.searchField.length ? 1 : -10}`,
+				styles: {
+					order: this.searchField.length ? 1 : -10,
+				},
 				id: `${this._id}-item-${1}`,
 				press: this._handleSearchIconPress.bind(this),
 				show: !!this.searchField.length,
 			},
 			...this.items.map((item, index) => {
+				item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 				return {
 					icon: item.icon,
 					id: item._id,
@@ -797,7 +878,9 @@ class ShellBar extends UI5Element {
 					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
 					priority: 1,
 					domOrder: (++domOrder),
-					style: `order: ${2}`,
+					styles: {
+						order: 2,
+					},
 					show: true,
 					press: this._handleCustomActionPress.bind(this),
 					custom: true,
@@ -810,7 +893,9 @@ class ShellBar extends UI5Element {
 				text: "Notifications",
 				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 				priority: 3,
-				style: `order: ${this.showNotifications ? 3 : -10}`,
+				styles: {
+					order: this.showNotifications ? 3 : -10,
+				},
 				id: `${this._id}-item-${2}`,
 				show: this.showNotifications,
 				domOrder: this.showNotifications ? (++domOrder) : -1,
@@ -822,7 +907,9 @@ class ShellBar extends UI5Element {
 				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 				priority: 5,
 				order: 4,
-				style: `order: ${showOverflowButton ? 4 : -1}`,
+				styles: {
+					order: showOverflowButton ? 4 : -1,
+				},
 				domOrder: showOverflowButton ? (++domOrder) : -1,
 				id: `${this.id}-item-${5}`,
 				press: this._handleOverflowPress.bind(this),
@@ -832,7 +919,9 @@ class ShellBar extends UI5Element {
 				text: "Person",
 				classes: `${this.hasProfile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
 				priority: 4,
-				style: `order: ${this.hasProfile ? 5 : -10};`,
+				styles: {
+					order: this.hasProfile ? 5 : -10,
+				},
 				profile: true,
 				id: `${this._id}-item-${3}`,
 				domOrder: this.hasProfile ? (++domOrder) : -1,
@@ -844,7 +933,9 @@ class ShellBar extends UI5Element {
 				text: "Product Switch",
 				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 				priority: 2,
-				style: `order: ${this.showProductSwitch ? 6 : -10}`,
+				styles: {
+					order: this.showProductSwitch ? 6 : -10,
+				},
 				id: `${this._id}-item-${4}`,
 				show: this.showProductSwitch,
 				domOrder: this.showProductSwitch ? (++domOrder) : -1,
@@ -891,6 +982,11 @@ class ShellBar extends UI5Element {
 		this.menuPopover = staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
 	}
 
+	async _getOverflowPopover() {
+		const staticAreaItem = await this.getStaticAreaItemDomRef();
+		return staticAreaItem.querySelector(".ui5-shellbar-overflow-popover");
+	}
+
 	async _getMenuPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(".ui5-shellbar-menu-popover");
@@ -911,7 +1007,6 @@ class ShellBar extends UI5Element {
 			wrapper: {
 				"ui5-shellbar-root": true,
 				"ui5-shellbar-with-searchfield": this.searchField.length,
-				"ui5-shellbar-with-coPilot": this.showCoPilot,
 			},
 			button: {
 				"ui5-shellbar-menu-button--interactive": this.hasMenuItems,
@@ -1022,23 +1117,23 @@ class ShellBar extends UI5Element {
 	}
 
 	get _shellbarText() {
-		return this.i18nBundle.getText(SHELLBAR_LABEL);
+		return ShellBar.i18nBundle.getText(SHELLBAR_LABEL);
 	}
 
 	get _logoText() {
-		return this.i18nBundle.getText(SHELLBAR_LOGO);
+		return ShellBar.i18nBundle.getText(SHELLBAR_LOGO);
 	}
 
 	get _copilotText() {
-		return this.i18nBundle.getText(SHELLBAR_COPILOT);
+		return ShellBar.i18nBundle.getText(SHELLBAR_COPILOT);
 	}
 
 	get _notificationsText() {
-		return this.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount);
+		return ShellBar.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationsCount);
 	}
 
 	get _cancelBtnText() {
-		return this.i18nBundle.getText(SHELLBAR_CANCEL);
+		return ShellBar.i18nBundle.getText(SHELLBAR_CANCEL);
 	}
 
 	get _showFullWidthSearch() {
@@ -1049,19 +1144,19 @@ class ShellBar extends UI5Element {
 	}
 
 	get _profileText() {
-		return this.i18nBundle.getText(SHELLBAR_PROFILE);
+		return this.accessibilityTexts.profileButtonTitle || ShellBar.i18nBundle.getText(SHELLBAR_PROFILE);
 	}
 
 	get _productsText() {
-		return this.i18nBundle.getText(SHELLBAR_PRODUCTS);
+		return ShellBar.i18nBundle.getText(SHELLBAR_PRODUCTS);
 	}
 
 	get _searchText() {
-		return this.i18nBundle.getText(SHELLBAR_SEARCH);
+		return ShellBar.i18nBundle.getText(SHELLBAR_SEARCH);
 	}
 
 	get _overflowText() {
-		return this.i18nBundle.getText(SHELLBAR_OVERFLOW);
+		return ShellBar.i18nBundle.getText(SHELLBAR_OVERFLOW);
 	}
 
 	get accInfo() {
@@ -1097,7 +1192,7 @@ class ShellBar extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		ShellBar.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 }
 

package/dist/ShellBarItem.js

@@ -1,9 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
-// Template
-import ShellBarItemTemplate from "./generated/templates/ShellBarItemTemplate.lit.js";
-
 /**
  * @public
  */
@@ -40,28 +37,19 @@ const metadata = {
 		count: {
 			type: String,
 		},
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.8
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#item-click
+		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
+		 * @native
 		 */
-		"item-click": {
+		"click": {
 			detail: {
 				targetRef: { type: HTMLElement },
 			},
@@ -93,8 +81,8 @@ class ShellBarItem extends UI5Element {
 		return litRender;
 	}
 
-	static get template() {
-		return ShellBarItemTemplate;
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
 	}
 }
 

package/dist/SideNavigation.js

@@ -141,6 +141,10 @@ class SideNavigation extends UI5Element {
 		return metadata;
 	}
 
+	static get staticAreaStyles() {
+		return [SideNavigationCss];
+	}
+
 	static get render() {
 		return litRender;
 	}

package/dist/SortItem.js

@@ -54,6 +54,7 @@ const metadata = {
  * @extends UI5Element
  * @since 1.0.0-rc.16
  * @tagname ui5-sort-item
+ * @implements sap.ui.webcomponents.fiori.ISortItem
  * @public
  */
 class SortItem extends UI5Element {

package/dist/Timeline.js

@@ -1,5 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -104,7 +104,6 @@ class Timeline extends UI5Element {
 		this._itemNavigation = new ItemNavigation(this, {
 			getItemsCallback: () => this.items,
 		});
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	static get dependencies() {
@@ -112,11 +111,11 @@ class Timeline extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		Timeline.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	get ariaLabel() {
-		return this.i18nBundle.getText(TIMELINE_ARIA_LABEL);
+		return Timeline.i18nBundle.getText(TIMELINE_ARIA_LABEL);
 	}
 
 	_onfocusin(event) {

package/dist/UploadCollection.js

@@ -1,6 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getI18nBundle, fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import List from "@ui5/webcomponents/dist/List.js";
@@ -240,12 +240,11 @@ class UploadCollection extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		UploadCollection.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 		this._bodyDnDHandler = event => {
 			if (this._dndOverlayMode !== UploadCollectionDnDOverlayMode.Drop) {
 				this._dndOverlayMode = event.mode;
@@ -352,23 +351,23 @@ class UploadCollection extends UI5Element {
 	}
 
 	get _noDataText() {
-		return this.noDataText || this.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
+		return this.noDataText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_TEXT);
 	}
 
 	get _noDataDescription() {
-		return this.noDataDescription || this.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
+		return this.noDataDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_NO_DATA_DESCRIPTION);
 	}
 
 	get _roleDescription() {
-		return this.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION);
 	}
 
 	get _dndOverlayText() {
 		if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
-			return this.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
+			return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_INDICATOR);
 		}
 
-		return this.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
+		return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
 	}
 }
 

package/dist/UploadCollectionItem.js

@@ -1,4 +1,4 @@
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "@ui5/webcomponents/dist/types/ListItemType.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
@@ -274,12 +274,15 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		[UploadCollectionItem.i18nFioriBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents-fiori"),
+			super.onDefine(),
+		]);
 	}
 
-	constructor() {
-		super();
-		this.i18nFioriBundle = getI18nBundle("@ui5/webcomponents-fiori");
+	onBeforeRendering() {
+		// In the base class the item can become "actionable",
+		// that's why we are overriding this method.
 	}
 
 	async _initInputField() {
@@ -443,11 +446,11 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	get _renameBtnText() {
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT);
 	}
 
 	get _cancelRenameBtnText() {
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT);
 	}
 
 	get _showProgressIndicator() {
@@ -456,14 +459,14 @@ class UploadCollectionItem extends ListItem {
 
 	get _progressText() {
 		if (this.uploadState === UploadState.Uploading) {
-			return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_UPLOADING_STATE);
+			return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_UPLOADING_STATE);
 		}
 
 		if (this.uploadState === UploadState.Error) {
-			return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_ERROR_STATE);
+			return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_ERROR_STATE);
 		}
 
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_READY_STATE);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_READY_STATE);
 	}
 
 	get _showRetry() {
@@ -475,15 +478,15 @@ class UploadCollectionItem extends ListItem {
 	}
 
 	get _retryButtonTooltip() {
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_RETRY_BUTTON_TEXT);
 	}
 
 	get _terminateButtonTooltip() {
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT);
 	}
 
 	get _editButtonTooltip() {
-		return this.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT);
+		return UploadCollectionItem.i18nFioriBundle.getText(UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT);
 	}
 
 	get valueStateName() {

package/dist/ViewSettingsDialog.js

@@ -1,4 +1,4 @@
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -208,7 +208,6 @@ const metadata = {
 class ViewSettingsDialog extends UI5Element {
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
 		this._currentSettings = {
 			sortOrder: [],
 			sortBy: [],
@@ -267,7 +266,7 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
+		ViewSettingsDialog.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori");
 	}
 
 	get _selectedFilter() {
@@ -281,44 +280,44 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get _filterByTitle() {
-		return `${this.i18nBundle.getText(VSD_FILTER_BY)}: ${this._selectedFilter.text}`;
+		return `${ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_BY)}: ${this._selectedFilter.text}`;
 	}
 
 	get _dialogTitle() {
 		const currentModeText = this._currentMode === ViewSettingsDialogMode.Sort ? VSD_DIALOG_TITLE_SORT : VSD_FILTER_BY;
-		return this.i18nBundle.getText(currentModeText);
+		return ViewSettingsDialog.i18nBundle.getText(currentModeText);
 	}
 
 	get _okButtonLabel() {
-		return this.i18nBundle.getText(VSD_SUBMIT_BUTTON);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_SUBMIT_BUTTON);
 	}
 
 	get _cancelButtonLabel() {
-		return this.i18nBundle.getText(VSD_CANCEL_BUTTON);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_CANCEL_BUTTON);
 	}
 
 	get _resetButtonLabel() {
-		return this.i18nBundle.getText(VSD_RESET_BUTTON);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_RESET_BUTTON);
 	}
 
 	get _ascendingLabel() {
-		return this.i18nBundle.getText(VSD_ORDER_ASCENDING);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_ORDER_ASCENDING);
 	}
 
 	get _descendingLabel() {
-		return this.i18nBundle.getText(VSD_ORDER_DESCENDING);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_ORDER_DESCENDING);
 	}
 
 	get _sortOrderLabel() {
-		return this.i18nBundle.getText(VSD_SORT_ORDER);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_SORT_ORDER);
 	}
 
 	get _filterByLabel() {
-		return this.i18nBundle.getText(VSD_FILTER_BY);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_BY);
 	}
 
 	get _sortByLabel() {
-		return this.i18nBundle.getText(VSD_SORT_BY);
+		return ViewSettingsDialog.i18nBundle.getText(VSD_SORT_BY);
 	}
 
 	get _isPhone() {