@ui5/webcomponents 0.0.0-e0658a650 → 0.0.0-e55c2cec6

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

@@ -1,40 +1,18 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
+import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+// @ts-ignore
 import { DATERANGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
 import DatePicker from "./DatePicker.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-daterange-picker",
-	properties: /** @lends sap.ui.webcomponents.main.DateRangePicker.prototype */ {
-		/**
-		 * Determines the symbol which separates the dates.
-		 * If not supplied, the default time interval delimiter for the current locale will be used.
-		 *
-		 * @type {string}
-		 * @public
-		 */
-		delimiter: {
-			type: String,
-			defaultValue: "-",
-		},
-
-		/**
-		 * The first date in the range during selection (this is a temporary value, not the first date in the value range)
-		 * @private
-		 */
-		_tempValue: {
-			type: String,
-		},
-	},
-};
+import type { DatePickerChangeEventDetail } from "./DatePicker.js";
 
 /**
  * @class
@@ -69,18 +47,37 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.DateRangePicker
- * @extends sap.ui.webcomponents.main.DatePicker
+ * @alias sap.ui.webc.main.DateRangePicker
+ * @extends sap.ui.webc.main.DatePicker
  * @tagname ui5-daterange-picker
  * @since 1.0.0-rc.8
  * @public
  */
+@customElement("ui5-daterange-picker")
 class DateRangePicker extends DatePicker {
-	static get metadata() {
-		return metadata;
-	}
+	 /**
+	 * Determines the symbol which separates the dates.
+	 * If not supplied, the default time interval delimiter for the current locale will be used.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.DateRangePicker.prototype.delimiter
+	 * @defaultvalue "-"
+	 * @public
+	 */
+	@property({ defaultValue: "-" })
+	delimiter!: string;
 
-	static get styles() {
+	 /**
+	 * The first date in the range during selection (this is a temporary value, not the first date in the value range)
+	 *
+	 * @private
+	 */
+	@property()
+	_tempValue!: string;
+
+	private _prevDelimiter: string | null;
+
+	static get styles(): ComponentStylesData {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
@@ -95,6 +92,7 @@ class DateRangePicker extends DatePicker {
 	 * @readonly
 	 * @type {Date}
 	 * @public
+	 * @name sap.ui.webc.main.DateRangePicker.prototype.dateValue
 	 */
 	get dateValue() {
 		return null;
@@ -106,6 +104,7 @@ class DateRangePicker extends DatePicker {
 	 * @readonly
 	 * @type {Date}
 	 * @public
+	 * @name sap.ui.webc.main.DateRangePicker.prototype.dateValueUTC
 	 */
 	get dateValueUTC() {
 		return null;
@@ -120,7 +119,7 @@ class DateRangePicker extends DatePicker {
 	}
 
 	get _tempTimestamp() {
-		return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
+		return this._tempValue && (this.getFormat().parse(this._tempValue, true, undefined as unknown as boolean) as Date).getTime() / 1000;
 	}
 
 	/**
@@ -159,9 +158,10 @@ class DateRangePicker extends DatePicker {
 	 * @readonly
 	 * @type {Date}
 	 * @public
+	 * @name sap.ui.webc.main.DateRangePicker.prototype.startDateValue
 	 */
 	get startDateValue() {
-		return CalendarDate.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
+		return CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000).toLocalJSDate();
 	}
 
 	/**
@@ -170,9 +170,10 @@ class DateRangePicker extends DatePicker {
 	 * @readonly
 	 * @type {Date}
 	 * @public
+	 * @name sap.ui.webc.main.DateRangePicker.prototype.endDateValue
 	 */
 	get endDateValue() {
-		return CalendarDate.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
+		return CalendarDate.fromTimestamp(this._endDateTimestamp! * 1000).toLocalJSDate();
 	}
 
 	/**
@@ -183,13 +184,13 @@ class DateRangePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION as I18nText);
 	}
 
 	/**
 	 * @override
 	 */
-	async _onInputSubmit(event) {
+	async _onInputSubmit() {
 		const input = this._getInput();
 		const caretPos = input.getCaretPosition();
 		await renderFinished();
@@ -207,7 +208,7 @@ class DateRangePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	isValid(value) {
+	isValid(value: string): boolean {
 		const parts = this._splitValueByDelimiter(value);
 		return parts.length <= 2 && parts.every(dateString => super.isValid(dateString)); // must be at most 2 dates and each must be valid
 	}
@@ -215,7 +216,7 @@ class DateRangePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	isInValidRange(value) {
+	isInValidRange(value: string): boolean {
 		return this._splitValueByDelimiter(value).every(dateString => super.isInValidRange(dateString));
 	}
 
@@ -223,7 +224,7 @@ class DateRangePicker extends DatePicker {
 	 * Extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)
 	 * @override
 	 */
-	normalizeValue(value) {
+	normalizeValue(value: string) {
 		const firstDateTimestamp = this._extractFirstTimestamp(value);
 		const lastDateTimestamp = this._extractLastTimestamp(value);
 		if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary
@@ -235,7 +236,7 @@ class DateRangePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	onSelectedDatesChange(event) {
+	onSelectedDatesChange(event: CustomEvent<DatePickerChangeEventDetail>) {
 		event.preventDefault(); // never let the calendar update its own dates, the parent component controls them
 		const values = event.detail.values;
 
@@ -247,8 +248,7 @@ class DateRangePicker extends DatePicker {
 			this._tempValue = values[0];
 			return;
 		}
-
-		const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
+		const newValue = this._buildValue(event.detail.dates[0], event.detail.dates[1]); // the value will be normalized so we don't need to order them here
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 		this.closePicker();
 	}
@@ -256,17 +256,17 @@ class DateRangePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	async _modifyDateValue(amount, unit) {
+	async _modifyDateValue(amount: number, unit: string) {
 		if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
 			return super._modifyDateValue(amount, unit);
 		}
 
 		const input = this._getInput();
-		let caretPos = input.getCaretPosition();
-		let newValue;
+		let caretPos: number = input.getCaretPosition()!; // caret position is always number for input of type text;
+		let newValue: string;
 
-		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the seoond date
-			const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
+		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the second date
+			const startDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._startDateTimestamp! * 1000), amount, unit, this._minDate, this._maxDate);
 			const newStartDateTimestamp = startDateModified.valueOf() / 1000;
 			if (newStartDateTimestamp > this._endDateTimestamp) { // dates flipped -> move the caret to the same position but on the last date
 				caretPos += Math.ceil(this.value.length / 2);
@@ -276,7 +276,7 @@ class DateRangePicker extends DatePicker {
 			const endDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._endDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
 			const newEndDateTimestamp = endDateModified.valueOf() / 1000;
 			newValue = this._buildValue(this._startDateTimestamp, newEndDateTimestamp); // the value will be normalized so we don't try to order them here
-			if (newEndDateTimestamp < this._startDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
+			if (newEndDateTimestamp < this._startDateTimestamp!) { // dates flipped -> move the caret to the same position but on the first date
 				caretPos -= Math.ceil(this.value.length / 2);
 			}
 		}
@@ -286,16 +286,17 @@ class DateRangePicker extends DatePicker {
 		input.setCaretPosition(caretPos); // Return the caret to the previous (or the adjusted, if dates flipped) position after rendering
 	}
 
-	get _effectiveDelimiter() {
-		return this.delimiter || this.constructor.getMetadata().getProperties().delimiter.defaultValue; // treat empty string as the default value
+	get _effectiveDelimiter(): string {
+		const ctor = this.constructor as typeof DateRangePicker;
+		return this.delimiter || (ctor.getMetadata().getProperties().delimiter.defaultValue) as string;
 	}
 
-	_splitValueByDelimiter(value) {
-		const valuesArray = [];
+	_splitValueByDelimiter(value: string) {
+		const valuesArray: Array<string> = [];
 		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
 		// if format successfully parse the value, the value contains only single date
-		if (this.getFormat().parse(value)) {
+		if (this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean)) {
 			valuesArray[0] = partsArray.join(this._effectiveDelimiter);
 			valuesArray[1] = "";
 		} else {
@@ -310,27 +311,30 @@ class DateRangePicker extends DatePicker {
 	 * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty
 	 * @private
 	 */
-	_extractFirstTimestamp(value) {
+	_extractFirstTimestamp(value: string) {
 		if (!value || !this._checkValueValidity(value)) {
 			return undefined;
 		}
 
 		const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)
-		return this.getFormat().parse(dateStrings[0], true).getTime() / 1000;
+
+		const parsedDate = this.getFormat().parse(dateStrings[0], true, undefined as unknown as boolean) as Date;
+		return parsedDate.getTime() / 1000;
 	}
 
 	/**
 	 * Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date
 	 * @private
 	 */
-	_extractLastTimestamp(value) {
+	_extractLastTimestamp(value: string) {
 		if (!value || !this._checkValueValidity(value)) {
 			return undefined;
 		}
 
 		const dateStrings = this._splitValueByDelimiter(value);
 		if (dateStrings[1]) {
-			return this.getFormat().parse(dateStrings[1], true).getTime() / 1000;
+			const parsedDate = this.getFormat().parse(dateStrings[1], true, undefined as unknown as boolean) as Date;
+			return parsedDate.getTime() / 1000;
 		}
 
 		return undefined;
@@ -340,7 +344,7 @@ class DateRangePicker extends DatePicker {
 	 * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp
 	 * @private
 	 */
-	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+	_buildValue(firstDateTimestamp: number | undefined, lastDateTimestamp: number | undefined) {
 		this._prevDelimiter = this._effectiveDelimiter;
 		if (firstDateTimestamp) {
 			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);

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

@@ -1,15 +1,23 @@
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateBy.js";
 import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
 import "@ui5/webcomponents-icons/dist/date-time.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
 import Button from "./Button.js";
+// @ts-ignore
 import ToggleButton from "./ToggleButton.js";
+// @ts-ignore
 import SegmentedButton from "./SegmentedButton.js";
 import Calendar from "./Calendar.js";
+import type { CalendarChangeEventDetail } from "./Calendar.js";
 import DatePicker from "./DatePicker.js";
 import TimeSelection from "./TimeSelection.js";
+import type { TimeSelectionChangeEventDetail, TimeSelectionSliderChangeEventDetail } from "./TimeSelection.js";
 
 // i18n texts
 import {
@@ -18,6 +26,7 @@ import {
 	DATETIME_DESCRIPTION,
 	DATETIME_PICKER_DATE_BUTTON,
 	DATETIME_PICKER_TIME_BUTTON,
+	// @ts-ignore
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -29,58 +38,18 @@ import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.c
 
 const PHONE_MODE_BREAKPOINT = 640; // px
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-datetime-picker",
-	properties: /** @lends sap.ui.webcomponents.main.DateTimePicker.prototype */ {
-
-		/**
-		 * Defines the visibility of the time view in <code>phoneMode</code>.
-		 * For more information, see the <code>phoneMode</code> property.
-		 *
-		 * <br><br>
-		 * <b>Note:</b> The date view would be displayed by default.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
-		 */
-		_showTimeView: {
-			type: Boolean,
-			noAttribute: true,
-		},
-
-		/**
-		 * Defines if the <code>DateTimePicker</code> should be displayed in phone mode.
-		 * The phone mode turns on when the component is used on small screens or phone devices.
-		 * In phone mode the user can see either the calendar view, or the time view
-		 * and can switch between the views via toggle buttons.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @private
-		 */
-		_phoneMode: {
-			type: Boolean,
-		},
-
-		/**
-		 * Selected, but not yet confirmed date/time
-		 * @private
-		 */
-		_previewValues: {
-			type: Object,
-		},
-
-		/**
-		 * @private
-		 */
-		_currentTimeSlider: {
-			type: String,
-			defaultValue: "hours",
-		},
-	},
-};
+type PreviewValues = {
+	timeSelectionValue?: string,
+	calendarTimestamp?: number,
+	calendarValue?: string,
+}
+
+type TempResponsivePopover = HTMLElement & {
+	initialFocus: string,
+	showAt: (opener: HTMLElement) => Promise<void>,
+	close: () => void,
+	resetFocus: () => void,
+}
 
 /**
  * @class
@@ -147,26 +116,63 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.DateTimePicker
- * @extends sap.ui.webcomponents.main.DatePicker
+ * @alias sap.ui.webc.main.DateTimePicker
+ * @extends sap.ui.webc.main.DatePicker
  * @tagname ui5-datetime-picker
  * @since 1.0.0-rc.7
  * @public
  */
+@customElement("ui5-datetime-picker")
 class DateTimePicker extends DatePicker {
-	static get metadata() {
-		return metadata;
-	}
+	/**
+	 * Defines the visibility of the time view in <code>phoneMode</code>.
+	 * For more information, see the <code>phoneMode</code> property.
+	 *
+	 * <br><br>
+	 * <b>Note:</b> The date view would be displayed by default.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @private
+	 */
+	@property({ type: Boolean, noAttribute: true })
+	_showTimeView!: boolean;
+
+	/**
+	 * Defines if the <code>DateTimePicker</code> should be displayed in phone mode.
+	 * The phone mode turns on when the component is used on small screens or phone devices.
+	 * In phone mode the user can see either the calendar view, or the time view
+	 * and can switch between the views via toggle buttons.
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_phoneMode!: boolean;
+
+	/**
+	 * Selected, but not yet confirmed date/time
+	 * @private
+	 */
+	@property({ type: Object })
+	_previewValues!: PreviewValues;
+
+	/**
+	 * @private
+	 */
+	@property({ defaultValue: "hours" })
+	_currentTimeSlider!: string;
+
+	_handleResizeBound: () => void;
 
 	static get staticAreaTemplate() {
 		return DateTimePickerPopoverTemplate;
 	}
 
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return [super.styles, DateTimePickerCss];
 	}
 
-	static get staticAreaStyles() {
+	static get staticAreaStyles(): ComponentStylesData {
 		return [super.staticAreaStyles, DateTimePickerPopoverCss];
 	}
 
@@ -265,19 +271,19 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get btnOKLabel() {
-		return DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON as I18nText);
 	}
 
 	get btnCancelLabel() {
-		return DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON as I18nText);
 	}
 
 	get btnDateLabel() {
-		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON as I18nText);
 	}
 
 	get btnTimeLabel() {
-		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON as I18nText);
 	}
 
 	get showFooter() {
@@ -297,7 +303,7 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION as I18nText);
 	}
 
 	/**
@@ -315,26 +321,27 @@ class DateTimePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	onSelectedDatesChange(event) {
-		event.preventDefault();
-		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
+	onSelectedDatesChange(e: CustomEvent<CalendarChangeEventDetail>) {
+		e.preventDefault();
+		// @ts-ignore Needed for FF
+		const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
 		this._previewValues = {
 			...this._previewValues,
-			calendarTimestamp: event.detail.timestamp,
-			calendarValue: event.detail.values[0],
+			calendarTimestamp: e.detail.timestamp,
+			calendarValue: e.detail.values[0],
 			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}
 
-	onTimeSelectionChange(event) {
+	onTimeSelectionChange(e: CustomEvent<TimeSelectionChangeEventDetail>) {
 		this._previewValues = {
 			...this._previewValues,
-			timeSelectionValue: event.detail.value,
+			timeSelectionValue: e.detail.value,
 		};
 	}
 
-	onTimeSliderChange(event) {
-		this._currentTimeSlider = event.detail.slider;
+	onTimeSliderChange(e: CustomEvent<TimeSelectionSliderChangeEventDetail>) {
+		this._currentTimeSlider = e.detail.slider;
 	}
 
 	/**
@@ -379,10 +386,11 @@ class DateTimePicker extends DatePicker {
 	/**
 	 * Handles the date/time switch available in <code>phoneMode</code> to switch
 	 * between the date and time views.
-	 * @param {Event} event
+	 * @param {Event} e
 	 */
-	_dateTimeSwitchChange(event) {
-		this._showTimeView = event.target.getAttribute("key") === "Time";
+	_dateTimeSwitchChange(e: CustomEvent) { // Note: fix when SegmentedButton is implemented in TS
+		const target = e.target as HTMLElement;
+		this._showTimeView = target.getAttribute("key") === "Time";
 		if (this._showTimeView) {
 			this._currentTimeSlider = "hours";
 		}
@@ -391,7 +399,7 @@ class DateTimePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	_modifyDateValue(amount, unit) {
+	_modifyDateValue(amount: number, unit: string) {
 		if (!this.dateValue) {
 			return;
 		}
@@ -408,12 +416,12 @@ class DateTimePicker extends DatePicker {
 
 	async getPicker() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem.querySelector("[ui5-responsive-popover]");
+		return staticAreaItem!.querySelector<TempResponsivePopover>("[ui5-responsive-popover]")!;
 	}
 
 	getSelectedDateTime() {
-		const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
-		const selectedTime = this.getFormat().parse(this._timeSelectionValue);
+		const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0], undefined as unknown as boolean, undefined as unknown as boolean) as Date;
+		const selectedTime = this.getFormat().parse(this._timeSelectionValue, undefined as unknown as boolean, undefined as unknown as boolean) as Date;
 		if (selectedTime) {
 			selectedDate.setHours(selectedTime.getHours());
 			selectedDate.setMinutes(selectedTime.getMinutes());