@ui5/webcomponents 0.0.0-dff5837d7 → 0.0.0-e03cd01f3

package/dist/Calendar.js

@@ -1,693 +1,828 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var Calendar_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import transformDateToSecondaryType from "@ui5/webcomponents-localization/dist/dates/transformDateToSecondaryType.js";
+import convertMonthNumbersToMonthNames from "@ui5/webcomponents-localization/dist/dates/convertMonthNumbersToMonthNames.js";
+import CalendarDateComponent from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
+import { isEnter, isF4, isF4Shift, isSpace, } from "@ui5/webcomponents-base/dist/Keys.js";
+import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
-import LocaleData from "@ui5/webcomponents-localization/dist/LocaleData.js";
-import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
-import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import CalendarHeader from "./CalendarHeader.js";
-import DayPicker from "./DayPicker.js";
-import MonthPicker from "./MonthPicker.js";
-import YearPicker from "./YearPicker.js";
-
+import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import { getMaxCalendarDate } from "@ui5/webcomponents-localization/dist/dates/ExtremeDates.js";
+import CalendarDate from "./CalendarDate.js";
+import CalendarDateRange from "./CalendarDateRange.js";
+import "./SpecialCalendarDate.js";
+import CalendarPart from "./CalendarPart.js";
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 // Default calendar for bundling
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
-
 // Template
-import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.js";
-
+import CalendarTemplate from "./CalendarTemplate.js";
 // Styles
 import calendarCSS from "./generated/themes/Calendar.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-calendar",
-	properties: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
-		/**
-		 * Defines the UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
-		 * @type {Integer}
-		 * @public
-		*/
-		timestamp: {
-			type: Integer,
-		},
-
-		/**
-		 * Defines the calendar type used for display.
-		 * If not defined, the calendar type of the global configuration is used.
-		 * Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
-		 * @type {CalendarType}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Defines the selected dates as UTC timestamps.
-		 * @type {Array}
-		 * @public
-		 */
-		selectedDates: {
-			type: Integer,
-			multiple: true,
-		},
-
-		/**
-		 * Determines the мinimum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		minDate: {
-			type: String,
-		},
-
-		/**
-		 * Determines the maximum date available for selection.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @since 1.0.0-rc.6
-		 * @public
-		 */
-		maxDate: {
-			type: String,
-		},
-
-		_header: {
-			type: Object,
-		},
-
-		_oMonth: {
-			type: Object,
-		},
-
-		_monthPicker: {
-			type: Object,
-		},
-
-		_yearPicker: {
-			type: Object,
-		},
-
-		_calendarWidth: {
-			type: String,
-			noAttribute: true,
-		},
-
-		_calendarHeight: {
-			type: String,
-			noAttribute: true,
-		},
-
-		formatPattern: {
-			type: String,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.Calendar.prototype */ {
-		/**
-		 * Fired when the selected dates changed.
-		 * @event sap.ui.webcomponents.main.Calendar#selected-dates-change
-		 * @param {Array} dates The selected dates' timestamps
-		 * @public
-		 */
-		"selected-dates-change": { type: Array },
-	},
-};
-
+import CalendarHeaderCss from "./generated/themes/CalendarHeader.css.js";
+import { CALENDAR_HEADER_MONTH_BUTTON, CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_BUTTON, CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_RANGE_BUTTON, CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE, CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT, CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE, CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE, } from "./generated/i18n/i18n-defaults.js";
 /**
  * @class
  *
- * The <code>ui5-calendar</code> can be used standale to display the years, months, weeks and days,
- * but the main purpose of the <code>ui5-calendar</code> is to be used within a <code>ui5-date-picker</code>.
+ * ### Overview
+ *
+ * The `ui5-calendar` component allows users to select one or more dates.
+ *
+ * Currently selected dates are represented with instances of `ui5-date` as
+ * children of the `ui5-calendar`. The value property of each `ui5-date` must be a
+ * date string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.
+ * Whenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances
+ * of `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the
+ * `selection-change` event. This is useful if you want to control the selected dates externally.
+ *
+ * ### Usage
+ *
+ * The user can navigate to a particular date by:
+ *
+ * - Pressing over a month inside the months view
+ * - Pressing over an year inside the years view
+ *
+ * The user can confirm a date selection by pressing over a date inside the days view.
+ *
+ * ### Keyboard Handling
+ * The `ui5-calendar` provides advanced keyboard handling.
+ * When a picker is showed and focused the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - Day picker:
+ *
+ * - [F4] - Shows month picker
+ * - [Shift] + [F4] - Shows year picker
+ * - [Page Up] - Navigate to the previous month
+ * - [Page Down] - Navigate to the next month
+ * - [Shift] + [Page Up] - Navigate to the previous year
+ * - [Shift] + [Page Down] - Navigate to the next year
+ * - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
+ * - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
+ * - [Home] - Navigate to the first day of the week
+ * - [End] - Navigate to the last day of the week
+ * - [Ctrl] + [Home] - Navigate to the first day of the month
+ * - [Ctrl] + [End] - Navigate to the last day of the month
  *
+ * - Month picker:
+ *
+ * - [Page Up] - Navigate to the previous year
+ * - [Page Down] - Navigate to the next year
+ * - [Home] - Navigate to the first month of the current row
+ * - [End] - Navigate to the last month of the current row
+ * - [Ctrl] + [Home] - Navigate to the first month of the current year
+ * - [Ctrl] + [End] - Navigate to the last month of the year
+ *
+ * - Year picker:
+ *
+ * - [Page Up] - Navigate to the previous year range
+ * - [Page Down] - Navigate the next year range
+ * - [Home] - Navigate to the first year of the current row
+ * - [End] - Navigate to the last year of the current row
+ * - [Ctrl] + [Home] - Navigate to the first year of the current year range
+ * - [Ctrl] + [End] - Navigate to the last year of the current year range
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### Calendar types
+ * The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
+ * By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
+ * you need to set the `primaryCalendarType` property and import one or more of the following modules:
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";`
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";`
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";`
+ *
+ * `import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";`
+ *
+ * Or, you can use the global configuration and set the `calendarType` key:
+ *
+ * ```html
+ * <script data-id="sap-ui-config" type="application/json">
+ * 	{
+ * 		"calendarType": "Japanese"
+ * 	}
+ * </script>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/Calendar.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Calendar
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-calendar
+ * @extends CalendarPart
  * @public
+ * @csspart day-cell - Used to style the day cells.
+ * @csspart day-cell-selected - Used to style the day cells when selected.
+ * @csspart day-cell-selected-between - Used to style the day cells in between of selected dates in range.
+ * @csspart month-cell - Used to style the month cells.
+ * @csspart month-cell-selected - Used to style the month cells when selected.
+ * @csspart month-cell-selected-between - Used to style the day cells in between of selected months in range.
+ * @csspart month-picker-root - Used to style the month picker root container.
+ * @csspart year-cell - Used to style the year cells.
+ * @csspart year-cell-selected - Used to style the year cells when selected.
+ * @csspart year-cell-selected-between - Used to style the year cells in between of selected years in range.
+ * @csspart year-picker-root - Used to style the year picker root container.
+ * @csspart year-range-cell - Used to style the year range cells.
+ * @csspart year-range-cell-selected - Used to style the year range cells when selected.
+ * @csspart year-range-cell-selected-between - Used to style the year range cells in between of selected year ranges.
+ * @csspart year-range-picker-root - Used to style the year range picker root container.
+ * @csspart calendar-header-middle-button - Used to style the calendar header middle buttons (month/year/year-range buttons).
+ * @csspart calendar-header-arrow-button - Used to style the calendar header navigation arrow buttons (previous/next buttons).
+ * @since 1.0.0-rc.11
  */
-class Calendar extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return CalendarTemplate;
-	}
-
-	static get styles() {
-		return calendarCSS;
-	}
-
-	constructor() {
-		super();
-		this._oLocale = getLocale();
-		this._oLocaleData = new LocaleData(this._oLocale);
-		this._header = {};
-		this._header.onPressPrevious = this._handlePrevious.bind(this);
-		this._header.onPressNext = this._handleNext.bind(this);
-		this._header.onBtn1Press = this._handleMonthButtonPress.bind(this);
-		this._header.onBtn2Press = this._handleYearButtonPress.bind(this);
-
-		this._oMonth = {};
-		this._oMonth.onSelectedDatesChange = this._handleSelectedDatesChange.bind(this);
-		this._oMonth.onNavigate = this._handleMonthNavigate.bind(this);
-
-		this._monthPicker = {};
-		this._monthPicker._hidden = true;
-		this._monthPicker.onSelectedMonthChange = this._handleSelectedMonthChange.bind(this);
-
-		this._yearPicker = {};
-		this._yearPicker._hidden = true;
-		this._yearPicker.onSelectedYearChange = this._handleSelectedYearChange.bind(this);
-
-		this._isShiftingYears = false;
-	}
-
-	onBeforeRendering() {
-		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType });
-		const minDateParsed = this.minDate && this.getFormat().parse(this.minDate);
-		const maxDateParsed = this.maxDate && this.getFormat().parse(this.maxDate);
-		const firstDayOfCalendarTimeStamp = -62135596800000;
-		let currentMonth = 0;
-		let currentYear = 1;
-
-		if ((this.minDate || this.maxDate) && this._timestamp && !this.isInValidRange(this._timestamp * 1000)) {
-			if (this._minDate) {
-				this.timestamp = this._minDate / 1000;
-			} else {
-				this.timestamp = (new Date(firstDayOfCalendarTimeStamp)).getTime() / 1000;
-			}
-		}
-
-		this._oMonth.formatPattern = this._formatPattern;
-		this._oMonth.timestamp = this._timestamp;
-		this._oMonth.selectedDates = [...this._selectedDates];
-		this._oMonth.primaryCalendarType = this._primaryCalendarType;
-		this._oMonth.minDate = this.minDate;
-		this._oMonth.maxDate = this.maxDate;
-		this._header.monthText = this._oLocaleData.getMonths("wide", this._primaryCalendarType)[this._month];
-		this._header.yearText = oYearFormat.format(this._localDate);
-		currentMonth = this.timestamp && CalendarDate.fromTimestamp(this.timestamp * 1000).getMonth();
-		currentYear = this.timestamp && CalendarDate.fromTimestamp(this.timestamp * 1000).getYear();
-
-		// month picker
-		this._monthPicker.primaryCalendarType = this._primaryCalendarType;
-		this._monthPicker.timestamp = this._timestamp;
-
-		this._yearPicker.primaryCalendarType = this._primaryCalendarType;
-
-		if (!this._isShiftingYears) {
-			// year picker
-			this._yearPicker.timestamp = this._timestamp;
-		}
-
-		this._isShiftingYears = false;
-
-		if (!this._oMonth._hidden) {
-			if (this.minDate
-				&& minDateParsed.getMonth() === currentMonth
-				&& minDateParsed.getFullYear() === currentYear) {
-				this._header._isPrevButtonDisabled = true;
-			} else {
-				this._header._isPrevButtonDisabled = false;
-			}
-
-			if (this.maxDate
-				&& maxDateParsed.getMonth() === currentMonth
-				&& maxDateParsed.getFullYear() === currentYear) {
-				this._header._isNextButtonDisabled = true;
-			} else {
-				this._header._isNextButtonDisabled = false;
-			}
-		}
-
-		if (!this._yearPicker._hidden) {
-			currentYear = this._yearPicker.timestamp && CalendarDate.fromTimestamp(this._yearPicker.timestamp * 1000).getYear();
-			if (this.minDate
-				&& (currentYear - minDateParsed.getFullYear()) < 1) {
-				this._header._isPrevButtonDisabled = true;
-			} else {
-				this._header._isPrevButtonDisabled = false;
-			}
-
-			if (this.maxDate
-				&& (maxDateParsed.getFullYear() - currentYear) < 1) {
-				this._header._isNextButtonDisabled = true;
-			} else {
-				this._header._isNextButtonDisabled = false;
-			}
-		}
-	}
-
-	get _timestamp() {
-		return this.timestamp !== undefined ? this.timestamp : Math.floor(new Date().getTime() / 1000);
-	}
-
-	get _localDate() {
-		return new Date(this._timestamp * 1000);
-	}
-
-	get _calendarDate() {
-		return CalendarDate.fromTimestamp(this._localDate.getTime(), this._primaryCalendarType);
-	}
-
-	get _month() {
-		return this._calendarDate.getMonth();
-	}
-
-	get _primaryCalendarType() {
-		return this.primaryCalendarType || getCalendarType() || LocaleData.getInstance(getLocale()).getPreferredCalendarType();
-	}
-
-	get _formatPattern() {
-		return this.formatPattern || "medium"; // get from config
-	}
-
-	get _isPattern() {
-		return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long";
-	}
-
-	get _selectedDates() {
-		return this.selectedDates || [];
-	}
-
-	get _maxDate() {
-		if (this.maxDate) {
-			const jsDate = new Date(this.getFormat().parse(this.maxDate).getFullYear(), this.getFormat().parse(this.maxDate).getMonth(), this.getFormat().parse(this.maxDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
-		}
-
-		return this.maxDate;
-	}
-
-	get _minDate() {
-		if (this.minDate) {
-			const jsDate = new Date(this.getFormat().parse(this.minDate).getFullYear(), this.getFormat().parse(this.minDate).getMonth(), this.getFormat().parse(this.minDate).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
-		}
-		return this.minDate;
-	}
-
-	_handleSelectedDatesChange(event) {
-		this.selectedDates = [...event.detail.dates];
-
-		this.fireEvent("selected-dates-change", { dates: event.detail.dates });
-	}
-
-	_handleMonthNavigate(event) {
-		this.timestamp = event.detail.timestamp;
-	}
-
-	_handleSelectedMonthChange(event) {
-		const oNewDate = this._calendarDate;
-		const newMonthIndex = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		).getMonth();
-
-		oNewDate.setMonth(newMonthIndex);
-		this.timestamp = oNewDate.valueOf() / 1000;
-
-		this._hideMonthPicker();
-
-		this._focusFirstDayOfMonth(oNewDate);
-	}
-
-	_focusFirstDayOfMonth(targetDate) {
-		let fistDayOfMonthIndex = -1;
-
-		// focus first day of the month
-		const dayPicker = this.shadowRoot.querySelector("ui5-daypicker");
-
-		dayPicker._getVisibleDays(targetDate).forEach((date, index) => {
-			if (date.getDate() === 1 && (fistDayOfMonthIndex === -1)) {
-				fistDayOfMonthIndex = index;
-			}
-		});
-
-		dayPicker._itemNav.currentIndex = fistDayOfMonthIndex;
-		dayPicker._itemNav.focusCurrent();
-	}
-
-	_handleSelectedYearChange(event) {
-		const oNewDate = CalendarDate.fromTimestamp(
-			event.detail.timestamp * 1000,
-			this._primaryCalendarType
-		);
-		oNewDate.setMonth(0);
-		oNewDate.setDate(1);
-
-		this.timestamp = oNewDate.valueOf() / 1000;
-
-		this._hideYearPicker();
-
-		this._focusFirstDayOfMonth(oNewDate);
-	}
-
-	_handleMonthButtonPress() {
-		this._hideYearPicker();
-
-		this[`_${this._monthPicker._hidden ? "show" : "hide"}MonthPicker`]();
-	}
-
-	_handleYearButtonPress() {
-		this._hideMonthPicker();
-
-		this[`_${this._yearPicker._hidden ? "show" : "hide"}YearPicker`]();
-	}
-
-	_handlePrevious() {
-		if (this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showPrevMonth();
-		} else if (this._monthPicker._hidden && !this._yearPicker._hidden) {
-			this._showPrevPageYears();
-		} else if (!this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showPrevYear();
-		}
-	}
-
-	_handleNext() {
-		if (this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showNextMonth();
-		} else if (this._monthPicker._hidden && !this._yearPicker._hidden) {
-			this._showNextPageYears();
-		} else if (!this._monthPicker._hidden && this._yearPicker._hidden) {
-			this._showNextYear();
-		}
-	}
-
-	_showNextMonth() {
-		const nextMonth = this._calendarDate;
-		nextMonth.setDate(1);
-		nextMonth.setMonth(nextMonth.getMonth() + 1);
-
-		if (nextMonth.getYear() > YearPicker._MAX_YEAR) {
-			return;
-		}
-
-		if (!this.isInValidRange(nextMonth.toLocalJSDate().valueOf())) {
-			return;
-		}
-
-		this._focusFirstDayOfMonth(nextMonth);
-		this.timestamp = nextMonth.valueOf() / 1000;
-	}
-
-	_showPrevMonth() {
-		let iNewMonth = this._month - 1,
-			iNewYear = this._calendarDate.getYear();
-
-		// focus first day of the month
-		const dayPicker = this.shadowRoot.querySelector("ui5-daypicker");
-		const currentMonthDate = dayPicker._calendarDate.setMonth(dayPicker._calendarDate.getMonth());
-		const lastMonthDate = dayPicker._calendarDate.setMonth(dayPicker._calendarDate.getMonth() - 1);
-
-		// set the date to last day of last month
-		currentMonthDate.setDate(-1);
-
-		// find the index of the last day
-		let lastDayOfMonthIndex = -1;
-
-		if (!this.isInValidRange(currentMonthDate.toLocalJSDate().valueOf())) {
-			return;
-		}
-
-		dayPicker._getVisibleDays(lastMonthDate).forEach((date, index) => {
-			const isSameDate = currentMonthDate.getDate() === date.getDate();
-			const isSameMonth = currentMonthDate.getMonth() === date.getMonth();
-
-			if (isSameDate && isSameMonth) {
-				lastDayOfMonthIndex = (index + 1);
-			}
-		});
-
-		const weekDaysCount = 7;
-
-		if (lastDayOfMonthIndex !== -1) {
-			// find the DOM for the last day index
-			const lastDay = dayPicker.shadowRoot.querySelector(".ui5-dp-items-container").children[parseInt(lastDayOfMonthIndex / weekDaysCount)].children[(lastDayOfMonthIndex % weekDaysCount)];
-
-			// update current item in ItemNavigation
-			dayPicker._itemNav.current = lastDayOfMonthIndex;
-
-			// focus the item
-			lastDay.focus();
-		}
-
-		if (iNewMonth > 11) {
-			iNewMonth = 0;
-			iNewYear = this._calendarDate.getYear() + 1;
-		}
-
-		if (iNewMonth < 0) {
-			iNewMonth = 11;
-			iNewYear = this._calendarDate.getYear() - 1;
-		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(iNewYear);
-		oNewDate.setMonth(iNewMonth);
-
-
-		if (oNewDate.getYear() < YearPicker._MIN_YEAR) {
-			return;
-		}
-		this.timestamp = oNewDate.valueOf() / 1000;
-	}
-
-	_showNextYear() {
-		if (this._calendarDate.getYear() === YearPicker._MAX_YEAR) {
-			return;
-		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(this._calendarDate.getYear() + 1);
-
-		this.timestamp = oNewDate.valueOf() / 1000;
-	}
-
-	_showPrevYear() {
-		if (this._calendarDate.getYear() === YearPicker._MIN_YEAR) {
-			return;
-		}
-
-		const oNewDate = this._calendarDate;
-		oNewDate.setYear(this._calendarDate.getYear() - 1);
-
-		this.timestamp = oNewDate.valueOf() / 1000;
-	}
-
-	_showNextPageYears() {
-		if (!this._isYearInRange(this._yearPicker.timestamp,
-			YearPicker._ITEMS_COUNT - YearPicker._MIDDLE_ITEM_INDEX,
-			YearPicker._MIN_YEAR,
-			YearPicker._MAX_YEAR)) {
-			return;
-		}
-
-		if (this.minDate && !this._isYearInRange(this._yearPicker.timestamp,
-			YearPicker._ITEMS_COUNT - YearPicker._MIDDLE_ITEM_INDEX,
-			this.getFormat().parse(this.minDate).getFullYear(),
-			YearPicker._MAX_YEAR)) {
-			return;
-		}
-
-		if (this.maxDate && !this._isYearInRange(this._yearPicker.timestamp,
-			YearPicker._ITEMS_COUNT - YearPicker._MIDDLE_ITEM_INDEX,
-			YearPicker._MIN_YEAR,
-			this.getFormat().parse(this.maxDate).getFullYear())) {
-			return;
-		}
-
-		this._yearPicker = Object.assign({}, this._yearPicker, {
-			timestamp: this._yearPicker.timestamp + (31536000 * YearPicker._ITEMS_COUNT),
-		});
-
-		this._isShiftingYears = true;
-	}
-
-	_showPrevPageYears() {
-		if (!this._isYearInRange(this._yearPicker.timestamp,
-			-YearPicker._MIDDLE_ITEM_INDEX - 1,
-			YearPicker._MIN_YEAR,
-			YearPicker._MAX_YEAR)) {
-			return;
-		}
-
-		if (this.minDate && !this._isYearInRange(this._yearPicker.timestamp,
-			-YearPicker._MIDDLE_ITEM_INDEX - 1,
-			this.getFormat().parse(this.minDate).getFullYear(),
-			YearPicker._MAX_YEAR)) {
-			return;
-		}
-
-		if (this.maxDate && !this._isYearInRange(this._yearPicker.timestamp,
-			-YearPicker._MIDDLE_ITEM_INDEX - 1,
-			YearPicker._MIN_YEAR,
-			this.getFormat().parse(this.maxDate).getFullYear())) {
-			return;
-		}
-
-		this._yearPicker = Object.assign({}, this._yearPicker, {
-			timestamp: this._yearPicker.timestamp - (31536000 * YearPicker._ITEMS_COUNT),
-		});
-
-		this._isShiftingYears = true;
-	}
-
-	_showMonthPicker() {
-		this._monthPicker = Object.assign({}, this._monthPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._monthPicker.timestamp = this._timestamp;
-		this._monthPicker._hidden = false;
-		this._oMonth._hidden = true;
-
-		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
-
-		this._calendarWidth = calendarRect.width.toString();
-		this._calendarHeight = calendarRect.height.toString();
-	}
-
-	_showYearPicker() {
-		this._yearPicker = Object.assign({}, this._yearPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._yearPicker.timestamp = this._timestamp;
-		this._yearPicker._selectedYear = this._calendarDate.getYear();
-		this._yearPicker._hidden = false;
-		this._oMonth._hidden = true;
-
-		const calendarRect = this.shadowRoot.querySelector(".ui5-cal-root").getBoundingClientRect();
-
-		this._calendarWidth = calendarRect.width.toString();
-		this._calendarHeight = calendarRect.height.toString();
-	}
-
-	_hideMonthPicker() {
-		this._monthPicker = Object.assign({}, this._monthPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._monthPicker._hidden = true;
-		this._oMonth._hidden = false;
-	}
-
-	_hideYearPicker() {
-		this._yearPicker = Object.assign({}, this._yearPicker);
-		this._oMonth = Object.assign({}, this._oMonth);
-
-		this._yearPicker._hidden = true;
-		this._oMonth._hidden = false;
-	}
-
-	_isYearInRange(timestamp, yearsoffset, min, max) {
-		if (timestamp) {
-			const oCalDate = CalendarDate.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
-			oCalDate.setMonth(0);
-			oCalDate.setDate(1);
-			oCalDate.setYear(oCalDate.getYear() + yearsoffset);
-			return oCalDate.getYear() >= min && oCalDate.getYear() <= max;
-		}
-	}
-
-	get classes() {
-		return {
-			main: {
-				"ui5-cal-root": true,
-			},
-			dayPicker: {
-				".ui5-daypicker--hidden": !this._yearPicker._hidden || !this._monthPicker._hidden,
-			},
-			yearPicker: {
-				"ui5-yearpicker--hidden": this._yearPicker._hidden,
-			},
-			monthPicker: {
-				"ui5-monthpicker--hidden": this._monthPicker._hidden,
-			},
-		};
-	}
-
-	/**
-	 * Checks if a date is in range between minimum and maximum date
-	 * @param {object} value
-	 * @public
-	 */
-	isInValidRange(value = "") {
-		const pickedDate = CalendarDate.fromTimestamp(value).toLocalJSDate(),
-			minDate = this._minDate && new Date(this._minDate),
-			maxDate = this._maxDate && new Date(this._maxDate);
-
-		if (minDate && maxDate) {
-			if (minDate <= pickedDate && maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (minDate && !maxDate) {
-			if (minDate <= pickedDate) {
-				return true;
-			}
-		} else if (maxDate && !minDate) {
-			if (maxDate >= pickedDate) {
-				return true;
-			}
-		} else if (!maxDate && !minDate) {
-			return true;
-		}
-
-		return false;
-	}
-
-	getFormat() {
-		if (this._isPattern) {
-			this._oDateFormat = DateFormat.getInstance({
-				pattern: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		} else {
-			this._oDateFormat = DateFormat.getInstance({
-				style: this._formatPattern,
-				calendarType: this._primaryCalendarType,
-			});
-		}
-		return this._oDateFormat;
-	}
-
-	get styles() {
-		return {
-			main: {
-				"height": `${this._calendarHeight ? `${this._calendarHeight}px` : "auto"}`,
-				"width": `${this._calendarWidth ? `${this._calendarWidth}px` : "auto"}`,
-			},
-		};
-	}
-
-	static async onDefine() {
-		await Promise.all([
-			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			CalendarHeader.define(),
-			DayPicker.define(),
-			MonthPicker.define(),
-			YearPicker.define(),
-		]);
-	}
-}
-
+let Calendar = Calendar_1 = class Calendar extends CalendarPart {
+    constructor() {
+        super();
+        /**
+         * Defines the type of selection used in the calendar component.
+         * Accepted property values are:
+         *
+         * - `CalendarSelectionMode.Single` - enables a single date selection.(default value)
+         * - `CalendarSelectionMode.Range` - enables selection of a date range.
+         * - `CalendarSelectionMode.Multiple` - enables selection of multiple dates.
+         * @default "Single"
+         * @public
+         */
+        this.selectionMode = "Single";
+        /**
+         * Defines the visibility of the week numbers column.
+         *
+         * **Note:** For calendars other than Gregorian,
+         * the week numbers are not displayed regardless of what is set.
+         * @default false
+         * @public
+         */
+        this.hideWeekNumbers = false;
+        /**
+         * Which picker is currently visible to the user: day/month/year/yearRange
+         * @private
+         */
+        this._currentPicker = "day";
+        this._previousButtonDisabled = false;
+        this._nextButtonDisabled = false;
+        this._pickersMode = "DAY_MONTH_YEAR";
+        this._valueIsProcessed = false;
+        /**
+         * Defines the selected item type of the calendar legend item (if such exists).
+         * @private
+         */
+        this._selectedItemType = "None";
+        this._valueIsProcessed = false;
+    }
+    /**
+     * @private
+     */
+    get _selectedDatesTimestamps() {
+        let selectedDates = [];
+        if (this.selectionMode === CalendarSelectionMode.Range) {
+            const range = this.dates.find(date => date.hasAttribute("ui5-date-range"));
+            const startDate = range && range.startValue && this.getFormat().parse(range.startValue, true);
+            const endDate = range && range.endValue && this.getFormat().parse(range.endValue, true);
+            if (startDate) {
+                selectedDates.push(startDate.getTime() / 1000);
+            }
+            if (endDate) {
+                selectedDates.push(endDate.getTime() / 1000);
+            }
+        }
+        else {
+            selectedDates = this.dates
+                .filter(dateElement => {
+                return dateElement.hasAttribute("ui5-date")
+                    && dateElement.value
+                    && this._isValidCalendarDate(dateElement.value)
+                    && this._getTimeStampFromString(dateElement.value);
+            })
+                .map(dateElement => Number(this._getTimeStampFromString(dateElement.value)) / 1000);
+        }
+        return selectedDates;
+    }
+    /**
+     * @private
+     */
+    _setSelectedDates(selectedDates) {
+        const selectedUTCDates = selectedDates.map(timestamp => this.getFormat().format(UI5Date.getInstance(timestamp * 1000), true));
+        if (this.selectionMode === CalendarSelectionMode.Range) {
+            // Create tags for the selected dates that don't already exist in DOM
+            if (selectedUTCDates.length) {
+                let dateRange = this.dates.find(dateElement => dateElement.hasAttribute("ui5-date-range") && dateElement.startValue === selectedUTCDates[0]);
+                if (!dateRange) {
+                    dateRange = document.createElement(CalendarDateRange.getMetadata().getTag());
+                    dateRange.startValue = selectedUTCDates[0];
+                    this.appendChild(dateRange);
+                }
+                else {
+                    dateRange.endValue = selectedUTCDates[1];
+                }
+                // Remove all elements for dates that are no longer selected
+                this.dates
+                    .filter(dateElement => {
+                    return dateElement.hasAttribute("ui5-date")
+                        || (dateRange && dateElement.startValue !== dateRange.startValue);
+                })
+                    .forEach(dateElement => {
+                    this.removeChild(dateElement);
+                });
+            }
+        }
+        else {
+            const valuesInDOM = this._selectedDatesTimestamps.map(timestamp => this.getFormat().format(UI5Date.getInstance(timestamp * 1000)));
+            // Remove all elements for dates that are no longer selected
+            this.dates
+                .filter(dateElement => {
+                return dateElement.hasAttribute("ui5-date-range")
+                    || (dateElement.hasAttribute("ui5-date") && !selectedUTCDates.includes(dateElement.value));
+            })
+                .forEach(dateElement => {
+                this.removeChild(dateElement);
+            });
+            // Create tags for the selected dates that don't already exist in DOM
+            selectedUTCDates
+                .filter(value => !valuesInDOM.includes(value))
+                .forEach(value => {
+                const dateElement = document.createElement(CalendarDate.getMetadata().getTag());
+                dateElement.value = value;
+                this.appendChild(dateElement);
+            });
+        }
+    }
+    _isValidCalendarDate(dateString) {
+        const date = this.getFormat().parse(dateString);
+        return !!date;
+    }
+    get _disabledDates() {
+        const validDisabledDateRanges = this.disabledDates.filter(dateRange => {
+            const startValue = dateRange.startValue;
+            const endValue = dateRange.endValue;
+            return (startValue && this._isValidCalendarDate(startValue)) || (endValue && this._isValidCalendarDate(endValue));
+        });
+        return validDisabledDateRanges.map(dateRange => ({
+            startValue: dateRange.startValue,
+            endValue: dateRange.endValue,
+        }));
+    }
+    get _specialCalendarDates() {
+        const hasSelectedType = this._specialDates.some(date => date.type === this._selectedItemType);
+        const validSpecialDates = this._specialDates.filter(date => {
+            const dateType = date.type;
+            const dateValue = date.value;
+            const isTypeMatch = hasSelectedType
+                ? (dateType === this._selectedItemType || dateType === "Working" || dateType === "NonWorking")
+                : true;
+            return isTypeMatch && dateValue && this._isValidCalendarDate(dateValue);
+        });
+        validSpecialDates.forEach(date => {
+            const refLegendItem = this.calendarLegend.length ? this.calendarLegend[0].items.find(item => item.type === date.type) : undefined;
+            date._tooltip = refLegendItem?.text || "";
+        });
+        const uniqueDates = new Set();
+        const uniqueSpecialDates = [];
+        validSpecialDates.forEach(date => {
+            const dateFromValue = this.getFormat().parse(date.value);
+            const timestamp = dateFromValue.getTime();
+            if (!uniqueDates.has(timestamp)) {
+                uniqueDates.add(timestamp);
+                const specialDateTimestamp = CalendarDateComponent.fromLocalJSDate(dateFromValue).valueOf() / 1000;
+                const type = date.type;
+                const tooltip = date._tooltip;
+                uniqueSpecialDates.push({ specialDateTimestamp, type, tooltip });
+            }
+        });
+        return uniqueSpecialDates;
+    }
+    _onCalendarLegendSelectionChange(e) {
+        const defaultTypes = ["Working", "NonWorking", "Selected", "Today"];
+        this._selectedItemType = e.detail.item.type;
+        if (defaultTypes.includes(this._selectedItemType)) {
+            this._selectedItemType = "None"; // In order to avoid filtering of default types
+        }
+    }
+    /**
+     * Makes sure that _currentPicker is always set to a value, allowed by _pickersMode
+     */
+    _normalizeCurrentPicker() {
+        if (this._currentPicker === "day" && this._pickersMode !== CalendarPickersMode.DAY_MONTH_YEAR) {
+            this.switchToMonthPicker(true);
+        }
+        if (this._currentPicker === "month" && this._pickersMode === CalendarPickersMode.YEAR) {
+            this.switchToYearPicker(true);
+        }
+    }
+    onBeforeRendering() {
+        this._normalizeCurrentPicker();
+        if (!this._valueIsProcessed) {
+            if (this._selectedDatesTimestamps) {
+                this.timestamp = this._selectedDatesTimestamps[0];
+            }
+            this._valueIsProcessed = true;
+        }
+    }
+    async onAfterRendering() {
+        await renderFinished(); // Await for the current picker to render and then ask if it has previous/next pages
+        this._previousButtonDisabled = !this._currentPickerDOM._hasPreviousPage();
+        this._nextButtonDisabled = !this._currentPickerDOM._hasNextPage();
+        const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+        const localeData = getCachedLocaleDataInstance(getLocale());
+        this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+        this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+        const currentYearRange = this._currentYearRange;
+        const { rangeStartText, rangeEndText } = this._formatYearRangeText(currentYearRange);
+        this._headerYearRangeButtonText = `${rangeStartText} - ${rangeEndText}`;
+        this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
+    }
+    onInvalidation(changeInfo) {
+        if (changeInfo.reason === "childchange") {
+            this._valueIsProcessed = false;
+        }
+    }
+    /**
+     * The user clicked the "month" button in the header
+     */
+    onHeaderMonthButtonPress() {
+        this.switchToMonthPicker();
+        this.fireDecoratorEvent("show-month-view");
+    }
+    async switchToDayPicker(suppressFocus = false) {
+        this._currentPicker = "day";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    async switchToMonthPicker(suppressFocus = false) {
+        this._currentPicker = "month";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    /**
+     * The user clicked the "year" button in the header
+     */
+    onHeaderYearButtonPress() {
+        this.switchToYearPicker();
+        this.fireDecoratorEvent("show-year-view");
+    }
+    async switchToYearPicker(suppressFocus = false) {
+        this._currentPicker = "year";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    /**
+     * The user clicked the "year range" button in the YearPicker header
+     */
+    onHeaderYearRangeButtonPress() {
+        this.switchToYearRangePicker();
+        this.fireDecoratorEvent("show-year-range-view");
+    }
+    async switchToYearRangePicker(suppressFocus = false) {
+        this._currentPicker = "yearrange";
+        if (!suppressFocus) {
+            await renderFinished();
+            this._currentPickerDOM.focus();
+        }
+    }
+    get _currentPickerDOM() {
+        // Calendar's shadowRoot and all the pickers are always present - the "!" is safe to be used.
+        return this.shadowRoot.querySelector(`[ui5-${this._currentPicker}picker]`);
+    }
+    /**
+     * Returns the focusable element inside the Calendar (the current picker)
+     * @override
+     */
+    getFocusDomRef() {
+        return this._currentPickerDOM;
+    }
+    /**
+     * The year clicked the "Previous" button in the header
+     */
+    onHeaderPreviousPress() {
+        this._currentPickerDOM._showPreviousPage();
+    }
+    /**
+     * The year clicked the "Next" button in the header
+     */
+    onHeaderNextPress() {
+        this._currentPickerDOM._showNextPage();
+    }
+    _setSecondaryCalendarTypeButtonText() {
+        const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+        this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+        const currentYearRange = this._currentYearRange;
+        const { rangeStart, rangeEnd } = this._createYearRangeDates(currentYearRange);
+        const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+            .firstDate;
+        const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+            .lastDate;
+        this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
+    }
+    get secondaryCalendarTypeButtonText() {
+        if (!this.hasSecondaryCalendarType) {
+            return;
+        }
+        const localDate = UI5Date.getInstance(this._timestamp * 1000);
+        const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+        const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, this._timestamp);
+        const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this._secondaryCalendarType);
+        const secondYearText = secondYearFormat.format(localDate);
+        return {
+            yearButtonText: secondYearText,
+            monthButtonText: secondMonthInfo.text,
+            monthButtonInfo: secondMonthInfo.textInfo,
+        };
+    }
+    /**
+     * The month button is hidden when the month picker or year picker is shown
+     * @private
+     */
+    get _isHeaderMonthButtonHidden() {
+        return this._currentPicker !== "day";
+    }
+    /**
+     * The year range picker button is shown only in the year picker
+     * @private
+     */
+    get _isHeaderYearRangeButtonHidden() {
+        return this._currentPicker !== "year";
+    }
+    /**
+     * The year button is shown only in the day & month pickers
+     * @private
+     */
+    get _isHeaderYearButtonHidden() {
+        return !(this._currentPicker === "day" || this._currentPicker === "month");
+    }
+    get _isDayPickerHidden() {
+        return this._currentPicker !== "day";
+    }
+    get _isMonthPickerHidden() {
+        return this._currentPicker !== "month";
+    }
+    get _isYearPickerHidden() {
+        return this._currentPicker !== "year";
+    }
+    get _isYearRangePickerHidden() {
+        return this._currentPicker !== "yearrange";
+    }
+    get _currentYearRange() {
+        const rangeSize = this.hasSecondaryCalendarType ? 8 : 20;
+        const yearsOffset = this.hasSecondaryCalendarType ? 2 : 9;
+        const currentYear = this._calendarDate.getYear();
+        // On first load, current year should be the 3rd or 10th year in the range (depending on the calendar type)
+        if (!this._rangeStartYear) {
+            this._rangeStartYear = currentYear - yearsOffset;
+        }
+        // If page navigation occured, update the current range start year
+        this._rangeStartYear += Math.floor((currentYear - this._rangeStartYear) / rangeSize) * rangeSize;
+        // Normalize range start year to be between the min and absolute max year
+        const minYear = this._minDate.getYear();
+        if (currentYear - rangeSize < minYear) {
+            this._rangeStartYear = minYear;
+        }
+        const absoluteMaxYear = getMaxCalendarDate(this._primaryCalendarType).getYear();
+        if (currentYear + rangeSize > absoluteMaxYear) {
+            this._rangeStartYear = absoluteMaxYear - rangeSize + 1;
+        }
+        return {
+            startYear: this._rangeStartYear,
+            endYear: this._rangeStartYear + rangeSize - 1,
+        };
+    }
+    _fireEventAndUpdateSelectedDates(selectedDates) {
+        const datesValues = selectedDates.map(timestamp => {
+            const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
+            return this.getFormat().format(calendarDate.toUTCJSDate(), true);
+        });
+        const defaultPrevented = !this.fireDecoratorEvent("selection-change", { timestamp: this.timestamp, selectedDates: [...selectedDates], selectedValues: datesValues });
+        if (!defaultPrevented) {
+            this._setSelectedDates(selectedDates);
+        }
+    }
+    onSelectedDatesChange(e) {
+        this.timestamp = e.detail.timestamp;
+        this._fireEventAndUpdateSelectedDates(e.detail.dates);
+    }
+    onSelectedMonthChange(e) {
+        this.timestamp = e.detail.timestamp;
+        if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
+            this.switchToDayPicker();
+        }
+        else {
+            this._fireEventAndUpdateSelectedDates(e.detail.dates);
+        }
+    }
+    onSelectedYearChange(e) {
+        this.timestamp = e.detail.timestamp;
+        if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
+            this.switchToDayPicker();
+        }
+        else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
+            this.switchToMonthPicker();
+        }
+        else {
+            this._fireEventAndUpdateSelectedDates(e.detail.dates);
+        }
+    }
+    onSelectedYearRangeChange(e) {
+        this.timestamp = e.detail.timestamp;
+        this.switchToYearPicker();
+    }
+    async onNavigate(e) {
+        this.timestamp = e.detail.timestamp;
+        await renderFinished();
+        this._currentPickerDOM.focus();
+    }
+    _onkeydown(e) {
+        if (isF4(e) && this._currentPicker !== "month") {
+            this.switchToMonthPicker();
+            this.fireDecoratorEvent("show-month-view");
+        }
+        if (!isF4Shift(e)) {
+            return;
+        }
+        if (this._currentPicker !== "year") {
+            this.switchToYearPicker();
+            this.fireDecoratorEvent("show-year-view");
+        }
+        else {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
+    }
+    _onLegendFocusOut() {
+        this._selectedItemType = "None";
+    }
+    get _specialDates() {
+        return this.getSlottedNodes("specialDates");
+    }
+    get classes() {
+        return {
+            prevButton: {
+                "ui5-calheader-arrowbtn": true,
+                "ui5-calheader-arrowbtn-disabled": this._previousButtonDisabled,
+            },
+            nextButton: {
+                "ui5-calheader-arrowbtn": true,
+                "ui5-calheader-arrowbtn-disabled": this._nextButtonDisabled,
+            },
+        };
+    }
+    get accInfo() {
+        const currentYearRange = this._currentYearRange;
+        const { rangeStartText, rangeEndText } = this._formatYearRangeText(currentYearRange);
+        const headerMonthButtonText = this.hasSecondaryCalendarType
+            ? `${this._headerMonthButtonText}, ${this.secondMonthButtonText}` : `${this._headerMonthButtonText}`;
+        // Get base labels
+        const monthLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON, headerMonthButtonText);
+        const yearLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON, this._headerYearButtonText);
+        const yearRangeLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON, rangeStartText, rangeEndText);
+        let nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE);
+        let prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE);
+        if (this._currentPicker === "month") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE);
+        }
+        else if (this._currentPicker === "year" || this._currentPicker === "yearrange") {
+            nextBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE);
+            prevBtnLabel = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE);
+        }
+        // Get shortcuts
+        const monthShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT);
+        const yearShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT);
+        const yearRangeShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT);
+        const nextBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT);
+        const prevBtnShortcut = Calendar_1.i18nBundle?.getText(CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT);
+        return {
+            ariaLabelMonthButton: monthLabel,
+            ariaLabelYearButton: yearLabel,
+            ariaLabelYearRangeButton: yearRangeLabel,
+            ariaLabelNextButton: nextBtnLabel,
+            ariaLabelPrevButton: prevBtnLabel,
+            // Keyboard shortcuts for aria-keyshortcuts
+            keyShortcutMonthButton: monthShortcut,
+            keyShortcutYearButton: yearShortcut,
+            keyShortcutYearRangeButton: yearRangeShortcut,
+            keyShortcutNextButton: nextBtnShortcut,
+            keyShortcutPrevButton: prevBtnShortcut,
+            // Tooltips combining label and shortcut
+            tooltipMonthButton: `${monthLabel} (${monthShortcut})`,
+            tooltipYearButton: `${yearLabel} (${yearShortcut})`,
+            tooltipYearRangeButton: `${yearRangeLabel} (${yearRangeShortcut})`,
+            tooltipNextButton: `${nextBtnLabel} (${nextBtnShortcut})`,
+            tooltipPrevButton: `${prevBtnLabel} (${prevBtnShortcut})`,
+        };
+    }
+    /**
+     * Helper method to create CalendarDateComponent instances for year range
+     * @private
+     */
+    _createYearRangeDates(yearRange, calendarType = this._primaryCalendarType) {
+        const rangeStart = new CalendarDateComponent(this._calendarDate, calendarType);
+        const rangeEnd = new CalendarDateComponent(this._calendarDate, calendarType);
+        rangeStart.setYear(yearRange.startYear);
+        rangeEnd.setYear(yearRange.endYear);
+        return { rangeStart, rangeEnd };
+    }
+    /**
+     * Helper method to format year range text
+     * @private
+     */
+    _formatYearRangeText(yearRange) {
+        const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
+        const { rangeStart, rangeEnd } = this._createYearRangeDates(yearRange, this.primaryCalendarType);
+        const rangeStartText = yearFormat.format(rangeStart.toLocalJSDate());
+        const rangeEndText = yearFormat.format(rangeEnd.toLocalJSDate());
+        return { rangeStartText, rangeEndText };
+    }
+    get secondMonthButtonText() {
+        const secondMonthButtonText = this.secondaryCalendarTypeButtonText?.monthButtonText;
+        return secondMonthButtonText;
+    }
+    onMonthButtonKeyDown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this.switchToMonthPicker();
+            this.fireDecoratorEvent("show-month-view");
+        }
+    }
+    onMonthButtonKeyUp(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+            this.switchToMonthPicker();
+            this.fireDecoratorEvent("show-month-view");
+        }
+    }
+    onYearButtonKeyDown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this.switchToYearPicker();
+            this.fireDecoratorEvent("show-year-view");
+        }
+    }
+    onYearButtonKeyUp(e) {
+        if (isSpace(e)) {
+            this.switchToYearPicker();
+            this.fireDecoratorEvent("show-year-view");
+        }
+    }
+    onYearRangeButtonKeyDown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
+    }
+    onYearRangeButtonKeyUp(e) {
+        if (isSpace(e)) {
+            this.switchToYearRangePicker();
+            this.fireDecoratorEvent("show-year-range-view");
+        }
+    }
+    _handleNavigationButtonKeyDown(e, isDisabled, action) {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (e.button !== 0) {
+            return;
+        }
+        action();
+        e.preventDefault();
+    }
+    onPrevButtonClick(e) {
+        this._handleNavigationButtonKeyDown(e, this._previousButtonDisabled, () => this.onHeaderPreviousPress());
+    }
+    onNextButtonClick(e) {
+        this._handleNavigationButtonKeyDown(e, this._nextButtonDisabled, () => this.onHeaderNextPress());
+    }
+    /**
+     * Returns an array of UTC timestamps, representing the selected dates.
+     * @protected
+     * @deprecated
+     */
+    get selectedDates() {
+        return this._selectedDatesTimestamps;
+    }
+    /**
+     * Creates instances of `ui5-date` or `ui5-date-range` inside this `ui5-calendar` with values, equal to the provided UTC timestamps
+     * @protected
+     * @deprecated
+     * @param selectedDates Array of UTC timestamps
+     */
+    set selectedDates(selectedDates) {
+        this._setSelectedDates(selectedDates);
+    }
+};
+__decorate([
+    property()
+], Calendar.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], Calendar.prototype, "hideWeekNumbers", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_currentPicker", void 0);
+__decorate([
+    property({ type: Boolean })
+], Calendar.prototype, "_previousButtonDisabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], Calendar.prototype, "_nextButtonDisabled", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_headerMonthButtonText", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_headerYearButtonText", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_headerYearButtonTextSecType", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_headerYearRangeButtonText", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_headerYearRangeButtonTextSecType", void 0);
+__decorate([
+    property({ noAttribute: true })
+], Calendar.prototype, "_pickersMode", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "calendarLegend", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], Calendar.prototype, "dates", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "specialDates", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true })
+], Calendar.prototype, "disabledDates", void 0);
+__decorate([
+    property()
+], Calendar.prototype, "_selectedItemType", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Calendar, "i18nBundle", void 0);
+Calendar = Calendar_1 = __decorate([
+    customElement({
+        tag: "ui5-calendar",
+        fastNavigation: true,
+        template: CalendarTemplate,
+        styles: [calendarCSS, CalendarHeaderCss],
+    })
+    /**
+     * Fired when the selected dates change.
+     *
+     * **Note:** If you call `preventDefault()` for this event, the component will not
+     * create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
+     * @param {Array<string>} selectedValues The selected dates
+     * @param {Array<number>} selectedDates The selected dates as UTC timestamps
+     * @public
+     */
+    ,
+    event("selection-change", {
+        bubbles: true,
+        cancelable: true,
+    }),
+    event("show-month-view", {
+        bubbles: true,
+    }),
+    event("show-year-view", {
+        bubbles: true,
+    }),
+    event("show-year-range-view", {
+        bubbles: true,
+    })
+], Calendar);
 Calendar.define();
-
 export default Calendar;
+//# sourceMappingURL=Calendar.js.map