@ui5/webcomponents 0.0.0-49cef2d02 → 0.0.0-4a28ecb24

package/dist/ResponsivePopover.d.ts

@@ -0,0 +1,108 @@
+import type { ComponentStylesData } from "@ui5/webcomponents-base/dist/types.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { PopupBeforeCloseEventDetail } from "./Popup.js";
+import Popover from "./Popover.js";
+import Dialog from "./Dialog.js";
+import Button from "./Button.js";
+import Title from "./Title.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+type ResponsivePopoverBeforeCloseEventDetail = PopupBeforeCloseEventDetail;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The <code>ui5-responsive-popover</code> acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.
+ * The component improves tremendously the user experience on mobile.
+ *
+ * <h3>Usage</h3>
+ * Use it when you want to make sure that all the content is visible on any device.
+ *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-responsive-popover</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.ResponsivePopover
+ * @extends sap.ui.webc.main.Popover
+ * @tagname ui5-responsive-popover
+ * @since 1.0.0-rc.6
+ * @public
+ */
+declare 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
+     */
+    contentOnlyOnDesktop: boolean;
+    /**
+     * Used internaly for controls which must not have header.
+     * @private
+     */
+    _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
+     */
+    _hideCloseButton: boolean;
+    static i18nBundle: I18nBundle;
+    constructor();
+    static get styles(): ComponentStylesData;
+    get classes(): import("@ui5/webcomponents-base/dist/types.js").ClassMap;
+    static get template(): import("@ui5/webcomponents-base/dist/renderer/executeTemplate.js").TemplateFunction;
+    static get dependencies(): (typeof import("@ui5/webcomponents-base/dist/UI5Element.js").default | typeof Dialog | typeof Button | typeof Title)[];
+    /**
+     * Shows popover on desktop and dialog on mobile.
+     * @param {HTMLElement} opener the element that the popover is shown at
+     * @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
+     */
+    showAt(opener: HTMLElement, preventInitialFocus?: boolean): Promise<void>;
+    /**
+     * Closes the popover/dialog.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#close
+     * @returns {void}
+     */
+    close(escPressed?: boolean, preventRegistryUpdate?: boolean, preventFocusRestore?: boolean): void;
+    toggle(opener: HTMLElement): void;
+    /**
+     * Tells if the responsive popover is open.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#isOpen
+     * @returns {boolean}
+     */
+    isOpen(): boolean;
+    get _dialog(): Dialog;
+    get contentDOM(): HTMLElement;
+    get _isPhone(): boolean;
+    get _displayHeader(): boolean;
+    get _displayFooter(): boolean;
+    get _closeDialogAriaLabel(): string;
+    _beforeDialogOpen(e: CustomEvent<PopupBeforeCloseEventDetail>): void;
+    _afterDialogClose(e: CustomEvent): void;
+    _propagateDialogEvent(e: CustomEvent): void;
+    get isModal(): boolean;
+    static onDefine(): Promise<void>;
+}
+export default ResponsivePopover;
+export type { ResponsivePopoverBeforeCloseEventDetail, };

package/dist/ResponsivePopover.js

@@ -1,3 +1,12 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ResponsivePopover_1;
+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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
@@ -8,48 +17,8 @@ import Dialog from "./Dialog.js";
 import Button from "./Button.js";
 import Title from "./Title.js";
 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,
-		},
-	},
-};
-
 /**
  * @class
  *
@@ -79,145 +48,141 @@ const metadata = {
  * @since 1.0.0-rc.6
  * @public
  */
-class ResponsivePopover extends Popover {
-	constructor() {
-		super();
-	}
-
-	static get metadata() {
-		return metadata;
-	}
-
-	static get styles() {
-		return [Popover.styles, ResponsivePopoverCss];
-	}
-
-	get classes() {
-		const allClasses = super.classes;
-
-		allClasses.header = {
-			"ui5-responsive-popover-header": true,
-			"ui5-responsive-popover-header-no-title": !this.headerText,
-		};
-
-		return allClasses;
-	}
-
-	static get template() {
-		return ResponsivePopoverTemplate;
-	}
-
-	static get dependencies() {
-		return [
-			...Popover.dependencies,
-			Button,
-			Dialog,
-			Title,
-		];
-	}
-
-	/**
-	 * 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
-	 * @public
-	 * @async
-	 * @returns {Promise} Resolves when the responsive popover is open
-	 */
-	async showAt(opener, preventInitialFocus = false) {
-		if (!isPhone()) {
-			await super.showAt(opener, preventInitialFocus);
-		} else {
-			this.style.display = "contents";
-			this.style.zIndex = getNextZIndex();
-			await this._dialog.show(preventInitialFocus);
-		}
-	}
-
-	/**
-	 * Closes the popover/dialog.
-	 * @public
-	 */
-	close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
-		if (!isPhone()) {
-			super.close(escPressed, preventRegistryUpdate, preventFocusRestore);
-		} else {
-			this._dialog.close(escPressed, preventRegistryUpdate, preventFocusRestore);
-		}
-	}
-
-	toggle(opener) {
-		if (this.isOpen()) {
-			return this.close();
-		}
-
-		this.showAt(opener);
-	}
-
-	/**
-	 * Tells if the responsive popover is open
-	 * @public
-	 * @returns {boolean}
-	 */
-	isOpen() {
-		return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
-	}
-
-	get _dialog() {
-		return this.shadowRoot.querySelector("[ui5-dialog]");
-	}
-
-	get contentDOM() {
-		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
-	}
-
-	get _isPhone() {
-		return isPhone();
-	}
-
-	get _displayHeader() {
-		return (this._isPhone || !this.contentOnlyOnDesktop) && super._displayHeader;
-	}
-
-	get _displayFooter() {
-		return this._isPhone || !this.contentOnlyOnDesktop;
-	}
-
-	get _closeDialogAriaLabel() {
-		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
-	}
-
-	_beforeDialogOpen(event) {
-		this.open = true;
-		this.opened = true;
-		this._propagateDialogEvent(event);
-	}
-
-	_afterDialogClose(event) {
-		this.open = false;
-		this.opened = false;
-		this._propagateDialogEvent(event);
-	}
-
-	_propagateDialogEvent(event) {
-		const type = event.type.replace("ui5-", "");
-
-		this.fireEvent(type, event.detail);
-	}
-
-	get isModal() {
-		if (!isPhone()) {
-			return super.isModal;
-		}
-
-		return this._dialog.isModal;
-	}
-
-	static async onDefine() {
-		ResponsivePopover.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-	}
-}
-
+let ResponsivePopover = ResponsivePopover_1 = class ResponsivePopover extends Popover {
+    constructor() {
+        super();
+    }
+    static get styles() {
+        return [Popover.styles, ResponsivePopoverCss];
+    }
+    get classes() {
+        const allClasses = super.classes;
+        allClasses.header = {
+            "ui5-responsive-popover-header": true,
+            "ui5-responsive-popover-header-no-title": !this.headerText,
+        };
+        return allClasses;
+    }
+    static get template() {
+        return ResponsivePopoverTemplate;
+    }
+    static get dependencies() {
+        return [
+            ...Popover.dependencies,
+            Button,
+            Dialog,
+            Title,
+        ];
+    }
+    /**
+     * Shows popover on desktop and dialog on mobile.
+     * @param {HTMLElement} opener the element that the popover is shown at
+     * @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) {
+        if (!isPhone()) {
+            await super.showAt(opener, preventInitialFocus);
+        }
+        else {
+            this.style.display = "contents";
+            const nextZIndex = getNextZIndex();
+            if (!nextZIndex) {
+                return;
+            }
+            this.style.zIndex = nextZIndex.toString();
+            await this._dialog.show(preventInitialFocus);
+        }
+    }
+    /**
+     * Closes the popover/dialog.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#close
+     * @returns {void}
+     */
+    close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        if (!isPhone()) {
+            super.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+        }
+        else {
+            this._dialog.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+        }
+    }
+    toggle(opener) {
+        if (this.isOpen()) {
+            return this.close();
+        }
+        this.showAt(opener);
+    }
+    /**
+     * Tells if the responsive popover is open.
+     * @public
+     * @method
+     * @name sap.ui.webc.main.ResponsivePopover#isOpen
+     * @returns {boolean}
+     */
+    isOpen() {
+        return (isPhone() && this._dialog) ? this._dialog.isOpen() : super.isOpen();
+    }
+    get _dialog() {
+        return this.shadowRoot.querySelector("[ui5-dialog]");
+    }
+    get contentDOM() {
+        return isPhone() ? this._dialog.contentDOM : super.contentDOM;
+    }
+    get _isPhone() {
+        return isPhone();
+    }
+    get _displayHeader() {
+        return (isPhone() || !this.contentOnlyOnDesktop) && super._displayHeader;
+    }
+    get _displayFooter() {
+        return isPhone() || !this.contentOnlyOnDesktop;
+    }
+    get _closeDialogAriaLabel() {
+        return ResponsivePopover_1.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
+    }
+    _beforeDialogOpen(e) {
+        this.open = true;
+        this.opened = true;
+        this._propagateDialogEvent(e);
+    }
+    _afterDialogClose(e) {
+        this.open = false;
+        this.opened = false;
+        this._propagateDialogEvent(e);
+    }
+    _propagateDialogEvent(e) {
+        const type = e.type.replace("ui5-", "");
+        this.fireEvent(type, e.detail);
+    }
+    get isModal() {
+        if (!isPhone()) {
+            return super.isModal;
+        }
+        return this._dialog.isModal;
+    }
+    static async onDefine() {
+        ResponsivePopover_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "contentOnlyOnDesktop", void 0);
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "_hideHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], ResponsivePopover.prototype, "_hideCloseButton", void 0);
+ResponsivePopover = ResponsivePopover_1 = __decorate([
+    customElement("ui5-responsive-popover")
+], ResponsivePopover);
 ResponsivePopover.define();
-
 export default ResponsivePopover;
+//# sourceMappingURL=ResponsivePopover.js.map

package/dist/ResponsivePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsivePopover.js","sourceRoot":"","sources":["../src/ResponsivePopover.ts"],"names":[],"mappings":"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"}

package/dist/SegmentedButton.js

@@ -93,7 +93,7 @@ const metadata = {
  * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-segmented-button
  * @since 1.0.0-rc.6
- * @appenddocs SegmentedButtonItem
+ * @appenddocs sap.ui.webc.main.SegmentedButtonItem
  * @public
  */
 class SegmentedButton extends UI5Element {
@@ -189,7 +189,7 @@ class SegmentedButton extends UI5Element {
 	}
 
 	_selectItem(event) {
-		const isTargetSegmentedButtonItem = event.target.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = event.target.hasAttribute("ui5-segmented-button-item");
 
 		if (event.target.disabled || event.target === this.getDomRef() || !isTargetSegmentedButtonItem) {
 			return;
@@ -233,7 +233,7 @@ class SegmentedButton extends UI5Element {
 
 	_onmousedown(event) {
 		const eventTarget = event.target;
-		const isTargetSegmentedButtonItem = eventTarget.tagName === "UI5-SEGMENTED-BUTTON-ITEM";
+		const isTargetSegmentedButtonItem = eventTarget.hasAttribute("ui5-segmented-button-item");
 
 		if (isTargetSegmentedButtonItem) {
 			eventTarget.focus();

package/dist/SegmentedButtonItem.js

@@ -87,6 +87,7 @@ const metadata = {
  * @author SAP SE
  * @alias sap.ui.webc.main.SegmentedButtonItem
  * @extends sap.ui.webc.main.ToggleButton
+ * @abstract
  * @tagname ui5-segmented-button-item
  * @implements sap.ui.webc.main.ISegmentedButtonItem
  * @public