@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/src/DatePickerPopover.hbs

@@ -5,9 +5,8 @@
 	placement-type="Bottom"
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
-	no-arrow
+	hide-arrow
 	with-padding
-	no-stretch
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
@@ -42,12 +41,15 @@
 	<ui5-calendar
 		id="{{_id}}-calendar"
 		primary-calendar-type="{{_primaryCalendarType}}"
+		secondary-calendar-type="{{secondaryCalendarType}}"
 		format-pattern="{{_formatPattern}}"
 		timestamp="{{_calendarTimestamp}}"
 		.selectionMode="{{_calendarSelectionMode}}"
 		.minDate="{{minDate}}"
 		.maxDate="{{maxDate}}"
 		@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+		@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+		@ui5-show-year-press="{{onHeaderShowYearPress}}"
 		?hide-week-numbers="{{hideWeekNumbers}}"
 		._currentPicker="{{_calendarCurrentPicker}}"
 	>
@@ -58,3 +60,4 @@
 {{/inline}}
 
 {{#*inline "footer"}}{{/inline}}
+

package/src/DateRangePicker.js

@@ -2,6 +2,7 @@ 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 { DATERANGE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DateRangePickerCss from "./generated/themes/DateRangePicker.css.js";
@@ -47,7 +48,7 @@ const metadata = {
  * For the <code>ui5-daterange-picker</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/DateRangePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/DateRangePicker.js";</code>
  *
  * <h3>Keyboard Handling</h3>
  * The <code>ui5-daterange-picker</code> provides advanced keyboard handling.
@@ -83,14 +84,40 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
-	get _firstDateTimestamp() {
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValue() {
+		return null;
+	}
+
+	/**
+	 * <b>Note:</b> The getter method is inherited and not supported. If called it will return an empty value.
+	 *
+	 * @readonly
+	 * @type { Date }
+	 * @public
+	 */
+	get dateValueUTC() {
+		return null;
+	}
+
+	get _startDateTimestamp() {
 		return this._extractFirstTimestamp(this.value);
 	}
 
-	get _lastDateTimestamp() {
+	get _endDateTimestamp() {
 		return this._extractLastTimestamp(this.value);
 	}
 
+	get _tempTimestamp() {
+		return this._tempValue && this.getFormat().parse(this._tempValue, true).getTime() / 1000;
+	}
+
 	/**
 	 * Required by DatePicker.js
 	 * @override
@@ -104,7 +131,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	get _calendarTimestamp() {
-		return this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
+		return this._tempTimestamp || this._startDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
 	/**
@@ -122,25 +149,25 @@ class DateRangePicker extends DatePicker {
 	}
 
 	/**
-	 * Currently selected first date represented as JavaScript Date instance.
+	 * Returns the start date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get firstDateValue() {
-		return CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000).toLocalJSDate();
+	get startDateValue() {
+		return CalendarDate.fromTimestamp(this._startDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
-	 * Currently selected last date represented as JavaScript Date instance.
+	 * Returns the end date of the currently selected range as JavaScript Date instance.
 	 *
 	 * @readonly
 	 * @type { Date }
 	 * @public
 	 */
-	get lastDateValue() {
-		return CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000).toLocalJSDate();
+	get endDateValue() {
+		return CalendarDate.fromTimestamp(this._endDateTimestamp * 1000).toLocalJSDate();
 	}
 
 	/**
@@ -150,6 +177,10 @@ class DateRangePicker extends DatePicker {
 		return this.placeholder !== undefined ? this.placeholder : `${this._displayFormat} ${this._effectiveDelimiter} ${this._displayFormat}`;
 	}
 
+	get dateAriaDescription() {
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
+	}
+
 	/**
 	 * @override
 	 */
@@ -160,6 +191,14 @@ class DateRangePicker extends DatePicker {
 		input.setCaretPosition(caretPos); // Return the caret on the previous position after rendering
 	}
 
+	/**
+	 * @override
+	 */
+	 onResponsivePopoverAfterClose() {
+		this._tempValue = ""; // reset _tempValue on popover close
+		super.onResponsivePopoverAfterClose();
+	}
+
 	/**
 	 * @override
 	 */
@@ -206,8 +245,6 @@ class DateRangePicker extends DatePicker {
 
 		const newValue = this._buildValue(...event.detail.dates); // the value will be normalized so we don't need to order them here
 		this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
-		this._tempValue = "";
-		this._focusInputAfterClose = true;
 		this.closePicker();
 	}
 
@@ -215,7 +252,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	async _modifyDateValue(amount, unit) {
-		if (!this._lastDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
+		if (!this._endDateTimestamp) { // If empty or only one date -> treat as datepicker entirely
 			return super._modifyDateValue(amount, unit);
 		}
 
@@ -224,17 +261,17 @@ class DateRangePicker extends DatePicker {
 		let newValue;
 
 		if (caretPos <= this.value.indexOf(this._effectiveDelimiter)) { // The user is focusing the first date -> change it and keep the seoond date
-			const firstDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._firstDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newFirstDateTimestamp = firstDateModified.valueOf() / 1000;
-			if (newFirstDateTimestamp > this._lastDateTimestamp) { // dates flipped -> move the caret to the same position but on the last 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);
 			}
-			newValue = this._buildValue(newFirstDateTimestamp, this._lastDateTimestamp); // the value will be normalized so we don't try to order them here
+			newValue = this._buildValue(newStartDateTimestamp, this._endDateTimestamp); // the value will be normalized so we don't try to order them here
 		} else {
-			const lastDateModified = modifyDateBy(CalendarDate.fromTimestamp(this._lastDateTimestamp * 1000), amount, unit, this._minDate, this._maxDate);
-			const newLastDateTimestamp = lastDateModified.valueOf() / 1000;
-			newValue = this._buildValue(this._firstDateTimestamp, newLastDateTimestamp); // the value will be normalized so we don't try to order them here
-			if (newLastDateTimestamp < this._firstDateTimestamp) { // dates flipped -> move the caret to the same position but on the first date
+			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
 				caretPos -= Math.ceil(this.value.length / 2);
 			}
 		}

package/src/DateTimePicker.js

@@ -15,6 +15,7 @@ import TimeSelection from "./TimeSelection.js";
 import {
 	TIMEPICKER_SUBMIT_BUTTON,
 	TIMEPICKER_CANCEL_BUTTON,
+	DATETIME_DESCRIPTION,
 	DATETIME_PICKER_DATE_BUTTON,
 	DATETIME_PICKER_TIME_BUTTON,
 } from "./generated/i18n/i18n-defaults.js";
@@ -101,9 +102,6 @@ const metadata = {
  * </ul>
  *
  * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
- * <br><br>
- * As most of the input based components, the <code>DateTimePicker</code> supports properties,
- * such as: <code>disabled</code>, <code>readonly</code>, <code>valueState</code> and  <code>placeholder</code>.
  *
  * <h3>Formatting</h3>
  *
@@ -145,7 +143,7 @@ const metadata = {
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/DateTimePicker.js";</code>
+ * <code>import "@ui5/webcomponents/dist/DateTimePicker.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -264,19 +262,19 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get btnOKLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON);
 	}
 
 	get btnCancelLabel() {
-		return this.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
+		return DateTimePicker.i18nBundle.getText(TIMEPICKER_CANCEL_BUTTON);
 	}
 
 	get btnDateLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_DATE_BUTTON);
 	}
 
 	get btnTimeLabel() {
-		return this.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
+		return DateTimePicker.i18nBundle.getText(DATETIME_PICKER_TIME_BUTTON);
 	}
 
 	get showFooter() {
@@ -295,6 +293,10 @@ class DateTimePicker extends DatePicker {
 		return super.phone || this._phoneMode;
 	}
 
+	get dateAriaDescription() {
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
+	}
+
 	/**
 	 * Defines whether the dialog on mobile should have header
 	 * @private
@@ -312,11 +314,13 @@ class DateTimePicker extends DatePicker {
 	 */
 	onSelectedDatesChange(event) {
 		event.preventDefault();
+		const dateTimePickerContent = event.path ? event.path[1] : event.composedPath()[1];
 
 		this._previewValues = {
 			...this._previewValues,
 			calendarTimestamp: event.detail.timestamp,
 			calendarValue: event.detail.values[0],
+			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}
 
@@ -363,7 +367,7 @@ class DateTimePicker extends DatePicker {
 			this.fireEvent("value-changed", { value: this.value, valid });
 		}
 
-		this._focusInputAfterClose = true;
+		this._updateValueState();
 		this.closePicker();
 	}
 

package/src/DateTimePickerPopover.hbs

@@ -4,10 +4,10 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmentedbutton style="width: 8rem">
-				<ui5-togglebutton key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-togglebutton>
-				<ui5-togglebutton key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-togglebutton>
-			</ui5-segmentedbutton>
+			<ui5-segmented-button class="ui5-dt-picker-toggle-button">
+				<ui5-toggle-button key="Date" ?pressed="{{showDateView}}" @click="{{_dateTimeSwitchChange}}">{{btnDateLabel}}</ui5-toggle-button>
+				<ui5-toggle-button key="Time" ?pressed="{{showTimeView}}" @click="{{_dateTimeSwitchChange}}">{{btnTimeLabel}}</ui5-toggle-button>
+			</ui5-segmented-button>
 		</div>
 	{{/if}}
 {{/inline}}
@@ -24,6 +24,8 @@
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			@ui5-selected-dates-change="{{onSelectedDatesChange}}"
+			@ui5-show-month-press="{{onHeaderShowMonthPress}}"
+			@ui5-show-year-press="{{onHeaderShowYearPress}}"
 			?hide-week-numbers="{{hideWeekNumbers}}"
 			._currentPicker="{{_calendarCurrentPicker}}"
 		>

package/src/DayPicker.hbs

@@ -6,9 +6,10 @@
 	@click={{_onclick}}
 	@mouseover={{_onmouseover}}
 	@focusin={{_onfocusin}}
+	@focusout={{_onfocusout}}
 >
 
-	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="Calendar">
+	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="{{ariaRoledescription}}">
 		<div role="row" class="ui5-dp-days-names-container">
 			{{#each _dayNames}}
 				<div
@@ -22,7 +23,7 @@
 		</div>
 		{{#each _weeks}}
 			{{#if this.length}}
-				<div style="display: flex;" role="row">
+				<div class="ui5-dp-weeks-row" role="row">
 					{{#each this}}
 						{{#if this.timestamp}}
 							<div
@@ -38,8 +39,13 @@
 										class="ui5-dp-daytext"
 										data-sap-timestamp="{{this.timestamp}}"
 									>
-											{{this.iDay}}
+										{{this.day}}
 									</span>
+									{{#if this._isSecondaryCalendarType}}
+										<span class="ui5-dp-daytext ui5-dp-daysectext" >
+											{{this.secondDay}}
+										</span>
+									{{/if}}
 							</div>
 						{{else}}
 							{{#unless this.isHidden}}

package/src/DayPicker.js

@@ -17,8 +17,10 @@ import {
 	isPageUp,
 	isPageDown,
 	isPageUpShift,
+	isPageUpAlt,
 	isPageUpShiftCtrl,
 	isPageDownShift,
+	isPageDownAlt,
 	isPageDownShiftCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -184,14 +186,17 @@ class DayPicker extends CalendarPart {
 
 		const firstDayOfWeek = this._getFirstDayOfWeek();
 		const monthsNames = localeData.getMonths("wide", this._primaryCalendarType);
-		const nonWorkingDayLabel = this.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
-		const todayLabel = this.i18nBundle.getText(DAY_PICKER_TODAY);
+		const secondaryMonthsNames = this.hasSecondaryCalendarType && localeData.getMonths("wide", this.secondaryCalendarType);
+		const nonWorkingDayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
+		const todayLabel = DayPicker.i18nBundle.getText(DAY_PICKER_TODAY);
 		const tempDate = this._getFirstDay(); // date that will be changed by 1 day 42 times
 		const todayDate = CalendarDate.fromLocalJSDate(new Date(), this._primaryCalendarType); // current day date - calculate once
 		const calendarDate = this._calendarDate; // store the _calendarDate value as this getter is expensive and degrades IE11 perf
 		const minDate = this._minDate; // store the _minDate (expensive getter)
 		const maxDate = this._maxDate; // store the _maxDate (expensive getter)
 
+		const tempSecondDate = this.hasSecondaryCalendarType && this._getSecondaryDay(tempDate);
+
 		let week = [];
 		for (let i = 0; i < DAYS_IN_WEEK * 6; i++) { // always show 6 weeks total, 42 days to avoid jumping
 			const timestamp = tempDate.valueOf() / 1000; // no need to round because CalendarDate does it
@@ -212,15 +217,20 @@ class DayPicker extends CalendarPart {
 
 			const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
 			const todayAriaLabel = isToday ? `${todayLabel} ` : "";
+			const ariaLabel = this.hasSecondaryCalendarType
+				? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
+				: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
 
 			const day = {
 				timestamp: timestamp.toString(),
 				focusRef: isFocused,
 				_tabIndex: isFocused ? "0" : "-1",
 				selected: isSelected,
-				iDay: tempDate.getDate(),
+				day: tempDate.getDate(),
+				secondDay: this.hasSecondaryCalendarType && tempSecondDate.getDate(),
+				_isSecondaryCalendarType: this.hasSecondaryCalendarType,
 				classes: `ui5-dp-item ui5-dp-wday${dayOfTheWeek}`,
-				ariaLabel: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`,
+				ariaLabel,
 				ariaSelected: isSelected ? "true" : "false",
 				ariaDisabled: isOtherMonth ? "true" : undefined,
 				disabled: isDisabled,
@@ -249,10 +259,15 @@ class DayPicker extends CalendarPart {
 			if (isWeekend) {
 				day.classes += " ui5-dp-item--weeekend";
 			}
+
 			if (isDisabled) {
 				day.classes += " ui5-dp-item--disabled";
 			}
 
+			if (this.hasSecondaryCalendarType) {
+				day.classes += " ui5-dp-item--withsecondtype";
+			}
+
 			week.push(day);
 
 			if (dayOfTheWeek === DAYS_IN_WEEK - 1) { // 0-indexed so 6 is the last day of the week
@@ -268,6 +283,9 @@ class DayPicker extends CalendarPart {
 			}
 
 			tempDate.setDate(tempDate.getDate() + 1);
+			if (this.hasSecondaryCalendarType) {
+				tempSecondDate.setDate(tempSecondDate.getDate() + 1);
+			}
 		}
 	}
 
@@ -290,7 +308,7 @@ class DayPicker extends CalendarPart {
 		this._dayNames = [];
 		this._dayNames.push({
 			classes: "ui5-dp-dayname",
-			name: this.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT),
+			name: DayPicker.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT),
 		});
 		for (let i = 0; i < DAYS_IN_WEEK; i++) {
 			dayOfTheWeek = i + this._getFirstDayOfWeek();
@@ -307,6 +325,10 @@ class DayPicker extends CalendarPart {
 		}
 
 		this._dayNames[1].classes += " ui5-dp-firstday";
+
+		if (this.shouldHideWeekNumbers) {
+			this._dayNames.shift();
+		}
 	}
 
 	onAfterRendering() {
@@ -319,6 +341,10 @@ class DayPicker extends CalendarPart {
 		this._autoFocus = true;
 	}
 
+	_onfocusout() {
+		this._autoFocus = false;
+	}
+
 	/**
 	 * Tells if the day is selected (dark blue)
 	 * @param timestamp
@@ -512,9 +538,9 @@ class DayPicker extends CalendarPart {
 			this._modifyTimestampBy(-1, "month");
 		} else if (isPageDown(event)) {
 			this._modifyTimestampBy(1, "month");
-		} else if (isPageUpShift(event)) {
+		} else if (isPageUpShift(event) || isPageUpAlt(event)) {
 			this._modifyTimestampBy(-1, "year");
-		} else if (isPageDownShift(event)) {
+		} else if (isPageDownShift(event) || isPageDownAlt(event)) {
 			this._modifyTimestampBy(1, "year");
 		} else if (isPageUpShiftCtrl(event)) {
 			this._modifyTimestampBy(-10, "year");
@@ -654,6 +680,10 @@ class DayPicker extends CalendarPart {
 		return this.hideWeekNumbers;
 	}
 
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	_isWeekend(oDate) {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 
@@ -670,6 +700,10 @@ class DayPicker extends CalendarPart {
 		return (target.className.indexOf("ui5-dp-item") > -1) || (targetParent && targetParent.classList && targetParent.classList.contains("ui5-dp-item"));
 	}
 
+	_getSecondaryDay(tempDate) {
+		return new CalendarDate(tempDate, this.secondaryCalendarType);
+	}
+
 	_getFirstDay() {
 		let daysFromPreviousMonth;
 
@@ -700,12 +734,19 @@ class DayPicker extends CalendarPart {
 		return {
 			wrapper: {
 				display: this._hidden ? "none" : "flex",
+				"justify-content": "center",
 			},
 			main: {
 				width: "100%",
 			},
 		};
 	}
+
+	get ariaRoledescription() {
+		return this.hasSecondaryCalendarType
+			? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
+			: `${this._primaryCalendarType} calendar`;
+	}
 }
 
 DayPicker.define();

package/src/Dialog.hbs

@@ -5,6 +5,8 @@
 		<header
 			class="ui5-popup-header-root"
 			id="ui5-popup-header"
+			tabindex="{{_headerTabIndex}}"
+			@keydown="{{_onDragOrResizeKeyDown}}"
 			@mousedown="{{_onDragMouseDown}}">
 			{{#if header.length }}
 				<slot name="header"></slot>
@@ -21,7 +23,7 @@
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
 			dir="{{effectiveDir}}"