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

package/src/sap/ui/webc/main/Tree.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -57,7 +57,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.98.0
 	 *
 	 * @constructor
 	 * @public
@@ -194,6 +194,34 @@ sap.ui.define([
 					}
 				},
 
+				/**
+				 * Fired when the mouse cursor leaves the tree item borders.
+				 */
+				itemMouseout: {
+					parameters: {
+						/**
+						 * the hovered item.
+						 */
+						item: {
+							type: "HTMLElement"
+						}
+					}
+				},
+
+				/**
+				 * Fired when the mouse cursor enters the tree item borders.
+				 */
+				itemMouseover: {
+					parameters: {
+						/**
+						 * the hovered item.
+						 */
+						item: {
+							type: "HTMLElement"
+						}
+					}
+				},
+
 				/**
 				 * Fired when a tree item is expanded or collapsed. <i>Note:</i> You can call <code>preventDefault()</code> on the event object to suppress the event, if needed. This may be handy for example if you want to dynamically load tree items upon the user expanding a node. Even if you prevented the event's default behavior, you can always manually call <code>toggle()</code> on a tree item.
 				 */

package/src/sap/ui/webc/main/TreeItem.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -29,7 +29,7 @@ sap.ui.define([
 	 * <h3>Usage</h3> <code>sap.ui.webc.main.TreeItem</code> is an abstract element, representing a node in a <code>sap.ui.webc.main.Tree</code>. The tree itself is rendered as a list, and each <code>sap.ui.webc.main.TreeItem</code> is represented by a list item(<code>sap.ui.webc.main.TreeListItem</code>) in that list. Therefore, you should only use <code>sap.ui.webc.main.TreeItem</code> directly in your apps. The <code>sap.ui.webc.main.TreeListItem</code> list item is internal for the list, and not intended for public use.
 	 *
 	 * @author SAP SE
-	 * @version 1.96.2
+	 * @version 1.98.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/webc/main/library.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -9,16 +9,17 @@
  */
 sap.ui.define([
 		"sap/ui/webc/common/library",
+		"sap/ui/webc/common/thirdparty/base/CSP",
 		"./thirdparty/Assets"
 	], // library dependency
-	function() {
+	function(commonLibrary, CSP) {
 
 		"use strict";
 
 		// delegate further initialization of this library to the Core
 		sap.ui.getCore().initLibrary({
 			name: "sap.ui.webc.main",
-			version: "1.96.2",
+			version: "1.98.0",
 			dependencies: ["sap.ui.core", "sap.ui.webc.common"],
 			noLibraryCSS: true,
 			designtime: "sap/ui/webc/main/designtime/library.designtime",
@@ -93,6 +94,7 @@ sap.ui.define([
 				"sap.ui.webc.main.CheckBox",
 				"sap.ui.webc.main.ColorPalette",
 				"sap.ui.webc.main.ColorPaletteItem",
+				"sap.ui.webc.main.ColorPalettePopover",
 				"sap.ui.webc.main.ColorPicker",
 				"sap.ui.webc.main.ComboBox",
 				"sap.ui.webc.main.ComboBoxGroupItem",
@@ -157,7 +159,7 @@ sap.ui.define([
 		 * @namespace
 		 * @alias sap.ui.webc.main
 		 * @author SAP SE
-		 * @version 1.96.2
+		 * @version 1.98.0
 		 * @public
 		 * @since 1.92.0
 		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
@@ -182,8 +184,8 @@ sap.ui.define([
 		 * @name sap.ui.webc.main.IBreadcrumbsItem
 		 * @interface
 		 * @public
-		 * @since 1.92.0
-		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
+		 * @since 1.95.0
+		 * @experimental Since 1.95.0 This API is experimental and might change significantly.
 		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
 		 */
 
@@ -292,8 +294,8 @@ sap.ui.define([
 		 * @name sap.ui.webc.main.ISegmentedButtonItem
 		 * @interface
 		 * @public
-		 * @since 1.92.0
-		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
+		 * @since 1.95.0
+		 * @experimental Since 1.95.0 This API is experimental and might change significantly.
 		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
 		 */
 
@@ -551,8 +553,8 @@ sap.ui.define([
 		 *
 		 * @enum {string}
 		 * @public
-		 * @since 1.92.0
-		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
+		 * @since 1.95.0
+		 * @experimental Since 1.95.0 This API is experimental and might change significantly.
 		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
 		 */
 		thisLib.BreadcrumbsDesign = {
@@ -576,8 +578,8 @@ sap.ui.define([
 		 *
 		 * @enum {string}
 		 * @public
-		 * @since 1.92.0
-		 * @experimental Since 1.92.0 This API is experimental and might change significantly.
+		 * @since 1.95.0
+		 * @experimental Since 1.95.0 This API is experimental and might change significantly.
 		 * @ui5-metamodel This enumeration also will be described in the UI5 (legacy) designtime metamodel
 		 */
 		thisLib.BreadcrumbsSeparatorStyle = {
@@ -1513,6 +1515,8 @@ sap.ui.define([
 			Normal: "Normal"
 		};
 
+		CSP.setPackageCSSRoot("@ui5/webcomponents", sap.ui.require.toUrl("sap/ui/webc/main/thirdparty/css/"));
+
 		return thisLib;
 
 	});

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

@@ -1,4 +1,4 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/localization/Assets', 'sap/ui/webc/common/thirdparty/theme-base/Assets', 'sap/ui/webc/common/thirdparty/icons/Assets', './generated/json-imports/Themes', './generated/json-imports/i18n'], function (Assets, Assets$1, Assets$2, Themes, i18n) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/localization/Assets', 'sap/ui/webc/common/thirdparty/theming/Assets', 'sap/ui/webc/common/thirdparty/icons/Assets', './generated/json-imports/Themes', './generated/json-imports/i18n'], function (Assets, Assets$1, Assets$2, Themes, i18n) { 'use strict';
 
 
 

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

@@ -67,10 +67,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		},
 	};
 	class Avatar extends UI5Element__default {
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		static get metadata() {
 			return metadata;
 		}
@@ -87,7 +83,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [Icon];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Avatar.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get tabindex() {
 			return this._tabIndex || (this.interactive ? "0" : "-1");
@@ -115,17 +111,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (this.accessibleName) {
 				return this.accessibleName;
 			}
-			return this.i18nBundle.getText(i18nDefaults.AVATAR_TOOLTIP) || undefined;
+			return Avatar.i18nBundle.getText(i18nDefaults.AVATAR_TOOLTIP) || undefined;
 		}
 		get hasImage() {
 			this._hasImage = !!this.image.length;
 			return this._hasImage;
 		}
-		_onclick(event) {
-			if (this.interactive) {
-				event.stopPropagation();
-				this.fireEvent("click");
-			}
+		onBeforeRendering() {
+			this._onclick = this.interactive ? this._onClickHandler.bind(this) : undefined;
+		}
+		_onClickHandler(event) {
+			event.stopPropagation();
+			this.fireEvent("click");
 		}
 		_onkeydown(event) {
 			if (!this.interactive) {

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

@@ -77,7 +77,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			this._colorIndex = 0;
 			this._hiddenItems = 0;
 			this._onResizeHandler = this._onResize.bind(this);
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		static get metadata() {
 			return metadata;
@@ -97,7 +96,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			AvatarGroup.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get hiddenItems() {
 			return this.items.slice(this._hiddenStartIndex);
@@ -111,17 +110,17 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		get _ariaLabelText() {
 			const hiddenItemsCount = this.hiddenItems.length;
 			const typeLabelKey = this._isGroup ? i18nDefaults.AVATAR_GROUP_ARIA_LABEL_GROUP : i18nDefaults.AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;
-			let text = this.i18nBundle.getText(typeLabelKey);
-			text += ` ${this.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, [this._itemsCount - hiddenItemsCount], [hiddenItemsCount])}`;
+			let text = AvatarGroup.i18nBundle.getText(typeLabelKey);
+			text += ` ${AvatarGroup.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;
 			if (this._isGroup) {
-				text += ` ${this.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
+				text += ` ${AvatarGroup.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;
 			} else {
-				text += ` ${this.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_MOVE)}`;
+				text += ` ${AvatarGroup.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_MOVE)}`;
 			}
 			return text;
 		}
 		get _overflowButtonAriaLabelText() {
-			return this._isGroup ? undefined : this.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
+			return this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(i18nDefaults.AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);
 		}
 		get _containerAriaHasPopup() {
 			return this._isGroup ? this._getAriaHasPopup() : undefined;

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

@@ -19,6 +19,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			_iconOnly: {
 				type: Boolean,
 			},
+			active: {
+				type: Boolean,
+			},
 		},
 		managedSlots: true,
 		slots:  {
@@ -31,10 +34,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 		},
 	};
 	class Badge extends UI5Element__default {
-		constructor() {
-			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
-		}
 		static get metadata() {
 			return metadata;
 		}
@@ -48,12 +47,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return Badge_css;
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Badge.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onBeforeRendering() {
 			this._hasIcon = this.hasIcon;
 			this._iconOnly = this.iconOnly;
 		}
+		_onmousedown() {
+			this.active = true;
+		}
+		_onmouseup() {
+			this.active = false;
+		}
 		get hasText() {
 			return !!this.textContent.trim().length;
 		}
@@ -64,7 +69,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.hasIcon && !this.hasText;
 		}
 		get badgeDescription() {
-			return this.i18nBundle.getText(i18nDefaults.BADGE_DESCRIPTION);
+			return Badge.i18nBundle.getText(i18nDefaults.BADGE_DESCRIPTION);
 		}
 	}
 	Badge.define();

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

@@ -64,7 +64,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sa
 		}
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 			this._initItemNavigation();
 			this._onResizeHandler = this._updateOverflow.bind(this);
 			this._breadcrumbItemWidths = new WeakMap();
@@ -91,6 +90,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sa
 				}
 			}
 		}
+		onBeforeRendering() {
+			this._preprocessItems();
+		}
 		onAfterRendering() {
 			this._cacheWidths();
 			this._updateOverflow();
@@ -243,6 +245,11 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sa
 		_hasVisibleContent(item) {
 			return item.innerText || Array.from(item.children).some(child => !child.hidden);
 		}
+		_preprocessItems() {
+			this.items.forEach(item => {
+				item._getRealDomRef = () => this.getDomRef().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`);
+			});
+		}
 		getCurrentLocationLabelWrapper() {
 			return this.shadowRoot.querySelector(".ui5-breadcrumbs-current-location > span");
 		}
@@ -305,13 +312,13 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sa
 			return !!this.responsivePopover && this.responsivePopover.opened;
 		}
 		get _accessibleNameText() {
-			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_ARIA_LABEL);
+			return Breadcrumbs.i18nBundle.getText(i18nDefaults.BREADCRUMBS_ARIA_LABEL);
 		}
 		get _dropdownArrowAccessibleNameText() {
-			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_OVERFLOW_ARIA_LABEL);
+			return Breadcrumbs.i18nBundle.getText(i18nDefaults.BREADCRUMBS_OVERFLOW_ARIA_LABEL);
 		}
 		get _cancelButtonText() {
-			return this.i18nBundle.getText(i18nDefaults.BREADCRUMBS_CANCEL_BUTTON);
+			return Breadcrumbs.i18nBundle.getText(i18nDefaults.BREADCRUMBS_CANCEL_BUTTON);
 		}
 		static get dependencies() {
 			return [
@@ -324,6 +331,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/delegate/ItemNavigation', 'sa
 				Icon,
 			];
 		}
+		static async onDefine() {
+			Breadcrumbs.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
+		}
 	}
 	Breadcrumbs.define();
 

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

@@ -18,9 +18,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 			 accessibleName: {
 				type: String,
 			},
-			stableDomRef: {
-				type: String,
-			},
 		},
 		slots:  {
 			"default": {
@@ -33,6 +30,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element'], function (UI5El
 		static get metadata() {
 			return metadata;
 		}
+		get stableDomRef() {
+			return `${this._id}-stable-dom-ref`;
+		}
 	}
 	BreadcrumbsItem.define();
 

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

@@ -39,7 +39,6 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 	class BusyIndicator extends UI5Element__default {
 		constructor() {
 			super();
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 			this._keydownHandler = this._handleKeydown.bind(this);
 			this._preventEventHandler = this._preventEvent.bind(this);
 		}
@@ -75,10 +74,10 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return [Label];
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			BusyIndicator.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		get ariaTitle() {
-			return this.i18nBundle.getText(i18nDefaults.BUSY_INDICATOR_TITLE);
+			return BusyIndicator.i18nBundle.getText(i18nDefaults.BUSY_INDICATOR_TITLE);
 		}
 		get labelId() {
 			return this.text ? `${this._id}-label` : undefined;

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

@@ -105,10 +105,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 				document.addEventListener("mouseup", this._deactivate);
 				isGlobalHandlerAttached = true;
 			}
-			this.i18nBundle = i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 		onEnterDOM() {
-			this._isTouch = Device.isPhone() || Device.isTablet();
+			this._isTouch = (Device.isPhone() || Device.isTablet()) && !Device.isCombi();
 		}
 		onBeforeRendering() {
 			const FormSupport = FeaturesRegistry.getFeature("FormSupport");
@@ -127,6 +126,9 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			if (FormSupport) {
 				FormSupport.triggerFormSubmit(this);
 			}
+			if (Device.isSafari()) {
+				this.getDomRef().focus();
+			}
 		}
 		_onmousedown(event) {
 			if (this.nonInteractive || this._isTouch) {
@@ -202,7 +204,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			};
 		}
 		get buttonTypeText() {
-			return this.i18nBundle.getText(Button.typeTextMappings()[this.design]);
+			return Button.i18nBundle.getText(Button.typeTextMappings()[this.design]);
 		}
 		get tabIndexValue() {
 			const tabindex = this.getAttribute("tabindex");
@@ -215,7 +217,7 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/base/UI5Element', 'sap/ui/webc/com
 			return this.iconOnly && !this.title;
 		}
 		static async onDefine() {
-			await i18nBundle.fetchI18nBundle("@ui5/webcomponents");
+			Button.i18nBundle = await i18nBundle.getI18nBundle("@ui5/webcomponents");
 		}
 	}
 	Button.define();

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

@@ -1,8 +1,11 @@
-sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate', 'sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/thirdparty/base/Keys', './CalendarDate', './CalendarPart', './CalendarHeader', './DayPicker', './MonthPicker', './YearPicker', './types/CalendarSelectionMode', 'sap/ui/webc/common/thirdparty/localization/features/calendar/Gregorian', './generated/templates/CalendarTemplate.lit', './generated/themes/Calendar.css'], function (CalendarDate, Render, Keys, CalendarDate$1, CalendarPart, CalendarHeader, DayPicker, MonthPicker, YearPicker, CalendarSelectionMode, Gregorian, CalendarTemplate_lit, Calendar_css) { 'use strict';
+sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate', 'sap/ui/webc/common/thirdparty/base/Render', 'sap/ui/webc/common/thirdparty/base/Keys', 'sap/ui/webc/common/thirdparty/localization/getCachedLocaleDataInstance', 'sap/ui/webc/common/thirdparty/base/locale/getLocale', 'sap/ui/webc/common/thirdparty/localization/DateFormat', './CalendarDate', './CalendarPart', './CalendarHeader', './DayPicker', './MonthPicker', './YearPicker', './types/CalendarSelectionMode', 'sap/ui/webc/common/thirdparty/localization/features/calendar/Gregorian', './generated/templates/CalendarTemplate.lit', './generated/themes/Calendar.css'], function (CalendarDate, Render, Keys, getCachedLocaleDataInstance, getLocale, DateFormat, CalendarDate$1, CalendarPart, CalendarHeader, DayPicker, MonthPicker, YearPicker, CalendarSelectionMode, Gregorian, CalendarTemplate_lit, Calendar_css) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 	var CalendarDate__default = /*#__PURE__*/_interopDefaultLegacy(CalendarDate);
+	var getCachedLocaleDataInstance__default = /*#__PURE__*/_interopDefaultLegacy(getCachedLocaleDataInstance);
+	var getLocale__default = /*#__PURE__*/_interopDefaultLegacy(getLocale);
+	var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
 
 	const metadata = {
 		tag: "ui5-calendar",
@@ -24,6 +27,12 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			_nextButtonDisabled: {
 				type: Boolean,
 			},
+			_headerMonthButtonText: {
+				type: String,
+			},
+			_headerYearButtonText: {
+				type: String,
+			},
 		},
 		managedSlots: true,
 		slots:  {
@@ -76,6 +85,18 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 			await Render.renderFinished();
 			this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
 			this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
+			const yearFormat = DateFormat__default.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+			const localeData = getCachedLocaleDataInstance__default(getLocale__default());
+			this._headerMonthButtonText = localeData.getMonths("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+			if (this._currentPicker === "year") {
+				const rangeStart = new CalendarDate__default(this._calendarDate, this._primaryCalendarType);
+				const rangeEnd = new CalendarDate__default(this._calendarDate, this._primaryCalendarType);
+				rangeStart.setYear(this._currentPickerDOM._firstYear);
+				rangeEnd.setYear(this._currentPickerDOM._lastYear);
+				this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
+			} else {
+				this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+			}
 		}
 		onHeaderShowMonthPress(event) {
 			this._currentPickerDOM._autoFocus = false;
@@ -96,8 +117,58 @@ sap.ui.define(['sap/ui/webc/common/thirdparty/localization/dates/CalendarDate',
 		onHeaderNextPress() {
 			this._currentPickerDOM._showNextPage();
 		}
+		get secondaryCalendarTypeButtonText() {
+			if (!this.secondaryCalendarType) {
+				return;
+			}
+			const localDate = new Date(this._timestamp * 1000);
+			const secondYearFormat = DateFormat__default.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+			const secondMonthInfo = this._getDisplayedSecondaryMonthText();
+			const secondYearText = secondYearFormat.format(localDate, true);
+			return {
+				yearButtonText: secondYearText,
+				monthButtonText: secondMonthInfo.text,
+				monthButtonInfo: secondMonthInfo.info,
+			};
+		}
+		_getDisplayedSecondaryMonthText() {
+			const month = this._getDisplayedSecondaryMonths();
+			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() {
+			const localDate = new Date(this._timestamp * 1000);
+			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._getDaysInMonth(lastDate));
+			lastDate = new CalendarDate__default(lastDate, this.secondaryCalendarType);
+			const endMonth = lastDate.getMonth();
+			return { startMonth, endMonth };
+		}
+		_getDaysInMonth(date) {
+			const tempCalendarDate = new CalendarDate__default(date);
+			tempCalendarDate.setDate(1);
+			tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
+			tempCalendarDate.setDate(0);
+			return tempCalendarDate.getDate();
+		}
 		get _isHeaderMonthButtonHidden() {
-			return this._currentPicker === "month";
+			return this._currentPicker === "month" || this._currentPicker === "year";
 		}
 		get _isDayPickerHidden() {
 			return this._currentPicker !== "day";