@ui5/webcomponents 0.0.0-9e104af01 → 0.0.0-a7032d86e

package/src/{ResponsivePopover.js → ResponsivePopover.ts}

@@ -1,8 +1,17 @@
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+
+// @ts-ignore
 import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
+
 import ResponsivePopoverTemplate from "./generated/templates/ResponsivePopoverTemplate.lit.js";
+import type { PopupBeforeCloseEventDetail } from "./Popup.js";
 import Popover from "./Popover.js";
 import Dialog from "./Dialog.js";
 import Button from "./Button.js";
@@ -12,43 +21,7 @@ import "@ui5/webcomponents-icons/dist/decline.js";
 // Styles
 import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
 
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-responsive-popover",
-	properties: /** @lends sap.ui.webc.main.ResponsivePopover.prototype */ {
-		/**
-		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
-		 * By default both the header and footer would be displayed.
-		 * @private
-		 */
-		contentOnlyOnDesktop: {
-			type: Boolean,
-		},
-
-		/**
-		 * Used internaly for controls which must not have header.
-		 * @private
-		 */
-		_hideHeader: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines whether a close button will be rendered in the header of the component
-		 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
-		 *
-		 * @private
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @since 1.0.0-rc.16
-		 */
-		_hideCloseButton: {
-			type: Boolean,
-		},
-	},
-};
+type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
 
 /**
  * @class
@@ -79,16 +52,42 @@ const metadata = {
  * @since 1.0.0-rc.6
  * @public
  */
+@customElement("ui5-responsive-popover")
 class ResponsivePopover extends Popover {
+	/**
+	 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
+	 * By default both the header and footer would be displayed.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	contentOnlyOnDesktop!: boolean;
+
+	/**
+	 * Used internaly for controls which must not have header.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_hideHeader!: boolean;
+
+	/**
+	 * Defines whether a close button will be rendered in the header of the component
+	 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
+	 *
+	 * @private
+	 * @type {boolean}
+	 * @defaultvalue false
+	 * @since 1.0.0-rc.16
+	 */
+	@property({ type: Boolean })
+	_hideCloseButton!: boolean;
+
+	static i18nBundle: I18nBundle;
+
 	constructor() {
 		super();
 	}
 
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
+	static get styles(): ComponentStylesData {
 		return [Popover.styles, ResponsivePopoverCss];
 	}
 
@@ -119,17 +118,24 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Shows popover on desktop and dialog on mobile.
 	 * @param {HTMLElement} opener the element that the popover is shown at
-	 * @param {boolean} preventInitialFocus Prevents applying the focus inside the popup
+	 * @param {boolean} [preventInitialFocus=false] Prevents applying the focus inside the popup
 	 * @public
 	 * @async
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#showAt
 	 * @returns {Promise} Resolves when the responsive popover is open
 	 */
-	async showAt(opener, preventInitialFocus = false) {
+	async showAt(opener: HTMLElement, preventInitialFocus = false) {
 		if (!isPhone()) {
 			await super.showAt(opener, preventInitialFocus);
 		} else {
 			this.style.display = "contents";
-			this.style.zIndex = getNextZIndex();
+			const nextZIndex = getNextZIndex();
+			if (!nextZIndex) {
+				return;
+			}
+
+			this.style.zIndex = nextZIndex.toString();
 			await this._dialog.show(preventInitialFocus);
 		}
 	}
@@ -137,6 +143,9 @@ class ResponsivePopover extends Popover {
 	/**
 	 * Closes the popover/dialog.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#close
+	 * @returns {void}
 	 */
 	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
 		if (!isPhone()) {
@@ -146,7 +155,7 @@ class ResponsivePopover extends Popover {
 		}
 	}
 
-	toggle(opener) {
+	toggle(opener: HTMLElement) {
 		if (this.isOpen()) {
 			return this.close();
 		}
@@ -155,8 +164,10 @@ class ResponsivePopover extends Popover {
 	}
 
 	/**
-	 * Tells if the responsive popover is open
+	 * Tells if the responsive popover is open.
 	 * @public
+	 * @method
+	 * @name sap.ui.webc.main.ResponsivePopover#isOpen
 	 * @returns {boolean}
 	 */
 	isOpen() {
@@ -164,11 +175,11 @@ class ResponsivePopover extends Popover {
 	}
 
 	get _dialog() {
-		return this.shadowRoot.querySelector("[ui5-dialog]");
+		return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
 	}
 
 	get contentDOM() {
-		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+		return isPhone() ? this._dialog.contentDOM : super.contentDOM;
 	}
 
 	get _isPhone() {
@@ -176,33 +187,33 @@ class ResponsivePopover extends Popover {
 	}
 
 	get _displayHeader() {
-		return (this._isPhone || !this.contentOnlyOnDesktop) && super._displayHeader;
+		return (isPhone() || !this.contentOnlyOnDesktop) && super._displayHeader;
 	}
 
 	get _displayFooter() {
-		return this._isPhone || !this.contentOnlyOnDesktop;
+		return isPhone() || !this.contentOnlyOnDesktop;
 	}
 
 	get _closeDialogAriaLabel() {
-		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
+		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON as I18nText);
 	}
 
-	_beforeDialogOpen(event) {
+	_beforeDialogOpen(e: CustomEvent<PopupBeforeCloseEventDetail>) {
 		this.open = true;
 		this.opened = true;
-		this._propagateDialogEvent(event);
+		this._propagateDialogEvent(e);
 	}
 
-	_afterDialogClose(event) {
+	_afterDialogClose(e: CustomEvent) {
 		this.open = false;
 		this.opened = false;
-		this._propagateDialogEvent(event);
+		this._propagateDialogEvent(e);
 	}
 
-	_propagateDialogEvent(event) {
-		const type = event.type.replace("ui5-", "");
+	_propagateDialogEvent(e: CustomEvent) {
+		const type = e.type.replace("ui5-", "");
 
-		this.fireEvent(type, event.detail);
+		this.fireEvent(type, e.detail);
 	}
 
 	get isModal() {
@@ -221,3 +232,6 @@ class ResponsivePopover extends Popover {
 ResponsivePopover.define();
 
 export default ResponsivePopover;
+export type {
+	ResponsivePopoverBeforeCloseEventDetail,
+};

package/src/StepInput.ts

@@ -303,13 +303,13 @@ class StepInput extends UI5Element implements IFormElement {
 	 * Defines the value state message that will be displayed as pop up under the component.
 	 * <br><br>
 	 *
-	 * @name sap.ui.webc.main.StepInput.prototype.valueStateMessage
 	 * <b>Note:</b> If not specified, a default text (in the respective language) will be displayed.
 	 * <br>
 	 * <b>Note:</b> The <code>valueStateMessage</code> would be displayed,
 	 * when the component is in <code>Information</code>, <code>Warning</code> or <code>Error</code> value state.
 	 * @type {HTMLElement}
 	 * @slot
+	 * @name sap.ui.webc.main.StepInput.prototype.valueStateMessage
 	 * @public
 	 */
 	@slot()

package/src/TimePickerBase.ts

@@ -27,7 +27,6 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/time-entry-request.js";
 import Icon from "./Icon.js";
-// @ts-ignore
 import ResponsivePopover from "./ResponsivePopover.js";
 import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js";
 import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js";
@@ -47,13 +46,6 @@ import TimePickerCss from "./generated/themes/TimePicker.css.js";
 import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 
-type TempResponsivePopover = HTMLElement & {
-	initialFocus: string,
-	showAt: (opener: HTMLElement) => Promise<void>,
-	close: () => void,
-	resetFocus: () => void,
-}
-
 /**
  * @class
  *
@@ -344,7 +336,7 @@ class TimePickerBase extends UI5Element {
 
 	async _getPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
-		return staticAreaItem!.querySelector<TempResponsivePopover>("[ui5-responsive-popover]")!;
+		return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 	}
 
 	_getInput(): Input {

package/src/features/InputSuggestions.ts

@@ -9,7 +9,6 @@ import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generat
 import type ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import List from "../List.js";
 import type { ClickEventDetail, SelectionChangeEventDetail } from "../List.js";
-// @ts-ignore
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
 import SuggestionGroupItem from "../SuggestionGroupItem.js";
@@ -59,8 +58,6 @@ type SuggestionsAccInfo = {
 	itemText: string;
 }
 
-type TempResponsivePopover = Popover; // change to ResponsivePopover when implemented;
-
 /**
  * A class to manage the <code>Input</code suggestion items.
  *
@@ -75,7 +72,7 @@ class Suggestions {
 	highlight: boolean;
 	selectedItemIndex: number;
 	accInfo?: SuggestionsAccInfo;
-	responsivePopover?: TempResponsivePopover;
+	responsivePopover?: ResponsivePopover;
 	_scrollContainer?: HTMLElement;
 	_handledPress?: boolean;
 	attachedAfterOpened?: boolean;
@@ -583,7 +580,7 @@ class Suggestions {
 		}
 
 		const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
-		this.responsivePopover = staticAreaItem!.querySelector<TempResponsivePopover>("[ui5-responsive-popover]")!;
+		this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
 		return this.responsivePopover;
 	}