@ui5/webcomponents 0.0.0-453158269 → 0.0.0-49cef2d02

package/src/{Dialog.js → Dialog.ts}

@@ -1,13 +1,20 @@
 import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.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,110 +28,15 @@ import dialogCSS from "./generated/themes/Dialog.css.js";
  */
 const STEP_SIZE = 16;
 
+type ValueStateWithIcon = ValueState.Error | ValueState.Warning | ValueState.Success | ValueState.Information;
 /**
- * @public
+ * Defines the icons corresponding to the dialog's state.
  */
-const metadata = {
-	tag: "ui5-dialog",
-	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
-		 * @public
-		 */
-		header: {
-			type: HTMLElement,
-		},
-
-		/**
-		 * Defines the footer HTML Element.
-		 *
-		 * @type {HTMLElement[]}
-		 * @slot
-		 * @public
-		 */
-		footer: {
-			type: HTMLElement,
-		},
-	},
-	properties: /** @lends  sap.ui.webcomponents.main.Dialog.prototype */ {
-		/**
-		 * Defines the header text.
-		 * <br><br>
-		 * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
-		 *
-		 * @type {string}
-		 * @defaultvalue ""
-		 * @public
-		 */
-		headerText: {
-			type: String,
-		},
-
-		/**
-		 * Determines whether the component should be stretched to fullscreen.
-		 * <br><br>
-		 * <b>Note:</b> The component will be stretched to approximately
-		 * 90% of the viewport.
-		 *
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		stretch: {
-			type: Boolean,
-		},
-
-		/**
-		 * 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 component can be draggable only in desktop mode.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.9
-		 * @public
-		 */
-		draggable: {
-			type: Boolean,
-		},
-
-		/**
-		 * 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 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}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.10
-		 * @public
-		 */
-		resizable: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		onPhone: {
-			type: Boolean,
-		},
-
-		/**
-		 * @private
-		 */
-		onDesktop: {
-			type: Boolean,
-		},
-	},
+const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
+	[ValueState.Error]: "error",
+	[ValueState.Warning]: "alert",
+	[ValueState.Success]: "sys-enter-2",
+	[ValueState.Information]: "information",
 };
 
 /**
@@ -174,12 +86,144 @@ 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
  */
+@customElement("ui5-dialog")
 class Dialog extends Popup {
+	/**
+	 * Defines the header text.
+	 * <br><br>
+	 * <b>Note:</b> If <code>header</code> slot is provided, the <code>headerText</code> is ignored.
+	 *
+	 * @type {string}
+	 * @name sap.ui.webc.main.Dialog.prototype.headerText
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	headerText!: string;
+
+	/**
+	 * Determines whether the component should be stretched to fullscreen.
+	 * <br><br>
+	 * <b>Note:</b> The component will be stretched to approximately
+	 * 90% of the viewport.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.Dialog.prototype.stretch
+	 * @defaultvalue false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	stretch!: boolean;
+
+	/**
+	 * 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 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}
+	 * @name sap.ui.webc.main.Dialog.prototype.draggable
+	 * @defaultvalue false
+	 * @since 1.0.0-rc.9
+	 * @public
+	 */
+	@property({ type: Boolean })
+	draggable!: boolean;
+
+	/**
+	 * 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 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}
+	 * @name sap.ui.webc.main.Dialog.prototype.resizable
+	 * @defaultvalue false
+	 * @since 1.0.0-rc.10
+	 * @public
+	 */
+	@property({ type: Boolean })
+	resizable!: 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}
+	 * @name sap.ui.webc.main.Dialog.prototype.state
+	 * @defaultvalue "None"
+	 * @public
+	 * @since 1.0.0-rc.15
+	 */
+	@property({ type: ValueState, defaultValue: ValueState.None })
+	state!: ValueState;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	onPhone!: boolean;
+
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	onDesktop!: boolean;
+
+	_screenResizeHandler: () => void;
+	_dragMouseMoveHandler: (e: MouseEvent) => void;
+	_dragMouseUpHandler: (e: MouseEvent) => void;
+	_resizeMouseMoveHandler: (e: MouseEvent) => void;
+	_resizeMouseUpHandler: (e: MouseEvent) => void;
+	_dragStartHandler: (e: DragEvent) => void;
+	_y?: int;
+	_x?: int;
+	_isRTL?: boolean;
+	_screenResizeHandlerAttached?: boolean;
+	_initialX?: number;
+	_initialY?: number;
+	_initialWidth?: number;
+	_initialHeight?: number;
+	_initialTop?: number;
+	_initialLeft?: number;
+	_minWidth?: number;
+	_cachedMinHeight?: number;
+
+	/**
+	 * 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[]}
+	 * @name sap.ui.webc.main.Dialog.prototype.header
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	header!: Array<HTMLElement>;
+
+	/**
+	 * Defines the footer HTML Element.
+	 *
+	 * @type {HTMLElement[]}
+	 * @name sap.ui.webc.main.Dialog.prototype.footer
+	 * @slot
+	 * @public
+	 */
+	@slot()
+	footer!: Array<HTMLElement>;
+
 	constructor() {
 		super();
 
@@ -190,10 +234,8 @@ class Dialog extends Popup {
 
 		this._resizeMouseMoveHandler = this._onResizeMouseMove.bind(this);
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
-	}
 
-	static get metadata() {
-		return metadata;
+		this._dragStartHandler = this._handleDragStart.bind(this);
 	}
 
 	static get dependencies() {
@@ -210,7 +252,7 @@ class Dialog extends Popup {
 		return [browserScrollbarCSS, PopupsCommonCss, dialogCSS];
 	}
 
-	static _isHeader(element) {
+	static _isHeader(element: HTMLElement) {
 		return element.classList.contains("ui5-popup-header-root") || element.getAttribute("slot") === "header";
 	}
 
@@ -244,8 +286,8 @@ class Dialog extends Popup {
 		return ariaLabelledById;
 	}
 
-	get _ariaModal() { // Required by Popup.js
-		return true;
+	get _ariaModal() {
+		return "true";
 	}
 
 	get _displayProp() {
@@ -253,7 +295,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 +313,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<HTMLElement>(".ui5-popup-header-root");
+		if (header) {
+			minHeight += header.offsetHeight;
+		}
+
+		const footer = this._root.querySelector<HTMLElement>(".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 as ValueStateWithIcon];
+	}
+
+	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 +364,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 +382,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
 		}
 	}
 
@@ -335,26 +411,25 @@ class Dialog extends Popup {
 		});
 	}
 
-	_revertSize() {
+	_revertSize = () => {
 		Object.assign(this.style, {
 			top: "",
 			left: "",
 			width: "",
 			height: "",
 		});
-		this.removeEventListener("ui5-before-close", this._revertSize);
 	}
 
 	/**
 	 * Event handlers
 	 */
-	_onDragMouseDown(event) {
+	_onDragMouseDown(e: DragEvent) {
 		// allow dragging only on the header
-		if (!this._movable || !this.draggable || !Dialog._isHeader(event.target)) {
+		if (!this._movable || !this.draggable || !Dialog._isHeader(e.target as HTMLElement)) {
 			return;
 		}
 
-		event.preventDefault();
+		e.preventDefault();
 
 		const {
 			top,
@@ -372,17 +447,18 @@ class Dialog extends Popup {
 			height: `${Math.round(Number.parseFloat(height) * 100) / 100}px`,
 		});
 
-		this._x = event.clientX;
-		this._y = event.clientY;
+		this._x = e.clientX;
+		this._y = e.clientY;
 
 		this._attachMouseDragHandlers();
 	}
 
-	_onDragMouseMove(event) {
-		event.preventDefault();
+	_onDragMouseMove(e: MouseEvent) {
+		e.preventDefault();
 
-		const calcX = this._x - event.clientX;
-		const calcY = this._y - event.clientY;
+		const { clientX, clientY } = e;
+		const calcX = this._x! - clientX;
+		const calcY = this._y! - clientY;
 		const {
 			left,
 			top,
@@ -393,33 +469,33 @@ class Dialog extends Popup {
 			top: `${Math.floor(top - calcY)}px`,
 		});
 
-		this._x = event.clientX;
-		this._y = event.clientY;
+		this._x = clientX;
+		this._y = clientY;
 	}
 
 	_onDragMouseUp() {
-		this._x = null;
-		this._y = null;
+		delete this._x;
+		delete this._y;
 
 		this._detachMouseDragHandlers();
 	}
 
-	_onDragOrResizeKeyDown(event) {
-		if (!this._movable || !Dialog._isHeader(event.target)) {
+	_onDragOrResizeKeyDown(e: KeyboardEvent) {
+		if (!this._movable || !Dialog._isHeader(e.target as HTMLElement)) {
 			return;
 		}
 
-		if (this.draggable && [isUp, isDown, isLeft, isRight].some(key => key(event))) {
-			this._dragWithEvent(event);
+		if (this.draggable && [isUp, isDown, isLeft, isRight].some(key => key(e))) {
+			this._dragWithEvent(e);
 			return;
 		}
 
-		if (this.resizable && [isUpShift, isDownShift, isLeftShift, isRightShift].some(key => key(event))) {
-			this._resizeWithEvent(event);
+		if (this.resizable && [isUpShift, isDownShift, isLeftShift, isRightShift].some(key => key(e))) {
+			this._resizeWithEvent(e);
 		}
 	}
 
-	_dragWithEvent(event) {
+	_dragWithEvent(e: KeyboardEvent) {
 		const {
 			top,
 			left,
@@ -427,23 +503,23 @@ class Dialog extends Popup {
 			height,
 		} = this.getBoundingClientRect();
 
-		let newPos,
-			posDirection;
+		let newPos = 0;
+		let posDirection: "top" | "left" = "top";
 
 		switch (true) {
-		case isUp(event):
+		case isUp(e):
 			newPos = top - STEP_SIZE;
 			posDirection = "top";
 			break;
-		case isDown(event):
+		case isDown(e):
 			newPos = top + STEP_SIZE;
 			posDirection = "top";
 			break;
-		case isLeft(event):
+		case isLeft(e):
 			newPos = left - STEP_SIZE;
 			posDirection = "left";
 			break;
-		case isRight(event):
+		case isRight(e):
 			newPos = left + STEP_SIZE;
 			posDirection = "left";
 			break;
@@ -458,14 +534,13 @@ class Dialog extends Popup {
 		this.style[posDirection] = `${newPos}px`;
 	}
 
-	_resizeWithEvent(event) {
-		this._detachResizeHandlers();
-		this.addEventListener("ui5-before-close", this._revertSize);
+	_resizeWithEvent(e: KeyboardEvent) {
+		this._detachScreenResizeHandler();
+		this.addEventListener("ui5-before-close", this._revertSize, { once: true });
 
 		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;
 
@@ -473,22 +548,22 @@ class Dialog extends Popup {
 			height = Number.parseFloat(style.height);
 
 		switch (true) {
-		case isUpShift(event):
+		case isUpShift(e):
 			height -= STEP_SIZE;
 			break;
-		case isDownShift(event):
+		case isDownShift(e):
 			height += STEP_SIZE;
 			break;
-		case isLeftShift(event):
+		case isLeftShift(e):
 			width -= STEP_SIZE;
 			break;
-		case isRightShift(event):
+		case isRightShift(e):
 			width += STEP_SIZE;
 			break;
 		}
 
 		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 +572,7 @@ class Dialog extends Popup {
 	}
 
 	_attachMouseDragHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._dragMouseMoveHandler);
 		window.addEventListener("mouseup", this._dragMouseUpHandler);
@@ -508,12 +583,12 @@ class Dialog extends Popup {
 		window.removeEventListener("mouseup", this._dragMouseUpHandler);
 	}
 
-	_onResizeMouseDown(event) {
+	_onResizeMouseDown(e: MouseEvent) {
 		if (!this._movable || !this.resizable) {
 			return;
 		}
 
-		event.preventDefault();
+		e.preventDefault();
 
 		const {
 			top,
@@ -523,17 +598,16 @@ class Dialog extends Popup {
 			width,
 			height,
 			minWidth,
-			minHeight,
 		} = window.getComputedStyle(this);
 
-		this._initialX = event.clientX;
-		this._initialY = event.clientY;
+		this._initialX = e.clientX;
+		this._initialY = e.clientY;
 		this._initialWidth = Number.parseFloat(width);
 		this._initialHeight = Number.parseFloat(height);
 		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`,
@@ -543,36 +617,36 @@ class Dialog extends Popup {
 		this._attachMouseResizeHandlers();
 	}
 
-	_onResizeMouseMove(event) {
-		const { clientX, clientY } = event;
+	_onResizeMouseMove(e: MouseEvent) {
+		const { clientX, clientY } = e;
 
 		let newWidth,
 			newLeft;
 
 		if (this._isRTL) {
 			newWidth = clamp(
-				this._initialWidth - (clientX - this._initialX),
-				this._minWidth,
-				this._initialLeft + this._initialWidth,
+				this._initialWidth! - (clientX - this._initialX!),
+				this._minWidth!,
+				this._initialLeft! + this._initialWidth!,
 			);
 
 			newLeft = clamp(
-				this._initialLeft + (clientX - this._initialX),
+				this._initialLeft! + (clientX - this._initialX!),
 				0,
-				this._initialX + this._initialWidth - this._minWidth,
+				this._initialX! + this._initialWidth! - this._minWidth!,
 			);
 		} else {
 			newWidth = clamp(
-				this._initialWidth + (clientX - this._initialX),
-				this._minWidth,
-				window.innerWidth - this._initialLeft,
+				this._initialWidth! + (clientX - this._initialX!),
+				this._minWidth!,
+				window.innerWidth - this._initialLeft!,
 			);
 		}
 
 		const newHeight = clamp(
-			this._initialHeight + (clientY - this._initialY),
-			this._minHeight,
-			window.innerHeight - this._initialTop,
+			this._initialHeight! + (clientY - this._initialY!),
+			this._cachedMinHeight!,
+			window.innerHeight - this._initialTop!,
 		);
 
 		Object.assign(this.style, {
@@ -583,24 +657,30 @@ 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(e: DragEvent) {
+		if (this.draggable) {
+			e.preventDefault();
+		}
+	}
+
 	_attachMouseResizeHandlers() {
-		this._detachResizeHandlers();
+		this._detachScreenResizeHandler();
 
 		window.addEventListener("mousemove", this._resizeMouseMoveHandler);
 		window.addEventListener("mouseup", this._resizeMouseUpHandler);
-		this.addEventListener("ui5-before-close", this._revertSize);
+		this.addEventListener("ui5-before-close", this._revertSize, { once: true });
 	}
 
 	_detachMouseResizeHandlers() {