feat(popups): Implement declarative API for open/close

packages/main/src/Dialog.js

@@ -274,6 +274,12 @@ class Dialog extends Popup {
 
 	onAfterRendering() {
 		this._attachResizeHandlers();
+
+		if (!this.isOpen() && this.open) {
+			this.show();
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
 	}
 
 	onExitDOM() {

packages/main/src/Popover.js

@@ -145,6 +145,16 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the opener id of the element that the popover is shown at
+		 * @public
+		 * @type {String}
+		 * @defaultvalue ""
+		 */
+		opener: {
+			type: String,
+		},
+
 		/**
 		 * Defines whether the content is scrollable.
 		 *
@@ -296,6 +306,14 @@ class Popover extends Popup {
 		ResizeHandler.deregister(this, this._handleResize);
 	}
 
+	onAfterRendering() {
+		if (!this.isOpen() && this.open) {
+			this.showAt(document.getElementById(this.opener));
+		} else if (this.isOpen() && !this.open) {
+			this.close();
+		}
+	}
+
 	isOpenerClicked(event) {
 		const target = event.target;
 		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener) || event.composedPath().indexOf(this._opener) > -1;

packages/main/src/Popup.js

@@ -60,12 +60,23 @@ const metadata = {
 
 		/**
 		 * Indicates if the element is open
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 */
+		open: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the element is already open
 		 * @private
 		 * @type {boolean}
 		 * @defaultvalue false
 		 */
 		opened: {
 			type: Boolean,
+			noAttribute: true,
 		},
 
 		/**
@@ -424,6 +435,7 @@ class Popup extends UI5Element {
 		this._addOpenedPopup();
 
 		this.opened = true;
+		this.open = true;
 
 		await renderFinished();
 		this.fireEvent("after-open", {}, false, false);
@@ -458,6 +470,7 @@ class Popup extends UI5Element {
 
 		this.hide();
 		this.opened = false;
+		this.open = false;
 
 		if (!preventRegistryUpdate) {
 			this._removeOpenedPopup();

packages/main/test/pages/Dialog.html

@@ -32,6 +32,9 @@
 	<ui5-button id="btnOpenDialog">Open Streched Dialog</ui5-button>
 	<br>
 	<br>
+	<ui5-button id="btnOpenDialogWithAttr">Open with Attribute</ui5-button>
+	<br>
+	<br>
 	<ui5-button id="message">Open Message Dialog</ui5-button>
 	<br>
 	<br>
@@ -124,6 +127,11 @@
 	</ui5-dialog>
 
 
+	<ui5-dialog id="dlgAttr">
+		<ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
+		<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
+	</ui5-dialog>
+
 	<ui5-dialog id="dialog" accessible-name="Resizable" stretch>
 		<div slot="header">
 			<ui5-button id="header-button">focus stop</ui5-button>
@@ -406,6 +414,18 @@
 			dialog.close();
 		});
 
+		btnOpenDialogWithAttr.addEventListener("click", function () {
+			dlgAttr.setAttribute("open", "");
+		});
+
+		btnCloseWithMethod.addEventListener("click", function () {
+			dlgAttr.close();
+		});
+
+		btnCloseWithAttr.addEventListener("click", function () {
+			dlgAttr.removeAttribute("open");
+		});
+
 		prevent.addEventListener("click", function () {
 			window["prevent-dialog"].show();
 		});

packages/main/test/pages/Popover.html

@@ -53,6 +53,7 @@
 
 	<ui5-button id="btn">Click me !</ui5-button>
 
+
 	<ui5-popover header-text="My Heading" id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
 		<div slot="header">
 			<ui5-button id="first-focusable">I am in the header</ui5-button>
@@ -110,6 +111,14 @@
 		</div>
 	</ui5-popover>
 
+	<br>
+	<br>
+	<ui5-button id="btnOpenWithAttr">Open with Attribute</ui5-button>
+	<ui5-popover id="popoverAttr" opener="btnOpenWithAttr">
+		<ui5-button id="btnCloseWithMethod">Close with Method</ui5-button>
+		<ui5-button id="btnCloseWithAttr">Close with Attribute</ui5-button>
+	</ui5-popover>
+
 	<br>
 	<br>
 
@@ -424,6 +433,18 @@
 			pop.showAt(btn);
 		});
 
+		btnOpenWithAttr.addEventListener("click", function () {
+			popoverAttr.setAttribute("open", "");
+		});
+
+		btnCloseWithMethod.addEventListener("click", function () {
+			popoverAttr.close();
+		});
+
+		btnCloseWithAttr.addEventListener("click", function () {
+			popoverAttr.removeAttribute("open");
+		});
+
 		popbtn.addEventListener("click", function (event) {
 			danger.showAt(popbtn);
 		});

packages/main/test/specs/Dialog.spec.js

@@ -20,6 +20,20 @@ describe("Dialog general interaction", () => {
 		assert.notOk(await dialog.isDisplayedInViewport(), "Dialog is closed.");
 	});
 
+	it("tests dialog toggling with 'open' attribute", async () => {
+		const btnOpenDialog = await browser.$("#btnOpenDialogWithAttr");
+		const btnCloseDialog= await browser.$("#btnCloseWithAttr");
+
+		await btnOpenDialog.click();
+
+		const dialog = await browser.$("#dlgAttr");
+
+		assert.ok(await dialog.isDisplayedInViewport(), "Dialog is opened.");
+
+		await btnCloseDialog.click();
+		assert.notOk(await dialog.isDisplayedInViewport(), "Dialog is closed.");
+	});
+
 	it("tests popover in dialog", async () => {
 		const btnOpenDialog = await browser.$("#btnOpenDialog");
 		const select = await browser.$("#mySelect");

packages/main/test/specs/Popover.spec.js

@@ -50,6 +50,19 @@ describe("Popover general interaction", () => {
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
 	});
 
+	it("tests popover toggling with 'open' attribute", async () => {
+		const btnOpenPopover = await browser.$("#btnOpenWithAttr");
+		const btnCloseWithAttr = await browser.$("#btnCloseWithAttr");
+
+		await btnOpenPopover.click();
+
+		const popover = await browser.$("#popoverAttr");
+		assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
+
+		await btnCloseWithAttr.click();
+		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
+	});
+
 	it("tests popover does not close with opener", async () => {
 		const popover = await browser.$("#quickViewCard");
 		const btnOpenPopover = await browser.$("#btnQuickViewCardOpener");
@@ -65,7 +78,7 @@ describe("Popover general interaction", () => {
 		await browser.pause(500);
 
 		// assert - the popover remains open, although opener is not visible
-		assert.strictEqual(await popover.getAttribute("opened"), "",
+		assert.strictEqual(await popover.getProperty("opened"), true,
 			"Popover remains open.");
 		assert.strictEqual(await popover.isDisplayedInViewport(), true,
 			"Popover remains open.");
@@ -145,15 +158,15 @@ describe("Popover general interaction", () => {
 		const popover = await browser.$("#modalPopover");
 
 		await btnOpenPopover.click();
-		assert.ok(await popover.getProperty("opened"), "Popover is opened.");
+		assert.ok(await popover.getProperty("open"), "Popover is opened.");
 
 		try {
 			await browser.$("#btn").click();
 		} catch {
 			assert.ok(true, "The click was intercepted.");
 		}
 
-		assert.ok(await popover.getProperty("opened"), "Popover is still opened.");
+		assert.ok(await popover.getProperty("open"), "Popover is still opened.");
 
 		await popoverClose.click();
 		assert.notOk(await popover.isDisplayedInViewport(), "Popover is closed.");
@@ -165,7 +178,7 @@ describe("Popover general interaction", () => {
 		const popoverId = await popover.getProperty("_id");
 
 		await btnOpenPopover.click();
-		assert.ok(await popover.getProperty("opened"), "Popover is opened.");
+		assert.ok(await popover.getProperty("open"), "Popover is opened.");
 
 		const blockLayerIsCreated = await browser.executeAsync((popoverId, done) => {
 			const staticAreaItems = document.querySelectorAll("ui5-static-area-item");