@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/Dialog.hbs

@@ -1,28 +1,32 @@
 {{>include "./Popup.hbs"}}
 
 {{#*inline "beforeContent"}}
-	<header
-		class="ui5-popup-header-root"
-		id="ui5-popup-header"
-		@mousedown="{{_onDragMouseDown}}">
-		{{#if header.length }}
-			<slot name="header"></slot>
-		{{else}}
-			<h2 class="ui5-popup-header-text">{{headerText}}</h2>
-		{{/if}}
-	</header>
+	{{#if _displayHeader }}
+		<header
+			class="ui5-popup-header-root"
+			id="ui5-popup-header"
+			tabindex="{{_headerTabIndex}}"
+			@keydown="{{_onDragOrResizeKeyDown}}"
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
+			{{#if header.length }}
+				<slot name="header"></slot>
+			{{else}}
+				<h2 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h2>
+			{{/if}}
+		</header>
+	{{/if}}
 {{/inline}}
 
 {{#*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,5 +1,9 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
+import {
+	isUp, isDown, isLeft, isRight,
+	isUpShift, isDownShift, isLeftShift, isRightShift,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import Popup from "./Popup.js";
 import "@ui5/webcomponents-icons/dist/resize-corner.js";
 import Icon from "./Icon.js";
@@ -7,17 +11,26 @@ import Icon from "./Icon.js";
 // Template
 import DialogTemplate from "./generated/templates/DialogTemplate.lit.js";
 // Styles
+import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import dialogCSS from "./generated/themes/Dialog.css.js";
 
+/**
+ * Defines the step size at which this component would change by when being dragged or resized with the keyboard.
+ */
+const STEP_SIZE = 16;
+
 /**
  * @public
  */
 const metadata = {
 	tag: "ui5-dialog",
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Dialog.prototype */ {
 		/**
 		 * Defines the header HTML Element.
+		 * <br><br>
+		 * <b>Note:</b> If <code>header</code> slot is provided, the labelling of the dialog is a responsibility of the application developer.
+		 * <code>accessibleName</code> should be used.
 		 *
 		 * @type {HTMLElement[]}
 		 * @slot
@@ -38,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>
@@ -53,9 +66,9 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-dialog</code> should be stretched to fullscreen.
+		 * Determines whether the component should be stretched to fullscreen.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> will be stretched to approximately
+		 * <b>Note:</b> The component will be stretched to approximately
 		 * 90% of the viewport.
 		 *
 		 * @type {boolean}
@@ -67,10 +80,10 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the <code>ui5-dialog</code> is draggable.
+		 * Determines whether the component is draggable.
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> can be draggable only in desktop mode.
+		 * <b>Note:</b> The component can be draggable only in desktop mode.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -81,11 +94,11 @@ const metadata = {
 		},
 
 		/**
-		 * Configures the <code>ui5-dialog</code> to be resizable.
+		 * Configures the component to be resizable.
 		 * If this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.
 		 * In RTL languages, the resize handle will be placed in the bottom left corner.
 		 * <br><br>
-		 * <b>Note:</b> The <code>ui5-dialog</code> can be resizable only in desktop mode.
+		 * <b>Note:</b> The component can be resizable only in desktop mode.
 		 * <br>
 		 * <b>Note:</b> Upon resizing, externally defined height and width styling will be ignored.
 		 * @type {boolean}
@@ -132,12 +145,22 @@ const metadata = {
  * The <code>ui5-dialog</code> is usually displayed at the center of the screen.
  * Its position can be changed by the user. To enable this, you need to set the property <code>draggable</code> accordingly.
 
-
  *
  * <h3>Responsive Behavior</h3>
  * 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>
@@ -145,6 +168,9 @@ const metadata = {
  * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside <code>ui5-dialog</code>.
  * Ideally you should create all popups on the same level inside your HTML page and just open them from one another, rather than nesting them.
  *
+ * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>) inside other components containing z-index.
+ * This might break z-index management.
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Dialog
@@ -180,7 +206,23 @@ class Dialog extends Popup {
 	}
 
 	static get styles() {
-		return [PopupsCommonCss, dialogCSS];
+		return [browserScrollbarCSS, PopupsCommonCss, dialogCSS];
+	}
+
+	static _isHeader(element) {
+		return element.classList.contains("ui5-popup-header-root") || element.getAttribute("slot") === "header";
+	}
+
+	/**
+	 * Shows the dialog.
+	 *
+	 * @param {boolean} preventInitialFocus Prevents applying the focus inside the popup
+	 * @async
+	 * @returns {Promise} Resolves when the dialog is open
+	 * @public
+	 */
+	async show(preventInitialFocus = false) {
+		await super._open(preventInitialFocus);
 	}
 
 	get isModal() { // Required by Popup.js
@@ -192,7 +234,13 @@ class Dialog extends Popup {
 	}
 
 	get _ariaLabelledBy() { // Required by Popup.js
-		return this.ariaLabel ? undefined : "ui5-popup-header";
+		let ariaLabelledById;
+
+		if (this.headerText !== "" && !this._ariaLabel) {
+			ariaLabelledById = "ui5-popup-header-text";
+		}
+
+		return ariaLabelledById;
 	}
 
 	get _ariaModal() { // Required by Popup.js
@@ -203,24 +251,44 @@ class Dialog extends Popup {
 		return "flex";
 	}
 
-	get classes() {
-		return {
-			root: {
-				"ui5-popup-root": true,
-			},
-			content: {
-				"ui5-popup-content": true,
-			},
-		};
+	/**
+	 * Determines if the header should be shown.
+	 */
+	get _displayHeader() {
+		return this.header.length || this.headerText || this.draggable || this.resizable;
 	}
 
-	show() {
-		super.show();
-		this._center();
+	get _movable() {
+		return !this.stretch && this.onDesktop && (this.draggable || this.resizable);
 	}
 
-	_clamp(val, min, max) {
-		return Math.min(Math.max(val, min), max);
+	get _headerTabIndex() {
+		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();
 	}
 
 	onBeforeRendering() {
@@ -229,14 +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() {
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
+		super.onEnterDOM();
+		this._attachScreenResizeHandler();
 	}
 
 	onExitDOM() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+		super.onExitDOM();
+		this._detachScreenResizeHandler();
+	}
+
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
+		if (this._screenResizeHandlerAttached) {
+			this._center();
+		}
+	}
+
+	_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() {
@@ -263,13 +364,8 @@ class Dialog extends Popup {
 	 * Event handlers
 	 */
 	_onDragMouseDown(event) {
-		if (!(this.draggable && this.onDesktop)) {
-			return;
-		}
-
-		// only allow dragging on the header's whitespace
-		if (!event.target.classList.contains("ui5-popup-header-root")
-			&& event.target.getAttribute("slot") !== "header") {
+		// allow dragging only on the header
+		if (!this._movable || !this.draggable || !Dialog._isHeader(event.target)) {
 			return;
 		}
 
@@ -294,7 +390,7 @@ class Dialog extends Popup {
 		this._x = event.clientX;
 		this._y = event.clientY;
 
-		this._attachDragHandlers();
+		this._attachMouseDragHandlers();
 	}
 
 	_onDragMouseMove(event) {
@@ -320,24 +416,114 @@ class Dialog extends Popup {
 		this._x = null;
 		this._y = null;
 
-		this._detachDragHandlers();
+		this._detachMouseDragHandlers();
 	}
 
-	_attachDragHandlers() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	_onDragOrResizeKeyDown(event) {
+		if (!this._movable || !Dialog._isHeader(event.target)) {
+			return;
+		}
+
+		if (this.draggable && [isUp, isDown, isLeft, isRight].some(key => key(event))) {
+			this._dragWithEvent(event);
+			return;
+		}
+
+		if (this.resizable && [isUpShift, isDownShift, isLeftShift, isRightShift].some(key => key(event))) {
+			this._resizeWithEvent(event);
+		}
+	}
+
+	_dragWithEvent(event) {
+		const {
+			top,
+			left,
+			width,
+			height,
+		} = this.getBoundingClientRect();
+
+		let newPos,
+			posDirection;
+
+		switch (true) {
+		case isUp(event):
+			newPos = top - STEP_SIZE;
+			posDirection = "top";
+			break;
+		case isDown(event):
+			newPos = top + STEP_SIZE;
+			posDirection = "top";
+			break;
+		case isLeft(event):
+			newPos = left - STEP_SIZE;
+			posDirection = "left";
+			break;
+		case isRight(event):
+			newPos = left + STEP_SIZE;
+			posDirection = "left";
+			break;
+		}
+
+		newPos = clamp(
+			newPos,
+			0,
+			posDirection === "left" ? window.innerWidth - width : window.innerHeight - height,
+		);
+
+		this.style[posDirection] = `${newPos}px`;
+	}
+
+	_resizeWithEvent(event) {
+		this._detachScreenResizeHandler();
+		this.addEventListener("ui5-before-close", this._revertSize);
+
+		const { top, left } = this.getBoundingClientRect(),
+			style = window.getComputedStyle(this),
+			minWidth = Number.parseFloat(style.minWidth),
+			maxWidth = window.innerWidth - left,
+			maxHeight = window.innerHeight - top;
+
+		let width = Number.parseFloat(style.width),
+			height = Number.parseFloat(style.height);
+
+		switch (true) {
+		case isUpShift(event):
+			height -= STEP_SIZE;
+			break;
+		case isDownShift(event):
+			height += STEP_SIZE;
+			break;
+		case isLeftShift(event):
+			width -= STEP_SIZE;
+			break;
+		case isRightShift(event):
+			width += STEP_SIZE;
+			break;
+		}
+
+		width = clamp(width, minWidth, maxWidth);
+		height = clamp(height, this._minHeight, maxHeight);
+
+		Object.assign(this.style, {
+			width: `${width}px`,
+			height: `${height}px`,
+		});
+	}
+
+	_attachMouseDragHandlers() {
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
-	_detachDragHandlers() {
+	_detachMouseDragHandlers() {
 		window.removeEventListener("mousemove", this._dragMouseMoveHandler);
 		window.removeEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
 	_onResizeMouseDown(event) {
-		if (!(this.resizable && this.onDesktop)) {
+		if (!this._movable || !this.resizable) {
 			return;
 		}
 
@@ -351,7 +537,6 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
 		this._initialX = event.clientX;
@@ -361,46 +546,46 @@ 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`,
 			left: `${left}px`,
 		});
 
-		this._attachResizeHandlers();
+		this._attachMouseResizeHandlers();
 	}
 
 	_onResizeMouseMove(event) {
 		const { clientX, clientY } = event;
 
-		let newWidth;
-		let newLeft;
+		let newWidth,
+			newLeft;
 
 		if (this._isRTL) {
-			newWidth = this._clamp(
+			newWidth = clamp(
 				this._initialWidth - (clientX - this._initialX),
 				this._minWidth,
-				this._initialLeft + this._initialWidth
+				this._initialLeft + this._initialWidth,
 			);
 
-			newLeft = this._clamp(
+			newLeft = clamp(
 				this._initialLeft + (clientX - this._initialX),
 				0,
-				this._initialX + this._initialWidth - this._minWidth
+				this._initialX + this._initialWidth - this._minWidth,
 			);
 		} else {
-			newWidth = this._clamp(
+			newWidth = clamp(
 				this._initialWidth + (clientX - this._initialX),
 				this._minWidth,
-				window.innerWidth - this._initialLeft
+				window.innerWidth - this._initialLeft,
 			);
 		}
 
-		const newHeight = this._clamp(
+		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
-			window.innerHeight - this._initialTop
+			this._cachedMinHeight,
+			window.innerHeight - this._initialTop,
 		);
 
 		Object.assign(this.style, {
@@ -411,28 +596,27 @@ 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;
-
-		this._detachResizeHandlers();
+		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();
 	}
 
-	_attachResizeHandlers() {
-		ResizeHandler.deregister(this, this._screenResizeHandler);
-		ResizeHandler.deregister(document.body, this._screenResizeHandler);
+	_attachMouseResizeHandlers() {
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);
 		this.addEventListener("ui5-before-close", this._revertSize);
 	}
 
-	_detachResizeHandlers() {
+	_detachMouseResizeHandlers() {
 		window.removeEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
 	}