refactor(ui5-calendar): rename selected-dates-change to `selection-…

…change` and rename few event details (#8529)

Renames the `selected-dates-change ` event name of the Calendar to `selection-change` and the names of two event details - `values` and `dates`  to `selectedValues` and `selectedDateValues` respectively.

BREAKING CHANGE: The event `selected-dates-change ` is renamed to `selection-change`. In addition the event details
`values` and `dates` are renamed to `selectedValues` and `selectedDateValues`. If you previously used the Calendar event as follows:
```ts
myCalendar.addEventListener("selected-dates-change", () => {
    const values = e.detail.values;
    const dates = e.detail.dates;
})
```
Now you have to use the new event name and details:
```ts
myCalendar.addEventListener("selection-change", () => {
   const values = event.detail.selectedValues;
   const dates = event.detail.selectedDateValues;
})
```

Related to: #8461

packages/main/src/Calendar.ts

@@ -49,9 +49,9 @@ interface ICalendarPicker {
 	_lastYear?: number,
 }
 
-type CalendarSelectedDatesChangeEventDetail = {
-	values: Array<string>,
-	dates: Array<number>,
+type CalendarSelectionChangeEventDetail = {
+	selectedValues: Array<string>,
+	selectedDates: Array<number>,
 	timestamp: number | undefined,
 }
 
@@ -72,7 +72,7 @@ type SpecialCalendarDateT = {
  * date string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.
  * Whenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances
  * of `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the
- * `selected-dates-change` event. This is useful if you want to control the selected dates externally.
+ * `selection-change` event. This is useful if you want to control the selected dates externally.
  *
  * ### Usage
  *
@@ -177,20 +177,20 @@ type SpecialCalendarDateT = {
  * **Note:** If you call `preventDefault()` for this event, the component will not
  * create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
  * @allowPreventDefault
- * @param {Array<string>} values The selected dates
- * @param {Array<number>} dates The selected dates as UTC timestamps
+ * @param {Array<string>} selectedValues The selected dates
+ * @param {Array<number>} selectedDates The selected dates as UTC timestamps
  * @public
  */
-@event<CalendarSelectedDatesChangeEventDetail>("selected-dates-change", {
+@event<CalendarSelectionChangeEventDetail>("selection-change", {
 	detail: {
 		/**
 		 * @public
 		 */
-		dates: { type: Array },
+		selectedDates: { type: Array },
 		/**
 		 * @public
 		 */
-		values: { type: Array },
+		selectedValues: { type: Array },
 
 		timestamp: { type: Number },
 	},
@@ -523,7 +523,7 @@ class Calendar extends CalendarPart {
 			return this.getFormat().format(calendarDate.toUTCJSDate(), true);
 		});
 
-		const defaultPrevented = !this.fireEvent<CalendarSelectedDatesChangeEventDetail>("selected-dates-change", { timestamp: this.timestamp, dates: [...selectedDates], values: datesValues }, true);
+		const defaultPrevented = !this.fireEvent<CalendarSelectionChangeEventDetail>("selection-change", { timestamp: this.timestamp, selectedDates: [...selectedDates], selectedValues: datesValues }, true);
 		if (!defaultPrevented) {
 			this._setSelectedDates(selectedDates);
 		}
@@ -607,6 +607,6 @@ Calendar.define();
 export default Calendar;
 export type {
 	ICalendarPicker,
-	CalendarSelectedDatesChangeEventDetail,
+	CalendarSelectionChangeEventDetail,
 	SpecialCalendarDateT,
 };

packages/main/src/DatePicker.ts

@@ -39,7 +39,7 @@ import Icon from "./Icon.js";
 import Button from "./Button.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Calendar from "./Calendar.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
 import CalendarDateComponent from "./CalendarDate.js";
 import Input from "./Input.js";
 import InputType from "./types/InputType.js";
@@ -763,9 +763,9 @@ class DatePicker extends DateComponentBase implements IFormElement {
 	 * @param e
 	 * @protected
 	 */
-	onSelectedDatesChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>) {
+	onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {
 		e.preventDefault();
-		const newValue = e.detail.values && e.detail.values[0];
+		const newValue = e.detail.selectedValues && e.detail.selectedValues[0];
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 
 		this.closePicker();

packages/main/src/DatePickerPopover.hbs

@@ -44,7 +44,7 @@
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
-		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+		@ui5-selection-change="{{onSelectedDatesChange}}"
 		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
 		@ui5-show-year-press="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"

packages/main/src/DateRangePicker.ts

@@ -15,7 +15,7 @@ import type {
 	DatePickerChangeEventDetail as DateRangePickerChangeEventDetail,
 	DatePickerInputEventDetail as DateRangePickerInputEventDetail,
 } from "./DatePicker.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
 
 /**
  * @class
@@ -215,9 +215,9 @@ class DateRangePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	onSelectedDatesChange(event: CustomEvent<CalendarSelectedDatesChangeEventDetail>) {
+	onSelectedDatesChange(event: CustomEvent<CalendarSelectionChangeEventDetail>) {
 		event.preventDefault(); // never let the calendar update its own dates, the parent component controls them
-		const values = event.detail.values;
+		const values = event.detail.selectedValues;
 
 		if (values.length === 0) {
 			return;
@@ -227,7 +227,7 @@ class DateRangePicker extends DatePicker {
 			this._tempValue = values[0];
 			return;
 		}
-		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
+		const newValue = this._buildValue(event.detail.selectedDates[0], event.detail.selectedDates[1]); // the value will be normalized so we don't need to order them here
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
 		this.closePicker();
 	}

packages/main/src/DateTimePicker.ts

@@ -12,7 +12,7 @@ import type ResponsivePopover from "./ResponsivePopover.js";
 import ToggleButton from "./ToggleButton.js";
 import SegmentedButton from "./SegmentedButton.js";
 import Calendar from "./Calendar.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
 import DatePicker from "./DatePicker.js";
 import type {
 	DatePickerChangeEventDetail as DateTimePickerChangeEventDetail,
@@ -296,14 +296,14 @@ class DateTimePicker extends DatePicker {
 	/**
 	 * @override
 	 */
-	onSelectedDatesChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>) {
+	onSelectedDatesChange(e: CustomEvent<CalendarSelectionChangeEventDetail>) {
 		e.preventDefault();
 		// @ts-ignore Needed for FF
 		const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: e.detail.timestamp,
-			calendarValue: e.detail.values[0],
+			calendarValue: e.detail.selectedValues[0],
 			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}

packages/main/src/DateTimePickerPopover.hbs

@@ -24,7 +24,7 @@
 			.selectionMode="{{_calendarSelectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
-			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+			@ui5-selection-change="{{onSelectedDatesChange}}"
 			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
 			@ui5-show-year-press="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"

packages/main/test/pages/Calendar.html

@@ -100,8 +100,8 @@
 		toggleButton.innerHTML = event.target.pressed ? "show" : "hide";
 	});
 
-	calendar1.addEventListener("ui5-selected-dates-change", function(event) {
-		textArea.setAttribute("value", event.detail.dates.join(", ") + " / " + event.detail.values.join(", "));
+	calendar1.addEventListener("ui5-selection-change", function(event) {
+		textArea.setAttribute("value", event.detail.selectedDates.join(", ") + " / " + event.detail.selectedValues.join(", "));
 	});
 </script>