@ui5/webcomponents 0.0.0-d9b978d1d → 0.0.0-da0d3eb88

package/dist/Popover.js

@@ -15,8 +15,9 @@ import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUti
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElementContainingBlock.js";
 import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import Popup from "./Popup.js";
-import PopoverPlacementType from "./types/PopoverPlacementType.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js";
@@ -30,56 +31,43 @@ const ARROW_SIZE = 8;
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
  *
- * The <code>ui5-popover</code> component displays additional information for an object
+ * The `ui5-popover` component displays additional information for an object
  * in a compact way and without leaving the page.
  * The Popover can contain various UI elements, such as fields, tables, images, and charts.
  * It can also include actions in the footer.
  *
- * <h3>Structure</h3>
+ * ### Structure
  *
  * The popover has three main areas:
- * <ul>
- * <li>Header (optional)</li>
- * <li>Content</li>
- * <li>Footer (optional)</li>
- * </ul>
  *
- * <b>Note:</b> The <code>ui5-popover</code> is closed when the user clicks
+ * - Header (optional)
+ * - Content
+ * - Footer (optional)
+ *
+ * **Note:** The `ui5-popover` is closed when the user clicks
  * or taps outside the popover
  * or selects an action within the popover. You can prevent this with the
- * <code>modal</code> property.
- *
- * <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-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>
+ * `modal` property.
  *
- * <h3>ES6 Module Import</h3>
+ * ### ES6 Module Import
  *
- * <code>import "@ui5/webcomponents/dist/Popover.js";</code>
+ * `import "@ui5/webcomponents/dist/Popover.js";`
  *
- * <b>Note: </b> We recommend placing popup-like components (<code>ui5-dialog</code> and <code>ui5-popover</code>)
+ * **Note: ** We recommend placing popup-like components (`ui5-dialog` and `ui5-popover`)
  * outside any other components. Preferably, the popup-like components should be placed
  * in an upper level HTML element. Otherwise, in some cases the parent HTML elements can break
  * the position and/or z-index management of the popup-like components.
  *
- * <b>Note:</b> We don't recommend nesting popup-like components (<code>ui5-dialog</code>, <code>ui5-popover</code>).
- *
+ * **Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Popover
- * @extends sap.ui.webc.main.Popup
- * @tagname ui5-popover
+ * @extends Popup
  * @since 1.0.0-rc.6
  * @public
+ * @csspart header - Used to style the header of the component
+ * @csspart content - Used to style the content of the component
+ * @csspart footer - Used to style the footer of the component
  */
 let Popover = Popover_1 = class Popover extends Popup {
     static get VIEWPORT_MARGIN() {
@@ -88,26 +76,44 @@ let Popover = Popover_1 = class Popover extends Popup {
     constructor() {
         super();
     }
-    onAfterRendering() {
-        super.onAfterRendering();
-        if (!this.isOpen() && this.open) {
-            let opener;
-            if (this.opener instanceof HTMLElement) {
-                opener = this.opener;
-            }
-            else if (typeof this.opener === "string") {
-                opener = this.getRootNode().getElementById(this.opener) || document.getElementById(this.opener);
-            }
-            if (!opener) {
-                console.warn("Valid opener id is required."); // eslint-disable-line
-                return;
-            }
-            this.showAt(opener);
+    /**
+     * Defines the ID or DOM Reference of the element at which the popover is shown.
+     * When using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.
+     * You can only set the `opener` attribute to a DOM Reference when using JavaScript.
+     * @public
+     * @default undefined
+     * @since 1.2.0
+     */
+    set opener(value) {
+        if (this._opener === value) {
+            return;
         }
-        else if (this.isOpen() && !this.open) {
-            this.close();
+        this._opener = value;
+        if (value && this.open) {
+            this.openPopup();
         }
     }
+    get opener() {
+        return this._opener;
+    }
+    async openPopup() {
+        if (this._opened) {
+            return;
+        }
+        const opener = this.getOpenerHTMLElement(this.opener);
+        if (!opener) {
+            console.warn("Valid opener id is required. It must be defined before opening the popover."); // eslint-disable-line
+            return;
+        }
+        if (this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
+            await renderFinished();
+            this.open = false;
+            this.fireEvent("close", {}, false, false);
+            return;
+        }
+        this._openerRect = opener.getBoundingClientRect();
+        await super.openPopup();
+    }
     isOpenerClicked(e) {
         const target = e.target;
         if (target === this._opener) {
@@ -119,25 +125,6 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         return e.composedPath().indexOf(this._opener) > -1;
     }
-    /**
-     * Shows the popover.
-     * @param {HTMLElement} opener the element that the popover is shown at
-     * @param {boolean} [preventInitialFocus=false] prevents applying the focus inside the popover
-     * @public
-     * @async
-     * @method
-     * @name sap.ui.webc.main.Popover#showAt
-     * @async
-     * @returns {Promise} Resolved when the popover is open
-     */
-    async showAt(opener, preventInitialFocus = false) {
-        if (!opener || this.opened) {
-            return;
-        }
-        this._opener = opener;
-        this._openerRect = opener.getBoundingClientRect();
-        await super._open(preventInitialFocus);
-    }
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
      * @private
@@ -152,18 +139,29 @@ let Popover = Popover_1 = class Popover extends Popup {
     _removeOpenedPopup() {
         removeOpenedPopover(this);
     }
+    getOpenerHTMLElement(opener) {
+        if (opener === undefined || opener instanceof HTMLElement) {
+            return opener;
+        }
+        const rootNode = this.getRootNode();
+        if (rootNode instanceof Document) {
+            return rootNode.getElementById(opener);
+        }
+        return document.getElementById(opener);
+    }
     shouldCloseDueToOverflow(placement, openerRect) {
         const threshold = 32;
         const limits = {
-            "Right": openerRect.right,
-            "Left": openerRect.left,
+            "Start": openerRect.right,
+            "End": openerRect.left,
             "Top": openerRect.top,
             "Bottom": openerRect.bottom,
         };
-        const closedPopupParent = getClosedPopupParent(this._opener);
+        const opener = this.getOpenerHTMLElement(this.opener);
+        const closedPopupParent = getClosedPopupParent(opener);
         let overflowsBottom = false;
         let overflowsTop = false;
-        if (closedPopupParent.showAt) {
+        if (closedPopupParent instanceof Popover_1) {
             const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
             overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
             overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;
@@ -187,7 +185,7 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     _resize() {
         super._resize();
-        if (this.opened) {
+        if (this.open) {
             this.reposition();
         }
     }
@@ -195,7 +193,8 @@ let Popover = Popover_1 = class Popover extends Popup {
         this._show();
     }
     _show() {
-        if (!this.opened) {
+        super._show();
+        if (!this._opened) {
             this._showOutsideViewport();
         }
         const popoverSize = this.getPopoverSize();
@@ -204,9 +203,9 @@ let Popover = Popover_1 = class Popover extends Popup {
             // size can not be determined properly at this point, popover will be shown with the next reposition
             return;
         }
-        if (this.isOpen()) {
+        if (this.open) {
             // update opener rect if it was changed during the popover being opened
-            this._openerRect = this._opener.getBoundingClientRect();
+            this._openerRect = this.getOpenerHTMLElement(this.opener).getBoundingClientRect();
         }
         if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin() && this._oldPlacement) {
             // reuse the old placement as the opener is not available,
@@ -217,24 +216,21 @@ let Popover = Popover_1 = class Popover extends Popup {
             placement = this.calcPlacement(this._openerRect, popoverSize);
         }
         if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
-            return this.close();
+            return this.closePopup();
         }
         this._oldPlacement = placement;
-        this.actualPlacementType = placement.placementType;
+        this.actualPlacement = placement.placement;
         let left = clamp(this._left, Popover_1.VIEWPORT_MARGIN, document.documentElement.clientWidth - popoverSize.width - Popover_1.VIEWPORT_MARGIN);
-        if (this.actualPlacementType === PopoverPlacementType.Right) {
+        if (this.actualPlacement === PopoverPlacement.End) {
             left = Math.max(left, this._left);
         }
         let top = clamp(this._top, Popover_1.VIEWPORT_MARGIN, document.documentElement.clientHeight - popoverSize.height - Popover_1.VIEWPORT_MARGIN);
-        if (this.actualPlacementType === PopoverPlacementType.Bottom) {
+        if (this.actualPlacement === PopoverPlacement.Bottom) {
             top = Math.max(top, this._top);
         }
         this.arrowTranslateX = placement.arrow.x;
         this.arrowTranslateY = placement.arrow.y;
         top = this._adjustForIOSKeyboard(top);
-        const containingBlockClientLocation = this._getContainingBlockClientLocation();
-        left -= containingBlockClientLocation.left;
-        top -= containingBlockClientLocation.top;
         Object.assign(this.style, {
             top: `${top}px`,
             left: `${left}px`,
@@ -247,8 +243,8 @@ let Popover = Popover_1 = class Popover extends Popup {
      * Adjust the desired top position to compensate for shift of the screen
      * caused by opened keyboard on iOS which affects all elements with position:fixed.
      * @private
-     * @param {int} top The target top in px.
-     * @returns {int} The adjusted top in px.
+     * @param top The target top in px.
+     * @returns The adjusted top in px.
      */
     _adjustForIOSKeyboard(top) {
         if (!isIOS()) {
@@ -273,7 +269,6 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     _showOutsideViewport() {
         Object.assign(this.style, {
-            display: this._displayProp,
             top: "-10000px",
             left: "-10000px",
         });
@@ -285,17 +280,17 @@ let Popover = Popover_1 = class Popover extends Popup {
      * @private
      */
     calcPlacement(targetRect, popoverSize) {
-        let left = 0;
+        let left = Popover_1.VIEWPORT_MARGIN;
         let top = 0;
         const allowTargetOverlap = this.allowTargetOverlap;
         const clientWidth = document.documentElement.clientWidth;
         const clientHeight = document.documentElement.clientHeight;
         let maxHeight = clientHeight;
         let maxWidth = clientWidth;
-        const placementType = this.getActualPlacementType(targetRect, popoverSize);
-        this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placementType, targetRect);
-        const isVertical = placementType === PopoverPlacementType.Top
-            || placementType === PopoverPlacementType.Bottom;
+        const placement = this.getActualPlacement(targetRect, popoverSize);
+        this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placement, targetRect);
+        const isVertical = placement === PopoverPlacement.Top
+            || placement === PopoverPlacement.Bottom;
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) {
             popoverSize.width = targetRect.width;
             this._width = `${targetRect.width}px`;
@@ -305,15 +300,15 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE;
         // calc popover positions
-        switch (placementType) {
-            case PopoverPlacementType.Top:
+        switch (placement) {
+            case PopoverPlacement.Top:
                 left = this.getVerticalLeft(targetRect, popoverSize);
                 top = Math.max(targetRect.top - popoverSize.height - arrowOffset, 0);
                 if (!allowTargetOverlap) {
                     maxHeight = targetRect.top - arrowOffset;
                 }
                 break;
-            case PopoverPlacementType.Bottom:
+            case PopoverPlacement.Bottom:
                 left = this.getVerticalLeft(targetRect, popoverSize);
                 top = targetRect.bottom + arrowOffset;
                 if (allowTargetOverlap) {
@@ -323,14 +318,14 @@ let Popover = Popover_1 = class Popover extends Popup {
                     maxHeight = clientHeight - targetRect.bottom - arrowOffset;
                 }
                 break;
-            case PopoverPlacementType.Left:
+            case PopoverPlacement.Start:
                 left = Math.max(targetRect.left - popoverSize.width - arrowOffset, 0);
                 top = this.getHorizontalTop(targetRect, popoverSize);
                 if (!allowTargetOverlap) {
                     maxWidth = targetRect.left - arrowOffset;
                 }
                 break;
-            case PopoverPlacementType.Right:
+            case PopoverPlacement.End:
                 left = targetRect.left + targetRect.width + arrowOffset;
                 top = this.getHorizontalTop(targetRect, popoverSize);
                 if (allowTargetOverlap) {
@@ -343,11 +338,11 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         // correct popover positions
         if (isVertical) {
-            if (popoverSize.width > clientWidth || left < 0) {
-                left = 0;
+            if (popoverSize.width > clientWidth || left < Popover_1.VIEWPORT_MARGIN) {
+                left = Popover_1.VIEWPORT_MARGIN;
             }
-            else if (left + popoverSize.width > clientWidth) {
-                left -= left + popoverSize.width - clientWidth;
+            else if (left + popoverSize.width > clientWidth - Popover_1.VIEWPORT_MARGIN) {
+                left = clientWidth - Popover_1.VIEWPORT_MARGIN - popoverSize.width;
             }
         }
         else {
@@ -372,27 +367,27 @@ let Popover = Popover_1 = class Popover extends Popup {
             arrow: arrowPos,
             top: this._top,
             left: this._left,
-            placementType,
+            placement,
         };
     }
     /**
      * Calculates the position for the arrow.
      * @private
      * @param targetRect BoundingClientRect of the target element
-     * @param {{width: number, height: number}} popoverSize Width and height of the popover
+     * @param popoverSize Width and height of the popover
      * @param left Left offset of the popover
      * @param top Top offset of the popover
      * @param isVertical If the popover is positioned vertically to the target element
-     * @param {number} borderRadius Value of the border-radius property
-     * @returns {{x: number, y: number}} Arrow's coordinates
+     * @param borderRadius Value of the border-radius property
+     * @returns  Arrow's coordinates
      */
     getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius) {
         const horizontalAlign = this._actualHorizontalAlign;
         let arrowXCentered = horizontalAlign === PopoverHorizontalAlign.Center || horizontalAlign === PopoverHorizontalAlign.Stretch;
-        if (horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
+        if (horizontalAlign === PopoverHorizontalAlign.End && left <= targetRect.left) {
             arrowXCentered = true;
         }
-        if (horizontalAlign === PopoverHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
+        if (horizontalAlign === PopoverHorizontalAlign.Start && left + popoverSize.width >= targetRect.left + targetRect.width) {
             arrowXCentered = true;
         }
         let arrowTranslateX = 0;
@@ -415,66 +410,66 @@ let Popover = Popover_1 = class Popover extends Popup {
         };
     }
     /**
-     * Fallbacks to new placement, prioritizing <code>Left</code> and <code>Right</code> placements.
+     * Fallbacks to new placement, prioritizing `Left` and `Right` placements.
      * @private
      */
     fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) {
         if (targetRect.left > popoverSize.width) {
-            return PopoverPlacementType.Left;
+            return PopoverPlacement.Start;
         }
         if (clientWidth - targetRect.right > targetRect.left) {
-            return PopoverPlacementType.Right;
+            return PopoverPlacement.End;
         }
         if (clientHeight - targetRect.bottom > popoverSize.height) {
-            return PopoverPlacementType.Bottom;
+            return PopoverPlacement.Bottom;
         }
         if (clientHeight - targetRect.bottom < targetRect.top) {
-            return PopoverPlacementType.Top;
+            return PopoverPlacement.Top;
         }
     }
-    getActualPlacementType(targetRect, popoverSize) {
-        const placementType = this.placementType;
-        let actualPlacementType = placementType;
+    getActualPlacement(targetRect, popoverSize) {
+        const placement = this.placement;
+        let actualPlacement = placement;
         const clientWidth = document.documentElement.clientWidth;
         const clientHeight = document.documentElement.clientHeight;
-        switch (placementType) {
-            case PopoverPlacementType.Top:
+        switch (placement) {
+            case PopoverPlacement.Top:
                 if (targetRect.top < popoverSize.height
                     && targetRect.top < clientHeight - targetRect.bottom) {
-                    actualPlacementType = PopoverPlacementType.Bottom;
+                    actualPlacement = PopoverPlacement.Bottom;
                 }
                 break;
-            case PopoverPlacementType.Bottom:
+            case PopoverPlacement.Bottom:
                 if (clientHeight - targetRect.bottom < popoverSize.height
                     && clientHeight - targetRect.bottom < targetRect.top) {
-                    actualPlacementType = PopoverPlacementType.Top;
+                    actualPlacement = PopoverPlacement.Top;
                 }
                 break;
-            case PopoverPlacementType.Left:
+            case PopoverPlacement.Start:
                 if (targetRect.left < popoverSize.width) {
-                    actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
+                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
                 }
                 break;
-            case PopoverPlacementType.Right:
+            case PopoverPlacement.End:
                 if (clientWidth - targetRect.right < popoverSize.width) {
-                    actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
+                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
                 }
                 break;
         }
-        return actualPlacementType;
+        return actualPlacement;
     }
     getVerticalLeft(targetRect, popoverSize) {
         const horizontalAlign = this._actualHorizontalAlign;
-        let left = 0;
+        let left = Popover_1.VIEWPORT_MARGIN;
         switch (horizontalAlign) {
             case PopoverHorizontalAlign.Center:
             case PopoverHorizontalAlign.Stretch:
                 left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
                 break;
-            case PopoverHorizontalAlign.Left:
+            case PopoverHorizontalAlign.Start:
                 left = targetRect.left;
                 break;
-            case PopoverHorizontalAlign.Right:
+            case PopoverHorizontalAlign.End:
                 left = targetRect.right - popoverSize.width;
                 break;
         }
@@ -499,9 +494,6 @@ let Popover = Popover_1 = class Popover extends Popup {
     get isModal() {
         return this.modal;
     }
-    get shouldHideBackdrop() {
-        return this.hideBackdrop;
-    }
     get _ariaLabelledBy() {
         if (!this._ariaLabel && this._displayHeader) {
             return "ui5-popup-header";
@@ -539,11 +531,11 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     get _actualHorizontalAlign() {
         if (this.effectiveDir === "rtl") {
-            if (this.horizontalAlign === PopoverHorizontalAlign.Left) {
-                return PopoverHorizontalAlign.Right;
+            if (this.horizontalAlign === PopoverHorizontalAlign.Start) {
+                return PopoverHorizontalAlign.End;
             }
-            if (this.horizontalAlign === PopoverHorizontalAlign.Right) {
-                return PopoverHorizontalAlign.Left;
+            if (this.horizontalAlign === PopoverHorizontalAlign.End) {
+                return PopoverHorizontalAlign.Start;
             }
         }
         return this.horizontalAlign;
@@ -553,8 +545,8 @@ __decorate([
     property()
 ], Popover.prototype, "headerText", void 0);
 __decorate([
-    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
-], Popover.prototype, "placementType", void 0);
+    property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
+], Popover.prototype, "placement", void 0);
 __decorate([
     property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
 ], Popover.prototype, "horizontalAlign", void 0);
@@ -564,18 +556,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Popover.prototype, "modal", void 0);
-__decorate([
-    property({ type: Boolean })
-], Popover.prototype, "hideBackdrop", void 0);
 __decorate([
     property({ type: Boolean })
 ], Popover.prototype, "hideArrow", void 0);
 __decorate([
     property({ type: Boolean })
 ], Popover.prototype, "allowTargetOverlap", void 0);
-__decorate([
-    property({ validator: DOMReference })
-], Popover.prototype, "opener", void 0);
 __decorate([
     property({ type: Boolean })
 ], Popover.prototype, "disableScrolling", void 0);
@@ -586,8 +572,8 @@ __decorate([
     property({ validator: Integer, defaultValue: 0, noAttribute: true })
 ], Popover.prototype, "arrowTranslateY", void 0);
 __decorate([
-    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
-], Popover.prototype, "actualPlacementType", void 0);
+    property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
+], Popover.prototype, "actualPlacement", void 0);
 __decorate([
     property({ validator: Integer, noAttribute: true })
 ], Popover.prototype, "_maxHeight", void 0);
@@ -600,10 +586,14 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement })
 ], Popover.prototype, "footer", void 0);
+__decorate([
+    property({ validator: DOMReference })
+], Popover.prototype, "opener", null);
 Popover = Popover_1 = __decorate([
     customElement({
         tag: "ui5-popover",
         styles: [
+            Popup.styles,
             browserScrollbarCSS,
             PopupsCommonCss,
             PopoverCss,
@@ -612,7 +602,7 @@ Popover = Popover_1 = __decorate([
     })
 ], Popover);
 const instanceOfPopover = (object) => {
-    return "showAt" in object;
+    return "opener" in object;
 };
 Popover.define();
 export default Popover;