@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-7e7d9ea6f

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>
  *
@@ -237,6 +234,9 @@ class DateTimePicker extends DatePicker {
 				"ui5-dt-cal--hidden": this.phone && this.showTimeView,
 				"ui5-dt-time--hidden": this.phone && this.showDateView,
 			},
+			footer: {
+				"ui5-dt-picker-footer-time-hidden": (this.phone && this.showTimeView) || (this.phone && this.showDateView),
+			},
 		};
 	}
 
@@ -265,19 +265,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 +297,7 @@ class DateTimePicker extends DatePicker {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DATETIME_DESCRIPTION);
+		return DateTimePicker.i18nBundle.getText(DATETIME_DESCRIPTION);
 	}
 
 	/**
@@ -317,12 +317,12 @@ 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: event.path[1].lastChild.value,
+			timeSelectionValue: dateTimePickerContent.lastChild.value,
 		};
 	}
 
@@ -361,16 +361,10 @@ class DateTimePicker extends DatePicker {
 		const selectedDate = this.getSelectedDateTime();
 
 		const value = this.getFormat().format(selectedDate);
-		const valid = this.isValid(value);
-
 		if (this.value !== value) {
-			this.value = value;
-			this.fireEvent("change", { value: this.value, valid });
-			this.fireEvent("value-changed", { value: this.value, valid });
+			this._updateValueAndFireEvents(value, true, ["change", "value-changed"]);
 		}
 
-		this._focusInputAfterClose = true;
-		this._updateValueState();
 		this.closePicker();
 	}
 
@@ -420,9 +414,11 @@ class DateTimePicker extends DatePicker {
 	getSelectedDateTime() {
 		const selectedDate = this.getFormat().parse(this._calendarSelectedDates[0]);
 		const selectedTime = this.getFormat().parse(this._timeSelectionValue);
-		selectedDate.setHours(selectedTime.getHours());
-		selectedDate.setMinutes(selectedTime.getMinutes());
-		selectedDate.setSeconds(selectedTime.getSeconds());
+		if (selectedTime) {
+			selectedDate.setHours(selectedTime.getHours());
+			selectedDate.setMinutes(selectedTime.getMinutes());
+			selectedDate.setSeconds(selectedTime.getSeconds());
+		}
 
 		return selectedDate;
 	}

package/src/DateTimePickerPopover.hbs

@@ -4,7 +4,7 @@
 {{#*inline "header"}}
 	{{#if phone}}
 		<div class="ui5-dt-picker-header">
-			<ui5-segmented-button style="width: 8rem">
+			<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>
@@ -18,12 +18,15 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			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}}"
 		>
@@ -42,6 +45,7 @@
 				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
 				._currentSlider="{{_currentTimeSlider}}"
+				._calendarType="{{_primaryCalendarType}}"
 				@ui5-change="{{onTimeSelectionChange}}"
 				@ui5-slider-change="{{onTimeSliderChange}}"
 		></ui5-time-selection>
@@ -49,7 +53,7 @@
 {{/inline}}
 
 {{#*inline "footer"}}
-	<div slot="footer" class="ui5-dt-picker-footer">
+	<div slot="footer" class="ui5-dt-picker-footer {{classes.footer}}">
 		<ui5-button
 			id="ok"
 			class="ui5-dt-picker-action"

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";
@@ -42,7 +44,7 @@ import dayPickerCSS from "./generated/themes/DayPicker.css.js";
  */
 const metadata = {
 	tag: "ui5-daypicker",
-	properties: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
 		 * An array of UTC timestamps representing the selected date or dates depending on the capabilities of the picker component.
 		 * @type {Array}
@@ -119,7 +121,7 @@ const metadata = {
 			type: String,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.DayPicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.DayPicker.prototype */ {
 		/**
 		 * Fired when the selected date(s) change
 		 * @public
@@ -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

@@ -7,7 +7,8 @@
 			id="ui5-popup-header"
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
-			@mousedown="{{_onDragMouseDown}}">
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -19,14 +20,13 @@
 
 {{#*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}}"
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
 		</ui5-icon>

package/src/Dialog.js

@@ -1,6 +1,5 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import {
 	isUp, isDown, isLeft, isRight,
 	isUpShift, isDownShift, isLeftShift, isRightShift,
@@ -26,7 +25,7 @@ const STEP_SIZE = 16;
  */
 const metadata = {
 	tag: "ui5-dialog",
-	slots: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header HTML Element.
 		 * <br><br>
@@ -52,7 +51,7 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header text.
 		 * <br><br>
@@ -66,17 +65,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Sets the accessible aria name of the component.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		accessibleName: {
-			type: String,
-		},
-
 		/**
 		 * Determines whether the component should be stretched to fullscreen.
 		 * <br><br>
@@ -162,6 +150,17 @@ const metadata = {
  * The <code>stretch</code> property can be used to stretch the
  * <code>ui5-dialog</code> on full screen.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-dialog</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/Dialog";</code>
@@ -237,23 +236,13 @@ class Dialog extends Popup {
 	get _ariaLabelledBy() { // Required by Popup.js
 		let ariaLabelledById;
 
-		if (this.headerText !== "" && !this.accessibleName) {
+		if (this.headerText !== "" && !this._ariaLabel) {
 			ariaLabelledById = "ui5-popup-header-text";
 		}
 
 		return ariaLabelledById;
 	}
 
-	get _ariaLabel() {
-		let ariaLabel;
-
-		if (this.header.length > 0 && !!this.accessibleName) {
-			ariaLabel = this.accessibleName;
-		}
-
-		return this.accessibleName ? this.accessibleName : ariaLabel;
-	}
-
 	get _ariaModal() { // Required by Popup.js
 		return true;
 	}
@@ -263,7 +252,7 @@ class Dialog extends Popup {
 	}
 
 	/**
-	 * Determines if the header of the dialog should be shown.
+	 * Determines if the header should be shown.
 	 */
 	get _displayHeader() {
 		return this.header.length || this.headerText || this.draggable || this.resizable;
@@ -277,10 +266,29 @@ class Dialog extends Popup {
 		return this._movable ? "0" : undefined;
 	}
 
+	get _showResizeHandle() {
+		return this.resizable && this.onDesktop;
+	}
+
+	get _minHeight() {
+		let minHeight = Number.parseInt(window.getComputedStyle(this.contentDOM).minHeight);
+
+		const header = this._root.querySelector(".ui5-popup-header-root");
+		if (header) {
+			minHeight += header.offsetHeight;
+		}
+
+		const footer = this._root.querySelector(".ui5-popup-footer-root");
+		if (footer) {
+			minHeight += footer.offsetHeight;
+		}
+
+		return minHeight;
+	}
+
 	_show() {
 		super._show();
 		this._center();
-		this._attachResizeHandlers();
 	}
 
 	onBeforeRendering() {
@@ -289,19 +297,47 @@ class Dialog extends Popup {
 		this.onDesktop = isDesktop();
 	}
 
+	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			this.show();
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
+	}
+
+	onEnterDOM() {
+		super.onEnterDOM();
+		this._attachScreenResizeHandler();
+	}
+
 	onExitDOM() {
 		super.onExitDOM();
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 	}
 
-	_attachResizeHandlers() {
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
+		if (this._screenResizeHandlerAttached) {
+			this._center();
+		}
 	}
 
-	_detachResizeHandlers() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	_attachScreenResizeHandler() {
+		if (!this._screenResizeHandlerAttached) {
+			window.addEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = true;
+		}
+	}
+
+	_detachScreenResizeHandler() {
+		if (this._screenResizeHandlerAttached) {
+			window.removeEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = false; // prevent dialog from repositioning during resizing
+		}
 	}
 
 	_center() {
@@ -438,14 +474,13 @@ class Dialog extends Popup {
 	}
 
 	_resizeWithEvent(event) {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 		this.addEventListener("ui5-before-close", this._revertSize);
 
 		const { top, left } = this.getBoundingClientRect(),
 			style = window.getComputedStyle(this),
 			minWidth = Number.parseFloat(style.minWidth),
-			minHeight = Number.parseFloat(style.minHeight),
-			maxWidth = 	window.innerWidth - left,
+			maxWidth = window.innerWidth - left,
 			maxHeight = window.innerHeight - top;
 
 		let width = Number.parseFloat(style.width),
@@ -467,7 +502,7 @@ class Dialog extends Popup {
 		}
 
 		width = clamp(width, minWidth, maxWidth);
-		height = clamp(height, minHeight, maxHeight);
+		height = clamp(height, this._minHeight, maxHeight);
 
 		Object.assign(this.style, {
 			width: `${width}px`,
@@ -476,7 +511,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -502,7 +537,6 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
 		this._initialX = event.clientX;
@@ -512,7 +546,7 @@ class Dialog extends Popup {
 		this._initialTop = top;
 		this._initialLeft = left;
 		this._minWidth = Number.parseFloat(minWidth);
-		this._minHeight = Number.parseFloat(minHeight);
+		this._cachedMinHeight = this._minHeight;
 
 		Object.assign(this.style, {
 			top: `${top}px`,
@@ -550,7 +584,7 @@ class Dialog extends Popup {
 
 		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
+			this._cachedMinHeight,
 			window.innerHeight - this._initialTop,
 		);
 
@@ -562,20 +596,20 @@ class Dialog extends Popup {
 	}
 
 	_onResizeMouseUp() {
-		this._initialX = null;
-		this._initialY = null;
-		this._initialWidth = null;
-		this._initialHeight = null;
-		this._initialTop = null;
-		this._initialLeft = null;
-		this._minWidth = null;
-		this._minHeight = null;
+		delete this._initialX;
+		delete this._initialY;
+		delete this._initialWidth;
+		delete this._initialHeight;
+		delete this._initialTop;
+		delete this._initialLeft;
+		delete this._minWidth;
+		delete this._cachedMinHeight;
 
 		this._detachMouseResizeHandlers();
 	}
 
 	_attachMouseResizeHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);

package/src/DurationPicker.js

@@ -112,7 +112,7 @@ const pad = number => {
  * @class
  *
  * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which opens on user action.
+ * The <code>ui5-duration-picker</code> component provides an input field with assigned sliders which are opened on user action.
  * The <code>ui5-duration-picker</code> allows users to select a time duration.
  * It consists of two parts: the time input field and the sliders.
  *
@@ -292,7 +292,7 @@ class DurationPicker extends TimePickerBase {
 	}
 
 	get dateAriaDescription() {
-		return this.i18nBundle.getText(DURATION_INPUT_DESCRIPTION);
+		return DurationPicker.i18nBundle.getText(DURATION_INPUT_DESCRIPTION);
 	}
 
 	get accInfo() {

package/src/FileUploader.hbs

@@ -6,6 +6,7 @@
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@click="{{_onclick}}"
 >
 	<div class="ui5-file-uploader-mask">
 		{{#unless hideInput}}