@ui5/webcomponents 0.0.0-8db0ce01a → 0.0.0-a3eca7ade

package/src/DatePickerPopover.hbs

@@ -1,13 +1,10 @@
 <ui5-responsive-popover
 	id="{{_id}}-responsive-popover"
 	allow-target-overlap
-	stay-open-on-scroll
 	placement-type="Bottom"
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
-	no-arrow
-	with-padding
-	no-stretch
+	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
@@ -42,12 +39,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 +58,4 @@
 {{/inline}}
 
 {{#*inline "footer"}}{{/inline}}
+

package/src/DateRangePicker.js

@@ -84,14 +84,45 @@ class DateRangePicker extends DatePicker {
 		return [DatePicker.styles, DateRangePickerCss];
 	}
 
-	get _firstDateTimestamp() {
+	constructor() {
+		super();
+		this._prevDelimiter = 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 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
@@ -105,7 +136,7 @@ class DateRangePicker extends DatePicker {
 	 * @override
 	 */
 	get _calendarTimestamp() {
-		return this._firstDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
+		return this._tempTimestamp || this._startDateTimestamp || getTodayUTCTimestamp(this._primaryCalendarType);
 	}
 
 	/**
@@ -123,25 +154,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();
 	}
 
 	/**
@@ -152,7 +183,7 @@ class DateRangePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATERANGE_DESCRIPTION);
+		return DateRangePicker.i18nBundle.getText(DATERANGE_DESCRIPTION);
 	}
 
 	/**
@@ -165,6 +196,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
 	 */
@@ -211,8 +250,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();
 	}
 
@@ -220,7 +257,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);
 		}
 
@@ -229,17 +266,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);
 			}
 		}
@@ -255,7 +292,7 @@ class DateRangePicker extends DatePicker {
 
 	_splitValueByDelimiter(value) {
 		const valuesArray = [];
-		const partsArray = value.split(this._effectiveDelimiter);
+		const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
 		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
 		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
@@ -298,6 +335,7 @@ class DateRangePicker extends DatePicker {
 	 * @private
 	 */
 	_buildValue(firstDateTimestamp, lastDateTimestamp) {
+		this._prevDelimiter = this._effectiveDelimiter;
 		if (firstDateTimestamp) {
 			const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
 

package/src/DateTimePicker.js

@@ -102,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>
  *
@@ -265,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() {
@@ -297,7 +294,7 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATETIME_DESCRIPTION);
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
 	}
 
 	/**
@@ -317,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,
 		};
 	}
 
@@ -368,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();
@@ -323,6 +341,10 @@ class DayPicker extends CalendarPart {
 		this._autoFocus = true;
 	}
 
+	_onfocusout() {
+		this._autoFocus = false;
+	}
+
 	/**
 	 * Tells if the day is selected (dark blue)
 	 * @param timestamp
@@ -516,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");
@@ -658,6 +680,10 @@ class DayPicker extends CalendarPart {
 		return this.hideWeekNumbers;
 	}
 
+	get hasSecondaryCalendarType() {
+		return !!this.secondaryCalendarType;
+	}
+
 	_isWeekend(oDate) {
 		const localeData = getCachedLocaleDataInstance(getLocale());
 
@@ -674,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;
 
@@ -711,6 +741,12 @@ class DayPicker extends CalendarPart {
 			},
 		};
 	}
+
+	get ariaRoledescription() {
+		return this.hasSecondaryCalendarType
+			? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
+			: `${this._primaryCalendarType} calendar`;
+	}
 }
 
 DayPicker.define();

package/src/Dialog.hbs

@@ -5,7 +5,10 @@
 		<header
 			class="ui5-popup-header-root"
 			id="ui5-popup-header"
-			@mousedown="{{_onDragMouseDown}}">
+			tabindex="{{_headerTabIndex}}"
+			@keydown="{{_onDragOrResizeKeyDown}}"
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -17,11 +20,11 @@
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}
-	{{#if resizable}}
+	{{#if _showResizeHandle }}
 		<ui5-icon
 			name="resize-corner"
 			dir="{{effectiveDir}}"