refactor(ui5-responsive-popover): API enhancements

packages/fiori/src/SideNavigation.js

@@ -241,7 +241,7 @@ class SideNavigation extends UI5Element {
 
 	async openPicker(opener) {
 		const responsivePopover = await this.getPicker();
-		responsivePopover.open(opener);
+		responsivePopover.openBy(opener);
 	}
 
 	async closePicker(opener) {

packages/fiori/src/Wizard.js

@@ -588,7 +588,7 @@ class Wizard extends UI5Element {
 		}
 
 		const responsivePopover = await this._respPopover();
-		responsivePopover.open(oDomTarget);
+		responsivePopover.openBy(oDomTarget);
 	}
 
 	async _onGroupedTabClick(event) {

packages/main/src/ComboBox.js

@@ -646,7 +646,7 @@ class ComboBox extends UI5Element {
 	}
 
 	_openRespPopover() {
-		this.responsivePopover.open(this);
+		this.responsivePopover.openBy(this);
 	}
 
 	_filterItems(str) {

packages/main/src/DatePicker.js

@@ -551,7 +551,7 @@ class DatePicker extends DateComponentBase {
 
 	_click(event) {
 		if (isPhone()) {
-			this.responsivePopover.open(this);
+			this.responsivePopover.openBy(this);
 			event.preventDefault(); // prevent immediate selection of any item
 		}
 	}
@@ -713,7 +713,7 @@ class DatePicker extends DateComponentBase {
 		this._calendarCurrentPicker = "day";
 		this.responsivePopover = await this._respPopover();
 
-		this.responsivePopover.open(this);
+		this.responsivePopover.openBy(this);
 	}
 
 	togglePicker() {

packages/main/src/Input.js

@@ -675,7 +675,7 @@ class Input extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
-			this.Suggestions.open(this);
+			this.Suggestions.openBy(this);
 			this.isRespPopoverOpen = true;
 		}
 	}

packages/main/src/MultiComboBox.js

@@ -501,7 +501,7 @@ class MultiComboBox extends UI5Element {
 			if (filteredItems.length === 0) {
 				this.allItemsPopover.close();
 			} else {
-				this.allItemsPopover.open(this);
+				this.allItemsPopover.openBy(this);
 			}
 		}
 
@@ -662,7 +662,7 @@ class MultiComboBox extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && !this._showMorePressed) {
-			this.allItemsPopover.open(this);
+			this.allItemsPopover.openBy(this);
 		}
 
 		this._showMorePressed = false;

packages/main/src/ResponsivePopover.js

@@ -120,7 +120,7 @@ class ResponsivePopover extends Popover {
 	 * @async
 	 * @returns {Promise} Resolves when the responsive popover is open
 	 */
-	async open(opener) {
+	async openBy(opener) {
 		this.style.display = this._isPhone ? "contents" : "";
 
 		if (this.isOpen() || (this._dialog && this._dialog.isOpen())) {
@@ -132,8 +132,7 @@ class ResponsivePopover extends Popover {
 			if (!this.noStretch) {
 				this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width);
 			}
-
-			await this.openBy(opener);
+			await super.openBy(opener);
 		} else {
 			this.style.zIndex = getNextZIndex();
 			await this._dialog.open();
@@ -157,7 +156,7 @@ class ResponsivePopover extends Popover {
 			return this.close();
 		}
 
-		this.open(opener);
+		this.openBy(opener);
 	}
 
 	/**

packages/main/src/Select.js

@@ -372,7 +372,7 @@ class Select extends UI5Element {
 		if (this._isPickerOpen) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.open(this);
+			this.responsivePopover.openBy(this);
 		}
 	}
 

packages/main/src/TabContainer.js

@@ -497,7 +497,7 @@ class TabContainer extends UI5Element {
 		if (this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		} else {
-			this.responsivePopover.open(button);
+			this.responsivePopover.openBy(button);
 		}
 	}
 

packages/main/src/TimePickerBase.js

@@ -302,7 +302,7 @@ class TimePickerBase extends UI5Element {
 	async openPicker() {
 		this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
 		const responsivePopover = await this._getPopover();
-		responsivePopover.open(this);
+		responsivePopover.openBy(this);
 		this._isPickerOpen = true;
 	}
 

packages/main/src/Tokenizer.js

@@ -169,7 +169,7 @@ class Tokenizer extends UI5Element {
 		if (this.showPopover) {
 			const popover = await this.getPopover();
 
-			popover.open(this.morePopoverOpener || this);
+			popover.openBy(this.morePopoverOpener || this);
 		}
 
 		this.fireEvent("show-more-items-press");

packages/main/src/features/InputSuggestions.js

@@ -123,7 +123,7 @@ class Suggestions {
 		this._beforeOpen();
 
 		if (this._getItems().length) {
-			this.responsivePopover.open(this._getComponent());
+			this.responsivePopover.openBy(this._getComponent());
 		}
 	}
 

packages/main/test/pages/ColorPalette.html

@@ -129,7 +129,7 @@
 			changeResult.value = event.detail.color;
 		});
 		colorPaletteBtn.addEventListener("click", function(event) {
-			respPopover.open(colorPaletteBtn);
+			respPopover.openBy(colorPaletteBtn);
 		});
 		btnClose.addEventListener("click", function(event) {
 			respPopover.close();

packages/main/test/pages/ResponsivePopover.html

@@ -101,21 +101,21 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 
 	<script>
 		btnOpen.addEventListener("click", function(event) {
-			respPopover.open(btnOpen);
+			respPopover.openBy(btnOpen);
 		});
 		btnClose.addEventListener("click", function(event) {
 			respPopover.close();
 		});
 
 		btnOpen2.addEventListener("click", function(event) {
-			respPopover2.open(btnOpen2);
+			respPopover2.openBy(btnOpen2);
 		});
 		btnClose2.addEventListener("click", function(event) {
 			respPopover2.close();
 		});
 
 		btnOpen3.addEventListener("click", function(event) {
-			respPopover3.open(btnOpen3);
+			respPopover3.openBy(btnOpen3);
 		});
 		btnClose3.addEventListener("click", function(event) {
 			respPopover3.close();
@@ -125,7 +125,7 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
 		});
 
 		btnSimpleRP.addEventListener("click", function(event) {
-			simpleRP.open(btnSimpleRP);
+			simpleRP.openBy(btnSimpleRP);
 		});
 	</script>
 </body>

packages/main/test/samples/ResponsivePopover.sample.html

@@ -31,7 +31,7 @@ <h3>Basic ResponsivePopover</h3>
 			var popoverCloser = document.getElementById("closePopoverButton");
 
 			popoverOpener.addEventListener("click", function() {
-				popover.open(popoverOpener);
+				popover.openBy(popoverOpener);
 			});
 			popoverCloser.addEventListener("click", function() {
 				popover.close();
@@ -61,7 +61,7 @@ <h3>Basic ResponsivePopover</h3>
 	var popoverCloser = document.getElementById("closePopoverButton");
 
 	popoverOpener.addEventListener("click", function() {
-		popover.open(popoverOpener);
+		popover.openBy(popoverOpener);
 	});
 	popoverCloser.addEventListener("click", function() {
 		popover.close();