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

package/src/ListItem.hbs

@@ -1,4 +1,5 @@
 <li
+	part="native-li"
 	tabindex="{{tabIndex}}"
 	class="{{classes.main}}"
 	dir="{{effectiveDir}}"
@@ -20,7 +21,6 @@
 	aria-describedby="{{_id}}-invisibleText-describedby"
 	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
 	aria-disabled="{{ariaDisabled}}"
-	style="list-style-type: none;"
 >
 		{{> listItemPreContent}}
 

package/src/ListItem.js

@@ -1,7 +1,7 @@
 import { isSpace, isEnter, isDelete } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/edit.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
@@ -148,8 +148,6 @@ class ListItem extends ListItemBase {
 				this.active = false;
 			}
 		};
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering(...params) {
@@ -344,14 +342,14 @@ class ListItem extends ListItemBase {
 		// The text is added to aria-describedby because as part of the aria-labelledby
 		// the whole content of the item is readout when the aria-labelledby value is changed.
 		if (this.ariaSelected !== undefined) {
-			ariaSelectedText = this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : this.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
+			ariaSelectedText = this.ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);
 		}
 
 		return ariaSelectedText;
 	}
 
 	get deleteText() {
-		return this.i18nBundle.getText(DELETE);
+		return ListItem.i18nBundle.getText(DELETE);
 	}
 
 	get _accInfo() {
@@ -359,16 +357,14 @@ class ListItem extends ListItemBase {
 			role: this.role,
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
-			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
-			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
+			ariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			ariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
 			ariaSelectedText: this.ariaSelectedText,
 		};
 	}
 
 	static async onDefine() {
-		await Promise.all([
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
+		ListItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/MessageStrip.hbs

@@ -8,26 +8,26 @@
 
 	{{#unless hideIcon}}
 		<div
-		class="ui5-messagestrip-icon-wrapper"
+		class="ui5-message-strip-icon-wrapper"
 		aria-hidden="true"
 		>
 			{{#if iconProvided}}
 				<slot name="icon"></slot>
 			{{else}}
-				<ui5-icon name="{{standardIconName}}" class="ui5-messagestrip-icon"></ui5-icon>
+				<ui5-icon name="{{standardIconName}}" class="ui5-message-strip-icon"></ui5-icon>
 			{{/if}}
 		</div>
 	{{/unless}}
 
 	<span class="ui5-hidden-text">{{hiddenText}}</span>
-	<span class="ui5-messagestrip-text"><slot></slot></span>
+	<span class="ui5-message-strip-text"><slot></slot></span>
 
 	{{#unless hideCloseButton}}
 		<ui5-button
 			icon="decline"
 			design="Transparent"
-			class="ui5-messagestrip-close-button"
-			title="{{_closeButtonText}}"
+			class="ui5-message-strip-close-button"
+			._buttonAccInfo="{{accInfo.button}}"
 			@click={{_closeClick}}
 		></ui5-button>
 	{{/unless}}

package/src/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/src/MultiComboBox.hbs

@@ -54,6 +54,10 @@
 		aria-required="{{required}}"
 	/>
 
+	{{#if readonly}}
+		<ui5-icon class="ui5-input-readonly-icon" name="not-editable" @click="{{_readonlyIconClick}}"></ui5-icon>
+	{{/if}}
+
 	{{#if icon}}
 		<slot name="icon"></slot>
 	{{/if}}

package/src/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/src/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/src/MultiComboBoxPopover.hbs

@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Stretch"
-	class="ui5-multi-combobox-all-items-responsive-popover"
+	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
@@ -50,6 +50,7 @@
 				</div>
 			{{#if hasValueStateMessage}}
 				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -60,6 +61,7 @@
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
 			<div slot="header" @keydown="{{_onValueStateKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -98,9 +100,10 @@
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/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/src/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/src/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/src/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;
 		}