refactor(ui5-toast): replace show method with open property (#8855)

Users now can open `ui5-toast` using the `open` property. A new event `after-close` is introduced.
It may be used to sync app state with the `open` state of the `ui5-toast`.

BREAKING CHANGE: The Toast#show method has been replaced by  `open` property. If you previously used  `toast.show()` to show the toast, you must now se `toast.open=true`.

Related to: #8461

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -264,28 +264,28 @@
 	<script>
 		notificationList.addEventListener("item-click", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		notificationList.addEventListener("item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		notificationList.addEventListener("item-toggle", function(event) {
 			var item = event.detail.item;
 			wcToastBS.textContent = item.titleText + " has been " + (item.collapsed ? "collapsed" : "expanded");
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		acceptBtnInPopover.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Accept btn In popover btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		rejectBtnInPopover.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Reject btn In popover btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		openNotifications.addEventListener("click", function(event) {
@@ -307,7 +307,7 @@
 
 		notificationListTop.addEventListener("ui5-item-close", function (event) {
 				wcToastBS.textContent = event.detail.item.titleText;
-				wcToastBS.show();
+				wcToastBS.open = true;
 		});
 
 		btnCompact.addEventListener("click", function() {

packages/fiori/test/pages/NotificationListItem.html

@@ -216,12 +216,12 @@
 	<script>
 		notificationList.addEventListener("ui5-item-click", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		notificationList.addEventListener("ui5-item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		notificationList2.addEventListener("ui5-item-click", function(event) {
@@ -234,32 +234,32 @@
 
 			item.busy = true;
 			wcToastBS.textContent = item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		notificationList2.addEventListener("ui5-item-close", function(event) {
 			wcToastBS.textContent = event.detail.item.titleText;
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		acceptBtn.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Accept btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		acceptBtnInPopover.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Accept btn In popover btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		rejectBtn.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Reject btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		rejectBtnInPopover.addEventListener("ui5-click", function(event) {
 			wcToastBS.textContent = "Reject btn In popover btn clicked";
-			wcToastBS.show();
+			wcToastBS.open = true;
 		});
 
 		openNotifications.addEventListener("click", function(event) {

packages/fiori/test/pages/ShellBar.html

@@ -303,7 +303,7 @@ <h3>ShellBar in Compact</h3>
 
 		Array.from(document.querySelectorAll("ui5-shellbar-item")).forEach(function(item) {
 			item.addEventListener("ui5-click", function(event) {
-				wcToastTC.show();
+				wcToastTC.open = true;
 			});
 		});
 

packages/main/src/Toast.ts

@@ -5,6 +5,7 @@ import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isMac } from "@ui5/webcomponents-base/dist/Device.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import ToastPlacement from "./types/ToastPlacement.js";
 
 // Template
@@ -84,6 +85,14 @@ const handleGlobalKeydown = (e: KeyboardEvent) => {
 	styles: ToastCss,
 	template: ToastTemplate,
 })
+
+/**
+ * Fired after the component is auto closed.
+ * @public
+ * @since 2.0.0
+ */
+@event("after-close")
+
 class Toast extends UI5Element {
 	/**
 	 * Defines the duration in milliseconds for which component
@@ -107,7 +116,9 @@ class Toast extends UI5Element {
 
 	/**
 	 * Indicates whether the component is open (visible).
-	 * @private
+	 * @default false
+	 * @public
+	 * @since 2.0.0
 	 */
 	@property({ type: Boolean })
 	open!: boolean;
@@ -142,22 +153,29 @@ class Toast extends UI5Element {
 	@property({ type: Boolean })
 	focused!: boolean;
 
-	_reopen: boolean;
+	_onfocusinFn: () => void;
+	_onfocusoutFn: () => void;
+	_onkeydownFn: (e: KeyboardEvent) => void;
+	_onmouseoverFn: () => void;
+	_onmouseleaveFn: () => void;
+	_ontransitionendFn: () => void;
 
 	constructor() {
 		super();
 
-		this._reopen = false;
-
-		this.addEventListener("focusin", this._onfocusin.bind(this));
-		this.addEventListener("focusout", this._onfocusout.bind(this));
-		this.addEventListener("keydown", this._onkeydown.bind(this));
-		this.addEventListener("mouseover", this._onmouseover.bind(this));
-		this.addEventListener("mouseleave", this._onmouseleave.bind(this));
-		this.addEventListener("transitionend", this._ontransitionend.bind(this));
+		this._onfocusinFn = this._onfocusin.bind(this);
+		this._onfocusoutFn = this._onfocusout.bind(this);
+		this._onkeydownFn = this._onkeydown.bind(this);
+		this._onmouseoverFn = this._onmouseover.bind(this);
+		this._onmouseleaveFn = this._onmouseleave.bind(this);
+		this._ontransitionendFn = this._ontransitionend.bind(this);
 	}
 
 	onBeforeRendering() {
+		if (this.open) {
+			this._initiateOpening();
+		}
+
 		// Transition duration (animation) should be a third of the duration
 		// property, but not bigger than the maximum allowed (1000ms).
 		const transitionDuration = Math.min(this.effectiveDuration / 3, MAX_DURATION);
@@ -172,30 +190,6 @@ class Toast extends UI5Element {
 		}
 	}
 
-	onAfterRendering() {
-		if (this._reopen) {
-			this._reopen = false;
-			this._initiateOpening();
-		}
-	}
-
-	/**
-	 * Shows the component.
-	 * @public
-	 */
-	show(): void {
-		if (this.open) {
-			// If the Toast is already opened, we set the _reopen flag to true, in
-			// order to trigger re-rendering after an animation frame
-			// in the onAfterRendering hook.
-			// This is needed for properly resetting the opacity transition.
-			this._reopen = true;
-			this.open = false;
-		} else {
-			this._initiateOpening();
-		}
-	}
-
 	_onfocusin() {
 		if (this.focusable) {
 			this.focused = true;
@@ -232,6 +226,7 @@ class Toast extends UI5Element {
 		this.open = false;
 		this.focusable = false;
 		this.focused = false;
+		this.fireEvent("after-close");
 	}
 
 	_onmouseover() {
@@ -252,6 +247,26 @@ class Toast extends UI5Element {
 	get _tabindex() {
 		return this.focused ? "0" : "-1";
 	}
+
+	onEnterDOM(): void {
+		this.addEventListener("focusin", this._onfocusinFn);
+		this.addEventListener("focusout", this._onfocusoutFn);
+		this.addEventListener("keydown", this._onkeydownFn);
+		this.addEventListener("mouseover", this._onmouseoverFn);
+		this.addEventListener("mouseleave", this._onmouseleaveFn);
+		this.addEventListener("transitionend", this._ontransitionendFn);
+		this.addEventListener("transitioncancel", this._ontransitionendFn);
+	}
+
+	onExitDOM(): void {
+		this.removeEventListener("focusin", this._onfocusinFn);
+		this.removeEventListener("focusout", this._onfocusoutFn);
+		this.removeEventListener("keydown", this._onkeydownFn);
+		this.removeEventListener("mouseover", this._onmouseoverFn);
+		this.removeEventListener("mouseleave", this._onmouseleaveFn);
+		this.removeEventListener("transitionend", this._ontransitionendFn);
+		this.removeEventListener("transitioncancel", this._ontransitionendFn);
+	}
 }
 
 Toast.define();

packages/main/test/pages/Popover.html

@@ -660,7 +660,7 @@ <h2>Horizontal Align</h2>
 			var toast = document.createElement("ui5-toast");
 			toast.appendChild(document.createTextNode("Closed chained popover 2"));
 			document.body.appendChild(toast);
-			toast.show();
+			toast.open = true;
 		});
 
 		popoverFocusButton.addEventListener("click", function () {

packages/main/test/pages/Toast.html

@@ -100,20 +100,20 @@ <h3>Test Dialog and Toast</h3>
 		// Attaching click listeners to the buttons which show the toasts
 		document.querySelectorAll("ui5-button").forEach(function(button){
 			button.addEventListener('click', function () {
-				document.querySelector("#" + button.id.replace("BtnShow", "")).show();
+				document.querySelector("#" + button.id.replace("BtnShow", "")).open = true;
 			});
 		});
 
 		btnDialog.addEventListener('click', function () {
-			dialog.show();
+			dialog.open = true;
 		});
 
 		btnDialog2.addEventListener('click', function () {
-			dialog.close();
+			dialog.open = false;
 		});
 
 		btnToastInDialog.addEventListener('click', function () {
-			toastInDialog.show();
+			toastInDialog.open = true;
 		});
 
 	</script>

packages/website/docs/_samples/main/Toast/Basic/main.js

@@ -5,5 +5,5 @@ const btn = [...document.getElementsByTagName("ui5-button")][0];
 const toast = [...document.getElementsByTagName("ui5-toast")][0];
 
 btn.addEventListener("click", () => {
-	toast.show();	
+	toast.open = true;	
 });

packages/website/docs/_samples/main/Toast/Duration/main.js

@@ -5,5 +5,5 @@ const btn = [...document.getElementsByTagName("ui5-button")][0];
 const toast = [...document.getElementsByTagName("ui5-toast")][0];
 
 btn.addEventListener("click", () => {
-	toast.show();	
+	toast.open = true;	
 });

packages/website/docs/_samples/main/Toast/Placement/main.js

@@ -5,5 +5,5 @@ const btn = [...document.getElementsByTagName("ui5-button")][0];
 const toast = [...document.getElementsByTagName("ui5-toast")][0];
 
 btn.addEventListener("click", () => {
-	toast.show();	
+	toast.open = true;	
 });