@openui5/sap.ui.webc.main 1.98.0 → 1.99.0

package/src/sap/ui/webc/main/thirdparty/CheckBox.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/icons/accept', './Icon', './Label', './types/WrappingType', './generated/i18n/i18n-defaults', './generated/templates/CheckBoxTemplate.lit', './generated/themes/CheckBox.css'], function (Device, UI5Element, litRender, i18nBundle, ValueState, FeaturesRegistry, Keys, accept, Icon, Label, WrappingType, i18nDefaults, CheckBoxTemplate_lit, CheckBox_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/ValueState', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/icons/accept', './Icon', './Label', './types/WrappingType', './generated/i18n/i18n-defaults', './generated/templates/CheckBoxTemplate.lit', './generated/themes/CheckBox.css'], function (Device, UI5Element, litRender, i18nBundle, ValueState, FeaturesRegistry, AriaLabelHelper, Keys, accept, Icon, Label, WrappingType, i18nDefaults, CheckBoxTemplate_lit, CheckBox_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -12,6 +12,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		tag: "ui5-checkbox",
 		languageAware: true,
 		properties:  {
+			accessibleNameRef: {
+				type: String,
+				defaultValue: "",
+			},
+			accessibleName: {
+				type: String,
+			},
 			disabled: {
 				type: Boolean,
 			},
@@ -145,6 +152,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 				"Success": CheckBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
 			};
 		}
+		get ariaLabelText() {
+			return AriaLabelHelper.getEffectiveAriaLabelText(this);
+		}
 		get classes() {
 			return {
 				main: {
@@ -162,7 +172,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			return this.indeterminate && this.checked ? "mixed" : this.checked;
 		}
 		get ariaLabelledBy() {
-			return this.text ? `${this._id}-label` : undefined;
+			if (!this.ariaLabelText) {
+				return this.text ? `${this._id}-label` : undefined;
+			}
+			return undefined;
 		}
 		get ariaDescribedBy() {
 			return this.hasValueState ? `${this._id}-descr` : undefined;

package/src/sap/ui/webc/main/thirdparty/ColorPalette.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', 'sap/ui/webc/common/thirdparty/base/types/ItemNavigationBehavior', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', './generated/templates/ColorPaletteTemplate.lit', './generated/templates/ColorPaletteDialogTemplate.lit', './ColorPaletteItem', './generated/i18n/i18n-defaults', './generated/themes/ColorPalette.css', './generated/themes/ColorPaletteStaticArea.css'], function (UI5Element, litRender, i18nBundle, ItemNavigation, CSSColor, ItemNavigationBehavior, Device, Keys, FeaturesRegistry, ColorPaletteTemplate_lit, ColorPaletteDialogTemplate_lit, ColorPaletteItem, i18nDefaults, ColorPalette_css, ColorPaletteStaticArea_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', 'sap/ui/webc/common/thirdparty/base/types/ItemNavigationBehavior', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', './generated/templates/ColorPaletteTemplate.lit', './generated/templates/ColorPaletteDialogTemplate.lit', './ColorPaletteItem', './Button', './generated/i18n/i18n-defaults', './generated/themes/ColorPalette.css', './generated/themes/ColorPaletteStaticArea.css'], function (UI5Element, litRender, i18nBundle, ItemNavigation, CSSColor, ItemNavigationBehavior, Device, Keys, FeaturesRegistry, ColorPaletteTemplate_lit, ColorPaletteDialogTemplate_lit, ColorPaletteItem, Button, i18nDefaults, ColorPalette_css, ColorPaletteStaticArea_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -70,7 +70,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		static get dependencies() {
 			const ColorPaletteMoreColors = FeaturesRegistry.getFeature("ColorPaletteMoreColors");
-			return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
+			return [ColorPaletteItem, Button].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
 		}
 		static async onDefine() {
 			const ColorPaletteMoreColors = FeaturesRegistry.getFeature("ColorPaletteMoreColors");
@@ -130,18 +130,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			});
 		}
 		_onclick(event) {
-			if (event.target.localName === "ui5-color-palette-item") {
+			if (event.target.hasAttribute("ui5-color-palette-item")) {
 				this.selectColor(event.target);
 			}
 		}
 		_onkeyup(event) {
-			if (Keys.isSpace(event) && event.target.localName === "ui5-color-palette-item") {
+			if (Keys.isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 				event.preventDefault();
 				this.selectColor(event.target);
 			}
 		}
 		_onkeydown(event) {
-			if (Keys.isEnter(event) && event.target.localName === "ui5-color-palette-item") {
+			if (Keys.isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
 				this.selectColor(event.target);
 			}
 		}

package/src/sap/ui/webc/main/thirdparty/ColorPalettePopover.js

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', './generated/templates/ColorPalettePopoverTemplate.lit', './generated/themes/ColorPalettePopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/i18n/i18n-defaults', './Button', './ResponsivePopover', './ColorPalette'], function (UI5Element, litRender, i18nBundle, CSSColor, ColorPalettePopoverTemplate_lit, ColorPalettePopover_css, ResponsivePopoverCommon_css, i18nDefaults, Button, ResponsivePopover, ColorPalette) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/types/CSSColor', './generated/templates/ColorPalettePopoverTemplate.lit', './generated/themes/ColorPalettePopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/i18n/i18n-defaults', './Button', './Title', './ResponsivePopover', './ColorPalette'], function (UI5Element, litRender, i18nBundle, CSSColor, ColorPalettePopoverTemplate_lit, ColorPalettePopover_css, ResponsivePopoverCommon_css, i18nDefaults, Button, Title, ResponsivePopover, ColorPalette) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -57,6 +57,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [
 				ResponsivePopover,
 				Button,
+				Title,
 				ColorPalette,
 			];
 		}
@@ -73,10 +74,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_colorPalette() {
 			return this.responsivePopover.content[0].querySelector("[ui5-color-palette]");
 		}
-		closePopover() {
-			this.responsivePopover.close();
+		showAt(opener) {
+			this._openPopover(opener);
 		}
 		openPopover(opener) {
+			console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'showAt' instead.");
+			this._openPopover(opener);
+		}
+		_openPopover(opener) {
 			this._respPopover();
 			this.responsivePopover.showAt(opener, true);
 			if (this.showDefaultColor) {
@@ -85,6 +90,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this._colorPalette().focusColorElement(this._colorPalette().colorPaletteNavigationElements[0], this._colorPalette()._itemNavigation);
 			}
 		}
+		closePopover() {
+			this.responsivePopover.close();
+		}
 		onSelectedColor(event) {
 			this.closePopover();
 			this.fireEvent("item-click", event.detail);

package/src/sap/ui/webc/main/thirdparty/ComboBox.js

@@ -217,6 +217,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
 		}
 		_resetFilter() {
+			this._userTypedValue = null;
+			this.inner.setSelectionRange(0, this.value.length);
 			this._filteredItems = this._filterItems("");
 			this._selectMatchingItem();
 		}
@@ -268,28 +270,24 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				return item;
 			});
 		}
-		async handleArrowKeyPress(event) {
-			if (this.readonly || !this._filteredItems.length) {
+		handleNavKeyPress(event) {
+			if (this.focused && (Keys.isHome(event) || Keys.isEnd(event)) && this.value) {
 				return;
 			}
 			const isOpen = this.open;
-			const isArrowDown = Keys.isDown(event);
-			const isArrowUp = Keys.isUp(event);
 			const currentItem = this._filteredItems.find(item => {
 				return isOpen ? item.focused : item.selected;
 			});
 			const indexOfItem = this._filteredItems.indexOf(currentItem);
 			event.preventDefault();
-			if ((this.focused === true && isArrowUp && isOpen) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+			if (this.focused && isOpen && (Keys.isUp(event) || Keys.isPageUp(event) || Keys.isPageDown(event))) {
 				return;
 			}
-			this._isKeyNavigation = true;
-			if (isArrowDown) {
-				this._handleArrowDown(event, indexOfItem);
-			}
-			if (isArrowUp) {
-				this._handleArrowUp(event, indexOfItem);
+			if (this._filteredItems.length - 1 === indexOfItem && Keys.isDown(event)) {
+				return;
 			}
+			this._isKeyNavigation = true;
+			this[`_handle${event.key}`](event, indexOfItem);
 		}
 		_handleItemNavigation(event, indexOfItem, isForward) {
 			const isOpen = this.open;
@@ -302,7 +300,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._clearFocus();
 			if (isOpen) {
 				this._itemFocused = true;
-				this.value = isGroupItem ? this.filterValue : currentItem.text;
+				this.value = isGroupItem ? "" : currentItem.text;
 				this.focused = false;
 				currentItem.focused = true;
 			} else {
@@ -317,7 +315,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			this._announceSelectedItem(indexOfItem);
 			const item = this._getFirstMatchingItem(this.value);
-			this._applyAtomicValueAndSelection(item, "", true);
+			this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
 			if ((item && !item.selected)) {
 				this.fireEvent("selection-change", {
 					item,
@@ -359,12 +357,47 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
 			this._handleItemNavigation(event, --indexOfItem, false );
 		}
+		_handlePageUp(event, indexOfItem) {
+			const isProposedIndexValid = indexOfItem - ComboBox.SKIP_ITEMS_SIZE > -1;
+			indexOfItem = isProposedIndexValid ? indexOfItem - ComboBox.SKIP_ITEMS_SIZE : 0;
+			const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+			if (!isProposedIndexValid && this.hasValueStateText && this.open) {
+				this._clearFocus();
+				this._itemFocused = false;
+				this._isValueStateFocused = true;
+				return;
+			}
+			this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+		}
+		_handlePageDown(event, indexOfItem) {
+			const itemsLength = this._filteredItems.length;
+			const isProposedIndexValid = indexOfItem + ComboBox.SKIP_ITEMS_SIZE < itemsLength;
+			indexOfItem = isProposedIndexValid ? indexOfItem + ComboBox.SKIP_ITEMS_SIZE : itemsLength - 1;
+			const shouldMoveForward = this._filteredItems[indexOfItem].isGroupItem && !this.open;
+			this._handleItemNavigation(event, indexOfItem, shouldMoveForward);
+		}
+		_handleHome(event, indexOfItem) {
+			const shouldMoveForward = this._filteredItems[0].isGroupItem && !this.open;
+			if (this.hasValueStateText && this.open) {
+				this._clearFocus();
+				this._itemFocused = false;
+				this._isValueStateFocused = true;
+				return;
+			}
+			this._handleItemNavigation(event, 0, shouldMoveForward);
+		}
+		_handleEnd(event, indexOfItem) {
+			this._handleItemNavigation(event, this._filteredItems.length - 1, true );
+		}
+		_keyup(event) {
+			this._userTypedValue = this.value.substring(0, this.inner.selectionStart);
+		}
 		_keydown(event) {
-			const isArrowKey = Keys.isDown(event) || Keys.isUp(event);
+			const isNavKey = Keys.isDown(event) || Keys.isUp(event) || Keys.isPageUp(event) || Keys.isPageDown(event) || Keys.isHome(event) || Keys.isEnd(event);
 			this._autocomplete = !(Keys.isBackSpace(event) || Keys.isDelete(event));
 			this._isKeyNavigation = false;
-			if (isArrowKey) {
-				this.handleArrowKeyPress(event);
+			if (isNavKey && !this.readonly && this._filteredItems.length) {
+				this.handleNavKeyPress(event);
 			}
 			if (Keys.isEnter(event)) {
 				this._fireChangeEvent();
@@ -390,6 +423,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 					this._itemFocused = true;
 					selectedItem.focused = true;
 					this.focused = false;
+				} else if (this.open && this._filteredItems.length) {
+					this._handleItemNavigation(event, 0, true );
 				} else {
 					this.focused = true;
 				}
@@ -445,6 +480,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const value = (item && item.text) || "";
 			this.inner.value = value;
 			if (highlightValue) {
+				filterValue = filterValue || "";
 				this.inner.setSelectionRange(filterValue.length, value.length);
 			}
 			this.value = value;
@@ -542,12 +578,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			};
 		}
 		get shouldOpenValueStateMessagePopover() {
-			return this.focused && this.hasValueStateText && !this._iconPressed
+			return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 				&& !this.open && !this._isPhone;
 		}
 		get shouldDisplayDefaultValueStateMessage() {
 			return !this.valueStateMessage.length && this.hasValueStateText;
 		}
+		get _valueStatePopoverHorizontalAlign() {
+			return this.effectiveDir !== "rtl" ? "Left" : "Right";
+		}
 		get _valueStateMessageIcon() {
 			const iconPerValueState = {
 				Error: "error",
@@ -613,6 +652,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			};
 		}
 	}
+	ComboBox.SKIP_ITEMS_SIZE = 10;
 	ComboBox.define();
 
 	return ComboBox;

package/src/sap/ui/webc/main/thirdparty/DateComponentBase.js

@@ -73,19 +73,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.getFormat().format(localDate, true);
 		}
 		getFormat() {
-			let dateFormat;
-			if (this._isPattern) {
-				dateFormat = DateFormat__default.getInstance({
+			return this._isPattern
+				? DateFormat__default.getInstance({
+					strictParsing: true,
 					pattern: this._formatPattern,
 					calendarType: this._primaryCalendarType,
-				});
-			} else {
-				dateFormat = DateFormat__default.getInstance({
+				})
+				: DateFormat__default.getInstance({
+					strictParsing: true,
 					style: this._formatPattern,
 					calendarType: this._primaryCalendarType,
 				});
-			}
-			return dateFormat;
 		}
 		static async onDefine() {
 			[DateComponentBase.i18nBundle] = await Promise.all([

package/src/sap/ui/webc/main/thirdparty/DatePicker.js

@@ -157,6 +157,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/we
 			if (this.isOpen()) {
 				return;
 			}
+			if (Keys.isEnter(event)) {
+				this._updateValueAndFireEvents(event.target.value, true, ["change", "value-changed"]);
+			}
 			if (Keys.isPageUpShiftCtrl(event)) {
 				event.preventDefault();
 				this._modifyDateValue(1, "year");
@@ -201,6 +204,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/we
 				return;
 			}
 			if (updateValue) {
+				this._getInput().getInputDOMRef().then(innnerInput => {
+					innnerInput.value = value;
+				});
 				this.value = value;
 				this._updateValueState();
 			}

package/src/sap/ui/webc/main/thirdparty/DateRangePicker.js

@@ -25,6 +25,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 		static get styles() {
 			return [DatePicker.styles, DateRangePicker_css];
 		}
+		get dateValue() {
+			return null;
+		}
+		get dateValueUTC() {
+			return null;
+		}
 		get _startDateTimestamp() {
 			return this._extractFirstTimestamp(this.value);
 		}

package/src/sap/ui/webc/main/thirdparty/Dialog.js

@@ -20,9 +20,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 			headerText: {
 				type: String,
 			},
-			accessibleName: {
-				type: String,
-			},
 			stretch: {
 				type: Boolean,
 			},
@@ -77,18 +74,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		}
 		get _ariaLabelledBy() {
 			let ariaLabelledById;
-			if (this.headerText !== "" && !this.accessibleName) {
+			if (this.headerText !== "" && !this._ariaLabel) {
 				ariaLabelledById = "ui5-popup-header-text";
 			}
 			return ariaLabelledById;
 		}
-		get _ariaLabel() {
-			let ariaLabel;
-			if (this.header.length > 0 && !!this.accessibleName) {
-				ariaLabel = this.accessibleName;
-			}
-			return this.accessibleName ? this.accessibleName : ariaLabel;
-		}
 		get _ariaModal() {
 			return true;
 		}
@@ -104,6 +94,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		get _headerTabIndex() {
 			return this._movable ? "0" : undefined;
 		}
+		get _showResizeHandle() {
+			return this.resizable && this.onDesktop;
+		}
 		_show() {
 			super._show();
 			this._center();

package/src/sap/ui/webc/main/thirdparty/Icon.js

@@ -26,7 +26,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			showTooltip: {
 				type: Boolean,
 			},
-			role: {
+			accessibleRole: {
 				type: String,
 			},
 			ariaHidden: {
@@ -72,12 +72,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		static async onDefine() {
 			this.createGlobalStyle();
 		}
-		_onfocusin(event) {
+		_onFocusInHandler(event) {
 			if (this.interactive) {
 				this.focused = true;
 			}
 		}
-		_onfocusout(event) {
+		_onFocusOutHandler(event) {
 			this.focused = false;
 		}
 		_onkeydown(event) {
@@ -119,14 +119,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.ariaHidden;
 		}
 		get tabIndex() {
-			return this.interactive ? "0" : "-1";
+			return this.interactive ? "0" : undefined;
 		}
 		get isDecorative() {
 			return this.effectiveAccessibleRole === PRESENTATION_ROLE;
 		}
 		get effectiveAccessibleRole() {
-			if (this.role) {
-				return this.role;
+			if (this.accessibleRole) {
+				return this.accessibleRole;
 			}
 			if (this.interactive) {
 				return "button";
@@ -172,6 +172,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this.ltr = iconData.ltr;
 			this.packageName = iconData.packageName;
 			this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+			this._onfocusout = this.interactive ? this._onFocusOutHandler.bind(this) : undefined;
+			this._onfocusin = this.interactive ? this._onFocusInHandler.bind(this) : undefined;
 			if (this.accessibleName) {
 				this.effectiveAccessibleName = this.accessibleName;
 			} else if (this.accData) {

package/src/sap/ui/webc/main/thirdparty/Input.js

@@ -71,6 +71,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				type: String,
 				defaultValue: "",
 			},
+			showClearIcon: {
+				type: Boolean,
+			},
+			effectiveShowClearIcon: {
+				type: Boolean,
+			},
 			focused: {
 				type: Boolean,
 			},
@@ -151,7 +157,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this.valueBeforeItemSelection = "";
 			this.valueBeforeItemPreview = "";
 			this.suggestionSelectionCanceled = false;
-			this._changeFired = false;
+			this._changeFiredValue = null;
 			this.previousValue = undefined;
 			this.firstRendering = true;
 			this.highlightValue = "";
@@ -176,6 +182,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.enableSuggestions();
 				this.suggestionsTexts = this.Suggestions.defaultSlotProperties(this.highlightValue);
 			}
+			this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
 			this.open = this.open && (!!this.suggestionItems.length || this._isPhone);
 			const FormSupport = FeaturesRegistry.getFeature("FormSupport");
 			if (FormSupport) {
@@ -213,6 +220,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (Keys.isEnter(event)) {
 				return this._handleEnter(event);
 			}
+			if (Keys.isPageUp(event)) {
+				return this._handlePageUp(event);
+			}
+			if (Keys.isPageDown(event)) {
+				return this._handlePageDown(event);
+			}
+			if (Keys.isHome(event)) {
+				return this._handleHome(event);
+			}
+			if (Keys.isEnd(event)) {
+				return this._handleEnd(event);
+			}
 			if (Keys.isEscape(event)) {
 				return this._handleEscape(event);
 			}
@@ -226,6 +245,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._keyDown = true;
 		}
 		_onkeyup(event) {
+			if (Keys.isDelete(event)) {
+				this.value = event.target.value;
+			}
 			this._keyDown = false;
 			this._backspaceKeyDown = false;
 		}
@@ -258,6 +280,30 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			this.focused = true;
 		}
+		_handlePageUp(event) {
+			if (this._isSuggestionsFocused) {
+				this.Suggestions.onPageUp(event);
+			} else {
+				event.preventDefault();
+			}
+		}
+		_handlePageDown(event) {
+			if (this._isSuggestionsFocused) {
+				this.Suggestions.onPageDown(event);
+			} else {
+				event.preventDefault();
+			}
+		}
+		_handleHome(event) {
+			if (this._isSuggestionsFocused) {
+				this.Suggestions.onHome(event);
+			}
+		}
+		_handleEnd(event) {
+			if (this._isSuggestionsFocused) {
+				this.Suggestions.onEnd(event);
+			}
+		}
 		_handleEscape() {
 			const hasSuggestions = this.showSuggestions && !!this.Suggestions;
 			const isOpen = hasSuggestions && this.open;
@@ -286,7 +332,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_onfocusout(event) {
 			const focusedOutToSuggestions = this.Suggestions && event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.contains(this.Suggestions.responsivePopover);
 			const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
-			if (focusedOutToSuggestions	|| focusedOutToValueStateMessage) {
+			this._preventNextChange = this.effectiveShowClearIcon && this.shadowRoot.contains(event.relatedTarget);
+			if (focusedOutToSuggestions || focusedOutToValueStateMessage) {
 				event.stopImmediatePropagation();
 				return;
 			}
@@ -316,11 +363,27 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.open = true;
 			}
 		}
-		_handleChange(event) {
-			if (!this._changeFired) {
+		_handleNativeInputChange() {
+			clearTimeout(this._nativeChangeDebounce);
+			this._nativeChangeDebounce = setTimeout(() => this._handleChange(), 100);
+		}
+		_handleChange() {
+			if (this._preventNextChange) {
+				this._preventNextChange = false;
+				return;
+			}
+			if (this._changeFiredValue !== this.value) {
+				this._changeFiredValue = this.value;
 				this.fireEvent(this.EVENT_CHANGE);
 			}
-			this._changeFired = false;
+		}
+		_clear() {
+			this.value = "";
+			this.fireEvent(this.EVENT_INPUT);
+			this._handleChange();
+			if (!this._isPhone) {
+				this.focus();
+			}
 		}
 		_scroll(event) {
 			const detail = event.detail;
@@ -329,8 +392,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				scrollContainer: detail.targetRef,
 			});
 		}
-		async _handleInput(event) {
-			const inputDomRef = await this.getInputDOMRef();
+		_handleInput(event) {
+			const inputDomRef = this.getInputDOMRefSync();
 			const emptyValueFiredOnNumberInput = this.value && this.isTypeNumber && !inputDomRef.value;
 			this.suggestionSelectionCanceled = false;
 			if (emptyValueFiredOnNumberInput && !this._backspaceKeyDown) {
@@ -422,8 +485,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.valueBeforeItemSelection = itemText;
 				this.lastConfirmedValue = itemText;
 				this.fireEvent(this.EVENT_INPUT);
-				this.fireEvent(this.EVENT_CHANGE);
-				this._changeFired = true;
+				this._handleChange();
 			}
 			this.valueBeforeItemPreview = "";
 			this.suggestionSelectionCanceled = false;
@@ -471,7 +533,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			const valueChanged = (this.previousValue !== undefined) && (this.previousValue !== this.value);
 			if (Device.isIE() && action === this.ACTION_ENTER && valueChanged) {
-				this.fireEvent(this.EVENT_CHANGE);
+				this._handleChange();
 			}
 		}
 		async getInputValue() {
@@ -488,6 +550,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			return this.nativeInput;
 		}
+		getInputDOMRefSync() {
+			if (Device.isPhone() && this.Suggestions) {
+				return this.Suggestions && this.Suggestions.responsivePopover.querySelector(".ui5-input-inner-phone");
+			}
+			return this.nativeInput;
+		}
 		get nativeInput() {
 			return this.getDomRef() && this.getDomRef().querySelector(`input`);
 		}
@@ -527,6 +595,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				targetRef: item,
 			});
 		}
+		onItemMouseDown(event) {
+			event.preventDefault();
+		}
 		onItemSelected(item, keyboardUsed) {
 			this.selectSuggestion(item, keyboardUsed);
 		}
@@ -655,7 +726,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
 		}
 		get shouldDisplayOnlyValueStateMessage() {
-			return this.hasValueStateMessage && !this.open && this.focused;
+			return this.hasValueStateMessage && !this.readonly && !this.open && this.focused;
 		}
 		get shouldDisplayDefaultValueStateMessage() {
 			return !this.valueStateMessage.length && this.hasValueStateMessage;
@@ -693,6 +764,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get _isPhone() {
 			return Device.isPhone();
 		}
+		get _isSuggestionsFocused() {
+			return !this.focused && this.Suggestions && this.Suggestions.isOpened();
+		}
 		get _placeholder() {
 			return this.placeholder;
 		}
@@ -710,6 +784,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		`;
 			return this.valueState !== ValueState__default.None ? result : "";
 		}
+		get _valueStatePopoverHorizontalAlign() {
+			return this.effectiveDir !== "rtl" ? "Left" : "Right";
+		}
 		get _valueStateMessageInputIcon() {
 			const iconPerValueState = {
 				Error: "error",