@ui5/webcomponents 1.9.2 → 1.10.0

package/src/{DatePicker.js → DatePicker.ts}

@@ -1,4 +1,11 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.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";
@@ -21,15 +28,19 @@ import {
 	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import type FormSupportT from "./features/InputElementsFormSupport.js";
+import type { IFormElement } from "./features/InputElementsFormSupport.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import HasPopup from "./types/HasPopup.js";
+// @ts-ignore
 import { DATEPICKER_OPEN_ICON_TITLE, DATEPICKER_DATE_DESCRIPTION, INPUT_SUGGESTIONS_TITLE } from "./generated/i18n/i18n-defaults.js";
 import DateComponentBase from "./DateComponentBase.js";
 import Icon from "./Icon.js";
 import Button from "./Button.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Calendar from "./Calendar.js";
+import type { CalendarChangeEventDetail } from "./Calendar.js";
 import * as CalendarDateComponent from "./CalendarDate.js";
 import Input from "./Input.js";
 import InputType from "./types/InputType.js";
@@ -44,246 +55,9 @@ 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-date-picker",
-	altTag: "ui5-datepicker",
-	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
-		/**
-		 * Defines a formatted date value.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @formEvents change input
-		 * @formProperty
-		 * @public
-		 */
-		value: {
-			type: String,
-		},
-
-		/**
-		 * Defines the value state of the component.
-		 * <br><br>
-		 * Available options are:
-		 * <ul>
-		 * <li><code>None</code></li>
-		 * <li><code>Error</code></li>
-		 * <li><code>Warning</code></li>
-		 * <li><code>Success</code></li>
-		 * <li><code>Information</code></li>
-		 * </ul>
-		 *
-		 * @type {sap.ui.webcomponents.base.types.ValueState}
-		 * @defaultvalue "None"
-		 * @public
-		 */
-		valueState: {
-			type: ValueState,
-			defaultValue: ValueState.None,
-		},
-
-		/**
-		 * Defines whether the component is required.
-		 *
-		 * @since 1.0.0-rc.9
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		required: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines whether the component is displayed as disabled.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		disabled: {
-			type: Boolean,
-		},
-
-		/**
-		 * Determines whether the component is displayed as read-only.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		readonly: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines a short hint, intended to aid the user with data entry when the
-		 * component has no value.
-		 *
-		 * <br><br>
-		 * <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 component appear empty - without placeholder or format pattern.
-		 *
-		 * @type {string}
-		 * @defaultvalue undefined
-		 * @public
-		 */
-		placeholder: {
-			type: String,
-			defaultValue: undefined,
-		},
-
-		/**
-		 * Determines the name with which the component will be submitted in an HTML form.
-		 *
-		 * <br><br>
-		 * <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>
-		 *
-		 * <br><br>
-		 * <b>Note:</b> When set, a native <code>input</code> HTML element
-		 * will be created inside the component 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,
-		},
-
-		/**
-		 * Defines the visibility of the week numbers column.
-		 * <br><br>
-		 *
-		 * <b>Note:</b> For calendars other than Gregorian,
-		 * the week numbers are not displayed regardless of what is set.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 * @since 1.0.0-rc.8
-		 */
-		hideWeekNumbers: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the aria-label attribute for the component.
-		 *
-		 * @type {string}
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		accessibleName: {
-			type: String,
-		},
-
-		/**
-		 * Receives id(or many ids) of the elements that label the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 * @since 1.0.0-rc.15
-		 */
-		accessibleNameRef: {
-			type: String,
-			defaultValue: "",
-		},
-
-		_isPickerOpen: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		_respPopoverConfig: {
-			type: Object,
-		},
-
-		_calendarCurrentPicker: {
-			type: String,
-			defaultValue: "day",
-		},
-	},
-
-	slots: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
-		/**
-		 * Defines the value state message that will be displayed as pop up under the component.
-		 * <br><br>
-		 *
-		 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
-		 * <br>
-		 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
-		 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
-		 * @type {HTMLElement}
-		 * @since 1.0.0-rc.7
-		 * @slot
-		 * @public
-		 */
-		valueStateMessage: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
-		 * when <code>name</code> property is set.
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @private
-		 */
-		formSupport: {
-			type: HTMLElement,
-		},
-	},
-
-	events: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
-
-		/**
-		 * Fired when the input operation has finished by pressing Enter or on focusout.
-		 *
-		 * @event
-		 * @allowPreventDefault
-		 * @public
-		 * @param {string} value The submitted value.
-		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
-		*/
-		change: {
-			detail: {
-				value: {
-					type: String,
-				},
-				valid: {
-					type: Boolean,
-				},
-			},
-		},
-
-		/**
-		 * Fired when the value of the component is changed at each key stroke.
-		 *
-		 * @event
-		 * @allowPreventDefault
-		 * @public
-		 * @param {string} value The submitted value.
-		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
-		*/
-		input: {
-			detail: {
-				value: {
-					type: String,
-				},
-				valid: {
-					type: Boolean,
-				},
-			},
-		},
-	},
+type DatePickerChangeEventDetail = {
+	dates: Array<number>;
+	values: Array<string>
 };
 
 /**
@@ -369,15 +143,237 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.DatePicker
- * @extends sap.ui.webcomponents.main.DateComponentBase
+ * @alias sap.ui.webc.main.DatePicker
+ * @extends sap.ui.webc.main.DateComponentBase
  * @tagname ui5-date-picker
  * @public
  */
-class DatePicker extends DateComponentBase {
-	static get metadata() {
-		return metadata;
-	}
+@customElement("ui5-date-picker")
+/**
+ * Fired when the input operation has finished by pressing Enter or on focusout.
+ *
+ * @event sap.ui.webc.main.DatePicker#change
+ * @allowPreventDefault
+ * @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", {
+	detail: {
+		value: {
+			type: String,
+		},
+		valid: {
+			type: Boolean,
+		},
+	},
+})
+/**
+ * Fired when the value of the component is changed at each key stroke.
+ *
+ * @event sap.ui.webc.main.DatePicker#input
+ * @allowPreventDefault
+ * @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", {
+	detail: {
+		value: {
+			type: String,
+		},
+		valid: {
+			type: Boolean,
+		},
+	},
+})
+class DatePicker extends DateComponentBase implements IFormElement {
+	/**
+	 * Defines a formatted date value.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DatePicker.prototype.value
+	 * @defaultvalue ""
+	 * @formEvents change input
+	 * @formProperty
+	 * @public
+	 */
+	@property()
+	value!: string
+
+	/**
+	 * Defines the value state of the component.
+	 * <br><br>
+	 * Available options are:
+	 * <ul>
+	 * <li><code>None</code></li>
+	 * <li><code>Error</code></li>
+	 * <li><code>Warning</code></li>
+	 * <li><code>Success</code></li>
+	 * <li><code>Information</code></li>
+	 * </ul>
+	 *
+	 * @type {sap.ui.webc.base.types.ValueState}
+	 * @name sap.ui.webc.main.DatePicker.prototype.valueState
+	 * @defaultvalue "None"
+	 * @public
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	valueState!: ValueState;
+
+	/**
+	 * Defines whether the component is required.
+	 *
+	 * @since 1.0.0-rc.9
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.DatePicker.prototype.required
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	required!: boolean;
+
+	/**
+	 * Determines whether the component is displayed as disabled.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.DatePicker.prototype.disabled
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	disabled!: boolean;
+
+	/**
+	 * Determines whether the component is displayed as read-only.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.DatePicker.prototype.readonly
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	readonly!: boolean;
+
+	/**
+	 * Defines a short hint, intended to aid the user with data entry when the
+	 * component has no value.
+	 *
+	 * <br><br>
+	 * <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 component appear empty - without placeholder or format pattern.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DatePicker.prototype.placeholder
+	 * @defaultvalue undefined
+	 * @public
+	 */
+	@property({ defaultValue: undefined })
+	placeholder?: string;
+
+	/**
+	 * Determines the name with which the component will be submitted in an HTML form.
+	 *
+	 * <br><br>
+	 * <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>
+	 *
+	 * <br><br>
+	 * <b>Note:</b> When set, a native <code>input</code> HTML element
+	 * will be created inside the component 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}
+	 * @name sap.ui.webc.main.DatePicker.prototype.name
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	name!: string;
+
+	/**
+	 * Defines the visibility of the week numbers column.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> For calendars other than Gregorian,
+	 * the week numbers are not displayed regardless of what is set.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.DatePicker.prototype.hideWeekNumbers
+	 * @defaultvalue false
+	 * @public
+	 * @since 1.0.0-rc.8
+	 */
+	@property({ type: Boolean })
+	hideWeekNumbers!: boolean;
+
+	/**
+	 * Defines the aria-label attribute for the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DatePicker.prototype.accessibleName
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property()
+	accessibleName!: string;
+
+	/**
+	 * Receives id(or many ids) of the elements that label the component.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DatePicker.prototype.accessibleNameRef
+	 * @defaultvalue ""
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property({ defaultValue: "" })
+	accessibleNameRef!: string;
+
+	@property({ type: Boolean, noAttribute: true })
+	_isPickerOpen!: boolean;
+
+	@property({ type: Object })
+	_respPopoverConfig!: object;
+
+	@property({ defaultValue: "day" })
+	_calendarCurrentPicker!: string;
+
+	liveValue?: string;
+
+	/**
+	 * Defines the value state message that will be displayed as pop up under the component.
+	 * <br><br>
+	 *
+	 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
+	 * <br>
+	 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
+	 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
+	 * @type {HTMLElement}
+	 * @name sap.ui.webc.main.DatePicker.prototype.valueStateMessage
+	 * @since 1.0.0-rc.7
+	 * @slot
+	 * @public
+	 */
+	@slot({ type: HTMLElement })
+	valueStateMessage!: Array<HTMLElement>;
+
+	/**
+	 * The slot is used to render native <code>input</code> HTML element within Light DOM to enable form submit,
+	 * when <code>name</code> property is set.
+	 * @type {HTMLElement[]}
+	 * @slot
+	 * @private
+	 */
+	@slot({ type: HTMLElement })
+	formSupport!: Array<HTMLElement>;
+
+	responsivePopover?: ResponsivePopover;
+
+	FormSupport?: typeof FormSupportT;
+
+	static i18nBundle: I18nBundle;
 
 	static get template() {
 		return DatePickerTemplate;
@@ -387,20 +383,14 @@ class DatePicker extends DateComponentBase {
 		return DatePickerPopoverTemplate;
 	}
 
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return datePickerCss;
 	}
 
-	static get staticAreaStyles() {
+	static get staticAreaStyles(): ComponentStylesData {
 		return [ResponsivePopoverCommonCss, datePickerPopoverCss];
 	}
 
-	constructor() {
-		super();
-
-		this.FormSupport = undefined;
-	}
-
 	/**
 	 * @protected
 	 */
@@ -409,22 +399,23 @@ class DatePicker extends DateComponentBase {
 		if (isPhone()) {
 			this.blur(); // close device's keyboard and prevent further typing
 		} else {
-			this._getInput().focus();
+			this._getInput()?.focus();
 		}
 	}
 
 	onBeforeRendering() {
-		this.FormSupport = getFeature("FormSupport");
+		this.FormSupport = getFeature<typeof FormSupportT>("FormSupport");
+
+		["minDate", "maxDate"].forEach((prop: string) => {
+			const propValue = this[prop as keyof DatePicker] as string;
 
-		["minDate", "maxDate"].forEach(prop => {
-			if (this[prop] && !this.isValid(this[prop])) {
-				console.warn(`Invalid value for property "${prop}": ${this[prop]} is not compatible with the configured format pattern: "${this._displayFormat}"`); // eslint-disable-line
+			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
 			}
 		});
 
-		const FormSupport = getFeature("FormSupport");
-		if (FormSupport) {
-			FormSupport.syncNativeHiddenInput(this);
+		if (this.FormSupport) {
+			this.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
 		}
@@ -447,9 +438,10 @@ class DatePicker extends DateComponentBase {
 	 * 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
+	 * @returns { number } the calendar timestamp
 	 */
-	get _calendarTimestamp() {
-		if (this.value && this._checkValueValidity(this.value)) {
+	get _calendarTimestamp(): number {
+		if (this.value && this.dateValueUTC && this._checkValueValidity(this.value)) {
 			const millisecondsUTC = this.dateValueUTC.getTime();
 			return getRoundedTimestamp(millisecondsUTC);
 		}
@@ -461,8 +453,9 @@ class DatePicker extends DateComponentBase {
 	 * 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
+	 * @returns { array } the selected dates
 	 */
-	get _calendarSelectedDates() {
+	get _calendarSelectedDates(): Array<string> {
 		if (this.value && this._checkValueValidity(this.value)) {
 			return [this.value];
 		}
@@ -470,11 +463,11 @@ class DatePicker extends DateComponentBase {
 		return [];
 	}
 
-	_onkeydown(event) {
-		if (isShow(event)) {
-			event.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
+	_onkeydown(e: KeyboardEvent) {
+		if (isShow(e)) {
+			e.preventDefault(); // Prevent scroll on Alt/Option + Arrow Up/Down
 			if (this.isOpen()) {
-				if (!isF4(event)) {
+				if (!isF4(e)) {
 					this._toggleAndFocusInput();
 				}
 			} else {
@@ -482,7 +475,7 @@ class DatePicker extends DateComponentBase {
 			}
 		}
 
-		if ((this._getInput().isEqualNode(event.target) && this.isOpen()) && (isTabNext(event) || isTabPrevious(event) || isF6Next(event) || isF6Previous(event))) {
+		if ((this._getInput().isEqualNode(e.target as Node) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) {
 			this.closePicker();
 		}
 
@@ -490,38 +483,38 @@ class DatePicker extends DateComponentBase {
 			return;
 		}
 
-		if (isEnter(event)) {
+		if (isEnter(e)) {
 			if (this.FormSupport) {
 				this.FormSupport.triggerFormSubmit(this);
 			}
-		} else if (isPageUpShiftCtrl(event)) {
-			event.preventDefault();
+		} else if (isPageUpShiftCtrl(e)) {
+			e.preventDefault();
 			this._modifyDateValue(1, "year");
-		} else if (isPageUpShift(event)) {
-			event.preventDefault();
+		} else if (isPageUpShift(e)) {
+			e.preventDefault();
 			this._modifyDateValue(1, "month");
-		} else if (isPageUp(event)) {
-			event.preventDefault();
+		} else if (isPageUp(e)) {
+			e.preventDefault();
 			this._modifyDateValue(1, "day");
-		} else if (isPageDownShiftCtrl(event)) {
-			event.preventDefault();
+		} else if (isPageDownShiftCtrl(e)) {
+			e.preventDefault();
 			this._modifyDateValue(-1, "year");
-		} else if (isPageDownShift(event)) {
-			event.preventDefault();
+		} else if (isPageDownShift(e)) {
+			e.preventDefault();
 			this._modifyDateValue(-1, "month");
-		} else if (isPageDown(event)) {
-			event.preventDefault();
+		} else if (isPageDown(e)) {
+			e.preventDefault();
 			this._modifyDateValue(-1, "day");
 		}
 	}
 
 	/**
 	 *
-	 * @param amount
-	 * @param unit
+	 * @param { number } amount
+	 * @param { string } unit
 	 * @protected
 	 */
-	_modifyDateValue(amount, unit) {
+	_modifyDateValue(amount: number, unit: string) {
 		if (!this.dateValue) {
 			return;
 		}
@@ -531,7 +524,7 @@ class DatePicker extends DateComponentBase {
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 	}
 
-	_updateValueAndFireEvents(value, normalizeValue, events, updateValue = true) {
+	_updateValueAndFireEvents(value: string, normalizeValue: boolean, events: Array<string>, updateValue = true) {
 		const valid = this._checkValueValidity(value);
 
 		if (valid && normalizeValue) {
@@ -541,8 +534,8 @@ class DatePicker extends DateComponentBase {
 		let executeEvent = true;
 		this.liveValue = value;
 
-		events.forEach(event => {
-			if (!this.fireEvent(event, { value, valid }, true)) {
+		events.forEach((e: string) => {
+			if (!this.fireEvent(e, { value, valid }, true)) {
 				executeEvent = false;
 			}
 		});
@@ -552,8 +545,10 @@ class DatePicker extends DateComponentBase {
 		}
 
 		if (updateValue) {
-			this._getInput().getInputDOMRef().then(innnerInput => {
-				innnerInput.value = value;
+			this._getInput().getInputDOMRef().then((innerInput: Input | HTMLInputElement | null) => {
+				if (innerInput) {
+					innerInput.value = value;
+				}
 			});
 			this.value = value;
 			this._updateValueState(); // Change the value state to Error/None, but only if needed
@@ -574,75 +569,89 @@ class DatePicker extends DateComponentBase {
 		this._getInput().focus();
 	}
 
-	_getInput() {
-		return this.shadowRoot.querySelector("[ui5-input]");
+	_getInput(): Input {
+		return this.shadowRoot!.querySelector<Input>("[ui5-input]")!;
 	}
 
 	/**
 	 * The ui5-input "submit" event handler - fire change event when the user presses enter
 	 * @protected
 	 */
-	_onInputSubmit(event) {}
+	_onInputSubmit() {}
 
 	/**
 	 * The ui5-input "change" event handler - fire change event when the user focuses out of the input
 	 * @protected
 	 */
-	_onInputChange(event) {
-		this._updateValueAndFireEvents(event.target.value, true, ["change", "value-changed"]);
+	_onInputChange(e: Event) {
+		this._updateValueAndFireEvents((e.target as DatePicker).value, true, ["change", "value-changed"]);
 	}
 
 	/**
 	 * The ui5-input "input" event handler - fire input even when the user types
 	 * @protected
 	 */
-	async _onInputInput(event) {
-		this._updateValueAndFireEvents(event.target.value, false, ["input"], false);
+	_onInputInput(e: KeyboardEvent) {
+		this._updateValueAndFireEvents((e.target as DatePicker).value, false, ["input"], false);
 	}
 
 	/**
+	 * Checks if the provided value is valid and within valid range.
 	 * @protected
+	 * @param { string } value
+	 * @returns { boolean }
 	 */
-	_checkValueValidity(value) {
+	_checkValueValidity(value: string): boolean {
 		if (value === "") {
 			return true;
 		}
 		return this.isValid(value) && this.isInValidRange(value);
 	}
 
-	_click(event) {
+	_click(e: MouseEvent) {
 		if (isPhone()) {
-			this.responsivePopover.showAt(this);
-			event.preventDefault(); // prevent immediate selection of any item
+			this.responsivePopover!.showAt(this);
+			e.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
-	 * @returns {boolean}
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#isValid
+	 * @param { string } [value=""] A value to be tested against the current date format
+	 * @returns { boolean }
 	 */
-	isValid(value = "") {
+	isValid(value = ""): boolean {
 		if (value === "") {
 			return true;
 		}
 
-		return !!this.getFormat().parse(value);
+		// <b>Note:</b> Format#parse accepts only boolean type for 2nd and 3rd params,
+		// but has logic related to "undefined" value, so we're calling it with "undefined" and casting to "boolean".
+		return !!this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean);
 	}
 
 	/**
 	 * Checks if a date is between the minimum and maximum date.
-	 * @param {string} value A value to be checked
-	 * @returns {boolean}
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#isInValidRange
+	 * @param { string } [value=""] A value to be checked
+	 * @returns { boolean }
 	 */
-	isInValidRange(value = "") {
+	isInValidRange(value = ""): boolean {
 		if (value === "") {
 			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();
 	}
 
@@ -650,16 +659,17 @@ class DatePicker extends DateComponentBase {
 	 * The parser understands many formats, but we need one format
 	 * @protected
 	 */
-	normalizeValue(value) {
+	normalizeValue(value: string) {
 		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
+		return this.getFormat().format(this.getFormat().parse(value, true, undefined as unknown as boolean), true); // it is important to both parse and format the date as UTC
 	}
 
-	get _displayFormat() {
-		return this.getFormat().oFormatOptions.pattern;
+	get _displayFormat(): string {
+		// @ts-ignore oFormatOptions is a private API of DateFormat
+		return this.getFormat().oFormatOptions.pattern as string;
 	}
 
 	/**
@@ -670,7 +680,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get _headerTitleText() {
-		return DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return DatePicker.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE as I18nText);
 	}
 
 	get phone() {
@@ -696,7 +706,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get openIconTitle() {
-		return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE);
+		return DatePicker.i18nBundle.getText(DATEPICKER_OPEN_ICON_TITLE as I18nText);
 	}
 
 	get openIconName() {
@@ -704,7 +714,7 @@ class DatePicker extends DateComponentBase {
 	}
 
 	get dateAriaDescription() {
-		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);
+		return DatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION as I18nText);
 	}
 
 	/**
@@ -725,7 +735,7 @@ class DatePicker extends DateComponentBase {
 
 	async _respPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem.querySelector("[ui5-responsive-popover]");
+		return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 	}
 
 	_canOpenPicker() {
@@ -737,9 +747,9 @@ class DatePicker extends DateComponentBase {
 	 * @param event
 	 * @protected
 	 */
-	onSelectedDatesChange(event) {
-		event.preventDefault();
-		const newValue = event.detail.values && event.detail.values[0];
+	onSelectedDatesChange(e: CustomEvent<CalendarChangeEventDetail>) {
+		e.preventDefault();
+		const newValue = e.detail.values && e.detail.values[0];
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 
 		this.closePicker();
@@ -762,26 +772,32 @@ class DatePicker extends DateComponentBase {
 	/**
 	 * Formats a Java Script date object into a string representing a locale date
 	 * according to the <code>formatPattern</code> property of the DatePicker instance
+	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#formatValue
 	 * @param {object} date A Java Script date object to be formatted as string
 	 * @returns {string} The date as string
-	 * @public
 	 */
-	formatValue(date) {
+	formatValue(date: Date) {
 		return this.getFormat().format(date);
 	}
 
 	/**
 	 * Closes the picker.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#closePicker
 	 */
 	closePicker() {
-		this.responsivePopover.close();
+		this.responsivePopover!.close();
 	}
 
 	/**
 	 * Opens the picker.
 	 * @public
 	 * @async
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#openPicker
 	 * @returns {Promise} Resolves when the picker is open
 	 */
 	async openPicker() {
@@ -802,8 +818,10 @@ class DatePicker extends DateComponentBase {
 
 	/**
 	 * Checks if the picker is open.
-	 * @returns {boolean} true if the picker is open, false otherwise
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.DatePicker#isOpen
+	 * @returns {boolean} true if the picker is open, false otherwise
 	 */
 	isOpen() {
 		return !!this._isPickerOpen;
@@ -812,16 +830,21 @@ class DatePicker extends DateComponentBase {
 	/**
 	 * Currently selected date represented as a Local JavaScript Date instance.
 	 *
-	 * @readonly
-	 * @type {Date}
 	 * @public
+	 * @readonly
+	 * @name sap.ui.webc.main.DatePicker.prototype.dateValue
+	 * @type { Date }
 	 */
-	get dateValue() {
-		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
+	get dateValue(): Date | null {
+		const utc = undefined as unknown as boolean;
+		const strict = undefined as unknown as boolean;
+		return this.liveValue ? this.getFormat().parse(this.liveValue, utc, strict) as Date : this.getFormat().parse(this.value, utc, strict) as Date;
 	}
 
-	get dateValueUTC() {
-		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
+	get dateValueUTC(): Date | null {
+		const utc = undefined as unknown as boolean;
+		const strict = undefined as unknown as boolean;
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true, strict) as Date : this.getFormat().parse(this.value, utc, strict) as Date;
 	}
 
 	get styles() {
@@ -851,3 +874,5 @@ class DatePicker extends DateComponentBase {
 DatePicker.define();
 
 export default DatePicker;
+
+export type { DatePickerChangeEventDetail };