From 52106ccffba64d13949764339a71225b33dac3a3 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Fri, 21 Jun 2024 16:42:05 +0300
Subject: [PATCH] refactor(ui5-view-settings-dialog): change opening api to
 open property (#9249)

Add `open` property to replace the `show` and `close` methods in the `ui5-view-settings-dialog` component.

BREAKING CHANGE: Removed `show` and `close` methods.

Before, the ui5-view-settings-dialog could be opened and closed by calling `show()` and `close()`:
```ts
const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.show();
viewSettingsDialog.close();
```
Now, the dialog is opened and closed by setting the open property to true or false:
```ts
const viewSettingsDialog = document.getElementById("exampleID");
viewSettingsDialog.open = true;
viewSettingsDialog.open = false;
```
fixes: https://github.com/SAP/ui5-webcomponents/issues/9240
---
 packages/fiori/src/ViewSettingsDialog.hbs     |  5 +-
 packages/fiori/src/ViewSettingsDialog.ts      | 50 +++++++++++++------
 .../fiori/test/pages/ViewSettingsDialog.html  |  6 +--
 .../fiori/ViewSettingsDialog/Basic/main.js    |  2 +-
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
index 4890af1e14ed..74c05afc993c 100644
--- a/packages/fiori/src/ViewSettingsDialog.hbs
+++ b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -1,9 +1,12 @@
 <ui5-dialog
 	prevent-initial-focus
 	aria-label="{{_dialogTitle}}"
-	@ui5-open={{_focusRecentlyUsedControl}}
 	@ui5-before-close={{_restoreConfirmedOnEscape}}
 	?stretch={{_isPhone}}
+	.open="{{open}}"
+	@ui5-before-open="{{beforeDialogOpen}}"
+	@ui5-open="{{afterDialogOpen}}"
+	@ui5-close="{{afterDialogClose}}"
 >
 
 	<div slot="header" class="ui5-vsd-header">
diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 6f7fc32bdce4..ac02f7f616e1 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -193,6 +193,18 @@ type VSDInternalSettings = {
  * @public
  */
 @event("before-open")
+/**
+ * Fired after the dialog is opened.
+ * @since 2.0.0
+ * @public
+ */
+@event("open")
+/**
+ * Fired after the dialog is closed.
+ * @since 2.0.0
+ * @public
+ */
+@event("close")
 class ViewSettingsDialog extends UI5Element {
 	/**
 	 * Defines the initial sort order.
@@ -202,6 +214,15 @@ class ViewSettingsDialog extends UI5Element {
 	@property({ type: Boolean })
 	sortDescending = false;
 
+	/**
+	 * Indicates if the dialog is open.
+	 * @public
+	 * @default false
+	 * @since 2.0.0
+	 */
+	@property({ type: Boolean })
+	open = false;
+
 	/**
 	 * Keeps recently focused list in order to focus it on next dialog open.
 	 * @private
@@ -491,9 +512,8 @@ class ViewSettingsDialog extends UI5Element {
 
 	/**
 	 * Shows the dialog.
-	 * @public
 	 */
-	show(): void {
+	beforeDialogOpen(): void {
 		if (!this._dialog) {
 			this._sortOrder = this._sortOrderListDomRef;
 			this._sortBy = this._sortByList;
@@ -509,9 +529,18 @@ class ViewSettingsDialog extends UI5Element {
 		}
 
 		this.fireEvent("before-open", {}, true, false);
-		this._dialog.open = true;
+	}
+
+	afterDialogOpen(): void {
+		this._dialog?.querySelector<List>("[ui5-list]")?.focusFirstItem();
+
+		this._focusRecentlyUsedControl();
+
+		this.fireEvent("open");
+	}
 
-		this._dialog.querySelector<List>("[ui5-list]")?.focusFirstItem();
+	afterDialogClose(): void {
+		this.fireEvent("close");
 	}
 
 	_handleModeChange(e: CustomEvent) { // use SegmentedButton event when done
@@ -547,15 +576,6 @@ class ViewSettingsDialog extends UI5Element {
 		});
 	}
 
-	/**
-	 * Closes the dialog.
-	 */
-	close() {
-		if (this._dialog) {
-			this._dialog.open = false;
-		}
-	}
-
 	/**
 	 * Sets focus on recently used control within the dialog.
 	 */
@@ -574,7 +594,7 @@ class ViewSettingsDialog extends UI5Element {
 	 * Stores current settings as confirmed and fires `confirm` event.
 	 */
 	_confirmSettings() {
-		this.close();
+		this.open = false;
 		this._confirmedSettings = this._currentSettings;
 
 		this.fireEvent<ViewSettingsDialogConfirmEventDetail>("confirm", this.eventsParams);
@@ -587,7 +607,7 @@ class ViewSettingsDialog extends UI5Element {
 		this._restoreSettings(this._confirmedSettings);
 
 		this.fireEvent<ViewSettingsDialogCancelEventDetail>("cancel", this.eventsParams);
-		this.close();
+		this.open = false;
 	}
 
 	get eventsParams() {
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index 5e71c3ce72ca..c31f2a21ab2c 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -95,7 +95,7 @@ <h3> ViewSettingsDialog</h3>
 
 	<script>
 		btnOpenDialog.addEventListener("click", function () {
-			vsd.show();
+			vsd.open = true;
 		});
 		btnChangeSettings.addEventListener("click", function () {
 			vsd.setConfirmedSettings(JSON.parse(vsdSettings.value));
@@ -107,13 +107,13 @@ <h3> ViewSettingsDialog</h3>
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
 		});
 		btnOpenDialogSort.addEventListener("click", function () {
-			vsdSort.show();
+			vsdSort.open = true;
 		});
 		vsdSort.addEventListener("ui5-confirm", function(evt) {
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
 		});
 		btnOpenDialogFilter.addEventListener("click", function () {
-			vsdFilter.show();
+			vsdFilter.open = true;
 		});
 		vsdFilter.addEventListener("ui5-confirm", function(evt) {
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
diff --git a/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js
index 4093ea42c954..d65aaf246a76 100644
--- a/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/ViewSettingsDialog/Basic/main.js
@@ -9,7 +9,7 @@ var vsdResults = document.getElementById("vsdResults");
 
 btnOpenDialog1.addEventListener("click", function () {
     vsdResults.innerHTML = "";
-    vsd1.show();
+    vsd1.open = true;
 });
 
 vsd1.addEventListener("confirm", function (evt) {