@ui5/webcomponents 0.0.0-32b659ddc → 0.0.0-33e059bcd

package/dist/Calendar.js

@@ -1,695 +1,441 @@
-import "@ui5/webcomponents-base/dist/shims/Core-shim.js";
-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 { getLocale } from "@ui5/webcomponents-base/dist/LocaleProvider.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { getFormatLocale } from "@ui5/webcomponents-base/dist/FormatSettings.js";
-import DateFormat from "@ui5/webcomponents-utils/dist/sap/ui/core/format/DateFormat.js";
-import LocaleData from "@ui5/webcomponents-utils/dist/sap/ui/core/LocaleData.js";
-import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.js";
-import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.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;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.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 { isF4, isF4Shift, } 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 CalendarDate from "./CalendarDate.js";
+import CalendarPart from "./CalendarPart.js";
 import CalendarHeader from "./CalendarHeader.js";
 import DayPicker from "./DayPicker.js";
 import MonthPicker from "./MonthPicker.js";
 import YearPicker from "./YearPicker.js";
-
+import CalendarSelectionMode from "./types/CalendarSelectionMode.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
 // Default calendar for bundling
-import "@ui5/webcomponents-utils/dist/sap/ui/core/date/Gregorian.js";
-
+import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 // Template
 import CalendarTemplate from "./generated/templates/CalendarTemplate.lit.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 {string}
-		 * @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
-		 * @param {Array} dates The selected dates' timestamps
-		 * @public
-		 */
-		selectedDatesChange: { type: Array },
-	},
-};
-
 /**
  * @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-datepicker</code>.
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-calendar</code> component allows users to select one or more dates.
+ * <br><br>
+ * Currently selected dates are represented with instances of <code>ui5-date</code> as
+ * children of the <code>ui5-calendar</code>. The value property of each <code>ui5-date</code> must be a
+ * date string, correctly formatted according to the <code>ui5-calendar</code>'s <code>formatPattern</code> property.
+ * Whenever the user changes the date selection, <code>ui5-calendar</code> will automatically create/remove instances
+ * of <code>ui5-date</code> in itself, unless you prevent this behavior by calling <code>preventDefault()</code> for the
+ * <code>selected-dates-change</code> event. This is useful if you want to control the selected dates externally.
+ * <br><br>
+ *
+ * <h3>Usage</h3>
+ *
+ * The user can navigate to a particular date by:
+ * <br>
+ * <ul>
+ * <li>Pressing over a month inside the months view</li>
+ * <li>Pressing over an year inside the years view</li>
+ * </ul>
+ * <br>
+ * The user can confirm a date selection by pressing over a date inside the days view.
+ * <br><br>
+ *
+ * <h3>Keyboard Handling</h3>
+ * The <code>ui5-calendar</code> 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:
+ * <br>
+ * - Day picker: <br>
+ * <ul>
+ * <li>[F4] - Shows month picker</li>
+ * <li>[SHIFT] + [F4] - Shows year picker</li>
+ * <li>[PAGEUP] - Navigate to the previous month</li>
+ * <li>[PAGEDOWN] - Navigate to the next month</li>
+ * <li>[SHIFT] + [PAGEUP] - Navigate to the previous year</li>
+ * <li>[SHIFT] + [PAGEDOWN] - Navigate to the next year</li>
+ * <li>[CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards</li>
+ * <li>[CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards</li>
+ * <li>[HOME] - Navigate to the first day of the week</li>
+ * <li>[END] - Navigate to the last day of the week</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first day of the month</li>
+ * <li>[CTRL] + [END] - Navigate to the last day of the month</li>
+ * </ul>
+ * <br>
+ * - Month picker: <br>
+ * <ul>
+ * <li>[PAGEUP] - Navigate to the previous year</li>
+ * <li>[PAGEDOWN] - Navigate to the next year</li>
+ * <li>[HOME] - Navigate to the first month of the current row</li>
+ * <li>[END] - Navigate to the last month of the current row</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first month of the current year</li>
+ * <li>[CTRL] + [END] - Navigate to the last month of the year</li>
+ * </ul>
+ * <br>
+ * - Year picker: <br>
+ * <ul>
+ * <li>[PAGEUP] - Navigate to the previous year range</li>
+ * <li>[PAGEDOWN] - Navigate the next year range</li>
+ * <li>[HOME] - Navigate to the first year of the current row</li>
+ * <li>[END] - Navigate to the last year of the current row</li>
+ * <li>[CTRL] + [HOME] - Navigate to the first year of the current year range</li>
+ * <li>[CTRL] + [END] - Navigate to the last year of the current year range</li>
+ * </ul>
+ * <br>
+ *
+ * <h4>Fast Navigation</h4>
+ * This component provides a build in fast navigation group which can be used via <code>F6 / Shift + F6</code> or <code> Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up</code>.
+ * In order to use this functionality, you need to import the following module:
+ * <code>import "@ui5/webcomponents-base/dist/features/F6Navigation.js"</code>
+ * <br><br>
+ *
+* <h3>Calendar types</h3>
+ * 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 <code>primaryCalendarType</code> property and import one or more of the following modules:
+ * <br><br>
+ *
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Japanese.js";</code>
+ * <br>
+ * <code>import "@ui5/webcomponents-localization/dist/features/calendar/Persian.js";</code>
+ * <br><br>
+ *
+ * Or, you can use the global configuration and set the <code>calendarType</code> key:
+ * <br>
+ * <code>
+ * &lt;script data-id="sap-ui-config" type="application/json"&gt;
+ * {
+ *	"calendarType": "Japanese"
+ * }
+ * &lt;/script&gt;
+ * </code>
+ *
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/Calendar";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.Calendar
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-calendar
+ * @extends CalendarPart
  * @public
+ * @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 = getFormatLocale();
-		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("selectedDatesChange", { 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 = class Calendar extends CalendarPart {
+    /**
+     * @private
+     */
+    get _selectedDatesTimestamps() {
+        return this.dates.map(date => {
+            const value = date.value;
+            const validValue = value && !!this.getFormat().parse(value);
+            return validValue ? this._getTimeStampFromString(value) / 1000 : undefined;
+        }).filter((date) => !!date);
+    }
+    constructor() {
+        super();
+        this._valueIsProcessed = false;
+    }
+    /**
+     * @private
+     */
+    _setSelectedDates(selectedDates) {
+        const selectedValues = selectedDates.map(timestamp => this.getFormat().format(new Date(timestamp * 1000), true)); // Format as UTC
+        const valuesInDOM = [...this.dates].map(dateElement => dateElement.value);
+        // Remove all elements for dates that are no longer selected
+        this.dates.filter(dateElement => !selectedValues.includes(dateElement.value)).forEach(dateElement => {
+            this.removeChild(dateElement);
+        });
+        // Create tags for the selected dates that don't already exist in DOM
+        selectedValues.filter(value => !valuesInDOM.includes(value)).forEach(value => {
+            const dateElement = document.createElement(CalendarDate.getMetadata().getTag());
+            dateElement.value = value;
+            this.appendChild(dateElement);
+        });
+    }
+    /**
+     * 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._currentPicker = "month";
+        }
+        if (this._currentPicker === "month" && this._pickersMode === CalendarPickersMode.YEAR) {
+            this._currentPicker = "year";
+        }
+    }
+    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()];
+        if (this._currentPicker === "year") {
+            const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+            const rangeEnd = new CalendarDateComponent(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));
+        }
+        this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
+    }
+    onInvalidation(changeInfo) {
+        if (changeInfo.reason === "childchange") {
+            this._valueIsProcessed = false;
+        }
+    }
+    /**
+     * The user clicked the "month" button in the header
+     */
+    onHeaderShowMonthPress(e) {
+        this._currentPickerDOM._autoFocus = false;
+        this._currentPicker = "month";
+        this.fireEvent("show-month-press", e);
+    }
+    /**
+     * The user clicked the "year" button in the header
+     */
+    onHeaderShowYearPress(e) {
+        this._currentPickerDOM._autoFocus = false;
+        this._currentPicker = "year";
+        this.fireEvent("show-year-press", e);
+    }
+    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]`);
+    }
+    /**
+     * 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 });
+        if (this._currentPicker === "year") {
+            const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+            const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+            rangeStart.setYear(this._currentPickerDOM._firstYear);
+            rangeEnd.setYear(this._currentPickerDOM._lastYear);
+            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._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
+        }
+        else {
+            this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+        }
+    }
+    get secondaryCalendarTypeButtonText() {
+        if (!this.hasSecondaryCalendarType) {
+            return;
+        }
+        const localDate = new Date(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, true);
+        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 === "month" || this._currentPicker === "year";
+    }
+    get _isDayPickerHidden() {
+        return this._currentPicker !== "day";
+    }
+    get _isMonthPickerHidden() {
+        return this._currentPicker !== "month";
+    }
+    get _isYearPickerHidden() {
+        return this._currentPicker !== "year";
+    }
+    _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.fireEvent("selected-dates-change", { timestamp: this.timestamp, dates: [...selectedDates], values: datesValues }, true);
+        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._currentPicker = "day";
+        }
+        else {
+            this._fireEventAndUpdateSelectedDates([this.timestamp]);
+        }
+        this._currentPickerDOM._autoFocus = true;
+    }
+    onSelectedYearChange(e) {
+        this.timestamp = e.detail.timestamp;
+        if (this._pickersMode === CalendarPickersMode.DAY_MONTH_YEAR) {
+            this._currentPicker = "day";
+        }
+        else if (this._pickersMode === CalendarPickersMode.MONTH_YEAR) {
+            this._currentPicker = "month";
+        }
+        else {
+            this._fireEventAndUpdateSelectedDates([this.timestamp]);
+        }
+        this._currentPickerDOM._autoFocus = true;
+    }
+    onNavigate(e) {
+        this.timestamp = e.detail.timestamp;
+    }
+    _onkeydown(e) {
+        if (isF4(e) && this._currentPicker !== "month") {
+            this._currentPicker = "month";
+        }
+        if (isF4Shift(e) && this._currentPicker !== "year") {
+            this._currentPicker = "year";
+        }
+    }
+    /**
+     * Returns an array of UTC timestamps, representing the selected dates.
+     * @protected
+     * @deprecated
+     */
+    get selectedDates() {
+        return this._selectedDatesTimestamps;
+    }
+    /**
+     * Creates instances of <code>ui5-date</code> inside this <code>ui5-calendar</code> with values, equal to the provided UTC timestamps
+     * @protected
+     * @deprecated
+     * @param selectedDates Array of UTC timestamps
+     */
+    set selectedDates(selectedDates) {
+        this._setSelectedDates(selectedDates);
+    }
+};
+__decorate([
+    property({
+        type: CalendarSelectionMode,
+        defaultValue: CalendarSelectionMode.Single,
+    })
+], Calendar.prototype, "selectionMode", void 0);
+__decorate([
+    property({ type: Boolean })
+], Calendar.prototype, "hideWeekNumbers", void 0);
+__decorate([
+    property({ defaultValue: "day" })
+], 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({ type: CalendarPickersMode, defaultValue: CalendarPickersMode.DAY_MONTH_YEAR, noAttribute: true })
+], Calendar.prototype, "_pickersMode", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], Calendar.prototype, "dates", void 0);
+Calendar = __decorate([
+    customElement({
+        tag: "ui5-calendar",
+        fastNavigation: true,
+        template: CalendarTemplate,
+        styles: calendarCSS,
+        dependencies: [
+            CalendarDate,
+            CalendarHeader,
+            DayPicker,
+            MonthPicker,
+            YearPicker,
+        ],
+    })
+    /**
+     * Fired when the selected dates change.
+     * <b>Note:</b> If you call <code>preventDefault()</code> for this event, the component will not
+     * create instances of <code>ui5-date</code> for the newly selected dates. In that case you should do this manually.
+     *
+     * @allowPreventDefault
+     * @param {Array<string>} values The selected dates
+     * @param {Array<number>} dates The selected dates as UTC timestamps
+     * @public
+     */
+    ,
+    event("selected-dates-change", {
+        detail: {
+            /**
+             * @public
+             */
+            dates: { type: Array },
+            /**
+             * @public
+             */
+            values: { type: Array },
+            timestamp: { type: Number },
+        },
+    }),
+    event("show-month-press"),
+    event("show-year-press")
+], Calendar);
 Calendar.define();
-
 export default Calendar;
+//# sourceMappingURL=Calendar.js.map