@openui5/sap.ui.webc.main 1.93.3 → 1.96.1

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

@@ -0,0 +1,332 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/Integer', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/delegate/ResizeHandler', 'sap/ui/webc/common/thirdparty/base/types/NavigationMode', 'sap/ui/webc/common/thirdparty/base/UI5Element', './types/BreadcrumbsDesign', './types/BreadcrumbsSeparatorStyle', './BreadcrumbsItem', './generated/i18n/i18n-defaults', './Link', './Label', './ResponsivePopover', './List', './StandardListItem', './Icon', './generated/templates/BreadcrumbsTemplate.lit', './generated/templates/BreadcrumbsPopoverTemplate.lit', './generated/themes/Breadcrumbs.css', './generated/themes/BreadcrumbsPopover.css'], function (ItemNavigation, litRender, Keys, Integer, i18nBundle, ResizeHandler, NavigationMode, UI5Element, BreadcrumbsDesign, BreadcrumbsSeparatorStyle, BreadcrumbsItem, i18nDefaults, Link, Label, ResponsivePopover, List, StandardListItem, Icon, BreadcrumbsTemplate_lit, BreadcrumbsPopoverTemplate_lit, Breadcrumbs_css, BreadcrumbsPopover_css) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var ItemNavigation__default = /*#__PURE__*/_interopDefaultLegacy(ItemNavigation);
+	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
+	var ResizeHandler__default = /*#__PURE__*/_interopDefaultLegacy(ResizeHandler);
+	var NavigationMode__default = /*#__PURE__*/_interopDefaultLegacy(NavigationMode);
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+
+	const metadata = {
+		tag: "ui5-breadcrumbs",
+		managedSlots: true,
+		languageAware: true,
+		slots:  {
+			"default": {
+				propertyName: "items",
+				type: HTMLElement,
+				invalidateOnChildChange: true,
+			},
+		},
+		properties:  {
+			design: {
+				type: BreadcrumbsDesign,
+				defaultValue: BreadcrumbsDesign.Standard,
+			},
+			separatorStyle: {
+				type: BreadcrumbsSeparatorStyle,
+				defaultValue: BreadcrumbsSeparatorStyle.Slash,
+			},
+			_overflowSize: {
+				type: Integer__default,
+				noAttribute: true,
+				defaultValue: 0,
+			},
+		},
+		events:  {
+			"item-click": {
+				detail: {
+					item: { type: HTMLElement },
+				},
+			},
+		},
+	};
+	class Breadcrumbs extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+		static get render() {
+			return litRender__default;
+		}
+		static get template() {
+			return BreadcrumbsTemplate_lit;
+		}
+		static get staticAreaTemplate() {
+			return BreadcrumbsPopoverTemplate_lit;
+		}
+		static get styles() {
+			return Breadcrumbs_css;
+		}
+		static get staticAreaStyles() {
+			return BreadcrumbsPopover_css;
+		}
+		constructor() {
+			super();
+			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
+			this._initItemNavigation();
+			this._onResizeHandler = this._updateOverflow.bind(this);
+			this._breadcrumbItemWidths = new WeakMap();
+			this._dropdownArrowLinkWidth = 0;
+			this._labelFocusAdaptor = {
+				id: `${this._id}-labelWrapper`,
+				getlabelWrapper: this.getCurrentLocationLabelWrapper.bind(this),
+				set _tabIndex(value) {
+					const wrapper = this.getlabelWrapper();
+					wrapper && wrapper.setAttribute("tabindex", value);
+				},
+				get _tabIndex() {
+					const wrapper = this.getlabelWrapper();
+					return (wrapper) ? wrapper.getAttribute("tabindex") : undefined;
+				},
+			};
+		}
+		onInvalidation(changeInfo) {
+			if (changeInfo.reason === "childchange") {
+				const itemIndex = this.getSlottedNodes("items").indexOf(changeInfo.child),
+					isInOverflow = itemIndex < this._overflowSize;
+				if (isInOverflow) {
+					this._overflowSize = itemIndex;
+				}
+			}
+		}
+		onAfterRendering() {
+			this._cacheWidths();
+			this._updateOverflow();
+		}
+		onEnterDOM() {
+			ResizeHandler__default.register(this, this._onResizeHandler);
+		}
+		onExitDOM() {
+			ResizeHandler__default.deregister(this, this._onResizeHandler);
+		}
+		_initItemNavigation() {
+			if (!this._itemNavigation) {
+				this._itemNavigation = new ItemNavigation__default(this, {
+					navigationMode: NavigationMode__default.Horizontal,
+					getItemsCallback: () => this._getFocusableItems(),
+				});
+			}
+		}
+		_getFocusableItems() {
+			const items = this._links;
+			if (!this._isOverflowEmpty) {
+				items.unshift(this._dropdownArrowLink);
+			}
+			if (this._endsWithCurrentLocationLabel) {
+				items.push(this._labelFocusAdaptor);
+			}
+			return items;
+		}
+		_onfocusin(event) {
+			const target = event.target,
+				labelWrapper = this.getCurrentLocationLabelWrapper(),
+				currentItem = (target === labelWrapper) ? this._labelFocusAdaptor : target;
+			this._itemNavigation.setCurrentItem(currentItem);
+		}
+		_onkeydown(event) {
+			const isDropdownArrowFocused = this._isDropdownArrowFocused;
+			if (Keys.isShow(event) && isDropdownArrowFocused && !this._isOverflowEmpty) {
+				event.preventDefault();
+				this._toggleRespPopover();
+				return;
+			}
+			if (Keys.isSpace(event) && isDropdownArrowFocused && !this._isOverflowEmpty && !this._isPickerOpen) {
+				event.preventDefault();
+				return;
+			}
+			if ((Keys.isEnter(event) || Keys.isSpace(event)) && this._isCurrentLocationLabelFocused) {
+				this._onLabelPress();
+			}
+		}
+		_onkeyup(event) {
+			if (this._isDropdownArrowFocused && Keys.isSpace(event) && !this._isOverflowEmpty && !this._isPickerOpen) {
+				this._openRespPopover();
+			}
+		}
+		_cacheWidths() {
+			const map = this._breadcrumbItemWidths,
+				items = this.getSlottedNodes("items"),
+				label = this._currentLocationLabel;
+			for (let i = this._overflowSize; i < items.length; i++) {
+				const item = items[i],
+					link = this.shadowRoot.querySelector(`.ui5-breadcrumbs-link-wrapper #${item._id}-link`);
+				map.set(item, this._getElementWidth(link) || 0);
+			}
+			if (this._endsWithCurrentLocationLabel && label) {
+				const item = items[items.length - 1];
+				map.set(item, this._getElementWidth(label));
+			}
+			if (!this._isOverflowEmpty) {
+				this._dropdownArrowLinkWidth = this._getElementWidth(this._dropdownArrowLink);
+			}
+		}
+		_updateOverflow() {
+			const items = this.getSlottedNodes("items"),
+				availableWidth = this.shadowRoot.querySelector(".ui5-breadcrumbs-root").offsetWidth;
+			let requiredWidth = this._getTotalContentWidth(),
+				overflowSize = 0;
+			if (requiredWidth > availableWidth) {
+				requiredWidth += this._dropdownArrowLinkWidth;
+			}
+			while ((requiredWidth > availableWidth) && (overflowSize < this._maxAllowedOverflowSize)) {
+				const itemToOverflow = items[overflowSize];
+				let itemWidth = 0;
+				if (this._isItemVisible(itemToOverflow)) {
+					itemWidth = this._breadcrumbItemWidths.get(itemToOverflow) || 0;
+				}
+				requiredWidth -= itemWidth;
+				overflowSize++;
+			}
+			this._overflowSize = overflowSize;
+			if (this._isOverflowEmpty && this._isPickerOpen) {
+				this.responsivePopover.close();
+			}
+			const focusableItems = this._getFocusableItems();
+			if (!focusableItems.some(x => x._tabIndex === "0")) {
+				this._itemNavigation.setCurrentItem(focusableItems[0]);
+			}
+		}
+		_getElementWidth(element) {
+			if (element) {
+				return Math.ceil(element.getBoundingClientRect().width);
+			}
+		}
+		_getTotalContentWidth() {
+			const items = this.getSlottedNodes("items"),
+				widthsMap = this._breadcrumbItemWidths,
+				totalLinksWidth = items.reduce((sum, link) => sum + widthsMap.get(link), 0);
+			return totalLinksWidth;
+		}
+		_onLinkPress(event) {
+			const link = event.target,
+				items = this.getSlottedNodes("items"),
+				item = items.find(x => `${x._id}-link` === link.id);
+			this.fireEvent("item-click", { item });
+		}
+		_onLabelPress() {
+			const items = this.getSlottedNodes("items"),
+				item = items[items.length - 1];
+			this.fireEvent("item-click", { item });
+		}
+		_onOverflowListItemSelect(event) {
+			const listItem = event.detail.item,
+				items = this.getSlottedNodes("items"),
+				item = items.find(x => `${x._id}-li` === listItem.id);
+			window.open(item.href, item.target || "_self", "noopener,noreferrer");
+			this.responsivePopover.close();
+			this.fireEvent("item-click", { item });
+		}
+		async _respPopover() {
+			const staticAreaItem = await this.getStaticAreaItemDomRef();
+			return staticAreaItem.querySelector("[ui5-responsive-popover]");
+		}
+		async _toggleRespPopover() {
+			this.responsivePopover = await this._respPopover();
+			if (this._isPickerOpen) {
+				this._closeRespPopover();
+			} else {
+				this._openRespPopover();
+			}
+		}
+		async _closeRespPopover() {
+			this.responsivePopover && this.responsivePopover.close();
+		}
+		async _openRespPopover() {
+			this.responsivePopover = await this._respPopover();
+			this.responsivePopover.showAt(this._dropdownArrowLink);
+		}
+		_isItemVisible(item) {
+			return !item.hidden && this._hasVisibleContent(item);
+		}
+		_hasVisibleContent(item) {
+			return item.innerText || Array.from(item.children).some(child => !child.hidden);
+		}
+		getCurrentLocationLabelWrapper() {
+			return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
+		}
+		get _endsWithCurrentLocationLabel() {
+			return this.design === BreadcrumbsDesign.Standard;
+		}
+		get _currentLocationText() {
+			const items = this.getSlottedNodes("items");
+			if (this._endsWithCurrentLocationLabel && items.length > 1) {
+				const item = items[items.length - 1];
+				if (this._isItemVisible(item)) {
+					return item.innerText;
+				}
+			}
+			return "";
+		}
+		get _currentLocationLabel() {
+			return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location ui5-label");
+		}
+		get _isDropdownArrowFocused() {
+			return this._dropdownArrowLink._tabIndex === "0";
+		}
+		get _isCurrentLocationLabelFocused() {
+			const label = this.getCurrentLocationLabelWrapper();
+			return label && label.tabIndex === 0;
+		}
+		get _maxAllowedOverflowSize() {
+			const items = this.getSlottedNodes("items").filter(item => this._isItemVisible(item));
+			return items.length - 1;
+		}
+		get _dropdownArrowLink() {
+			return this.shadowRoot.querySelector(".ui5-breadcrumbs-dropdown-arrow-link-wrapper ui5-link");
+		}
+		get _overflowItemsData() {
+			return this.getSlottedNodes("items")
+				.slice(0, this._overflowSize)
+				.filter(item => this._isItemVisible(item))
+				.reverse();
+		}
+		get _linksData() {
+			const items = this.getSlottedNodes("items").slice(this._overflowSize);
+			if (this._endsWithCurrentLocationLabel) {
+				items.pop();
+			}
+			return items.filter(item => this._isItemVisible(item));
+		}
+		get _links() {
+			return Array.from(this.shadowRoot.querySelectorAll(".ui5-breadcrumbs-link-wrapper ui5-link"));
+		}
+		get _isOverflowEmpty() {
+			return this._overflowItemsData.length === 0;
+		}
+		get _ariaHasPopup() {
+			if (!this._isOverflowEmpty) {
+				return "listbox";
+			}
+			return undefined;
+		}
+		get _isPickerOpen() {
+			return !!this.responsivePopover && this.responsivePopover.opened;
+		}
+		get _accessibleNameText() {
+			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_ARIA_LABEL);
+		}
+		get _dropdownArrowAccessibleNameText() {
+			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_OVERFLOW_ARIA_LABEL);
+		}
+		get _cancelButtonText() {
+			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_CANCEL_BUTTON);
+		}
+		static get dependencies() {
+			return [
+				BreadcrumbsItem,
+				Link,
+				Label,
+				ResponsivePopover,
+				List,
+				StandardListItem,
+				Icon,
+			];
+		}
+	}
+	Breadcrumbs.define();
+
+	return Breadcrumbs;
+
+});

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

@@ -0,0 +1,41 @@
+sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5Element) { 'use strict';
+
+	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
+
+	const metadata = {
+		tag: "ui5-breadcrumbs-item",
+		managedSlots: true,
+		properties:  {
+			 href: {
+				type: String,
+			},
+			 target: {
+				type: String,
+				defaultValue: undefined,
+			},
+			 accessibleName: {
+				type: String,
+			},
+			stableDomRef: {
+				type: String,
+			},
+		},
+		slots:  {
+			"default": {
+				type: Node,
+			},
+		},
+		events:  {},
+	};
+	class BreadcrumbsItem extends UI5Element__default {
+		static get metadata() {
+			return metadata;
+		}
+	}
+	BreadcrumbsItem.define();
+
+	return BreadcrumbsItem;
+
+});

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

@@ -1,9 +1,10 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/common/thirdparty/base/renderer/LitRenderer', 'sap/ui/webc/common/thirdparty/base/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', './types/BusyIndicatorSize', './Label', './generated/templates/BusyIndicatorTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/BusyIndicator.css'], function (UI5Element, litRender, Device, i18nBundle, Keys, BusyIndicatorSize, Label, BusyIndicatorTemplate_lit, i18nDefaults, BusyIndicator_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/Device', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/base/types/Integer', './types/BusyIndicatorSize', './Label', './generated/templates/BusyIndicatorTemplate.lit', './generated/i18n/i18n-defaults', './generated/themes/BusyIndicator.css'], function (UI5Element, litRender, Device, i18nBundle, Keys, Integer, BusyIndicatorSize, Label, BusyIndicatorTemplate_lit, i18nDefaults, BusyIndicator_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var UI5Element__default = /*#__PURE__*/_interopDefaultLegacy(UI5Element);
 	var litRender__default = /*#__PURE__*/_interopDefaultLegacy(litRender);
+	var Integer__default = /*#__PURE__*/_interopDefaultLegacy(Integer);
 
 	const metadata = {
 		tag: "ui5-busy-indicator",
@@ -25,6 +26,14 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			active: {
 				type: Boolean,
 			},
+			delay: {
+				type: Integer__default,
+				defaultValue: 1000,
+			},
+			_isBusy: {
+				type: Boolean,
+				noAttribute: true,
+			},
 		},
 	};
 	class BusyIndicator extends UI5Element__default {
@@ -43,6 +52,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			});
 		}
 		onExitDOM() {
+			if (this._busyTimeoutId) {
+				clearTimeout(this._busyTimeoutId);
+				delete this._busyTimeoutId;
+			}
 			this.removeEventListener("keydown", this._keydownHandler, true);
 			this.removeEventListener("keyup", this._preventEventHandler, true);
 		}
@@ -78,6 +91,22 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				},
 			};
 		}
+		onBeforeRendering() {
+			if (this.active) {
+				if (!this._isBusy && !this._busyTimeoutId) {
+					this._busyTimeoutId = setTimeout(() => {
+						delete this._busyTimeoutId;
+						this._isBusy = true;
+					}, Math.max(0, this.delay));
+				}
+			} else {
+				if (this._busyTimeoutId) {
+					clearTimeout(this._busyTimeoutId);
+					delete this._busyTimeoutId;
+				}
+				this._isBusy = false;
+			}
+		}
 		_handleKeydown(event) {
 			if (!this.active) {
 				return;

package/src/sap/ui/webc/main/thirdparty/Button.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/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/util/AriaLabelHelper', 'sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Device', './types/ButtonDesign', './generated/templates/ButtonTemplate.lit', './Icon', './generated/i18n/i18n-defaults', './generated/themes/Button.css', './generated/themes/Button.ie11.css'], function (UI5Element, litRender, Keys, FeaturesRegistry, i18nBundle, AriaLabelHelper, isLegacyBrowser, Device, ButtonDesign, ButtonTemplate_lit, Icon, i18nDefaults, Button_css, Button_ie11_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/Keys', 'sap/ui/webc/common/thirdparty/base/FeaturesRegistry', 'sap/ui/webc/common/thirdparty/base/i18nBundle', 'sap/ui/webc/common/thirdparty/base/isLegacyBrowser', 'sap/ui/webc/common/thirdparty/base/Device', './types/ButtonDesign', './generated/templates/ButtonTemplate.lit', './Icon', './generated/i18n/i18n-defaults', './generated/themes/Button.css', './generated/themes/Button.ie11.css'], function (UI5Element, litRender, Keys, FeaturesRegistry, i18nBundle, isLegacyBrowser, Device, ButtonDesign, ButtonTemplate_lit, Icon, i18nDefaults, Button_css, Button_ie11_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
@@ -43,14 +43,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			hasIcon: {
 				type: Boolean,
 			},
-			ariaLabel: {
+			accessibleName: {
 				type: String,
 				defaultValue: undefined,
 			},
-			ariaLabelledby: {
-				type: String,
-				defaultValue: "",
-			},
 			ariaExpanded: {
 				type: String,
 			},
@@ -198,9 +194,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				"title": this.title || (this._buttonAccInfo && this._buttonAccInfo.title),
 			};
 		}
-		get ariaLabelText() {
-			return AriaLabelHelper.getEffectiveAriaLabelText(this);
-		}
 		static typeTextMappings() {
 			return {
 				"Positive": i18nDefaults.BUTTON_ARIA_TYPE_ACCEPT,

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

@@ -40,6 +40,8 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 					values: { type: Array },
 				},
 			},
+			"show-month-press": {},
+			"show-year-press": {},
 		},
 	};
 	class Calendar extends CalendarPart {
@@ -75,11 +77,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
 			this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
 		}
-		onHeaderShowMonthPress() {
+		onHeaderShowMonthPress(event) {
+			this._currentPickerDOM._autoFocus = false;
 			this._currentPicker = "month";
+			this.fireEvent("show-month-press", event);
 		}
-		onHeaderShowYearPress() {
+		onHeaderShowYearPress(event) {
+			this._currentPickerDOM._autoFocus = false;
 			this._currentPicker = "year";
+			this.fireEvent("show-year-press", event);
 		}
 		get _currentPickerDOM() {
 			return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
@@ -118,19 +124,21 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 		onSelectedMonthChange(event) {
 			this.timestamp = event.detail.timestamp;
 			this._currentPicker = "day";
+			this._currentPickerDOM._autoFocus = true;
 		}
 		onSelectedYearChange(event) {
 			this.timestamp = event.detail.timestamp;
 			this._currentPicker = "day";
+			this._currentPickerDOM._autoFocus = true;
 		}
 		onNavigate(event) {
 			this.timestamp = event.detail.timestamp;
 		}
 		_onkeydown(event) {
-			if (Keys.isF4(event) && this._currentPicker === "day") {
+			if (Keys.isF4(event) && this._currentPicker !== "month") {
 				this._currentPicker = "month";
 			}
-			if (Keys.isF4Shift(event) && this._currentPicker === "day") {
+			if (Keys.isF4Shift(event) && this._currentPicker !== "year") {
 				this._currentPicker = "year";
 			}
 		}

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

@@ -21,6 +21,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			primaryCalendarType: {
 				type: CalendarType__default,
 			},
+			secondaryCalendarType: {
+				type: CalendarType__default,
+			},
 			isNextButtonDisabled: {
 				type: Boolean,
 			},
@@ -30,6 +33,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			isMonthButtonHidden: {
 				type: Boolean,
 			},
+			isYearButtonHidden: {
+				type: Boolean,
+			},
 		},
 		events: {
 			"previous-press": {},
@@ -70,6 +76,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this._yearButtonText = yearFormat.format(localDate, true);
 			this._prevButtonText = this.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_PREVIOUS_BUTTON);
 			this._nextButtonText = this.i18nBundle.getText(i18nDefaults.CALENDAR_HEADER_NEXT_BUTTON);
+			if (this.hasSecondaryCalendarType) {
+				const secondYearFormat = DateFormat__default.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+				const secoundaryMonths = this._getDisplayedSecondaryMonths(localDate);
+				this._secondaryMonthInfo = this._getDisplayedSecondaryMonthText(secoundaryMonths);
+				this._secondMonthButtonText = this._secondaryMonthInfo.text;
+				this._secondYearButtonText = secondYearFormat.format(localDate, true);
+			}
 		}
 		onPrevButtonClick(event) {
 			this.fireEvent("previous-press", event);
@@ -81,7 +94,15 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this.fireEvent("show-month-press", event);
 		}
 		onMonthButtonKeyDown(event) {
-			if (Keys.isSpace(event) || Keys.isEnter(event)) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+			}
+			if (Keys.isEnter(event)) {
+				this.fireEvent("show-month-press", event);
+			}
+		}
+		onMonthButtonKeyUp(event) {
+			if (Keys.isSpace(event)) {
 				event.preventDefault();
 				this.fireEvent("show-month-press", event);
 			}
@@ -90,11 +111,56 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			this.fireEvent("show-year-press", event);
 		}
 		onYearButtonKeyDown(event) {
-			if (Keys.isSpace(event) || Keys.isEnter(event)) {
+			if (Keys.isSpace(event)) {
+				event.preventDefault();
+			}
+			if (Keys.isEnter(event)) {
+				this.fireEvent("show-year-press", event);
+			}
+		}
+		onYearButtonKeyUp(event) {
+			if (Keys.isSpace(event)) {
 				event.preventDefault();
 				this.fireEvent("show-year-press", event);
 			}
 		}
+		_getDisplayedSecondaryMonthText(month) {
+			const localeData = getCachedLocaleDataInstance__default(getLocale__default());
+			const pattern = localeData.getIntervalPattern();
+			const secondaryMonthsNames = getCachedLocaleDataInstance__default(getLocale__default()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
+			const secondaryMonthsNamesWide = getCachedLocaleDataInstance__default(getLocale__default()).getMonthsStandAlone("wide", this.secondaryCalendarType);
+			if (month.startMonth === month.endMonth) {
+				return {
+					text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
+					textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
+				};
+			}
+			return {
+				text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
+				textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
+			};
+		}
+		_getDisplayedSecondaryMonths(localDate) {
+			let firstDate = CalendarDate__default.fromLocalJSDate(localDate, this.primaryCalendarType);
+			firstDate.setDate(1);
+			firstDate = new CalendarDate__default(firstDate, this.secondaryCalendarType);
+			const startMonth = firstDate.getMonth();
+			let lastDate = CalendarDate__default.fromLocalJSDate(localDate, this.primaryCalendarType);
+			lastDate.setDate(this._daysInMonth(lastDate));
+			lastDate = new CalendarDate__default(lastDate, this.secondaryCalendarType);
+			const endMonth = lastDate.getMonth();
+			return { startMonth, endMonth };
+		}
+		_daysInMonth(calendarDate) {
+			calendarDate = new CalendarDate__default(calendarDate);
+			calendarDate.setDate(1);
+			calendarDate.setMonth(calendarDate.getMonth() + 1);
+			calendarDate.setDate(0);
+			return calendarDate.getDate();
+		}
+		get hasSecondaryCalendarType() {
+			return !!this.secondaryCalendarType;
+		}
 		get classes() {
 			return {
 				prevButton: {
@@ -107,6 +173,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 				},
 			};
 		}
+		get accInfo() {
+			return {
+				ariaLabelMonthButton: this.hasSecondaryCalendarType ? `${this._monthButtonText},${this._secondaryMonthInfo.textInfo}` : `${this._monthButtonText}`,
+			};
+		}
 	}
 	CalendarHeader.define();