refactor(ui5-popup): rename after-open and after-close events to 'ope…

…n' and 'close' (#8946) Change the event names in popup from `after-close` and `after-open` to `close` and `open`. BREAKING CHANGE: Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ``` Now the application developers should include the ui5-bar as follows: ```ts popup.addEventListener("open", function() { //... }); popup.addEventListener("close", function() { //... }); ``` Related to #8461
SAP · May 13, 2024 · 912167d · 912167d
1 parent f628fbc
commit 912167d
Show file tree

Hide file tree

Showing 23 changed files with 42 additions and 42 deletions.
diff --git a/packages/fiori/src/BarcodeScannerDialog.hbs b/packages/fiori/src/BarcodeScannerDialog.hbs
@@ -2,7 +2,7 @@
 	class="ui5-barcode-scanner-dialog-root"
 	.open="{{_open}}"
 	@ui5-before-open={{_startReader}}
-	@ui5-after-close={{_resetReader}}>
+	@ui5-close={{_resetReader}}>
 	<div class="ui5-barcode-scanner-dialog-video-wrapper">
 		<video class="ui5-barcode-scanner-dialog-video"></video>
 	</div>

diff --git a/packages/fiori/src/ShellBarPopover.hbs b/packages/fiori/src/ShellBarPopover.hbs
@@ -3,7 +3,7 @@
 	placement="Bottom"
 	prevent-initial-focus
 	@ui5-before-open={{_menuPopoverBeforeOpen}}
-	@ui5-after-close={{_menuPopoverAfterClose}}
+	@ui5-close={{_menuPopoverAfterClose}}
 >
 	<ui5-list separators="None" selection-mode="Single" @ui5-selection-change={{_menuItemPress}}>
 		{{#each _menuPopoverItems}}
@@ -18,7 +18,7 @@
 	horizontal-align="{{popoverHorizontalAlign}}"
 	hide-arrow
 	@ui5-before-open={{_overflowPopoverBeforeOpen}}
-	@ui5-after-close={{_overflowPopoverAfterClose}}
+	@ui5-close={{_overflowPopoverAfterClose}}
 >
 	<ui5-list separators="None" @ui5-item-click="{{_handleActionListClick}}">
 		{{#each _hiddenIcons}}

diff --git a/packages/fiori/src/SideNavigationPopover.hbs b/packages/fiori/src/SideNavigationPopover.hbs
@@ -33,7 +33,7 @@
 	vertical-align="Top"
 	class="ui5-side-navigation-popover"
 	accessible-name-ref="{{_id}}-sideNavigationPopoverText"
-	@ui5-after-open="{{_onAfterPopoverOpen}}"
+	@ui5-open="{{_onAfterPopoverOpen}}"
 	@ui5-before-open="{{_onBeforePopoverOpen}}"
 	@ui5-before-close="{{_onBeforePopoverClose}}"
 >

diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -1,7 +1,7 @@
 <ui5-dialog
 	prevent-initial-focus
 	aria-label="{{_dialogTitle}}"
-	@ui5-after-open={{_focusRecentlyUsedControl}}
+	@ui5-open={{_focusRecentlyUsedControl}}
 	@ui5-before-close={{_restoreConfirmedOnEscape}}
 	?stretch={{_isPhone}}
 >

diff --git a/packages/main/src/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs
@@ -4,7 +4,7 @@
 	placement="Bottom"
 	?open="{{_open}}"
 	.opener="{{opener}}"
-	@ui5-after-close="{{onAfterClose}}"
+	@ui5-close="{{onAfterClose}}"
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title

diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -5,8 +5,8 @@
 	horizontal-align="Start"
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
-	@ui5-after-open={{_afterOpenPopover}}
-	@ui5-after-close={{_afterClosePopover}}
+	@ui5-open={{_afterOpenPopover}}
+	@ui5-close={{_afterClosePopover}}
 >
 	<ui5-busy-indicator
 		?active={{loading}}

diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -8,7 +8,7 @@
 	hide-arrow
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
-	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-close="{{onResponsivePopoverAfterClose}}"
 	@ui5-before-open="{{onResponsivePopoverBeforeOpen}}"
 >
 	{{#if showHeader}}

diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -8,8 +8,8 @@
 		horizontal-align="Start"
 		tabindex="-1"
 		style="{{styles.suggestionsPopover}}"
-		@ui5-after-open="{{_afterOpenPicker}}"
-		@ui5-after-close="{{_afterClosePicker}}"
+		@ui5-open="{{_afterOpenPicker}}"
+		@ui5-close="{{_afterClosePicker}}"
 		@ui5-scroll="{{_scroll}}"
 		.open={{open}}
 		.opener={{this}}
@@ -85,7 +85,7 @@
 			horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 			.opener={{this}}
 			.open={{valueStateOpen}}
-			@ui5-after-close="{{_handleValueStatePopoverAfterClose}}"
+			@ui5-close="{{_handleValueStatePopoverAfterClose}}"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>

diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs
@@ -8,9 +8,9 @@
 	allow-target-overlap
 	?sub-menu={{_isSubMenu}}
 	@ui5-before-open={{_beforePopoverOpen}}
-	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}
-	@ui5-after-close={{_afterPopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
 >
 {{#if isPhone}}
 	<div

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -6,9 +6,9 @@
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_afterClosePicker}}
+	@ui5-close={{_afterClosePicker}}
 	@ui5-before-open={{_beforeOpen}}
-	@ui5-after-open={{_afterOpenPicker}}
+	@ui5-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">

diff --git a/packages/main/src/NavigationMenu.hbs b/packages/main/src/NavigationMenu.hbs
@@ -4,9 +4,9 @@
 	vertical-align="Center"
 	?sub-menu={{_isSubMenu}}
 	@ui5-before-open={{_beforePopoverOpen}}
-	@ui5-after-open={{_afterPopoverOpen}}
+	@ui5-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}
-	@ui5-after-close={{_afterPopoverClose}}
+	@ui5-close={{_afterPopoverClose}}
     accessible-name-ref="{{_id}}-navigationMenuPopoverText"
 >
 <span id="{{_id}}-navigationMenuPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>

diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
@@ -270,7 +270,7 @@ class Popover extends Popup {
 		}
 
 		if (this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
-			this.fireEvent("after-close", {}, false, false);
+			this.fireEvent("close", {}, false, false);
 			return;
 		}
 

diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
@@ -90,7 +90,7 @@ type PopupBeforeCloseEventDetail = {
  * Fired after the component is opened. **This event does not bubble.**
  * @public
  */
-@event("after-open")
+@event("open")
 
 /**
  * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**
@@ -113,7 +113,7 @@ type PopupBeforeCloseEventDetail = {
  * Fired after the component is closed. **This event does not bubble.**
  * @public
  */
-@event("after-close")
+@event("close")
 
 /**
  * Fired whenever the popup content area is scrolled
@@ -300,7 +300,7 @@ abstract class Popup extends UI5Element {
 		// initial focus, if focused element is dynamically created
 		await this.applyInitialFocus();
 
-		this.fireEvent("after-open", {}, false, false);
+		this.fireEvent("open", {}, false, false);
 	}
 
 	_resize() {
@@ -507,7 +507,7 @@ abstract class Popup extends UI5Element {
 			this.resetFocus();
 		}
 
-		this.fireEvent("after-close", {}, false, false);
+		this.fireEvent("close", {}, false, false);
 	}
 
 	/**

diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -8,9 +8,9 @@
 		?prevent-initial-focus="{{preventInitialFocus}}"
 		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
-		@ui5-after-open="{{_propagateDialogEvent}}"
+		@ui5-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
-		@ui5-after-close="{{_afterDialogClose}}"
+		@ui5-close="{{_afterDialogClose}}"
 		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
@@ -20,7 +20,7 @@
 			{{else}}
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
-						<ui5-title 
+						<ui5-title
 							level="H2"
 							wrapping-type="None"
 							class="ui5-popup-header-text ui5-responsive-popover-header-text"

diff --git a/packages/main/src/SelectMenu.hbs b/packages/main/src/SelectMenu.hbs
@@ -2,8 +2,8 @@
 	class="ui5-select-menu"
 	placement="Bottom"
 	horizontal-align="Start"
-	@ui5-after-open="{{_onAfterOpen}}"
-	@ui5-after-close="{{_onAfterClose}}"
+	@ui5-open="{{_onAfterOpen}}"
+	@ui5-close="{{_onAfterClose}}"
 	@ui5-before-open="{{_onBeforeOpen}}"
 	hide-arrow
 	prevent-initial-focus

diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
@@ -5,9 +5,9 @@
 		placement="Bottom"
 		class="ui5-select-popover {{classes.popover}}"
 		horizontal-align="Start"
-		@ui5-after-open="{{_afterOpen}}"
+		@ui5-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
-		@ui5-after-close="{{_afterClose}}"
+		@ui5-close="{{_afterClose}}"
 		@keydown="{{_onkeydown}}"
 		style={{styles.responsivePopover}}
 	>

diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs
@@ -6,8 +6,8 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-after-open="{{onResponsivePopoverAfterOpen}}"
-	@ui5-after-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-open="{{onResponsivePopoverAfterOpen}}"
+	@ui5-close="{{onResponsivePopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >
@@ -35,8 +35,8 @@
 	allow-target-overlap
 	_hide-header
 	hide-arrow
-	@ui5-after-open="{{onInputsPopoverAfterOpen}}"
-	@ui5-after-close="{{onInputsPopoverAfterClose}}"
+	@ui5-open="{{onInputsPopoverAfterOpen}}"
+	@ui5-close="{{onInputsPopoverAfterClose}}"
 	@wheel="{{_handleWheel}}"
 	@keydown="{{_onkeydown}}"
 >

diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
@@ -512,7 +512,7 @@ class Tokenizer extends UI5Element {
 			if (tokensArray[0].isTruncatable) {
 				const morePopover = this.getPopover();
 
-				morePopover.addEventListener("ui5-after-close", () => {
+				morePopover.addEventListener("ui5-close", () => {
 					this.fireEvent<TokenizerTokenDeleteEventDetail>("token-delete", { ref: token });
 				}, {
 					once: true,

diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
@@ -9,7 +9,7 @@
 	placement="Bottom"
 	horizontal-align="Start"
 	@ui5-before-close="{{handleBeforeClose}}"
-	@ui5-after-close="{{handleAfterClose}}"
+	@ui5-close="{{handleAfterClose}}"
 	@ui5-before-open="{{handleBeforeOpen}}"
 >
 	{{#if _isPhone}}

diff --git a/packages/main/src/ToolbarPopover.hbs b/packages/main/src/ToolbarPopover.hbs
@@ -2,8 +2,8 @@
 	class="ui5-overflow-popover"
 	placement="Bottom"
 	horizontal-align="End"
-	@ui5-after-close="{{onOverflowPopoverClosed}}"
-	@ui5-after-open="{{onOverflowPopoverOpened}}"
+	@ui5-close="{{onOverflowPopoverClosed}}"
+	@ui5-open="{{onOverflowPopoverOpened}}"
 	hide-arrow
 >
 	<div class="ui5-overflow-list {{classes.overflow}}">

diff --git a/packages/main/test/pages/DialogLifecycle.html b/packages/main/test/pages/DialogLifecycle.html
@@ -45,7 +45,7 @@
 		const dialog = document.getElementById("hello-dialog");
 		const closeBtn = dialog.querySelector("#closeDialogButton");
 		closeBtn.addEventListener("click", () => {
-			dialog.addEventListener("ui5-after-close", () => {
+			dialog.addEventListener("ui5-close", () => {
 				dialog.parentElement.removeChild(dialog);
 			});
 			dialog.open = false;

diff --git a/packages/main/test/pages/OpenUI5.html b/packages/main/test/pages/OpenUI5.html
@@ -66,7 +66,7 @@
 				press: function() {
 					dialogSpecial.open();
 					btnChain.addEventListener("click", () => {
-						dialogChain.addEventListener("after-open", () => {
+						dialogChain.addEventListener("open", () => {
 							const popoverChain = new sap.m.Popover({
 								title: "This is a sap.m.Popover",
 								content: [
@@ -182,7 +182,7 @@
 	})
 
 	let done = false;
-	componentPopover.addEventListener("after-open", () => {
+	componentPopover.addEventListener("open", () => {
 		if (done) {
 			return;
 		}

diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -685,7 +685,7 @@ <h2>Horizontal Align</h2>
 			chainedPopover2.open = false;
 		});
 
-		chainedPopover2.addEventListener("ui5-after-close", function () {
+		chainedPopover2.addEventListener("ui5-close", function () {
 			var toast = document.createElement("ui5-toast");
 			toast.appendChild(document.createTextNode("Closed chained popover 2"));
 			document.body.appendChild(toast);