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

package/dist/MessageStrip.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 { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/information.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -10,7 +10,14 @@ import MessageStripDesign from "./types/MessageStripDesign.js";
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
-import { MESSAGE_STRIP_CLOSE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_ERROR,
+	MESSAGE_STRIP_WARNING,
+	MESSAGE_STRIP_SUCCESS,
+	MESSAGE_STRIP_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import messageStripCss from "./generated/themes/MessageStrip.css.js";
@@ -19,7 +26,8 @@ import messageStripCss from "./generated/themes/MessageStrip.css.js";
  * @public
  */
 const metadata = {
-	tag: "ui5-messagestrip",
+	tag: "ui5-message-strip",
+	altTag: "ui5-messagestrip",
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
 
@@ -113,13 +121,13 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-messagestrip</code> component enables the embedding of app-related messages.
+ * The <code>ui5-message-strip</code> component enables the embedding of app-related messages.
  * It displays 4 designs of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
  * Each message can have a Close button, so that it can be removed from the UI, if needed.
  *
  * <h3>Usage</h3>
  *
- * For the <code>ui5-messagestrip</code> component, you can define whether it displays
+ * For the <code>ui5-message-strip</code> component, you can define whether it displays
  * an icon in the beginning and a close button. Moreover, its size and background
  * can be controlled with CSS.
  *
@@ -131,7 +139,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MessageStrip
  * @extends UI5Element
- * @tagname ui5-messagestrip
+ * @tagname ui5-message-strip
  * @public
  * @since 0.9.0
  */
@@ -154,7 +162,6 @@ class MessageStrip extends UI5Element {
 
 	constructor() {
 		super();
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	_closeClick() {
@@ -169,15 +176,15 @@ class MessageStrip extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		MessageStrip.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	static designClassesMappings() {
 		return {
-			"Information": "ui5-messagestrip-root--info",
-			"Positive": "ui5-messagestrip-root--positive",
-			"Negative": "ui5-messagestrip-root--negative",
-			"Warning": "ui5-messagestrip-root--warning",
+			"Information": "ui5-message-strip-root--info",
+			"Positive": "ui5-message-strip-root--positive",
+			"Negative": "ui5-message-strip-root--negative",
+			"Warning": "ui5-message-strip-root--warning",
 		};
 	}
 
@@ -190,20 +197,33 @@ class MessageStrip extends UI5Element {
 		};
 	}
 
+	static designAnnouncementMappings() {
+		return {
+			"Information": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_INFORMATION),
+			"Positive": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_SUCCESS),
+			"Negative": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_ERROR),
+			"Warning": MessageStrip.i18nBundle.getText(MESSAGE_STRIP_WARNING),
+		};
+	}
+
 	get hiddenText() {
-		return `Message Strip ${this.design} ${this.hideCloseButton ? "" : "closable"}`;
+		return `${MessageStrip.designAnnouncementMappings()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
 	}
 
 	get _closeButtonText() {
-		return this.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
+		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSE_BUTTON);
+	}
+
+	get _closableText() {
+		return MessageStrip.i18nBundle.getText(MESSAGE_STRIP_CLOSABLE);
 	}
 
 	get classes() {
 		return {
 			root: {
-				"ui5-messagestrip-root": true,
-				"ui5-messagestrip-root-hide-icon": this.hideIcon,
-				"ui5-messagestrip-root-hide-close-button": this.hideCloseButton,
+				"ui5-message-strip-root": true,
+				"ui5-message-strip-root-hide-icon": this.hideIcon,
+				"ui5-message-strip-root-hide-close-button": this.hideCloseButton,
 				[this.designClasses]: true,
 			},
 		};
@@ -220,6 +240,14 @@ class MessageStrip extends UI5Element {
 	get designClasses() {
 		return MessageStrip.designClassesMappings()[this.design];
 	}
+
+	get accInfo() {
+		return {
+			"button": {
+				"title": this._closeButtonText,
+			},
+		};
+	}
 }
 
 MessageStrip.define();

package/dist/MultiComboBox.js

@@ -16,9 +16,10 @@ import {
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import { isIE, isPhone } from "@ui5/webcomponents-base/dist/Device.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/decline.js";
 import "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import "@ui5/webcomponents-icons/dist/not-editable.js";
 import MultiComboBoxItem from "./MultiComboBoxItem.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
@@ -35,6 +36,7 @@ import {
 	VALUE_STATE_SUCCESS,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_INFORMATION,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
@@ -49,6 +51,7 @@ import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPop
 import styles from "./generated/themes/MultiComboBox.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 
 /**
  * @public
@@ -337,12 +340,6 @@ const metadata = {
  * <li> Backspace -  deletes the token and focus the next token. </li>
  * </ul>
  *
- * In the context of <code>ui5-multi-combobox</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-mcb-item</code> that you provide.
- * Example: <code>&lt;ui5-mcb-item stable-dom-ref="item1"&gt;&lt;/ui5-mcb-item&gt;</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.
@@ -388,7 +385,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get dependencies() {
@@ -415,7 +412,6 @@ class MultiComboBox extends UI5Element {
 		this._valueBeforeOpen = "";
 		this._deleting = false;
 		this._validationTimeout = null;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 		this._handleResizeBound = this._handleResize.bind(this);
 	}
 
@@ -820,6 +816,10 @@ class MultiComboBox extends UI5Element {
 			this._filteredItems = this.items;
 		}
 
+		this.items.forEach(item => {
+			item._getRealDomRef = () => this.allItemsPopover.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
+		});
+
 		const filteredItems = this._filterItems(this.value);
 		this._filteredItems = filteredItems;
 	}
@@ -932,6 +932,10 @@ class MultiComboBox extends UI5Element {
 		}
 	}
 
+	_readonlyIconClick() {
+		this._inputDom.focus();
+	}
+
 	get editable() {
 		return !this.readonly;
 	}
@@ -974,6 +978,20 @@ class MultiComboBox extends UI5Element {
 		return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	 get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get _tokensCountText() {
 		if (!this._tokenizer) {
 			return;
@@ -994,15 +1012,16 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get shouldDisplayOnlyValueStateMessage() {
-		return this.focused && this.hasValueStateMessage && !this._iconPressed;
+		return this.focused && !this.readonly && this.hasValueStateMessage && !this._iconPressed;
 	}
 
 	get valueStateTextMappings() {
 		return {
-			"Success": this.i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Error": this.i18nBundle.getText(VALUE_STATE_ERROR),
-			"Error_Selection": this.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED),
-			"Warning": this.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": MultiComboBox.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Error": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Error_Selection": MultiComboBox.i18nBundle.getText(VALUE_STATE_ERROR_ALREADY_SELECTED),
+			"Warning": MultiComboBox.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Information": MultiComboBox.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -1017,25 +1036,35 @@ class MultiComboBox extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return MultiComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _iconAccessibleNameText() {
-		return this.i18nBundle.getText(SELECT_OPTIONS);
+		return MultiComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
 	get _dialogOkButton() {
-		return this.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
+		return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
 	}
 
 	get _tokenizerExpanded() {
 		return (this._isFocusInside || this.open) && !this.readonly;
 	}
 
+	get _valueStatePopoverHorizontalAlign() {
+		return this.effectiveDir !== "rtl" ? "Left" : "Right";
+	}
+
 	get classes() {
 		return {
+			popover: {
+				"ui5-multi-combobox-all-items-responsive-popover": true,
+				"ui5-suggestions-popover": !this.isPhone,
+				"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateMessage,
+			},
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage-header": true,
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Success,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
@@ -1049,7 +1078,6 @@ class MultiComboBox extends UI5Element {
 			popoverValueStateMessage: {
 				"width": `${this._listWidth}px`,
 				"display": this._listWidth === 0 ? "none" : "inline-block",
-				"padding": "0.9125rem 1rem",
 			},
 			popoverHeader: {
 				"max-width": isPhone() ? "100%" : `${this._inputWidth}px`,
@@ -1058,7 +1086,7 @@ class MultiComboBox extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		MultiComboBox.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/MultiComboBoxItem.js

@@ -13,16 +13,6 @@ const metadata = {
 		 * @public
 		 */
 		selected: { type: Boolean },
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 };
 
@@ -42,6 +32,10 @@ class MultiComboBoxItem extends ComboBoxItem {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();

package/dist/MultiInput.js

@@ -283,7 +283,7 @@ class MultiInput extends Input {
 	}
 
 	get ariaRoleDescription() {
-		return this.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
+		return MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
 	}
 
 	static get dependencies() {

package/dist/Option.js

@@ -57,16 +57,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
 		/**
 		 * Defines the focused state of the component.
 		 * @type {boolean}
@@ -114,6 +104,10 @@ class Option extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();

package/dist/Panel.js

@@ -5,7 +5,7 @@ import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.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/slim-arrow-right.js";
 import Button from "./Button.js";
 import TitleLevel from "./types/TitleLevel.js";
@@ -272,7 +272,6 @@ class Panel extends UI5Element {
 		super();
 
 		this._header = {};
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -383,7 +382,7 @@ class Panel extends UI5Element {
 	}
 
 	get toggleButtonTitle() {
-		return this.i18nBundle.getText(PANEL_ICON);
+		return Panel.i18nBundle.getText(PANEL_ICON);
 	}
 
 	get expanded() {
@@ -454,7 +453,7 @@ class Panel extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Panel.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/dist/Popover.js

@@ -1,4 +1,5 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
@@ -447,6 +448,8 @@ class Popover extends Popup {
 		}
 		this.arrowTranslateY = Math.round(arrowY);
 
+		top = this._adjustForIOSKeyboard(top);
+
 		Object.assign(this.style, {
 			top: `${top}px`,
 			left: `${left}px`,
@@ -458,6 +461,23 @@ class Popover extends Popup {
 		}
 	}
 
+	/**
+	 * Adjust the desired top position to compensate for shift of the screen
+	 * caused by opened keyboard on iOS which affects all elements with position:fixed.
+	 * @private
+	 * @param {int} top The target top in px.
+	 * @returns {int} The adjusted top in px.
+	 */
+	_adjustForIOSKeyboard(top) {
+		if (!isIOS()) {
+			return top;
+		}
+
+		const actualTop = Math.ceil(this.getBoundingClientRect().top);
+
+		return top + (parseInt(this.style.top || "0") - actualTop);
+	}
+
 	getPopoverSize() {
 		if (!this.opened) {
 			Object.assign(this.style, {
@@ -493,9 +513,6 @@ class Popover extends Popup {
 		let maxHeight = clientHeight;
 		let maxWidth = clientWidth;
 
-		let width = "";
-		let height = "";
-
 		const placementType = this.getActualPlacementType(targetRect, popoverSize);
 
 		this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placementType, targetRect);
@@ -505,15 +522,11 @@ class Popover extends Popup {
 
 		if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) {
 			popoverSize.width = targetRect.width;
-			width = `${targetRect.width}px`;
+			this._width = `${targetRect.width}px`;
 		} else if (this.verticalAlign === PopoverVerticalAlign.Stretch && !isVertical) {
 			popoverSize.height = targetRect.height;
-			height = `${targetRect.height}px`;
 		}
 
-		this._width = width;
-		this._height = height;
-
 		const arrowOffset = this.hideArrow ? 0 : arrowSize;
 
 		// calc popover positions
@@ -528,11 +541,11 @@ class Popover extends Popup {
 			break;
 		case PopoverPlacementType.Bottom:
 			left = this.getVerticalLeft(targetRect, popoverSize);
+			top = targetRect.bottom + arrowOffset;
 
 			if (allowTargetOverlap) {
-				top = Math.max(Math.min(targetRect.bottom + arrowOffset, clientHeight - popoverSize.height), 0);
+				top = Math.max(Math.min(top, clientHeight - popoverSize.height), 0);
 			} else {
-				top = targetRect.bottom + arrowOffset;
 				maxHeight = clientHeight - targetRect.bottom - arrowOffset;
 			}
 			break;
@@ -545,14 +558,14 @@ class Popover extends Popup {
 			}
 			break;
 		case PopoverPlacementType.Right:
+			left = targetRect.left + targetRect.width + arrowOffset;
+			top = this.getHorizontalTop(targetRect, popoverSize);
+
 			if (allowTargetOverlap) {
-				left = Math.max(Math.min(targetRect.left + targetRect.width + arrowOffset, clientWidth - popoverSize.width), 0);
+				left = Math.max(Math.min(left, clientWidth - popoverSize.width), 0);
 			} else {
-				left = targetRect.left + targetRect.width + arrowOffset;
 				maxWidth = clientWidth - targetRect.right - arrowOffset;
 			}
-
-			top = this.getHorizontalTop(targetRect, popoverSize);
 			break;
 		}
 

package/dist/Popup.js

@@ -3,7 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
-import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
+import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
@@ -13,6 +13,7 @@ import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsReg
 // Styles
 import styles from "./generated/themes/Popup.css.js";
 import staticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import globalStyles from "./generated/themes/PopupGlobal.css.js";
 
 /**
  * @public
@@ -141,28 +142,15 @@ const metadata = {
 	},
 };
 
-let customBlockingStyleInserted = false;
-
 const createBlockingStyle = () => {
-	if (customBlockingStyleInserted) {
-		return;
+	if (!hasStyle("data-ui5-popup-scroll-blocker")) {
+		createStyle(globalStyles, "data-ui5-popup-scroll-blocker");
 	}
-
-	createStyleInHead(`
-		.ui5-popup-scroll-blocker {
-			width: 100%;
-			height: 100%;
-			position: fixed;
-			overflow: hidden;
-		}
-	`, { "data-ui5-popup-scroll-blocker": "" });
-
-	customBlockingStyleInserted = true;
 };
 
 createBlockingStyle();
 
-let bodyScrollingBlockers = 0;
+const bodyScrollingBlockers = new Set();
 
 /**
  * @class
@@ -230,7 +218,7 @@ class Popup extends UI5Element {
 
 	onExitDOM() {
 		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
+			Popup.unblockBodyScrolling(this);
 			this._removeOpenedPopup();
 		}
 	}
@@ -250,10 +238,10 @@ class Popup extends UI5Element {
 	 * Temporarily removes scrollbars from the body
 	 * @protected
 	 */
-	static blockBodyScrolling() {
-		bodyScrollingBlockers++;
+	static blockBodyScrolling(popup) {
+		bodyScrollingBlockers.add(popup);
 
-		if (bodyScrollingBlockers !== 1) {
+		if (bodyScrollingBlockers.size !== 1) {
 			return;
 		}
 
@@ -267,10 +255,10 @@ class Popup extends UI5Element {
 	 * Restores scrollbars on the body, if needed
 	 * @protected
 	 */
-	static unblockBodyScrolling() {
-		bodyScrollingBlockers--;
+	static unblockBodyScrolling(popup) {
+		bodyScrollingBlockers.delete(popup);
 
-		if (bodyScrollingBlockers !== 0) {
+		if (bodyScrollingBlockers.size !== 0) {
 			return;
 		}
 
@@ -406,7 +394,7 @@ class Popup extends UI5Element {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
-			Popup.blockBodyScrolling();
+			Popup.blockBodyScrolling(this);
 		}
 
 		this._zIndex = getNextZIndex();
@@ -451,7 +439,7 @@ class Popup extends UI5Element {
 
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			Popup.unblockBodyScrolling();
+			Popup.unblockBodyScrolling(this);
 		}
 
 		this.hide();

package/dist/ProgressIndicator.js

@@ -4,7 +4,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
 import {
 	VALUE_STATE_ERROR,
@@ -143,8 +143,6 @@ class ProgressIndicator extends UI5Element {
 
 		this._previousValue = 0;
 		this._transitionDuration = 0;
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -153,13 +151,11 @@ class ProgressIndicator extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -230,7 +226,7 @@ class ProgressIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ProgressIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }