@openui5/sap.ui.webc.main 1.96.2 → 1.97.0

package/src/sap/ui/webc/main/thirdparty/ComboBox.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/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/util/InvisibleMessage', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './ComboBoxFilters-f59100bd', './generated/i18n/i18n-defaults', './generated/templates/ComboBoxTemplate.lit', './generated/templates/ComboBoxPopoverTemplate.lit', './generated/themes/ComboBox.css', './generated/themes/ComboBoxPopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './ComboBoxItem', './Icon', './Popover', './ResponsivePopover', './List', './BusyIndicator', './Button', './StandardListItem', './ComboBoxGroupItem'], function (UI5Element, litRender, ValueState, Device, Integer, AriaLabelHelper, announce, slimArrowDown, decline, i18nBundle, Keys, ComboBoxFilters, i18nDefaults, ComboBoxTemplate_lit, ComboBoxPopoverTemplate_lit, ComboBox_css, ComboBoxPopover_css, ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxItem, Icon, Popover, ResponsivePopover, List, BusyIndicator, Button, StandardListItem, ComboBoxGroupItem) { '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/types/ValueState', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/util/InvisibleMessage', 'sap/ui/webc/common/thirdparty/icons/slim-arrow-down', 'sap/ui/webc/common/thirdparty/icons/decline', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './ComboBoxFilters-f59100bd', './generated/i18n/i18n-defaults', './generated/templates/ComboBoxTemplate.lit', './generated/templates/ComboBoxPopoverTemplate.lit', './generated/themes/ComboBox.css', './generated/themes/ComboBoxPopover.css', './generated/themes/ResponsivePopoverCommon.css', './generated/themes/ValueStateMessage.css', './generated/themes/Suggestions.css', './ComboBoxItem', './Icon', './Popover', './ResponsivePopover', './List', './BusyIndicator', './Button', './StandardListItem', './ComboBoxGroupItem'], function (UI5Element, litRender, ValueState, Device, Integer, AriaLabelHelper, announce, slimArrowDown, decline, i18nBundle, Keys, ComboBoxFilters, i18nDefaults, ComboBoxTemplate_lit, ComboBoxPopoverTemplate_lit, ComboBox_css, ComboBoxPopover_css, ResponsivePopoverCommon_css, ValueStateMessage_css, Suggestions_css, ComboBoxItem, Icon, Popover, ResponsivePopover, List, BusyIndicator, Button, StandardListItem, ComboBoxGroupItem) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -47,6 +47,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			focused: {
 				type: Boolean,
 			},
+			_isValueStateFocused: {
+				type: Boolean,
+			},
 			accessibleName: {
 				type: String,
 				defaultValue: undefined,
@@ -103,7 +106,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return ComboBox_css;
 		}
 		static get staticAreaStyles() {
-			return [ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxPopover_css];
+			return [ResponsivePopoverCommon_css, ValueStateMessage_css, ComboBoxPopover_css, Suggestions_css];
 		}
 		static get template() {
 			return ComboBoxTemplate_lit;
@@ -117,7 +120,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._initialRendering = true;
 			this._itemFocused = false;
 			this._selectionChanged = false;
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onBeforeRendering() {
 			if (this._initialRendering) {
@@ -127,13 +129,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.popover.close();
 			}
 			this._selectMatchingItem();
-			if (this._isKeyNavigation && this.responsivePopover && this.responsivePopover.opened) {
-				this.focused = false;
-			} else if (this.shadowRoot.activeElement) {
-				this.focused = this.shadowRoot.activeElement.id === "ui5-combobox-input";
-			}
 			this._initialRendering = false;
-			this._isKeyNavigation = false;
 		}
 		async onAfterRendering() {
 			await this._respPopover();
@@ -142,23 +138,38 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			if (this.shouldClosePopover() && !Device.isPhone()) {
 				this.responsivePopover.close(false, false, true);
+				this._clearFocus();
+				this._itemFocused = false;
 			}
-			this._itemFocused = false;
 			this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
 			this.storeResponsivePopoverWidth();
+			if (Device.isSafari() && this._autocomplete && this.filterValue !== this.value) {
+				this.inner.setSelectionRange(
+					(this._isKeyNavigation ? 0 : this.filterValue.length),
+					this.value.length,
+				);
+			}
 		}
 		shouldClosePopover() {
-			return this.responsivePopover.opened && !this.focused && !this._itemFocused;
+			return this.responsivePopover.opened && !this.focused && !this._itemFocused && !this._isValueStateFocused;
 		}
 		_focusin(event) {
 			this.focused = true;
 			this._lastValue = this.value;
+			this._autocomplete = false;
 			!Device.isPhone() && event.target.setSelectionRange(0, this.value.length);
 		}
-		_focusout() {
-			this.focused = false;
+		_focusout(event) {
+			const focusedOutToValueStateMessage = event.relatedTarget && event.relatedTarget.shadowRoot && event.relatedTarget.shadowRoot.querySelector(".ui5-valuestatemessage-root");
 			this._fireChangeEvent();
-			!Device.isPhone() && this._closeRespPopover();
+			if (focusedOutToValueStateMessage) {
+				event.stopImmediatePropagation();
+				return;
+			}
+			if (!this.shadowRoot.contains(event.relatedTarget)) {
+				this.focused = false;
+				!Device.isPhone() && this._closeRespPopover(event);
+			}
 		}
 		_afterOpenPopover() {
 			this._iconPressed = true;
@@ -218,26 +229,28 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			const { value } = event.target;
 			if (event.target === this.inner) {
 				event.stopImmediatePropagation();
+				this.focused = true;
+				this._isValueStateFocused = false;
 			}
 			this._filteredItems = this._filterItems(value);
 			this.value = value;
 			this.filterValue = value;
 			this._clearFocus();
-			if (this._autocomplete && value !== "") {
-				const item = this._autoCompleteValue(value);
-				if (!this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
+			if (this._autocomplete) {
+				const item = this._getFirstMatchingItem(value);
+				this._applyAtomicValueAndSelection(item, value, true);
+				if (value !== "" && !this._selectionChanged && (item && !item.selected && !item.isGroupItem)) {
 					this.fireEvent("selection-change", {
 						item,
 					});
 					this._selectionChanged = false;
-					item.focused = true;
 				}
 			}
 			this.fireEvent("input");
 			if (Device.isPhone()) {
 				return;
 			}
-			if (!this._filteredItems.length) {
+			if (!this._filteredItems.length || value === "") {
 				this._closeRespPopover();
 			} else {
 				this._openRespPopover();
@@ -256,32 +269,52 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (this.readonly || !this._filteredItems.length) {
 				return;
 			}
+			const isOpen = this.open;
 			const isArrowDown = Keys.isDown(event);
 			const isArrowUp = Keys.isUp(event);
 			const currentItem = this._filteredItems.find(item => {
-				return this.responsivePopover.opened ? item.focused : item.selected;
+				return isOpen ? item.focused : item.selected;
 			});
-			let indexOfItem = this._filteredItems.indexOf(currentItem);
+			const indexOfItem = this._filteredItems.indexOf(currentItem);
 			event.preventDefault();
-			if ((indexOfItem === 0 && isArrowUp) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+			if ((this.focused === true && isArrowUp && isOpen) || (this._filteredItems.length - 1 === indexOfItem && isArrowDown)) {
+				return;
+			}
+			this._isKeyNavigation = true;
+			if (isArrowDown) {
+				this._handleArrowDown(event, indexOfItem);
+			}
+			if (isArrowUp) {
+				this._handleArrowUp(event, indexOfItem);
+			}
+		}
+		_handleItemNavigation(event, indexOfItem, isForward) {
+			const isOpen = this.open;
+			const currentItem = this._filteredItems[indexOfItem];
+			const nextItem = isForward ? this._filteredItems[indexOfItem + 1] : this._filteredItems[indexOfItem - 1];
+			const isGroupItem = currentItem && currentItem.isGroupItem;
+			if ((!isOpen) && ((isGroupItem && !nextItem) || (!isGroupItem && !currentItem))) {
 				return;
 			}
 			this._clearFocus();
-			indexOfItem += isArrowDown ? 1 : -1;
-			indexOfItem = indexOfItem < 0 ? 0 : indexOfItem;
-			this._filteredItems[indexOfItem].focused = true;
-			if (this.responsivePopover.opened) {
-				this.announceSelectedItem(indexOfItem);
+			if (isOpen) {
+				this._itemFocused = true;
+				this.value = isGroupItem ? this.filterValue : currentItem.text;
+				this.focused = false;
+				currentItem.focused = true;
+			} else {
+				this.focused = true;
+				this.value = isGroupItem ? nextItem.text : currentItem.text;
+				currentItem.focused = false;
 			}
-			this.value = this._filteredItems[indexOfItem].isGroupItem ? this.filterValue : this._filteredItems[indexOfItem].text;
-			this._isKeyNavigation = true;
-			this._itemFocused = true;
+			this._isValueStateFocused = false;
 			this._selectionChanged = true;
-			if (this._filteredItems[indexOfItem].isGroupItem) {
+			if (isGroupItem && isOpen) {
 				return;
 			}
-			this._filteredItems[indexOfItem].selected = true;
-			const item = this._autoCompleteValue(this.value);
+			this._announceSelectedItem(indexOfItem);
+			const item = this._getFirstMatchingItem(this.value);
+			this._applyAtomicValueAndSelection(item, "", true);
 			if ((item && !item.selected)) {
 				this.fireEvent("selection-change", {
 					item,
@@ -290,20 +323,70 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this.fireEvent("input");
 			this._fireChangeEvent();
 		}
+		_handleArrowDown(event, indexOfItem) {
+			const isOpen = this.open;
+			if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) {
+				this._isValueStateFocused = true;
+				this.focused = false;
+				return;
+			}
+			indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+			this._handleItemNavigation(event, ++indexOfItem, true );
+		}
+		_handleArrowUp(event, indexOfItem) {
+			const isOpen = this.open;
+			if (indexOfItem === 0 && !this.hasValueStateText) {
+				this._clearFocus();
+				this.focused = true;
+				this._itemFocused = false;
+				return;
+			}
+			if (indexOfItem === 0 && this.hasValueStateText && isOpen) {
+				this._clearFocus();
+				this._itemFocused = false;
+				this._isValueStateFocused = true;
+				this._filteredItems[0].selected = false;
+				return;
+			}
+			if (this._isValueStateFocused) {
+				this.focused = true;
+				this._isValueStateFocused = false;
+				return;
+			}
+			indexOfItem = !isOpen && this.hasValueState && indexOfItem === -1 ? 0 : indexOfItem;
+			this._handleItemNavigation(event, --indexOfItem, false );
+		}
 		_keydown(event) {
 			const isArrowKey = Keys.isDown(event) || Keys.isUp(event);
 			this._autocomplete = !(Keys.isBackSpace(event) || Keys.isDelete(event));
+			this._isKeyNavigation = false;
 			if (isArrowKey) {
 				this.handleArrowKeyPress(event);
 			}
 			if (Keys.isEnter(event)) {
 				this._fireChangeEvent();
 				this._closeRespPopover();
+				this.focused = true;
+			}
+			if (Keys.isEscape(event)) {
+				this.focused = true;
+				this.value = !this.open ? this._lastValue : this.value;
+				this._isValueStateFocused = false;
 			}
 			if (Keys.isShow(event) && !this.readonly && !this.disabled) {
 				event.preventDefault();
 				this._resetFilter();
 				this._toggleRespPopover();
+				const selectedItem = this._filteredItems.find(item => {
+					return item.selected;
+				});
+				if (selectedItem && this.open) {
+					this._itemFocused = true;
+					selectedItem.focused = true;
+					this.focused = false;
+				} else {
+					this.focused = true;
+				}
 			}
 		}
 		_click(event) {
@@ -316,6 +399,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				this.value = this._selectedItemText;
 				this.filterValue = this._selectedItemText;
 			}
+			this._isValueStateFocused = false;
+			this._clearFocus();
 			this.responsivePopover.close();
 		}
 		_openRespPopover() {
@@ -336,7 +421,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				return groupHasFilteredItems;
 			}
 		}
-		_autoCompleteValue(current) {
+		_getFirstMatchingItem(current) {
 			const currentlyFocusedItem = this.items.find(item => item.focused === true);
 			if (currentlyFocusedItem && currentlyFocusedItem.isGroupItem) {
 				this.value = this.filterValue;
@@ -344,22 +429,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			}
 			const matchingItems = this._startsWithMatchingItems(current).filter(item => !item.isGroupItem);
 			if (matchingItems.length) {
-				this.value = matchingItems[0] ? matchingItems[0].text : current;
-			} else {
-				this.value = current;
+				return matchingItems[0];
 			}
-			if (this._isKeyNavigation) {
-				setTimeout(() => {
-					this.inner.setSelectionRange(this.filterValue.length, this.value.length);
-				}, 0);
-			} else if (matchingItems.length) {
-				setTimeout(() => {
-					this.inner.setSelectionRange(this.filterValue.length, this.value.length);
-				}, 0);
+		}
+		_applyAtomicValueAndSelection(item, filterValue, highlightValue) {
+			if (!item) {
+				return;
 			}
-			if (matchingItems.length) {
-				return matchingItems[0];
+			const value = (item && item.text) || "";
+			this.inner.value = value;
+			if (highlightValue) {
+				this.inner.setSelectionRange(filterValue.length, value.length);
 			}
+			this.value = value;
 		}
 		_selectMatchingItem() {
 			const currentlyFocusedItem = this.items.find(item => item.focused);
@@ -408,16 +490,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		_onItemFocus(event) {
 			this._itemFocused = true;
 		}
-		announceSelectedItem(indexOfItem) {
-			const itemPositionText = this.i18nBundle.getText(i18nDefaults.LIST_ITEM_POSITION, [indexOfItem + 1], [this._filteredItems.length]);
-			const itemSelectionText = this.i18nBundle.getText(i18nDefaults.LIST_ITEM_SELECTED);
+		_announceSelectedItem(indexOfItem) {
+			const itemPositionText = ComboBox.i18nBundle.getText(i18nDefaults.LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
+			const itemSelectionText = ComboBox.i18nBundle.getText(i18nDefaults.LIST_ITEM_SELECTED);
 			announce__default(`${itemPositionText} ${itemSelectionText}`, "Polite");
 		}
 		get _headerTitleText() {
-			return this.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
+			return ComboBox.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
 		}
 		get _iconAccessibleNameText() {
-			return this.i18nBundle.getText(i18nDefaults.SELECT_OPTIONS);
+			return ComboBox.i18nBundle.getText(i18nDefaults.SELECT_OPTIONS);
 		}
 		get inner() {
 			return Device.isPhone() ? this.responsivePopover.querySelector(".ui5-input-inner-phone") : this.shadowRoot.querySelector("[inner-input]");
@@ -447,10 +529,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		get valueStateTextMappings() {
 			return {
-				"Success": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
-				"Error": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
-				"Warning": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
-				"Information": this.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
+				"Success": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
+				"Error": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
+				"Warning": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Information": ComboBox.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
 			};
 		}
 		get shouldOpenValueStateMessagePopover() {
@@ -485,6 +567,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				ComboBoxGroupItem,
 			];
 		}
+		static async onDefine() {
+			ComboBox.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
 		get styles() {
 			return {
 				popoverHeader: {
@@ -493,13 +578,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				suggestionPopoverHeader: {
 					"display": this._listWidth === 0 ? "none" : "inline-block",
 					"width": `${this._listWidth}px`,
-					"padding": "0.9125rem 1rem",
 				},
 			};
 		}
 		get classes() {
 			return {
+				popover: {
+					"ui5-suggestions-popover": !this.isPhone,
+					"ui5-suggestions-popover-with-value-state-header": !this.isPhone && this.hasValueStateText,
+				},
 				popoverValueState: {
+					"ui5-valuestatemessage-header": true,
 					"ui5-valuestatemessage-root": true,
 					"ui5-valuestatemessage--success": this.valueState === ValueState__default.Success,
 					"ui5-valuestatemessage--error": this.valueState === ValueState__default.Error,

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

@@ -39,7 +39,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get _primaryCalendarType() {
 			const localeData = getCachedLocaleDataInstance__default(getLocale__default());
@@ -89,9 +88,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return dateFormat;
 		}
 		static async onDefine() {
-			await Promise.all([
+			[DateComponentBase.i18nBundle] = await Promise.all([
+				i18nBundle.getI18nBundle("@ui5/webcomponents"),
 				LocaleData.fetchCldr(getLocale__default().getLanguage(), getLocale__default().getRegion(), getLocale__default().getScript()),
-				i18nBundle.fetchI18nBundle("@ui5/webcomponents"),
 			]);
 		}
 	}

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

@@ -265,7 +265,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/we
 			return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
 		}
 		get _headerTitleText() {
-			return this.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
+			return DatePicker.i18nBundle.getText(i18nDefaults.INPUT_SUGGESTIONS_TITLE);
 		}
 		get phone() {
 			return Device.isPhone();
@@ -292,13 +292,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/we
 			};
 		}
 		get openIconTitle() {
-			return this.i18nBundle.getText(i18nDefaults.DATEPICKER_OPEN_ICON_TITLE);
+			return DatePicker.i18nBundle.getText(i18nDefaults.DATEPICKER_OPEN_ICON_TITLE);
 		}
 		get openIconName() {
 			return "appointment-2";
 		}
 		get dateAriaDescription() {
-			return this.i18nBundle.getText(i18nDefaults.DATEPICKER_DATE_DESCRIPTION);
+			return DatePicker.i18nBundle.getText(i18nDefaults.DATEPICKER_DATE_DESCRIPTION);
 		}
 		get _shouldHideHeader() {
 			return false;

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

@@ -59,7 +59,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/
 			return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 		}
 		get dateAriaDescription() {
-			return this.i18nBundle.getText(i18nDefaults.DATERANGE_DESCRIPTION);
+			return DateRangePicker.i18nBundle.getText(i18nDefaults.DATERANGE_DESCRIPTION);
 		}
 		async _onInputSubmit(event) {
 			const input = this._getInput();

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

@@ -101,16 +101,16 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap
 			return "date-time";
 		}
 		get btnOKLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
+			return DateTimePicker.i18nBundle.getText(i18nDefaults.TIMEPICKER_SUBMIT_BUTTON);
 		}
 		get btnCancelLabel() {
-			return this.i18nBundle.getText(i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
+			return DateTimePicker.i18nBundle.getText(i18nDefaults.TIMEPICKER_CANCEL_BUTTON);
 		}
 		get btnDateLabel() {
-			return this.i18nBundle.getText(i18nDefaults.DATETIME_PICKER_DATE_BUTTON);
+			return DateTimePicker.i18nBundle.getText(i18nDefaults.DATETIME_PICKER_DATE_BUTTON);
 		}
 		get btnTimeLabel() {
-			return this.i18nBundle.getText(i18nDefaults.DATETIME_PICKER_TIME_BUTTON);
+			return DateTimePicker.i18nBundle.getText(i18nDefaults.DATETIME_PICKER_TIME_BUTTON);
 		}
 		get showFooter() {
 			return true;
@@ -125,18 +125,19 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap
 			return super.phone || this._phoneMode;
 		}
 		get dateAriaDescription() {
-			return this.i18nBundle.getText(i18nDefaults.DATETIME_DESCRIPTION);
+			return DateTimePicker.i18nBundle.getText(i18nDefaults.DATETIME_DESCRIPTION);
 		}
 		get _shouldHideHeader() {
 			return true;
 		}
 		onSelectedDatesChange(event) {
 			event.preventDefault();
+			const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
 			this._previewValues = {
 				...this._previewValues,
 				calendarTimestamp: event.detail.timestamp,
 				calendarValue: event.detail.values[0],
-				timeSelectionValue: event.path[1].lastChild.value,
+				timeSelectionValue: dateTimePickerContent.lastChild.value,
 			};
 		}
 		onTimeSelectionChange(event) {

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

@@ -70,8 +70,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/we
 			const firstDayOfWeek = this._getFirstDayOfWeek();
 			const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
 			const secondaryMonthsNames = this.hasSecondaryCalendarType && localeData.getMonths("wide", this.secondaryCalendarType);
-			const nonWorkingDayLabel = this.i18nBundle.getText(i18nDefaults.DAY_PICKER_NON_WORKING_DAY);
-			const todayLabel = this.i18nBundle.getText(i18nDefaults.DAY_PICKER_TODAY);
+			const nonWorkingDayLabel = DayPicker.i18nBundle.getText(i18nDefaults.DAY_PICKER_NON_WORKING_DAY);
+			const todayLabel = DayPicker.i18nBundle.getText(i18nDefaults.DAY_PICKER_TODAY);
 			const tempDate = this._getFirstDay();
 			const todayDate = CalendarDate__default.fromLocalJSDate(new Date(), this._primaryCalendarType);
 			const calendarDate = this._calendarDate;
@@ -96,7 +96,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/we
 				const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
 				const todayAriaLabel = isToday ? `${todayLabel} ` : "";
 				const ariaLabel = this.hasSecondaryCalendarType
-					? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()} ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
+					? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
 					: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
 				const day = {
 					timestamp: timestamp.toString(),
@@ -161,7 +161,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/we
 			this._dayNames = [];
 			this._dayNames.push({
 				classes: "ui5-dp-dayname",
-				name: this.i18nBundle.getText(i18nDefaults.DAY_PICKER_WEEK_NUMBER_TEXT),
+				name: DayPicker.i18nBundle.getText(i18nDefaults.DAY_PICKER_WEEK_NUMBER_TEXT),
 			});
 			for (let i = 0; i < DAYS_IN_WEEK; i++) {
 				dayOfTheWeek = i + this._getFirstDayOfWeek();
@@ -453,6 +453,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/we
 				},
 			};
 		}
+		get ariaRoledescription() {
+			return this.hasSecondaryCalendarType
+				? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
+				: `${this._primaryCalendarType} calendar`;
+		}
 	}
 	DayPicker.define();
 

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

@@ -107,12 +107,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		_show() {
 			super._show();
 			this._center();
-			this._attachResizeHandlers();
 		}
 		onBeforeRendering() {
 			this._isRTL = this.effectiveDir === "rtl";
 			this.onPhone = Device.isPhone();
 			this.onDesktop = Device.isDesktop();
+			this._detachResizeHandlers();
+		}
+		onAfterRendering() {
+			this._attachResizeHandlers();
 		}
 		onExitDOM() {
 			super.onExitDOM();
@@ -121,10 +124,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 		_attachResizeHandlers() {
 			ResizeHandler__default.register(this, this._screenResizeHandler);
 			ResizeHandler__default.register(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = true;
 		}
 		_detachResizeHandlers() {
-			ResizeHandler__default.deregister(this, this._screenResizeHandler);
-			ResizeHandler__default.deregister(document.body, this._screenResizeHandler);
+			if (this._resizeHandlersAttached) {
+				ResizeHandler__default.deregister(this, this._screenResizeHandler);
+				ResizeHandler__default.deregister(document.body, this._screenResizeHandler);
+				this._resizeHandlersAttached = false;
+			}
 		}
 		_center() {
 			const height = window.innerHeight - this.offsetHeight,
@@ -239,7 +246,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/
 				style = window.getComputedStyle(this),
 				minWidth = Number.parseFloat(style.minWidth),
 				minHeight = Number.parseFloat(style.minHeight),
-				maxWidth = 	window.innerWidth - left,
+				maxWidth = window.innerWidth - left,
 				maxHeight = window.innerHeight - top;
 			let width = Number.parseFloat(style.width),
 				height = Number.parseFloat(style.height);

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

@@ -128,7 +128,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/
 			return parseInt(this.maxValue.split(":")[2]);
 		}
 		get dateAriaDescription() {
-			return this.i18nBundle.getText(i18nDefaults.DURATION_INPUT_DESCRIPTION);
+			return DurationPicker.i18nBundle.getText(i18nDefaults.DURATION_INPUT_DESCRIPTION);
 		}
 		get accInfo() {
 			return {

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

@@ -87,7 +87,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (this._canUseNativeFormSupport) {
 				this._internals = this.attachInternals();
 			}
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		_onmouseover() {
 			this.content.forEach(item => {
@@ -99,14 +98,21 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				item.classList.remove("ui5_hovered");
 			});
 		}
+		_onclick(event) {
+			if (event.isMarked === "button") {
+				this._input.click(event);
+			}
+		}
 		_onkeydown(event) {
 			if (Keys.isEnter(event)) {
 				this._input.click(event);
+				event.preventDefault();
 			}
 		}
 		_onkeyup(event) {
 			if (Keys.isSpace(event)) {
 				this._input.click(event);
+				event.preventDefault();
 			}
 		}
 		_onfocusin() {
@@ -197,10 +203,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.emptyInput.files;
 		}
 		get browseText() {
-			return this.i18nBundle.getText(i18nDefaults.FILEUPLOAD_BROWSE);
+			return FileUploader.i18nBundle.getText(i18nDefaults.FILEUPLOAD_BROWSE);
 		}
 		get titleText() {
-			return this.i18nBundle.getText(i18nDefaults.FILEUPLOADER_TITLE);
+			return FileUploader.i18nBundle.getText(i18nDefaults.FILEUPLOADER_TITLE);
 		}
 		get _canUseNativeFormSupport() {
 			return !!this.attachInternals;
@@ -215,12 +221,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return "file";
 		}
 		get valueStateTextMappings() {
-			const i18nBundle = this.i18nBundle;
 			return {
-				"Success": i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
-				"Information": i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
-				"Error": i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
-				"Warning": i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
+				"Success": FileUploader.i18nBundle.getText(i18nDefaults.VALUE_STATE_SUCCESS),
+				"Information": FileUploader.i18nBundle.getText(i18nDefaults.VALUE_STATE_INFORMATION),
+				"Error": FileUploader.i18nBundle.getText(i18nDefaults.VALUE_STATE_ERROR),
+				"Warning": FileUploader.i18nBundle.getText(i18nDefaults.VALUE_STATE_WARNING),
 			};
 		}
 		get valueStateText() {
@@ -266,7 +271,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [Input, Popover];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			FileUploader.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	FileUploader.define();