@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/Popover.d.ts

@@ -1,6 +1,6 @@
 import Popup from "./Popup.js";
 import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
-import PopoverPlacement from "./types/PopoverPlacement.js";
+import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 type PopoverSize = {
@@ -15,7 +15,7 @@ type CalculatedPlacement = {
     arrow: ArrowPosition;
     top: number;
     left: number;
-    placement: `${PopoverPlacement}`;
+    placementType: `${PopoverPlacementType}`;
 };
 /**
  * @class
@@ -69,10 +69,10 @@ declare class Popover extends Popup {
     headerText: string;
     /**
      * Determines on which side the component is placed at.
-     * @default "End"
+     * @default "Right"
      * @public
      */
-    placement: `${PopoverPlacement}`;
+    placementType: `${PopoverPlacementType}`;
     /**
      * Determines the horizontal alignment of the component.
      * @default "Center"
@@ -93,6 +93,13 @@ declare class Popover extends Popup {
      * @public
      */
     modal: boolean;
+    /**
+     * Defines whether the block layer will be shown if modal property is set to true.
+     * @default false
+     * @public
+     * @since 1.0.0-rc.10
+     */
+    hideBackdrop: boolean;
     /**
      * Determines whether the component arrow is hidden.
      * @default false
@@ -107,6 +114,13 @@ declare class Popover extends Popup {
      * @public
      */
     allowTargetOverlap: boolean;
+    /**
+     * Defines the ID or DOM Reference of the element that the popover is shown at
+     * @public
+     * @default undefined
+     * @since 1.2.0
+     */
+    opener?: HTMLElement | string;
     /**
      * Defines whether the content is scrollable.
      * @default false
@@ -127,7 +141,7 @@ declare class Popover extends Popup {
      * Returns the calculated placement depending on the free space
      * @private
      */
-    actualPlacement: `${PopoverPlacement}`;
+    actualPlacementType: `${PopoverPlacementType}`;
     _maxHeight?: number;
     _maxWidth?: number;
     /**
@@ -149,18 +163,16 @@ declare class Popover extends Popup {
     _width?: string;
     static get VIEWPORT_MARGIN(): number;
     constructor();
+    onAfterRendering(): void;
+    isOpenerClicked(e: MouseEvent): boolean;
     /**
-     * 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.
+     * Shows the popover.
+     * @param opener the element that the popover is shown at
+     * @param [preventInitialFocus=false] prevents applying the focus inside the popover
      * @public
-     * @default undefined
-     * @since 1.2.0
+     * @returns Resolved when the popover is open
      */
-    set opener(value: HTMLElement);
-    get opener(): HTMLElement | undefined;
-    openPopup(): Promise<void>;
-    isOpenerClicked(e: MouseEvent): boolean;
+    showAt(opener: HTMLElement, preventInitialFocus?: boolean): Promise<void>;
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
      * @private
@@ -171,7 +183,7 @@ declare class Popover extends Popup {
      * @private
      */
     _removeOpenedPopup(): void;
-    shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean;
+    shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean;
     shouldCloseDueToNoOpener(openerRect: DOMRect): boolean;
     isOpenerOutsideViewport(openerRect: DOMRect): boolean;
     /**
@@ -215,11 +227,12 @@ declare class Popover extends Popup {
      * Fallbacks to new placement, prioritizing `Left` and `Right` placements.
      * @private
      */
-    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacement | undefined;
-    getActualPlacement(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacement}`;
+    fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined;
+    getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacementType}`;
     getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number;
     getHorizontalTop(targetRect: DOMRect, popoverSize: PopoverSize): number;
     get isModal(): boolean;
+    get shouldHideBackdrop(): boolean;
     get _ariaLabelledBy(): "ui5-popup-header" | undefined;
     get styles(): {
         root: {
@@ -230,6 +243,9 @@ declare class Popover extends Popup {
             transform: string;
         };
         content: {};
+        blockLayer: {
+            zIndex: string | number;
+        };
     };
     get classes(): import("@ui5/webcomponents-base/dist/types.js").ClassMap;
     /**
@@ -240,7 +256,7 @@ declare class Popover extends Popup {
      * Hook for descendants to hide footer.
      */
     get _displayFooter(): boolean;
-    get _actualHorizontalAlign(): "Start" | "End" | "Center" | "Stretch" | PopoverHorizontalAlign.Start | PopoverHorizontalAlign.End;
+    get _actualHorizontalAlign(): "Left" | "Right" | PopoverHorizontalAlign.Left | PopoverHorizontalAlign.Right | "Center" | "Stretch";
 }
 declare const instanceOfPopover: (object: any) => object is Popover;
 export default Popover;

package/dist/Popover.js

@@ -16,7 +16,7 @@ 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 Popup from "./Popup.js";
-import PopoverPlacement from "./types/PopoverPlacement.js";
+import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
 import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js";
@@ -75,54 +75,25 @@ let Popover = Popover_1 = class Popover extends Popup {
     constructor() {
         super();
     }
-    /**
-     * 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;
-        }
-        let opener;
-        if (this.opener instanceof HTMLElement) {
-            opener = this.opener;
-        }
-        else if (typeof this.opener === "string") {
-            const rootNode = this.getRootNode();
-            if (rootNode instanceof Document) {
-                opener = rootNode.getElementById(this.opener);
+    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) {
-                opener = document.getElementById(this.opener);
+                console.warn("Valid opener id is required."); // eslint-disable-line
+                return;
             }
+            this.showAt(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())) {
-            this.fireEvent("close", {}, false, false);
-            return;
+        else if (this.isOpen() && !this.open) {
+            this.close();
         }
-        this._opener = opener;
-        this._openerRect = opener.getBoundingClientRect();
-        await super.openPopup();
     }
     isOpenerClicked(e) {
         const target = e.target;
@@ -135,6 +106,21 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         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;
+        }
+        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,15 +138,15 @@ let Popover = Popover_1 = class Popover extends Popup {
     shouldCloseDueToOverflow(placement, openerRect) {
         const threshold = 32;
         const limits = {
-            "Start": openerRect.right,
-            "End": openerRect.left,
+            "Right": openerRect.right,
+            "Left": openerRect.left,
             "Top": openerRect.top,
             "Bottom": openerRect.bottom,
         };
         const closedPopupParent = getClosedPopupParent(this._opener);
         let overflowsBottom = false;
         let overflowsTop = false;
-        if (closedPopupParent instanceof Popover_1) {
+        if (closedPopupParent.showAt) {
             const contentRect = closedPopupParent.contentDOM.getBoundingClientRect();
             overflowsBottom = openerRect.top > (contentRect.top + contentRect.height);
             overflowsTop = (openerRect.top + openerRect.height) < contentRect.top;
@@ -184,7 +170,7 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     _resize() {
         super._resize();
-        if (this.open) {
+        if (this.opened) {
             this.reposition();
         }
     }
@@ -192,8 +178,7 @@ let Popover = Popover_1 = class Popover extends Popup {
         this._show();
     }
     _show() {
-        super._show();
-        if (!this._opened) {
+        if (!this.opened) {
             this._showOutsideViewport();
         }
         const popoverSize = this.getPopoverSize();
@@ -202,7 +187,7 @@ 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.open) {
+        if (this.isOpen()) {
             // update opener rect if it was changed during the popover being opened
             this._openerRect = this._opener.getBoundingClientRect();
         }
@@ -215,21 +200,24 @@ let Popover = Popover_1 = class Popover extends Popup {
             placement = this.calcPlacement(this._openerRect, popoverSize);
         }
         if (this._preventRepositionAndClose || this.isOpenerOutsideViewport(this._openerRect)) {
-            return this.closePopup();
+            return this.close();
         }
         this._oldPlacement = placement;
-        this.actualPlacement = placement.placement;
+        this.actualPlacementType = placement.placementType;
         let left = clamp(this._left, Popover_1.VIEWPORT_MARGIN, document.documentElement.clientWidth - popoverSize.width - Popover_1.VIEWPORT_MARGIN);
-        if (this.actualPlacement === PopoverPlacement.End) {
+        if (this.actualPlacementType === PopoverPlacementType.Right) {
             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.actualPlacement === PopoverPlacement.Bottom) {
+        if (this.actualPlacementType === PopoverPlacementType.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`,
@@ -268,6 +256,7 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     _showOutsideViewport() {
         Object.assign(this.style, {
+            display: this._displayProp,
             top: "-10000px",
             left: "-10000px",
         });
@@ -286,10 +275,10 @@ let Popover = Popover_1 = class Popover extends Popup {
         const clientHeight = document.documentElement.clientHeight;
         let maxHeight = clientHeight;
         let maxWidth = clientWidth;
-        const placement = this.getActualPlacement(targetRect, popoverSize);
-        this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placement, targetRect);
-        const isVertical = placement === PopoverPlacement.Top
-            || placement === PopoverPlacement.Bottom;
+        const placementType = this.getActualPlacementType(targetRect, popoverSize);
+        this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placementType, targetRect);
+        const isVertical = placementType === PopoverPlacementType.Top
+            || placementType === PopoverPlacementType.Bottom;
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) {
             popoverSize.width = targetRect.width;
             this._width = `${targetRect.width}px`;
@@ -299,15 +288,15 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE;
         // calc popover positions
-        switch (placement) {
-            case PopoverPlacement.Top:
+        switch (placementType) {
+            case PopoverPlacementType.Top:
                 left = this.getVerticalLeft(targetRect, popoverSize);
                 top = Math.max(targetRect.top - popoverSize.height - arrowOffset, 0);
                 if (!allowTargetOverlap) {
                     maxHeight = targetRect.top - arrowOffset;
                 }
                 break;
-            case PopoverPlacement.Bottom:
+            case PopoverPlacementType.Bottom:
                 left = this.getVerticalLeft(targetRect, popoverSize);
                 top = targetRect.bottom + arrowOffset;
                 if (allowTargetOverlap) {
@@ -317,14 +306,14 @@ let Popover = Popover_1 = class Popover extends Popup {
                     maxHeight = clientHeight - targetRect.bottom - arrowOffset;
                 }
                 break;
-            case PopoverPlacement.Start:
+            case PopoverPlacementType.Left:
                 left = Math.max(targetRect.left - popoverSize.width - arrowOffset, 0);
                 top = this.getHorizontalTop(targetRect, popoverSize);
                 if (!allowTargetOverlap) {
                     maxWidth = targetRect.left - arrowOffset;
                 }
                 break;
-            case PopoverPlacement.End:
+            case PopoverPlacementType.Right:
                 left = targetRect.left + targetRect.width + arrowOffset;
                 top = this.getHorizontalTop(targetRect, popoverSize);
                 if (allowTargetOverlap) {
@@ -366,7 +355,7 @@ let Popover = Popover_1 = class Popover extends Popup {
             arrow: arrowPos,
             top: this._top,
             left: this._left,
-            placement,
+            placementType,
         };
     }
     /**
@@ -383,10 +372,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.End && left <= targetRect.left) {
+        if (horizontalAlign === PopoverHorizontalAlign.Right && left <= targetRect.left) {
             arrowXCentered = true;
         }
-        if (horizontalAlign === PopoverHorizontalAlign.Start && left + popoverSize.width >= targetRect.left + targetRect.width) {
+        if (horizontalAlign === PopoverHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
             arrowXCentered = true;
         }
         let arrowTranslateX = 0;
@@ -414,48 +403,48 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) {
         if (targetRect.left > popoverSize.width) {
-            return PopoverPlacement.Start;
+            return PopoverPlacementType.Left;
         }
         if (clientWidth - targetRect.right > targetRect.left) {
-            return PopoverPlacement.End;
+            return PopoverPlacementType.Right;
         }
         if (clientHeight - targetRect.bottom > popoverSize.height) {
-            return PopoverPlacement.Bottom;
+            return PopoverPlacementType.Bottom;
         }
         if (clientHeight - targetRect.bottom < targetRect.top) {
-            return PopoverPlacement.Top;
+            return PopoverPlacementType.Top;
         }
     }
-    getActualPlacement(targetRect, popoverSize) {
-        const placement = this.placement;
-        let actualPlacement = placement;
+    getActualPlacementType(targetRect, popoverSize) {
+        const placementType = this.placementType;
+        let actualPlacementType = placementType;
         const clientWidth = document.documentElement.clientWidth;
         const clientHeight = document.documentElement.clientHeight;
-        switch (placement) {
-            case PopoverPlacement.Top:
+        switch (placementType) {
+            case PopoverPlacementType.Top:
                 if (targetRect.top < popoverSize.height
                     && targetRect.top < clientHeight - targetRect.bottom) {
-                    actualPlacement = PopoverPlacement.Bottom;
+                    actualPlacementType = PopoverPlacementType.Bottom;
                 }
                 break;
-            case PopoverPlacement.Bottom:
+            case PopoverPlacementType.Bottom:
                 if (clientHeight - targetRect.bottom < popoverSize.height
                     && clientHeight - targetRect.bottom < targetRect.top) {
-                    actualPlacement = PopoverPlacement.Top;
+                    actualPlacementType = PopoverPlacementType.Top;
                 }
                 break;
-            case PopoverPlacement.Start:
+            case PopoverPlacementType.Left:
                 if (targetRect.left < popoverSize.width) {
-                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
+                    actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
                 }
                 break;
-            case PopoverPlacement.End:
+            case PopoverPlacementType.Right:
                 if (clientWidth - targetRect.right < popoverSize.width) {
-                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
+                    actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
                 }
                 break;
         }
-        return actualPlacement;
+        return actualPlacementType;
     }
     getVerticalLeft(targetRect, popoverSize) {
         const horizontalAlign = this._actualHorizontalAlign;
@@ -465,10 +454,10 @@ let Popover = Popover_1 = class Popover extends Popup {
             case PopoverHorizontalAlign.Stretch:
                 left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
                 break;
-            case PopoverHorizontalAlign.Start:
+            case PopoverHorizontalAlign.Left:
                 left = targetRect.left;
                 break;
-            case PopoverHorizontalAlign.End:
+            case PopoverHorizontalAlign.Right:
                 left = targetRect.right - popoverSize.width;
                 break;
         }
@@ -493,6 +482,9 @@ 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";
@@ -530,11 +522,11 @@ let Popover = Popover_1 = class Popover extends Popup {
     }
     get _actualHorizontalAlign() {
         if (this.effectiveDir === "rtl") {
-            if (this.horizontalAlign === PopoverHorizontalAlign.Start) {
-                return PopoverHorizontalAlign.End;
+            if (this.horizontalAlign === PopoverHorizontalAlign.Left) {
+                return PopoverHorizontalAlign.Right;
             }
-            if (this.horizontalAlign === PopoverHorizontalAlign.End) {
-                return PopoverHorizontalAlign.Start;
+            if (this.horizontalAlign === PopoverHorizontalAlign.Right) {
+                return PopoverHorizontalAlign.Left;
             }
         }
         return this.horizontalAlign;
@@ -544,8 +536,8 @@ __decorate([
     property()
 ], Popover.prototype, "headerText", void 0);
 __decorate([
-    property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
-], Popover.prototype, "placement", void 0);
+    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
+], Popover.prototype, "placementType", void 0);
 __decorate([
     property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
 ], Popover.prototype, "horizontalAlign", void 0);
@@ -555,12 +547,18 @@ __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);
@@ -571,8 +569,8 @@ __decorate([
     property({ validator: Integer, defaultValue: 0, noAttribute: true })
 ], Popover.prototype, "arrowTranslateY", void 0);
 __decorate([
-    property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
-], Popover.prototype, "actualPlacement", void 0);
+    property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.Right })
+], Popover.prototype, "actualPlacementType", void 0);
 __decorate([
     property({ validator: Integer, noAttribute: true })
 ], Popover.prototype, "_maxHeight", void 0);
@@ -585,14 +583,10 @@ __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,
@@ -601,7 +595,7 @@ Popover = Popover_1 = __decorate([
     })
 ], Popover);
 const instanceOfPopover = (object) => {
-    return "opener" in object;
+    return "showAt" in object;
 };
 Popover.define();
 export default Popover;