@ui5/webcomponents 1.4.0 → 1.7.0

package/src/ComboBox.js

@@ -36,10 +36,15 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	VALUE_STATE_INFORMATION,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
 	LIST_ITEM_POSITION,
 	LIST_ITEM_SELECTED,
+	LIST_ITEM_GROUP_HEADER,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -212,7 +217,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue: ""
@@ -550,6 +555,10 @@ class ComboBox extends UI5Element {
 		this.inner.focus();
 		this._resetFilter();
 
+		if (isPhone() && this.value && !this._lastValue) {
+			this._lastValue = this.value;
+		}
+
 		this._toggleRespPopover();
 	}
 
@@ -661,12 +670,12 @@ class ComboBox extends UI5Element {
 		this._isValueStateFocused = false;
 		this._selectionChanged = true;
 
+		this._announceSelectedItem(indexOfItem);
+
 		if (isGroupItem && isOpen) {
 			return;
 		}
 
-		this._announceSelectedItem(indexOfItem);
-
 		// autocomplete
 		const item = this._getFirstMatchingItem(this.value);
 		this._applyAtomicValueAndSelection(item, (this.open ? this._userTypedValue : null), true);
@@ -779,8 +788,9 @@ class ComboBox extends UI5Element {
 		}
 
 		if (isEnter(event)) {
+			this._fireChangeEvent();
+
 			if (this.responsivePopover.opened) {
-				this._fireChangeEvent();
 				this._closeRespPopover();
 				this.focused = true;
 			} else if (this.FormSupport) {
@@ -828,11 +838,20 @@ class ComboBox extends UI5Element {
 	}
 
 	_closeRespPopover(event) {
-		if (isPhone() && event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn") && this._selectedItemText) {
 			this.value = this._selectedItemText;
 			this.filterValue = this._selectedItemText;
 		}
 
+		if (event && event.target.classList.contains("ui5-responsive-popover-close-btn")) {
+			this.value = this._lastValue ? this._lastValue : "";
+			this.filterValue = this._lastValue ? this._lastValue : "";
+		}
+
+		if (isPhone()) {
+			this._fireChangeEvent();
+		}
+
 		this._isValueStateFocused = false;
 		this._clearFocus();
 
@@ -933,6 +952,7 @@ class ComboBox extends UI5Element {
 		const sameSelectionPerformed = this.value.toLowerCase() === this.filterValue.toLowerCase();
 
 		if (sameItemSelected && sameSelectionPerformed) {
+			this._fireChangeEvent(); // Click on an already typed, but not memoized value shouold also trigger the change event
 			return this._closeRespPopover();
 		}
 
@@ -963,10 +983,17 @@ class ComboBox extends UI5Element {
 	}
 
 	_announceSelectedItem(indexOfItem) {
+		const currentItem = this._filteredItems[indexOfItem];
+		const isGroupItem = currentItem && currentItem.isGroupItem;
 		const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length);
 		const itemSelectionText = ComboBox.i18nBundle.getText(LIST_ITEM_SELECTED);
+		const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER);
 
-		announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+		if (isGroupItem) {
+			announce(`${groupHeaderText} ${currentItem.text} ${itemPositionText}`, "Polite");
+		} else {
+			announce(`${itemPositionText} ${itemSelectionText}`, "Polite");
+		}
 	}
 
 	get _headerTitleText() {
@@ -999,7 +1026,19 @@ class ComboBox extends UI5Element {
 		return this.hasValueState && this.valueState !== ValueState.Success;
 	}
 
-	get valueStateText() {
+	get ariaValueStateHiddenText() {
+		if (!this.hasValueState) {
+			return;
+		}
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return `${this.valueStateTypeMappings[this.valueState]} ${this.valueStateDefaultText}`;
+		}
+
+		return `${this.valueStateTypeMappings[this.valueState]}`.concat(" ", this.valueStateMessageText.map(el => el.textContent).join(" "));
+	}
+
+	get valueStateDefaultText() {
 		return this.valueStateTextMappings[this.valueState];
 	}
 
@@ -1020,6 +1059,15 @@ class ComboBox extends UI5Element {
 		};
 	}
 
+	get valueStateTypeMappings() {
+		return {
+			"Success": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Error": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Warning": ComboBox.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
 	get shouldOpenValueStateMessagePopover() {
 		return this.focused && !this.readonly && this.hasValueStateText && !this._iconPressed
 			&& !this.open && !this._isPhone;
@@ -1083,6 +1131,7 @@ class ComboBox extends UI5Element {
 	}
 
 	get styles() {
+		const remSizeInPx = parseInt(getComputedStyle(document.documentElement).fontSize);
 		return {
 			popoverHeader: {
 				"width": `${this.offsetWidth}px`,
@@ -1091,6 +1140,10 @@ class ComboBox extends UI5Element {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this._listWidth}px`,
 			},
+			suggestionsPopover: {
+				"min-width": `${this.offsetWidth}px`,
+				"max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
+			},
 		};
 	}
 

package/src/ComboBoxGroupItem.js

@@ -6,7 +6,7 @@ import GroupHeaderListItem from "./GroupHeaderListItem.js";
  */
 const metadata = {
 	tag: "ui5-cb-group-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *
@@ -25,15 +25,15 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	slots: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 	},
-	events: /** @lends  sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.ComboBoxGroupItem.prototype */ {
 	},
 };
 
 /**
  * @class
- * The <code>ui5-combobox-group-item</code> is type of suggestion item,
+ * The <code>ui5-cb-group-item</code> is type of suggestion item,
  * that can be used to split the <code>ui5-combobox</code> suggestions into groups.
  *
  * @constructor

package/src/ComboBoxItem.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-cb-item",
-	properties: /** @lends  sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
 		/**
 		 * Defines the text of the component.
 		 *

package/src/ComboBoxPopover.hbs

@@ -4,7 +4,8 @@
 	content-only-on-desktop
 	_disable-initial-focus
 	placement-type="Bottom"
-	horizontal-align="Stretch"
+	horizontal-align="Left"
+	style="{{styles.suggestionsPopover}}"
 	@ui5-after-open={{_afterOpenPopover}}
 	@ui5-after-close={{_afterClosePopover}}
 >
@@ -117,7 +118,7 @@
 
 {{#*inline "valueStateMessage"}}
 	{{#if shouldDisplayDefaultValueStateMessage}}
-		{{valueStateText}}
+		{{valueStateDefaultText}}
 	{{else}}
 		{{#each valueStateMessageText}}
 			{{this}}

package/src/DateComponentBase.js

@@ -15,7 +15,7 @@ import { getMaxCalendarDate, getMinCalendarDate } from "@ui5/webcomponents-local
  */
 const metadata = {
 	languageAware: true,
-	properties: /** @lends  sap.ui.webcomponents.main.DateComponentBase.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.DateComponentBase.prototype */ {
 		/**
 		 * Sets a calendar type used for display.
 		 * If not set, the calendar type of the global configuration is used.

package/src/DatePicker.hbs

@@ -31,6 +31,8 @@
 				name="{{openIconName}}"
 				tabindex="-1"
 				accessible-name="{{openIconTitle}}"
+				accessible-role="button"
+				aria-hidden="{{_ariaHidden}}"
 				show-tooltip
 				@click="{{togglePicker}}"
 				input-icon

package/src/DatePicker.js

@@ -15,8 +15,12 @@ import {
 	isShow,
 	isF4,
 	isEnter,
+	isTabNext,
+	isTabPrevious,
+	isF6Next,
+	isF6Previous,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { isPhone, isIE } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import HasPopup from "./types/HasPopup.js";
@@ -47,7 +51,7 @@ const metadata = {
 	tag: "ui5-date-picker",
 	altTag: "ui5-datepicker",
 	managedSlots: true,
-	properties: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
 		 * Defines a formatted date value.
 		 *
@@ -206,7 +210,7 @@ const metadata = {
 		},
 	},
 
-	slots: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 		/**
 		 * Defines the value state message that will be displayed as pop up under the component.
 		 * <br><br>
@@ -236,7 +240,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends  sap.ui.webcomponents.main.DatePicker.prototype */ {
+	events: /** @lends sap.ui.webcomponents.main.DatePicker.prototype */ {
 
 		/**
 		 * Fired when the input operation has finished by pressing Enter or on focusout.
@@ -248,7 +252,7 @@ const metadata = {
 		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		change: {
-			details: {
+			detail: {
 				value: {
 					type: String,
 				},
@@ -268,7 +272,7 @@ const metadata = {
 		 * @param {boolean} valid Indicator if the value is in correct format pattern and in valid range.
 		*/
 		input: {
-			details: {
+			detail: {
 				value: {
 					type: String,
 				},
@@ -476,6 +480,10 @@ class DatePicker extends DateComponentBase {
 			}
 		}
 
+		if ((this._getInput().isEqualNode(event.target) && this.isOpen()) && (isTabNext(event) || isTabPrevious(event) || isF6Next(event) || isF6Previous(event))) {
+			this.closePicker();
+		}
+
 		if (this.isOpen()) {
 			return;
 		}
@@ -675,10 +683,6 @@ class DatePicker extends DateComponentBase {
 		return this.phone;
 	}
 
-	get _isIE() {
-		return isIE();
-	}
-
 	get accInfo() {
 		return {
 			"ariaRoledescription": this.dateAriaDescription,
@@ -709,6 +713,14 @@ class DatePicker extends DateComponentBase {
 		return false;
 	}
 
+	/**
+	 * Defines whether the value help icon is hidden
+	 * @private
+	 */
+	get _ariaHidden() {
+		return isDesktop();
+	}
+
 	async _respPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector("[ui5-responsive-popover]");

package/src/DatePickerPopover.hbs

@@ -3,7 +3,6 @@
 	allow-target-overlap
 	placement-type="Bottom"
 	horizontal-align="Left"
-	?disable-scrolling="{{_isIE}}"
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"

package/src/DateRangePicker.js

@@ -294,8 +294,14 @@ class DateRangePicker extends DatePicker {
 		const valuesArray = [];
 		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);
+		// if format successfully parse the value, the value contains only single date
+		if (this.getFormat().parse(value)) {
+			valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+			valuesArray[1] = "";
+		} else {
+			valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+			valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+		}
 
 		return valuesArray;
 	}

package/src/DateTimePicker.js

@@ -101,7 +101,7 @@ const metadata = {
  * <li>typing in the input field</li>
  * </ul>
  *
- * Programatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
+ * Programmatically, to set date/time for the <code>DateTimePicker</code>, use the <code>value</code> property
  *
  * <h3>Formatting</h3>
  *
@@ -318,7 +318,6 @@ 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,
@@ -362,15 +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._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/DayPicker.js

@@ -44,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}
@@ -121,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

package/src/Dialog.hbs

@@ -8,7 +8,11 @@
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
 			@mousedown="{{_onDragMouseDown}}"
-			part="header">
+			part="header"
+			state="{{this.state}}">
+			{{#if hasValueState}}
+			<ui5-icon class="ui5-dialog-value-state-icon" name="{{_dialogStateIcon}}"></ui5-icon>
+			{{/if}}
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}

package/src/Dialog.js

@@ -1,13 +1,17 @@
 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,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Popup from "./Popup.js";
-import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/resize-corner.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
@@ -21,12 +25,21 @@ import dialogCSS from "./generated/themes/Dialog.css.js";
  */
 const STEP_SIZE = 16;
 
+/**
+ * Defines the icons corresponding to the dialog's state.
+ */
+const ICON_PER_STATE = {
+	[ValueState.Error]: "error",
+	[ValueState.Warning]: "alert",
+	[ValueState.Success]: "sys-enter-2",
+	[ValueState.Information]: "information",
+};
 /**
  * @public
  */
 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 +65,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>
@@ -124,6 +137,20 @@ const metadata = {
 		onDesktop: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the state of the <code>Dialog</code>.
+		 * <br>
+		 * Available options are: <code>"None"</code> (by default), <code>"Success"</code>, <code>"Warning"</code>, <code>"Information"</code> and <code>"Error"</code>.
+		 * @type {ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		state: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
 	},
 };
 
@@ -253,7 +280,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;
@@ -271,6 +298,34 @@ class Dialog extends Popup {
 		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;
+	}
+
+	get hasValueState() {
+		return this.state !== ValueState.None;
+	}
+
+	get _dialogStateIcon() {
+		return ICON_PER_STATE[this.state];
+	}
+
+	get _role() {
+		return (this.state === ValueState.Error || this.state === ValueState.Warning) ? "alertdialog" : "dialog";
+	}
+
 	_show() {
 		super._show();
 		this._center();
@@ -292,12 +347,12 @@ class Dialog extends Popup {
 
 	onEnterDOM() {
 		super.onEnterDOM();
-		this._attachResizeHandlers();
+		this._attachScreenResizeHandler();
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 	}
 
 	/**
@@ -306,22 +361,22 @@ class Dialog extends Popup {
 	_resize() {
 		super._resize();
 
-		if (this._resizeHandlersAttached) {
+		if (this._screenResizeHandlerAttached) {
 			this._center();
 		}
 	}
 
-	_attachResizeHandlers() {
-		if (!this._resizeHandlersAttached) {
-			ResizeHandler.register(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = true;
+	_attachScreenResizeHandler() {
+		if (!this._screenResizeHandlerAttached) {
+			window.addEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = true;
 		}
 	}
 
-	_detachResizeHandlers() {
-		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(document.body, this._screenResizeHandler);
-			this._resizeHandlersAttached = false;
+	_detachScreenResizeHandler() {
+		if (this._screenResizeHandlerAttached) {
+			window.removeEventListener("resize", this._screenResizeHandler);
+			this._screenResizeHandlerAttached = false; // prevent dialog from repositioning during resizing
 		}
 	}
 
@@ -459,13 +514,12 @@ 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,
 			maxHeight = window.innerHeight - top;
 
@@ -488,7 +542,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`,
@@ -497,7 +551,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -523,7 +577,6 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
 		this._initialX = event.clientX;
@@ -533,7 +586,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`,
@@ -571,7 +624,7 @@ class Dialog extends Popup {
 
 		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
+			this._cachedMinHeight,
 			window.innerHeight - this._initialTop,
 		);
 
@@ -583,20 +636,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);