feat(ui5-calendar): introduce new component. (#2424)

"CalendarSelection" enumeration is introduced with single, multiple and
range selection modes.
DayPicker component uses the new "CalendarSelection" class,
in order to provide support for the three selection modes.
Selection of multiple dates can be configured via the "selection"
property of the Calendar component. Holding control keyboard key doesn't
allow multiple dates selection.
The logic for selecting a range of dates is moved from
the DateRangePicker component into the DayPicker component.
Selecting a range of dates via mouse now doesn't cause flickering
on the hovered items.
Updating the selected date range into the DateRangePicker component
input field is now reflected visually, when the popover is opened.
DateRangePicker now works properly with only start date of the range
typed into the input field.
Calendar navigation is now compliant with the specification.
Playground sample is created.

Fixes #1730

Author: unazko

packages/base/src/types/CalendarSelection.js

@@ -0,0 +1,17 @@
+import DataType from "./DataType.js";
+
+const CalendarSelections = {
+	Single: "Single",
+	Multiple: "Multiple",
+	Range: "Range",
+};
+
+class CalendarSelection extends DataType {
+	static isValid(value) {
+		return !!CalendarSelections[value];
+	}
+}
+
+CalendarSelection.generateTypeAcessors(CalendarSelections);
+
+export default CalendarSelection;

packages/main/src/Calendar.hbs

@@ -1,7 +1,8 @@
 <div
 	class="{{classes.main}}"
 	style="{{styles.main}} "
-	@keydown={{_onkeydown}}	
+	@keydown={{_onkeydown}}
+	@focusout={{_onfocusout}}
 >
 
 	<ui5-calendar-header
@@ -16,6 +17,7 @@
 		._isNextButtonDisabled="{{_header._isNextButtonDisabled}}"
 		._isPrevButtonDisabled="{{_header._isPrevButtonDisabled}}"
 		._isMonthButtonHidden="{{_header._isMonthButtonHidden}}"
+		._tabIndex="{{_header.tabIndex}}"
 	></ui5-calendar-header>
 
 	<div id="{{_id}}-content">
@@ -26,6 +28,7 @@
 			.selectedDates="{{_oMonth.selectedDates}}"
 			._hidden="{{_oMonth._hidden}}"
 			.primaryCalendarType="{{_oMonth.primaryCalendarType}}"
+			.selection="{{_oMonth.selection}}"
 			.minDate="{{_oMonth.minDate}}"
 			.maxDate="{{_oMonth.maxDate}}"
 			timestamp="{{_oMonth.timestamp}}"