@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/Popover.js

@@ -5,25 +5,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var Popover_1;
+import { instanceOfUI5Element } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
-import DOMReference from "@ui5/webcomponents-base/dist/types/DOMReference.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 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 getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.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";
 // Template
-import PopoverTemplate from "./generated/templates/PopoverTemplate.lit.js";
+import PopoverTemplate from "./PopoverTemplate.js";
 // Styles
-import browserScrollbarCSS from "./generated/themes/BrowserScrollbar.css.js";
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
 const ARROW_SIZE = 8;
@@ -54,12 +53,6 @@ const ARROW_SIZE = 8;
  *
  * `import "@ui5/webcomponents/dist/Popover.js";`
  *
- * **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.
- *
- * **Note:** We don't recommend nesting popup-like components (`ui5-dialog`, `ui5-popover`).
  * @constructor
  * @extends Popup
  * @since 1.0.0-rc.6
@@ -74,52 +67,112 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     constructor() {
         super();
+        /**
+         * Determines on which side the component is placed at.
+         * @default "End"
+         * @public
+         */
+        this.placement = "End";
+        /**
+         * Determines the horizontal alignment of the component.
+         * @default "Center"
+         * @public
+         */
+        this.horizontalAlign = "Center";
+        /**
+         * Determines the vertical alignment of the component.
+         * @default "Center"
+         * @public
+         */
+        this.verticalAlign = "Center";
+        /**
+         * Defines whether the component should close when
+         * clicking/tapping outside of the popover.
+         * If enabled, it blocks any interaction with the background.
+         * @default false
+         * @public
+         */
+        this.modal = false;
+        /**
+         * Determines whether the component arrow is hidden.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.15
+         */
+        this.hideArrow = false;
+        /**
+         * Determines if there is no enough space, the component can be placed
+         * over the target.
+         * @default false
+         * @public
+         */
+        this.allowTargetOverlap = false;
+        /**
+         * Sets the X translation of the arrow
+         * @private
+         */
+        this.arrowTranslateX = 0;
+        /**
+         * Sets the Y translation of the arrow
+         * @private
+         */
+        this.arrowTranslateY = 0;
+        /**
+         * Returns the calculated placement depending on the free space
+         * @private
+         */
+        this.actualPlacement = "End";
     }
-    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;
+        }
+        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) {
+            return;
         }
-        else if (this.isOpen() && !this.open) {
-            this.close();
+        if (!opener || this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
+            await renderFinished();
+            this.open = false;
+            this.fireDecoratorEvent("close");
+            return;
         }
+        this._openerRect = opener.getBoundingClientRect();
+        await super.openPopup();
     }
     isOpenerClicked(e) {
         const target = e.target;
-        if (target === this._opener) {
-            return true;
+        const opener = this.getOpenerHTMLElement(this.opener);
+        if (!opener) {
+            return false;
         }
-        const ui5ElementTarget = target;
-        if (ui5ElementTarget.getFocusDomRef && ui5ElementTarget.getFocusDomRef() === this._opener) {
+        if (target === opener) {
             return true;
         }
-        return e.composedPath().indexOf(this._opener) > -1;
-    }
-    /**
-     * Shows the popover.
-     * @param opener the element that the popover is shown at
-     * @param [preventInitialFocus=false] prevents applying the focus inside the popover
-     * @public
-     * @returns Resolved when the popover is open
-     */
-    async showAt(opener, preventInitialFocus = false) {
-        if (!opener || this.opened) {
-            return;
+        if (this._isUI5AbstractElement(target) && target.getFocusDomRef() === opener) {
+            return true;
         }
-        this._opener = opener;
-        this._openerRect = opener.getBoundingClientRect();
-        await super._open(preventInitialFocus);
+        return e.composedPath().indexOf(opener) > -1;
     }
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
@@ -135,19 +188,40 @@ let Popover = Popover_1 = class Popover extends Popup {
     _removeOpenedPopup() {
         removeOpenedPopover(this);
     }
+    getOpenerHTMLElement(opener) {
+        if (opener === undefined || opener === null) {
+            return opener;
+        }
+        if (opener instanceof HTMLElement) {
+            return this._isUI5AbstractElement(opener) ? opener.getFocusDomRef() : opener;
+        }
+        let rootNode = this.getRootNode();
+        if (rootNode === this) {
+            rootNode = document;
+        }
+        let openerHTMLElement = rootNode.getElementById(opener);
+        if (rootNode instanceof ShadowRoot && !openerHTMLElement) {
+            openerHTMLElement = document.getElementById(opener);
+        }
+        if (openerHTMLElement) {
+            return this._isUI5AbstractElement(openerHTMLElement) ? openerHTMLElement.getFocusDomRef() : openerHTMLElement;
+        }
+        return openerHTMLElement;
+    }
     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) {
-            const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
+        if (closedPopupParent instanceof Popover_1) {
+            const contentRect = closedPopupParent.getBoundingClientRect();
             overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
             overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;
         }
@@ -170,15 +244,27 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     _resize() {
         super._resize();
-        if (this.opened) {
+        if (this.open) {
             this.reposition();
         }
     }
     reposition() {
         this._show();
     }
-    _show() {
-        if (!this.opened) {
+    async _show() {
+        super._show();
+        const opener = this.getOpenerHTMLElement(this.opener);
+        if (!opener) {
+            Object.assign(this.style, {
+                top: `0px`,
+                left: `0px`,
+            });
+            return;
+        }
+        if (opener && instanceOfUI5Element(opener) && !opener.getDomRef()) {
+            return;
+        }
+        if (!this._opened) {
             this._showOutsideViewport();
         }
         const popoverSize = this.getPopoverSize();
@@ -187,11 +273,11 @@ 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 = opener.getBoundingClientRect();
         }
-        if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin() && this._oldPlacement) {
+        if (this._oldPlacement && this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin()) {
             // reuse the old placement as the opener is not available,
             // but keep the popover open as the focus is within
             placement = this._oldPlacement;
@@ -200,24 +286,22 @@ let Popover = Popover_1 = class Popover extends Popup {
             placement = this.calcPlacement(this._openerRect, popoverSize);
         }
         if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
-            return this.close();
+            await this._waitForDomRef();
+            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`,
@@ -225,6 +309,9 @@ let Popover = Popover_1 = class Popover extends Popup {
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && this._width) {
             this.style.width = this._width;
         }
+        if (this.verticalAlign === PopoverVerticalAlign.Stretch && this._height) {
+            this.style.height = this._height;
+        }
     }
     /**
      * Adjust the desired top position to compensate for shift of the screen
@@ -240,30 +327,42 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
-    _getContainingBlockClientLocation() {
-        let parentElement = getParentElement(this);
-        while (parentElement) {
-            if (isElementContainingBlock(parentElement)) {
-                return parentElement.getBoundingClientRect();
-            }
-            parentElement = getParentElement(parentElement);
+    getPopoverSize(calcScrollHeight = false) {
+        const rect = this.getBoundingClientRect();
+        const width = rect.width;
+        let height;
+        const domRef = this.getDomRef();
+        if (calcScrollHeight && domRef) {
+            const header = domRef.querySelector(".ui5-popup-header-root");
+            const content = domRef.querySelector(".ui5-popup-content");
+            const footer = domRef.querySelector(".ui5-popup-footer-root");
+            height = content?.scrollHeight || 0;
+            height += header?.scrollHeight || 0;
+            height += footer?.scrollHeight || 0;
+        }
+        else {
+            height = rect.height;
         }
-        return { left: 0, top: 0 };
-    }
-    getPopoverSize() {
-        const rect = this.getBoundingClientRect(), width = rect.width, height = rect.height;
         return { width, height };
     }
     _showOutsideViewport() {
         Object.assign(this.style, {
-            display: this._displayProp,
             top: "-10000px",
             left: "-10000px",
         });
     }
+    _isUI5AbstractElement(el) {
+        return instanceOfUI5Element(el) && el.isUI5AbstractElement;
+    }
     get arrowDOM() {
         return this.shadowRoot.querySelector(".ui5-popover-arrow");
     }
+    /**
+     * @protected
+     */
+    focusOpener() {
+        this.getOpenerHTMLElement(this.opener)?.focus();
+    }
     /**
      * @private
      */
@@ -275,28 +374,29 @@ let Popover = Popover_1 = class Popover extends Popup {
         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);
+        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`;
         }
         else if (this.verticalAlign === PopoverVerticalAlign.Stretch && !isVertical) {
             popoverSize.height = targetRect.height;
+            this._height = `${targetRect.height}px`;
         }
         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) {
@@ -306,14 +406,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) {
@@ -334,11 +434,11 @@ let Popover = Popover_1 = class Popover extends Popup {
             }
         }
         else {
-            if (popoverSize.height > clientHeight || top < 0) { // eslint-disable-line
-                top = 0;
+            if (popoverSize.height > clientHeight || top < Popover_1.VIEWPORT_MARGIN) { // eslint-disable-line
+                top = Popover_1.VIEWPORT_MARGIN;
             }
-            else if (top + popoverSize.height > clientHeight) {
-                top -= top + popoverSize.height - clientHeight;
+            else if (top + popoverSize.height > clientHeight - Popover_1.VIEWPORT_MARGIN) {
+                top = clientHeight - Popover_1.VIEWPORT_MARGIN - popoverSize.height;
             }
         }
         this._maxHeight = Math.round(maxHeight - Popover_1.VIEWPORT_MARGIN);
@@ -351,13 +451,17 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
         const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical, borderRadius);
+        this._left += this.getRTLCorrectionLeft();
         return {
             arrow: arrowPos,
             top: this._top,
             left: this._left,
-            placementType,
+            placement,
         };
     }
+    getRTLCorrectionLeft() {
+        return parseFloat(window.getComputedStyle(this).left) - this.getBoundingClientRect().left;
+    }
     /**
      * Calculates the position for the arrow.
      * @private
@@ -372,10 +476,10 @@ let Popover = Popover_1 = class Popover extends Popup {
     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;
@@ -388,9 +492,9 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         // Restricts the arrow's translate value along each dimension,
         // so that the arrow does not clip over the popover's rounded borders.
-        const safeRangeForArrowY = popoverSize.height / 2 - borderRadius - ARROW_SIZE / 2;
+        const safeRangeForArrowY = popoverSize.height / 2 - borderRadius - ARROW_SIZE / 2 - 2;
         arrowTranslateY = clamp(arrowTranslateY, -safeRangeForArrowY, safeRangeForArrowY);
-        const safeRangeForArrowX = popoverSize.width / 2 - borderRadius - ARROW_SIZE / 2;
+        const safeRangeForArrowX = popoverSize.width / 2 - borderRadius - ARROW_SIZE / 2 - 2;
         arrowTranslateX = clamp(arrowTranslateX, -safeRangeForArrowX, safeRangeForArrowX);
         return {
             x: Math.round(arrowTranslateX),
@@ -403,48 +507,56 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     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) {
+        const placement = this.placement;
+        let actualPlacement = placement;
+        const isVertical = placement === PopoverPlacement.Top
+            || placement === PopoverPlacement.Bottom;
+        const popoverSize = this.getPopoverSize(!this.allowTargetOverlap);
         const clientWidth = document.documentElement.clientWidth;
-        const clientHeight = document.documentElement.clientHeight;
-        switch (placementType) {
-            case PopoverPlacementType.Top:
-                if (targetRect.top < popoverSize.height
+        let clientHeight = document.documentElement.clientHeight;
+        let popoverHeight = popoverSize.height;
+        if (isVertical) {
+            popoverHeight += this.hideArrow ? 0 : ARROW_SIZE;
+            clientHeight -= Popover_1.VIEWPORT_MARGIN;
+        }
+        switch (placement) {
+            case PopoverPlacement.Top:
+                if (targetRect.top < popoverHeight
                     && targetRect.top < clientHeight - targetRect.bottom) {
-                    actualPlacementType = PopoverPlacementType.Bottom;
+                    actualPlacement = PopoverPlacement.Bottom;
                 }
                 break;
-            case PopoverPlacementType.Bottom:
-                if (clientHeight - targetRect.bottom < popoverSize.height
+            case PopoverPlacement.Bottom:
+                if (clientHeight - targetRect.bottom < popoverHeight
                     && 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;
@@ -454,10 +566,10 @@ let Popover = Popover_1 = class Popover extends Popup {
             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;
         }
@@ -482,9 +594,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";
@@ -522,11 +631,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;
@@ -536,20 +645,17 @@ __decorate([
     property()
 ], Popover.prototype, "headerText", void 0);
 __decorate([
-    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
-], Popover.prototype, "placementType", void 0);
+    property()
+], Popover.prototype, "placement", void 0);
 __decorate([
-    property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
+    property()
 ], Popover.prototype, "horizontalAlign", void 0);
 __decorate([
-    property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center })
+    property()
 ], Popover.prototype, "verticalAlign", void 0);
 __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);
@@ -557,25 +663,19 @@ __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);
-__decorate([
-    property({ validator: Integer, defaultValue: 0, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], Popover.prototype, "arrowTranslateX", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 0, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], Popover.prototype, "arrowTranslateY", void 0);
 __decorate([
-    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
-], Popover.prototype, "actualPlacementType", void 0);
+    property()
+], Popover.prototype, "actualPlacement", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], Popover.prototype, "_maxHeight", void 0);
 __decorate([
-    property({ validator: Integer, noAttribute: true })
+    property({ type: Number, noAttribute: true })
 ], Popover.prototype, "_maxWidth", void 0);
 __decorate([
     slot({ type: HTMLElement })
@@ -583,19 +683,23 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement })
 ], Popover.prototype, "footer", void 0);
+__decorate([
+    property({ converter: DOMReferenceConverter })
+], Popover.prototype, "opener", null);
 Popover = Popover_1 = __decorate([
     customElement({
         tag: "ui5-popover",
         styles: [
-            browserScrollbarCSS,
+            Popup.styles,
             PopupsCommonCss,
             PopoverCss,
+            getEffectiveScrollbarStyle(),
         ],
         template: PopoverTemplate,
     })
 ], Popover);
 const instanceOfPopover = (object) => {
-    return "showAt" in object;
+    return "opener" in object;
 };
 Popover.define();
 export default Popover;