@ui5/webcomponents 0.0.0-ec448881d → 0.0.0-ee3bbe46b

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.webc.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.webc.main.Dialog.prototype */ {
 		/**
 		 * Defines the header text.
 		 * <br><br>
@@ -85,6 +98,10 @@ const metadata = {
 		 * If this property is set to true, the Dialog will be draggable by its header.
 		 * <br><br>
 		 * <b>Note:</b> The component can be draggable only in desktop mode.
+		 * <br><br>
+		 * <b>Note:</b> This property overrides the default HTML "draggable" attribute native behavior.
+		 * When "draggable" is set to true, the native browser "draggable"
+		 * behavior is prevented and only the Dialog custom logic ("draggable by its header") works.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.9
@@ -124,6 +141,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 {sap.ui.webc.base.types.ValueState}
+		 * @defaultvalue "None"
+		 * @public
+		 * @since 1.0.0-rc.15
+		 */
+		state: {
+			type: ValueState,
+			defaultValue: ValueState.None,
+		},
 	},
 };
 
@@ -174,8 +205,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.Dialog
- * @extends Popup
+ * @alias sap.ui.webc.main.Dialog
+ * @extends sap.ui.webc.main.Popup
  * @tagname ui5-dialog
  * @public
  */
@@ -190,6 +221,8 @@ class Dialog extends Popup {
 
 		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
+
+		this._dragStartHandler = this._handleDragStart.bind(this);
 	}
 
 	static get metadata() {
@@ -253,7 +286,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,12 +304,42 @@ 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();
 	}
 
 	onBeforeRendering() {
+		super.onBeforeRendering();
+
 		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
 		this.onDesktop = isDesktop();
@@ -292,12 +355,16 @@ class Dialog extends Popup {
 
 	onEnterDOM() {
 		super.onEnterDOM();
-		this._attachResizeHandlers();
+		this._attachScreenResizeHandler();
+
+		this.addEventListener("dragstart", this._dragStartHandler);
 	}
 
 	onExitDOM() {
 		super.onExitDOM();
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
+
+		this.removeEventListener("dragstart", this._dragStartHandler);
 	}
 
 	/**
@@ -306,22 +373,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 +526,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 +554,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 +563,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -523,7 +589,6 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
 		this._initialX = event.clientX;
@@ -533,7 +598,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 +636,7 @@ class Dialog extends Popup {
 
 		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
+			this._cachedMinHeight,
 			window.innerHeight - this._initialTop,
 		);
 
@@ -583,20 +648,26 @@ 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();
 	}
 
+	_handleDragStart(event) {
+		if (this.draggable) {
+			event.preventDefault();
+		}
+	}
+
 	_attachMouseResizeHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);

package/src/DurationPicker.js

@@ -11,7 +11,7 @@ import {
  */
 const metadata = {
 	tag: "ui5-duration-picker",
-	properties: /** @lends sap.ui.webcomponents.main.DurationPicker.prototype */ {
+	properties: /** @lends sap.ui.webc.main.DurationPicker.prototype */ {
 		/**
 		 * Defines a formatted time value.
 		 *
@@ -26,7 +26,7 @@ const metadata = {
 
 		/**
 		 * Defines the selection step for the minutes
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 * @since 1.0.0-rc.8
@@ -38,7 +38,7 @@ const metadata = {
 
 		/**
 		 * Defines the selection step for the seconds
-		 * @type {Integer}
+		 * @type {sap.ui.webc.base.types.Integer}
 		 * @public
 		 * @defaultValue 1
 		 * @since 1.0.0-rc.8
@@ -161,8 +161,8 @@ const pad = number => {
  * @constructor
  * @since 1.0.0-rc.7
  * @author SAP SE
- * @alias sap.ui.webcomponents.main.DurationPicker
- * @extends TimePickerBase
+ * @alias sap.ui.webc.main.DurationPicker
+ * @extends sap.ui.webc.main.TimePickerBase
  * @tagname ui5-duration-picker
  * @private
  */