@ui5/webcomponents 0.0.0-63ca72189 → 0.0.0-6827fdc09

package/dist/DatePicker.js

@@ -1,739 +1,701 @@
-import "@ui5/webcomponents-base/dist/shims/jquery-shim.js";
-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 { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
-import { getLocale } from "@ui5/webcomponents-base/dist/LocaleProvider.js";
-import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import LocaleData from "@ui5/webcomponents-utils/dist/sap/ui/core/LocaleData.js";
-import DateFormat from "@ui5/webcomponents-utils/dist/sap/ui/core/format/DateFormat.js";
-import CalendarType from "@ui5/webcomponents-base/dist/dates/CalendarType.js";
-import CalendarDate from "@ui5/webcomponents-base/dist/dates/CalendarDate.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 DatePicker_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
+import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
+import getRoundedTimestamp from "@ui5/webcomponents-localization/dist/dates/getRoundedTimestamp.js";
+import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { isShow } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js";
-import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
-import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import "@ui5/webcomponents-icons/dist/icons/appointment-2.js";
-import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_ACC_TEXT, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
-import Icon from "./Icon.js";
-import ResponsivePopover from "./ResponsivePopover.js";
-import Calendar from "./Calendar.js";
-import Input from "./Input.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import { isPageUp, isPageDown, isPageUpShift, isPageDownShift, isPageUpShiftCtrl, isPageDownShiftCtrl, isShow, isF4, isEnter, isTabNext, isTabPrevious, isF6Next, isF6Previous, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import CalendarPickersMode from "./types/CalendarPickersMode.js";
+import "@ui5/webcomponents-icons/dist/appointment-2.js";
+import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE, FORM_TEXTFIELD_REQUIRED, DATEPICKER_POPOVER_ACCESSIBLE_NAME, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, } from "./generated/i18n/i18n-defaults.js";
+import DateComponentBase from "./DateComponentBase.js";
 import InputType from "./types/InputType.js";
-import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
-import DatePickerPopoverTemplate from "./generated/templates/DatePickerPopoverTemplate.lit.js";
-
+import IconMode from "./types/IconMode.js";
+import DatePickerTemplate from "./DatePickerTemplate.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";
 // Styles
 import datePickerCss from "./generated/themes/DatePicker.css.js";
 import datePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-datepicker",
-	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
-		/**
-		 * Defines a formatted date value.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		value: {
-			type: String,
-		},
-
-		/**
-		 * Visualizes the validation state of the Web Component, for example
-		 * <code>Error</code>, <code>Warning</code> and
-		 * <code>Success</code>.
-		 *
-		 * @type {string}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Determines the format, displayed in the input field.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		formatPattern: {
-			type: String,
-		},
-
-		/**
-		 * 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,
-		},
-
-		/**
-		 * Determines the calendar type.
-		 * The input value is formated according to the calendar type and the picker shows
-		 * months and years from the specified calendar. Available options are: "Gregorian", "Islamic", "Japanese", "Buddhist" and "Persian".
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		primaryCalendarType: {
-			type: CalendarType,
-		},
-
-		/**
-		 * Determines whether the <code>ui5-datepicker</code> is displayed as disabled.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines whether the <code>ui5-datepicker</code> is displayed as readonly.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines a short hint, intended to aid the user with data entry when the
-		 * <code>ui5-datepicker</code> has no value.
-		 *
-		 * <b>Note:</b> When no placeholder is set, the format pattern is displayed as a placeholder.
-		 * Passing an empty string as the value of this property will make the <code>ui5-datepicker</code> appear empty - without placeholder or format pattern.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 */
-		placeholder: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Determines the name with which the <code>ui5-datepicker</code> will be submitted in an HTML form.
-		 *
-		 * <b>Important:</b> For the <code>name</code> property to have effect, you must add the following import to your project:
-		 * <code>import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";</code>
-		 *
-		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the <code>ui5-datepicker</code> so that it can be submitted as
-		 * part of an HTML form. Do not use this property unless you need to submit a form.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		name: {
-			type: String,
-		},
-
-		_isPickerOpen: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_respPopoverConfig: {
-			type: Object,
-		},
-
-		_calendar: {
-			type: Object,
-		},
-	},
-	events: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
-
-		/**
-		 * Fired when the input operation has finished by pressing Enter or on focusout.
-		 *
-		 * @event
-		 * @public
-		*/
-		change: {},
-
-		/**
-		 * Fired when the value of the <code>ui5-datepicker</code> is changed at each key stroke.
-		 *
-		 * @event
-		 * @public
-		*/
-		input: {},
-	},
-};
-
+import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-datepicker</code> component provides an input field with assigned calendar which opens on user action.
- * The <code>ui5-datepicker</code> allows users to select a localized date using touch,
+ * The `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.
+ * The `ui5-date-picker` allows users to select a localized date using touch,
  * mouse, or keyboard input. It consists of two parts: the date input field and the
  * date picker.
  *
- * <h3>Usage</h3>
+ * ### Usage
  *
  * The user can enter a date by:
- * <ul>
- * <li>Using the calendar that opens in a popup</li>
- * <li>Typing it in directly in the input field</li>
- * </ul>
- * <br><br>
- * When the user makes an entry and chooses the enter key, the calendar shows the corresponding date.
+ *
+ * - Using the calendar that opens in a popup
+ * - Typing it in directly in the input field
+ *
+ * When the user makes an entry and presses the enter key, the calendar shows the corresponding date.
  * When the user directly triggers the calendar display, the actual date is displayed.
  *
- * <h3>Formatting</h3>
+ * ### Formatting
  *
  * If a date is entered by typing it into
  * the input field, it must fit to the used date format.
- * <br><br>
+ *
  * Supported format options are pattern-based on Unicode LDML Date Format notation.
- * For more information, see <ui5-link target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table" class="api-table-content-cell-link">UTS #35: Unicode Locale Data Markup Language</ui5-link>.
- * <br><br>
- * For example, if the <code>format-pattern</code> is "yyyy-MM-dd",
+ * For more information, see [UTS #35: Unicode Locale Data Markup Language](http://unicode.org/reports/tr35/#Date_Field_Symbol_Table).
+ *
+ * For example, if the `format-pattern` is "yyyy-MM-dd",
  * a valid value string is "2015-07-30" and the same is displayed in the input.
  *
- * <h3>Keyboard Handling</h3>
- * The <code>ui5-datepicker</code> provides advanced keyboard handling.
- * If the <code>ui5-datepicker</code> is focused,
- * you can open or close the drop-down by pressing <code>F4</code>, <code>ALT+UP</code> or <code>ALT+DOWN</code> keys.
- * Once the drop-down is opened, you can use the <code>UP</code>, <code>DOWN</code>, <code>LEFT</code>, <code>right</code> arrow keys
- * to navigate through the dates and select one by pressing the <code>Space</code> or <code>Enter</code> keys. Moreover you can
- * use tab to reach the buttons for changing month and year.
- * <br>
+ * ### Keyboard Handling
+ * The `ui5-date-picker` provides advanced keyboard handling.
+ * If the `ui5-date-picker` is focused,
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
+ * Once the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys
+ * to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can
+ * use TAB to reach the buttons for changing month and year.
+ *
+ * If the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,
+ * then users can increment or decrement the date referenced by `dateValue` property
+ * by using the following shortcuts:
+ *
+ * - [Page Down] - Decrements the corresponding day of the month by one
+ * - [Shift] + [Page Down] - Decrements the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
+ * - [Page Up] - Increments the corresponding day of the month by one
+ * - [Shift] + [Page Up] - Increments the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
+ *
+ * ### 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:
  *
- * <h3>ES6 Module Import</h3>
+ * ```html
+ * <script data-id="sap-ui-config" type="application/json">
+ * 	{
+ * 		"calendarType": "Japanese"
+ * 	}
+ * <script>
+ * ```
  *
- * <code>import "@ui5/webcomponents/dist/DatePicker";</code>
+ * ### ES6 Module Import
  *
+ * `import "@ui5/webcomponents/dist/DatePicker.js";`
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.main.DatePicker
- * @extends sap.ui.webcomponents.base.UI5Element
- * @tagname ui5-datepicker
+ * @extends DateComponentBase
  * @public
  */
-class DatePicker extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-
-	static get render() {
-		return litRender;
-	}
-
-	static get template() {
-		return DatePickerTemplate;
-	}
-
-	static get staticAreaTemplate() {
-		return DatePickerPopoverTemplate;
-	}
-
-	static get styles() {
-		return datePickerCss;
-	}
-
-	static get staticAreaStyles() {
-		return [datePickerPopoverCss, ResponsivePopoverCommonCss];
-	}
-
-	constructor() {
-		super();
-
-		this._respPopoverConfig = {
-			allowTargetOverlap: true,
-			stayOpenOnScroll: true,
-			afterClose: () => {
-				const calendar = this._respPopover.querySelector(`#${this._id}-calendar`);
-
-				this._isPickerOpen = false;
-
-				if (isPhone()) {
-					// close device's keyboard and prevent further typing
-					this.blur();
-				} else if (this._focusInputAfterClose) {
-					this._getInput().focus();
-					this._focusInputAfterClose = false;
-				}
-
-				calendar._hideMonthPicker();
-				calendar._hideYearPicker();
-			},
-			afterOpen: () => {
-				const calendar = this._respPopover.querySelector(`#${this._id}-calendar`);
-				const dayPicker = calendar.shadowRoot.querySelector(`#${calendar._id}-daypicker`);
-
-				const selectedDay = dayPicker.shadowRoot.querySelector(".ui5-dp-item--selected");
-				const today = dayPicker.shadowRoot.querySelector(".ui5-dp-item--now");
-				let focusableDay = selectedDay || today;
-				if (!selectedDay && (this.minDate || this.maxDate) && !this.isInValidRange((new Date().getTime()))) {
-					focusableDay = this.findFirstFocusableDay(dayPicker);
-				}
-
-				if (this._focusInputAfterOpen) {
-					this._focusInputAfterOpen = false;
-					this._getInput().focus();
-				} else if (focusableDay) {
-					focusableDay.focus();
-
-					let focusableDayIdx = parseInt(focusableDay.getAttribute("data-sap-index"));
-					const focusableItem = dayPicker.focusableDays.find(item => parseInt(item._index) === focusableDayIdx);
-					focusableDayIdx = focusableItem ? dayPicker.focusableDays.indexOf(focusableItem) : focusableDayIdx;
-
-					dayPicker._itemNav.current = focusableDayIdx;
-					dayPicker._itemNav.update();
-				}
-			},
-		};
-
-		this._calendar = {
-			onSelectedDatesChange: this._handleCalendarSelectedDatesChange.bind(this),
-			selectedDates: [],
-		};
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
-	}
-
-	findFirstFocusableDay(daypicker) {
-		const today = new Date();
-		if (!this.isInValidRange(today.getTime())) {
-			const focusableItems = Array.from(daypicker.shadowRoot.querySelectorAll(".ui5-dp-item"));
-			return focusableItems.filter(x => !x.classList.contains("ui5-dp-item--disabled"))[0];
-		}
-	}
-
-	onBeforeRendering() {
-		this._calendar.primaryCalendarType = this._primaryCalendarType;
-		this._calendar.formatPattern = this._formatPattern;
-
-		if (this.minDate && !this.isValid(this.minDate)) {
-			this.minDate = null;
-			console.warn(`In order for the "minDate" property to have effect, you should enter valid date format`); // eslint-disable-line
-		}
-
-		if (this.maxDate && !this.isValid(this.maxDate)) {
-			this.maxDate = null;
-			console.warn(`In order for the "maxDate" property to have effect, you should enter valid date format`); // eslint-disable-line
-		}
-		if (this.isValid(this.value) && this.isInValidRange(this._getTimeStampFromString(this.value))) {
-			this._changeCalendarSelection();
-		} else {
-			this._calendar.selectedDates = [];
-		}
-
-		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this);
-		} else if (this.name) {
-			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
-		}
-
-		if (this.minDate) {
-			this._calendar.minDate = this.minDate;
-		}
-
-		if (this.maxDate) {
-			this._calendar.maxDate = this.maxDate;
-		}
-	}
-
-	_getTimeStampFromString(value) {
-		if (this.getFormat().parse(value)) {
-			const jsDate = new Date(this.getFormat().parse(value).getFullYear(), this.getFormat().parse(value).getMonth(), this.getFormat().parse(value).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
-			return oCalDate.valueOf();
-		}
-		return undefined;
-	}
-
-	_onkeydown(event) {
-		if (isShow(event)) {
-			this.togglePicker();
-			this._getInput().focus();
-		}
-	}
-
-	_getInput() {
-		return this.shadowRoot.querySelector("ui5-input");
-	}
-
-	_handleInputChange() {
-		let nextValue = this._getInput().getInputValue();
-		const isValid = this.isValid(nextValue);
-		const isInValidRange = this.isInValidRange(this._getTimeStampFromString(nextValue));
-
-		if (isValid && isInValidRange) {
-			nextValue = this.normalizeValue(nextValue);
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-
-		this.value = nextValue;
-		this.fireEvent("change", { value: nextValue, valid: isValid });
-		// Angular two way data binding
-		this.fireEvent("value-changed", { value: nextValue, valid: isValid });
-	}
-
-	_handleInputLiveChange() {
-		const nextValue = this._getInput().getInputValue();
-		const isValid = this.isValid(nextValue) && this.isInValidRange(this._getTimeStampFromString(nextValue));
-
-		this.value = nextValue;
-		this.fireEvent("input", { value: nextValue, valid: isValid });
-	}
-
-	_click(event) {
-		if (isPhone()) {
-			this._respPopover.open(this);
-			event.preventDefault(); // prevent immediate selection of any item
-		}
-	}
-
-	/**
-	 * Checks if a value is valid against the current date format of the DatePicker
-	 * @param {string} value A value to be tested against the current date format
-	 * @public
-	 */
-	isValid(value = "") {
-		return !!(value && this.getFormat().parse(value));
-	}
-
-	/**
-	 * Checks if a date is in range between minimum and maximum date
-	 * @param {object} value
-	 * @public
-	 */
-	isInValidRange(value = "") {
-		const pickedDate = new Date(value),
-			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;
-	}
-
-	// because the parser understands more than one format
-	// but we need values in one format
-	normalizeValue(sValue) {
-		return this.getFormat().format(this.getFormat().parse(sValue));
-	}
-
-	get validValue() {
-		if (this.isValid(this.value)) {
-			return this.value;
-		}
-		return this.getFormat().format(new Date());
-	}
-
-	get _calendarDate() {
-		const millisecondsUTC = this.getFormat().parse(this.validValue, true).getTime();
-		const oCalDate = CalendarDate.fromTimestamp(
-			millisecondsUTC - (millisecondsUTC % (24 * 60 * 60 * 1000)),
-			this._primaryCalendarType
-		);
-		return oCalDate;
-	}
-
-	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 _displayFormat() {
-		return this.getFormat().oFormatOptions.pattern;
-	}
-
-	get _placeholder() {
-		return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
-	}
-
-	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
-	}
-
-	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 accInfo() {
-		return {
-			"ariaDescribedBy": `${this._id}-date`,
-			"ariaHasPopup": "true",
-			"ariaAutoComplete": "none",
-			"role": "combobox",
-			"ariaOwns": `${this._id}-responsive-popover`,
-			"ariaExpanded": this.isOpen(),
-			"ariaDescription": this.dateAriaDescription,
-		};
-	}
-
-	get _maxDate() {
-		if (this.maxDate) {
-			return this._getTimeStampFromString(this.maxDate);
-		}
-		return this.maxDate;
-	}
-
-	get _minDate() {
-		if (this.minDate) {
-			return this._getTimeStampFromString(this.minDate);
-		}
-		return this.minDate;
-	}
-
-	get openIconTitle() {
-		return this.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
-	}
-
-	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATEPICKER_DATE_ACC_TEXT);
-	}
-
-	get dir() {
-		return getRTL() ? "rtl" : "ltr";
-	}
-
-	get _respPopover() {
-		return this.getStaticAreaItemDomRef().querySelector("ui5-responsive-popover");
-	}
-
-	_canOpenPicker() {
-		return !this.disabled && !this.readonly;
-	}
-
-	_handleCalendarSelectedDatesChange(event) {
-		const iNewValue = event.detail.dates && event.detail.dates[0];
-
-		if (this._calendar.selectedDates.indexOf(iNewValue) !== -1) {
-			this.closePicker();
-			return;
-		}
-
-		this.value = this.getFormat().format(
-			new Date(CalendarDate.fromTimestamp(
-				iNewValue * 1000,
-				this._primaryCalendarType
-			).valueOf()),
-			true
-		);
-		this._calendar.timestamp = iNewValue;
-		this._calendar.selectedDates = event.detail.dates;
-		this._focusInputAfterClose = true;
-		this.closePicker();
-
-		if (this.isInValidRange(this._getTimeStampFromString(this.value))) {
-			this.valueState = ValueState.None;
-		} else {
-			this.valueState = ValueState.Error;
-		}
-
-		this.fireEvent("change", { value: this.value, valid: true });
-		// Angular two way data binding
-		this.fireEvent("value-changed", { value: this.value, valid: true });
-	}
-
-	/**
-	 * Closes the picker.
-	 * @public
-	 */
-	closePicker() {
-		this._respPopover.close();
-	}
-
-	/**
-	 * Opens the picker.
-	 * @param {object} options A JSON object with additional configuration.<br>
-	 * <code>{ focusInput: true }</code> By default, the focus goes in the picker after opening it.
-	 * Specify this option to focus the input field.
-	 * @public
-	 */
-	openPicker(options) {
-		this._changeCalendarSelection();
-
-		if (options && options.focusInput) {
-			this._focusInputAfterOpen = true;
-		}
-
-		this._respPopover.open(this);
-		this._isPickerOpen = true;
-	}
-
-	togglePicker() {
-		if (this.isOpen()) {
-			this.closePicker();
-		} else if (this._canOpenPicker()) {
-			this.openPicker();
-		}
-	}
-
-	_changeCalendarSelection(focusTimestamp) {
-		if (this._calendarDate.getYear() < 1) {
-			// 0 is a valid year, but we cannot display it
-			return;
-		}
-
-		const oCalDate = this._calendarDate;
-		const timestamp = focusTimestamp || oCalDate.valueOf() / 1000;
-
-		this._calendar = Object.assign({}, this._calendar);
-		this._calendar.timestamp = timestamp;
-		if (this.value) {
-			this._calendar.selectedDates = [timestamp];
-		}
-	}
-
-	/**
-	 * Checks if the picker is open.
-	 * @returns {Boolean} true if the picker is open, false otherwise
-	 * @public
-	 */
-	isOpen() {
-		return !!this._isPickerOpen;
-	}
-
-	/**
-	 * Gets some semantic details about an event originated in the control.
-	 * @param {*} event An event object
-	 * @returns {Object} Semantic details
-	 */
-	getSemanticTargetInfo(event) {
-		const oDomTarget = getDomTarget(event);
-		let isInput = false;
-
-		if (oDomTarget && oDomTarget.className.indexOf("ui5-input-inner") > -1) {
-			isInput = true;
-		}
-
-		return { isInput };
-	}
-
-	/**
-	 * Currently selected date represented as JavaScript Date instance
-	 *
-	 * @readonly
-	 * @type { Date }
-	 * @public
-	 */
-	get dateValue() {
-		return this.getFormat().parse(this.value);
-	}
-
-	get styles() {
-		return {
-			main: {
-				width: "100%",
-			},
-		};
-	}
-
-	get type() {
-		return InputType.Text;
-	}
-
-	static async define(...params) {
-		await Promise.all([
-			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
-			Icon.define(),
-			ResponsivePopover.define(),
-			Calendar.define(),
-			Input.define(),
-			fetchI18nBundle("@ui5/webcomponents"),
-		]);
-
-		super.define(...params);
-	}
-}
-
-const getDomTarget = event => {
-	let target,
-		composedPath;
-
-	if (typeof event.composedPath === "function") {
-		composedPath = event.composedPath();
-	}
-
-	if (Array.isArray(composedPath) && composedPath.length) {
-		target = composedPath[0];
-	}
-
-	return target;
+let DatePicker = DatePicker_1 = class DatePicker extends DateComponentBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines a formatted date value.
+         * @default ""
+         * @formEvents change input
+         * @formProperty
+         * @public
+         */
+        this.value = "";
+        /**
+         * Defines the value state of the component.
+         * @default "None"
+         * @public
+         */
+        this.valueState = "None";
+        /**
+         * Defines whether the component is required.
+         * @since 1.0.0-rc.9
+         * @default false
+         * @public
+         */
+        this.required = false;
+        /**
+         * Determines whether the component is displayed as disabled.
+         * @default false
+         * @public
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the component is displayed as read-only.
+         * @default false
+         * @public
+         */
+        this.readonly = false;
+        /**
+         * 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
+         * @since 1.0.0-rc.8
+         */
+        this.hideWeekNumbers = false;
+        /**
+         * Defines the open or closed state of the popover.
+         * @public
+         * @default false
+         * @since 2.0.0
+         */
+        this.open = false;
+        this._calendarCurrentPicker = "day";
+    }
+    get formValidityMessage() {
+        return DatePicker_1.i18nBundle.getText(FORM_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        return { valueMissing: this.required && !this.value };
+    }
+    async formElementAnchor() {
+        return (await this.getFocusDomRefAsync())?.getFocusDomRefAsync();
+    }
+    get formFormattedValue() {
+        return this.value;
+    }
+    /**
+     * @protected
+     */
+    onResponsivePopoverAfterClose() {
+        this.open = false;
+        if (isPhone()) {
+            this.blur(); // close device's keyboard and prevent further typing
+        }
+        else {
+            this._dateTimeInput?.focus();
+        }
+        this.fireDecoratorEvent("close");
+    }
+    onResponsivePopoverAfterOpen() {
+        this.fireDecoratorEvent("open");
+    }
+    onResponsivePopoverBeforeOpen() {
+        this._calendar.timestamp = this._calendarTimestamp;
+        this._calendarCurrentPicker = this.firstPicker;
+    }
+    onBeforeRendering() {
+        ["minDate", "maxDate"].forEach((prop) => {
+            const propValue = this[prop];
+            if (!this.isValid(propValue)) {
+                console.warn(`Invalid value for property "${prop}": ${propValue} is not compatible with the configured format pattern: "${this._displayFormat}"`); // eslint-disable-line
+            }
+        });
+        this.value = this.normalizeValue(this.value) || this.value;
+        this.liveValue = this.value;
+    }
+    /**
+     * Override in derivatives to change calendar selection mode
+     * @protected
+     */
+    get _calendarSelectionMode() {
+        return "Single";
+    }
+    /**
+     * Used to provide a timestamp to the Calendar (to focus it to a relevant date when open) based on the component's state
+     * Override in derivatives to provide the calendar a timestamp based on their properties
+     * By default focus the calendar on the selected date if set, or the current day otherwise
+     * @protected
+     */
+    get _calendarTimestamp() {
+        if (this.value && this.dateValueUTC && this._checkValueValidity(this.value)) {
+            const millisecondsUTC = this.dateValueUTC.getTime();
+            return getRoundedTimestamp(millisecondsUTC);
+        }
+        return getTodayUTCTimestamp(this._primaryCalendarType);
+    }
+    /**
+     * Used to provide selectedDates to the calendar based on the component's state
+     * Override in derivatives to provide different rules for setting the calendar's selected dates
+     * @protected
+     */
+    get _calendarSelectedDates() {
+        if (this.value && this._checkValueValidity(this.value)) {
+            return [this.value];
+        }
+        return [];
+    }
+    _onkeydown(e) {
+        if (isShow(e)) {
+            e.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
+            if (this.open) {
+                if (!isF4(e)) {
+                    this._toggleAndFocusInput();
+                }
+            }
+            else {
+                this._toggleAndFocusInput();
+            }
+        }
+        const target = e.target;
+        if (target && this.open && this._dateTimeInput.id === target.id && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
+            this._togglePicker();
+        }
+        if (this.open) {
+            return;
+        }
+        if (isEnter(e)) {
+            if (this._internals.form) {
+                submitForm(this);
+            }
+        }
+        else if (isPageUpShiftCtrl(e)) {
+            e.preventDefault();
+            this._modifyDateValue(1, "year");
+        }
+        else if (isPageUpShift(e)) {
+            e.preventDefault();
+            this._modifyDateValue(1, "month");
+        }
+        else if (isPageUp(e)) {
+            e.preventDefault();
+            this._modifyDateValue(1, "day");
+        }
+        else if (isPageDownShiftCtrl(e)) {
+            e.preventDefault();
+            this._modifyDateValue(-1, "year");
+        }
+        else if (isPageDownShift(e)) {
+            e.preventDefault();
+            this._modifyDateValue(-1, "month");
+        }
+        else if (isPageDown(e)) {
+            e.preventDefault();
+            this._modifyDateValue(-1, "day");
+        }
+    }
+    /**
+     * @param amount
+     * @param unit
+     * @param preserveDate whether to preserve the day of the month (f.e. 15th of March + 1 month = 15th of April)
+     * @protected
+     */
+    _modifyDateValue(amount, unit, preserveDate) {
+        if (!this.dateValue) {
+            return;
+        }
+        const modifiedDate = modifyDateBy(CalendarDate.fromLocalJSDate(this.dateValue), amount, unit, preserveDate, this._minDate, this._maxDate);
+        const newValue = this.formatValue(modifiedDate.toUTCJSDate());
+        this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+    }
+    _updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
+        const valid = this._checkValueValidity(value);
+        if (valid && normalizeValue) {
+            value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+        }
+        let executeEvent = true;
+        this.liveValue = value;
+        const previousValue = this.value;
+        if (updateValue) {
+            this._dateTimeInput.value = value;
+            this.value = value;
+            this._updateValueState(); // Change the value state to Error/None, but only if needed
+        }
+        events.forEach(e => {
+            if (!this.fireDecoratorEvent(e, { value, valid })) {
+                executeEvent = false;
+            }
+        });
+        if (!executeEvent && updateValue) {
+            if (this.value !== previousValue && this.value !== this._dateTimeInput.value) {
+                return; // If the value was changed in the change event, do not revert it
+            }
+            this._dateTimeInput.value = previousValue;
+            this.value = previousValue;
+        }
+    }
+    _updateValueState() {
+        const valid = this._checkValueValidity(this.value);
+        const previousValueState = this.valueState;
+        this.valueState = valid ? ValueState.None : ValueState.Negative;
+        const eventPrevented = !this.fireDecoratorEvent("value-state-change", { valueState: this.valueState, valid });
+        if (eventPrevented) {
+            this.valueState = previousValueState;
+        }
+    }
+    /**
+     * The ui5-input "submit" event handler - fire change event when the user presses enter
+     * @protected
+     */
+    _onInputSubmit() { }
+    /**
+     * The ui5-input "change" event handler - fire change event when the user focuses out of the input
+     * @protected
+     */
+    _onInputChange(e) {
+        this._updateValueAndFireEvents(e.target.value, true, ["change", "value-changed"]);
+    }
+    /**
+     * The ui5-input "input" event handler - fire input even when the user types
+     * @protected
+     */
+    _onInputInput(e) {
+        this._updateValueAndFireEvents(e.target.value, false, ["input"], false);
+    }
+    /**
+     * Checks if the provided value is valid and within valid range.
+     * @protected
+     * @param value
+     */
+    _checkValueValidity(value) {
+        if (value === "") {
+            return true;
+        }
+        return this.isValid(value) && this.isInValidRange(value);
+    }
+    _click(e) {
+        if (isPhone()) {
+            this.responsivePopover.opener = this;
+            this.responsivePopover.open = true;
+            e.preventDefault(); // prevent immediate selection of any item
+        }
+    }
+    /**
+     * Checks if a value is valid against the current date format of the DatePicker.
+     * @public
+     * @param value A value to be tested against the current date format
+     */
+    isValid(value) {
+        if (value === "" || value === undefined) {
+            return true;
+        }
+        return !!this.getFormat().parse(value);
+    }
+    /**
+     * Checks if a date is between the minimum and maximum date.
+     * @public
+     * @param value A value to be checked
+     */
+    isInValidRange(value) {
+        if (value === "" || value === undefined) {
+            return true;
+        }
+        const calendarDate = this._getCalendarDateFromString(value);
+        if (!calendarDate || !this._minDate || !this._maxDate) {
+            return false;
+        }
+        return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();
+    }
+    /**
+     * The parser understands many formats, but we need one format
+     * @protected
+     */
+    normalizeValue(value) {
+        if (value === "") {
+            return value;
+        }
+        return this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
+    }
+    get _displayFormat() {
+        // @ts-ignore oFormatOptions is a private API of DateFormat
+        return this.getFormat().oFormatOptions.pattern;
+    }
+    /**
+     * @protected
+     */
+    get _placeholder() {
+        return this.placeholder !== undefined ? this.placeholder : this._displayFormat;
+    }
+    get _headerTitleText() {
+        return DatePicker_1.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+    }
+    get showHeader() {
+        return isPhone();
+    }
+    get showFooter() {
+        return isPhone();
+    }
+    get accInfo() {
+        return {
+            "ariaRoledescription": this.dateAriaDescription,
+            "ariaHasPopup": "grid",
+            "ariaRequired": this.required,
+            "ariaLabel": getEffectiveAriaLabelText(this),
+        };
+    }
+    get valueStateDefaultText() {
+        if (this.valueState === ValueState.None) {
+            return;
+        }
+        return this.valueStateTextMappings[this.valueState];
+    }
+    get valueStateTextMappings() {
+        return {
+            [ValueState.Positive]: DatePicker_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            [ValueState.Negative]: DatePicker_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            [ValueState.Critical]: DatePicker_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            [ValueState.Information]: DatePicker_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
+        };
+    }
+    get shouldDisplayDefaultValueStateMessage() {
+        return !willShowContent(this.valueStateMessage) && this.hasValueStateText;
+    }
+    get hasValueStateText() {
+        return this.hasValueState && this.valueState !== ValueState.Positive;
+    }
+    get hasValueState() {
+        return this.valueState !== ValueState.None;
+    }
+    get openIconTitle() {
+        return DatePicker_1.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
+    }
+    get openIconName() {
+        return "appointment-2";
+    }
+    get dateAriaDescription() {
+        return DatePicker_1.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+    }
+    get pickerAccessibleName() {
+        return DatePicker_1.i18nBundle.getText(DATEPICKER_POPOVER_ACCESSIBLE_NAME);
+    }
+    /**
+     * Defines whether the dialog on mobile should have header
+     * @private
+     */
+    get _shouldHideHeader() {
+        return false;
+    }
+    /**
+     * Returns the first picker depending on the CalendarPickerMode
+     */
+    get firstPicker() {
+        const calendarPickerMode = this._calendarPickersMode;
+        let firstPicker = "day";
+        if (calendarPickerMode === CalendarPickersMode.YEAR) {
+            firstPicker = "year";
+        }
+        else if (calendarPickerMode === CalendarPickersMode.MONTH_YEAR) {
+            firstPicker = "month";
+        }
+        return firstPicker;
+    }
+    /**
+     * Defines whether the value help icon is hidden
+     * @private
+     */
+    get _iconMode() {
+        return isDesktop() ? IconMode.Decorative : IconMode.Interactive;
+    }
+    _canOpenPicker() {
+        return !this.disabled && !this.readonly;
+    }
+    get _calendarPickersMode() {
+        const format = this.getFormat();
+        const patternSymbolTypes = format.aFormatArray.map(patternSymbolSettings => {
+            return patternSymbolSettings.type.toLowerCase();
+        });
+        if (patternSymbolTypes.includes("day")) {
+            return CalendarPickersMode.DAY_MONTH_YEAR;
+        }
+        if (patternSymbolTypes.includes("month") || patternSymbolTypes.includes("monthstandalone")) {
+            return CalendarPickersMode.MONTH_YEAR;
+        }
+        return CalendarPickersMode.YEAR;
+    }
+    /**
+     * The user selected a new date in the calendar
+     * @param e
+     * @protected
+     */
+    onSelectedDatesChange(e) {
+        e.preventDefault();
+        const newValue = e.detail.selectedValues && e.detail.selectedValues[0];
+        this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
+        this._togglePicker();
+    }
+    /**
+     * The user clicked the "month" button in the header
+     */
+    onHeaderShowMonthPress() {
+        this._calendarCurrentPicker = "month";
+    }
+    /**
+     * The user clicked the "year" button in the header
+     */
+    onHeaderShowYearPress() {
+        this._calendarCurrentPicker = "year";
+    }
+    /**
+     * Formats a Java Script date object into a string representing a locale date
+     * according to the `formatPattern` property of the DatePicker instance
+     * @public
+     * @param date A Java Script date object to be formatted as string
+     * @returns The date as string
+     */
+    formatValue(date) {
+        return this.getFormat().format(date);
+    }
+    _togglePicker() {
+        this.open = !this.open;
+    }
+    _toggleAndFocusInput() {
+        this._togglePicker();
+        this._dateTimeInput.focus();
+    }
+    /**
+     * Currently selected date represented as a Local JavaScript Date instance.
+     * @public
+     * @default null
+     */
+    get dateValue() {
+        return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
+    }
+    get dateValueUTC() {
+        return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
+    }
+    get styles() {
+        return {
+            main: {
+                width: "100%",
+            },
+        };
+    }
+    get type() {
+        return InputType.Text;
+    }
 };
-
+__decorate([
+    property()
+], DatePicker.prototype, "value", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "valueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], DatePicker.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], DatePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], DatePicker.prototype, "readonly", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], DatePicker.prototype, "hideWeekNumbers", void 0);
+__decorate([
+    property({ type: Boolean })
+], DatePicker.prototype, "open", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "accessibleNameRef", void 0);
+__decorate([
+    property({ type: Object })
+], DatePicker.prototype, "_respPopoverConfig", void 0);
+__decorate([
+    property()
+], DatePicker.prototype, "_calendarCurrentPicker", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], DatePicker.prototype, "valueStateMessage", void 0);
+__decorate([
+    query("[ui5-datetime-input]")
+], DatePicker.prototype, "_dateTimeInput", void 0);
+__decorate([
+    query("[ui5-calendar]")
+], DatePicker.prototype, "_calendar", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], DatePicker, "i18nBundle", void 0);
+DatePicker = DatePicker_1 = __decorate([
+    customElement({
+        tag: "ui5-date-picker",
+        languageAware: true,
+        formAssociated: true,
+        template: DatePickerTemplate,
+        styles: [
+            datePickerCss,
+            ResponsivePopoverCommonCss,
+            datePickerPopoverCss,
+            ValueStateMessageCss,
+        ],
+    })
+    /**
+     * Fired when the input operation has finished by pressing Enter or on focusout.
+     * @public
+     * @param {string} value The submitted value.
+     * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
+     */
+    ,
+    event("change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired when the value of the component is changed at each key stroke.
+     * @public
+     * @param {string} value The submitted value.
+     * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
+     */
+    ,
+    event("input", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired before the value state of the component is updated internally.
+     * The event is preventable, meaning that if it's default action is
+     * prevented, the component will not update the value state.
+     * @public
+     * @param {string} valueState The new `valueState` that will be set.
+     * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
+     */
+    ,
+    event("value-state-change", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired after the component's picker is opened.
+     * @since 2.4.0
+     * @public
+     */
+    ,
+    event("open")
+    /**
+     * Fired after the component's picker is closed.
+     * @since 2.4.0
+     * @public
+     */
+    ,
+    event("close")
+], DatePicker);
 DatePicker.define();
-
 export default DatePicker;
+//# sourceMappingURL=DatePicker.js.map