@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/Popover.js

@@ -8,9 +8,9 @@ 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 slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
-import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { isClickInRect, getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
@@ -19,12 +19,28 @@ 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";
+import PopoverResize from "./PopoverResize.js";
 // Template
 import PopoverTemplate from "./PopoverTemplate.js";
 // Styles
 import PopupsCommonCss from "./generated/themes/PopupsCommon.css.js";
 import PopoverCss from "./generated/themes/Popover.css.js";
+import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js";
 const ARROW_SIZE = 8;
+var PopoverActualHorizontalAlign;
+(function (PopoverActualHorizontalAlign) {
+    PopoverActualHorizontalAlign["Center"] = "Center";
+    PopoverActualHorizontalAlign["Left"] = "Left";
+    PopoverActualHorizontalAlign["Right"] = "Right";
+    PopoverActualHorizontalAlign["Stretch"] = "Stretch";
+})(PopoverActualHorizontalAlign || (PopoverActualHorizontalAlign = {}));
+var PopoverActualPlacement;
+(function (PopoverActualPlacement) {
+    PopoverActualPlacement["Left"] = "Left";
+    PopoverActualPlacement["Right"] = "Right";
+    PopoverActualPlacement["Top"] = "Top";
+    PopoverActualPlacement["Bottom"] = "Bottom";
+})(PopoverActualPlacement || (PopoverActualPlacement = {}));
 /**
  * @class
  *
@@ -86,7 +102,7 @@ let Popover = Popover_1 = class Popover extends Popup {
         this.verticalAlign = "Center";
         /**
          * Defines whether the component should close when
-         * clicking/tapping outside of the popover.
+         * clicking/tapping outside the popover.
          * If enabled, it blocks any interaction with the background.
          * @default false
          * @public
@@ -106,6 +122,14 @@ let Popover = Popover_1 = class Popover extends Popup {
          * @public
          */
         this.allowTargetOverlap = false;
+        /**
+         * Determines whether the component is resizable.
+         * **Note:** This property is effective only on desktop devices.
+         * @default false
+         * @public
+         * @since 2.19.0
+         */
+        this.resizable = false;
         /**
          * Sets the X translation of the arrow
          * @private
@@ -120,7 +144,10 @@ let Popover = Popover_1 = class Popover extends Popup {
          * Returns the calculated placement depending on the free space
          * @private
          */
-        this.actualPlacement = "End";
+        this.actualPlacement = "Right";
+        // for instance checks
+        this.isPopover = true;
+        this._popoverResize = new PopoverResize(this);
     }
     /**
      * Defines the ID or DOM Reference of the element at which the popover is shown.
@@ -156,9 +183,22 @@ let Popover = Popover_1 = class Popover extends Popup {
             this.fireDecoratorEvent("close");
             return;
         }
+        this._initialWidth = this.style.width;
+        this._initialHeight = this.style.height;
         this._openerRect = opener.getBoundingClientRect();
+        this._observeOpenerVisibility();
         await super.openPopup();
     }
+    closePopup(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        this._unobserveOpenerVisibility();
+        Object.assign(this.style, {
+            width: this._initialWidth,
+            height: this._initialHeight,
+        });
+        this._popoverResize.reset();
+        delete this._resizeHandlePlacement;
+        super.closePopup(escPressed, preventRegistryUpdate, preventFocusRestore);
+    }
     isOpenerClicked(e) {
         const target = e.target;
         const opener = this.getOpenerHTMLElement(this.opener);
@@ -173,6 +213,15 @@ let Popover = Popover_1 = class Popover extends Popup {
         }
         return e.composedPath().indexOf(opener) > -1;
     }
+    isClicked(e) {
+        if (this._showResizeHandle) {
+            const resizeHandle = this.shadowRoot.querySelector(".ui5-popover-resize-handle");
+            if (resizeHandle === e.composedPath()[0]) {
+                return true;
+            }
+        }
+        return isClickInRect(e, this.getBoundingClientRect());
+    }
     /**
      * Override for the _addOpenedPopup hook, which would otherwise just call addOpenedPopup(this)
      * @private
@@ -195,6 +244,9 @@ let Popover = Popover_1 = class Popover extends Popup {
             return this._isUI5AbstractElement(opener) ? opener.getFocusDomRef() : opener;
         }
         let rootNode = this.getRootNode();
+        if (!rootNode) {
+            return null;
+        }
         if (rootNode === this) {
             rootNode = document;
         }
@@ -210,8 +262,8 @@ let Popover = Popover_1 = class Popover extends Popup {
     shouldCloseDueToOverflow(placement, openerRect) {
         const threshold = 32;
         const limits = {
-            "Start": openerRect.right,
-            "End": openerRect.left,
+            "Left": openerRect.right,
+            "Right": openerRect.left,
             "Top": openerRect.top,
             "Bottom": openerRect.bottom,
         };
@@ -247,8 +299,14 @@ let Popover = Popover_1 = class Popover extends Popup {
             this.reposition();
         }
     }
+    get _viewportMargin() {
+        return Popover_1.VIEWPORT_MARGIN;
+    }
     reposition() {
         this._show();
+        if (this.resizable) {
+            this._resizeHandlePlacement = this._popoverResize.getResizeHandlePlacement();
+        }
     }
     async _show() {
         super._show();
@@ -289,13 +347,13 @@ let Popover = Popover_1 = class Popover extends Popup {
             return this.closePopup();
         }
         this._oldPlacement = placement;
-        this.actualPlacement = placement.placement;
+        this.actualPlacement = placement.actualPlacement;
         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.actualPlacement === PopoverActualPlacement.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.actualPlacement === PopoverActualPlacement.Bottom) {
             top = Math.max(top, this._top);
         }
         this.arrowTranslateX = placement.arrow.x;
@@ -305,6 +363,9 @@ let Popover = Popover_1 = class Popover extends Popup {
             top: `${top}px`,
             left: `${left}px`,
         });
+        if (this._popoverResize.isResized) {
+            return;
+        }
         if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && this._width) {
             this.style.width = this._width;
         }
@@ -326,6 +387,39 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
+    /**
+     * Callback invoked when the opener element's intersection status changes.
+     * Closes the popover when the opener is no longer visible.
+     * @private
+     */
+    _onOpenerIntersection(entries) {
+        if (this.open && !entries[0]?.isIntersecting) {
+            this.closePopup();
+        }
+    }
+    /**
+     * Starts observing the opener element's visibility in the viewport.
+     * @private
+     */
+    _observeOpenerVisibility() {
+        this._unobserveOpenerVisibility();
+        const opener = this.getOpenerHTMLElement(this.opener);
+        if (!opener) {
+            return;
+        }
+        this._openerIntersectionObserver = new IntersectionObserver(this._onOpenerIntersection.bind(this));
+        this._openerIntersectionObserver.observe(opener);
+    }
+    /**
+     * Stops observing the opener element and cleans up the IntersectionObserver instance.
+     * @private
+     */
+    _unobserveOpenerVisibility() {
+        if (this._openerIntersectionObserver) {
+            this._openerIntersectionObserver.disconnect();
+            this._openerIntersectionObserver = null;
+        }
+    }
     getPopoverSize(calcScrollHeight = false) {
         const rect = this.getBoundingClientRect();
         const width = rect.width;
@@ -373,29 +467,31 @@ let Popover = Popover_1 = class Popover extends Popup {
         const clientHeight = document.documentElement.clientHeight;
         let maxHeight = clientHeight;
         let maxWidth = clientWidth;
-        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 actualPlacement = this.getActualPlacement(targetRect);
+        this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(actualPlacement, targetRect);
+        const isVertical = actualPlacement === PopoverActualPlacement.Top
+            || actualPlacement === PopoverActualPlacement.Bottom;
+        if (!this._popoverResize.isResized) {
+            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 (placement) {
-            case PopoverPlacement.Top:
+        switch (actualPlacement) {
+            case PopoverActualPlacement.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 PopoverActualPlacement.Bottom:
                 left = this.getVerticalLeft(targetRect, popoverSize);
                 top = targetRect.bottom + arrowOffset;
                 if (allowTargetOverlap) {
@@ -405,14 +501,14 @@ let Popover = Popover_1 = class Popover extends Popup {
                     maxHeight = clientHeight - targetRect.bottom - arrowOffset;
                 }
                 break;
-            case PopoverPlacement.Start:
+            case PopoverActualPlacement.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 PopoverActualPlacement.Right:
                 left = targetRect.left + targetRect.width + arrowOffset;
                 top = this.getHorizontalTop(targetRect, popoverSize);
                 if (allowTargetOverlap) {
@@ -455,9 +551,12 @@ let Popover = Popover_1 = class Popover extends Popup {
             arrow: arrowPos,
             top: this._top,
             left: this._left,
-            placement,
+            actualPlacement,
         };
     }
+    get isVertical() {
+        return this.placement === PopoverPlacement.Top || this.placement === PopoverPlacement.Bottom;
+    }
     getRTLCorrectionLeft() {
         return parseFloat(window.getComputedStyle(this).left) - this.getBoundingClientRect().left;
     }
@@ -473,12 +572,12 @@ let Popover = Popover_1 = class Popover extends Popup {
      * @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.End && left <= targetRect.left) {
+        const actualHorizontalAlign = this._actualHorizontalAlign;
+        let arrowXCentered = actualHorizontalAlign === PopoverActualHorizontalAlign.Center || actualHorizontalAlign === PopoverActualHorizontalAlign.Stretch;
+        if (actualHorizontalAlign === PopoverActualHorizontalAlign.Right && left <= targetRect.left) {
             arrowXCentered = true;
         }
-        if (horizontalAlign === PopoverHorizontalAlign.Start && left + popoverSize.width >= targetRect.left + targetRect.width) {
+        if (actualHorizontalAlign === PopoverActualHorizontalAlign.Left && left + popoverSize.width >= targetRect.left + targetRect.width) {
             arrowXCentered = true;
         }
         let arrowTranslateX = 0;
@@ -506,69 +605,82 @@ let Popover = Popover_1 = class Popover extends Popup {
      */
     fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) {
         if (targetRect.left > popoverSize.width) {
-            return PopoverPlacement.Start;
+            return PopoverActualPlacement.Left;
         }
         if (clientWidth - targetRect.right > targetRect.left) {
-            return PopoverPlacement.End;
+            return PopoverActualPlacement.Right;
         }
         if (clientHeight - targetRect.bottom > popoverSize.height) {
-            return PopoverPlacement.Bottom;
+            return PopoverActualPlacement.Bottom;
         }
         if (clientHeight - targetRect.bottom < targetRect.top) {
-            return PopoverPlacement.Top;
+            return PopoverActualPlacement.Top;
         }
     }
     getActualPlacement(targetRect) {
         const placement = this.placement;
-        let actualPlacement = placement;
-        const isVertical = placement === PopoverPlacement.Top
-            || placement === PopoverPlacement.Bottom;
         const popoverSize = this.getPopoverSize(!this.allowTargetOverlap);
+        let actualPlacement = PopoverActualPlacement.Right;
+        switch (placement) {
+            case PopoverPlacement.Start:
+                actualPlacement = this.isRtl ? PopoverActualPlacement.Right : PopoverActualPlacement.Left;
+                break;
+            case PopoverPlacement.End:
+                actualPlacement = this.isRtl ? PopoverActualPlacement.Left : PopoverActualPlacement.Right;
+                break;
+            case PopoverPlacement.Top:
+                actualPlacement = PopoverActualPlacement.Top;
+                break;
+            case PopoverPlacement.Bottom:
+                actualPlacement = PopoverActualPlacement.Bottom;
+                break;
+        }
         const clientWidth = document.documentElement.clientWidth;
         let clientHeight = document.documentElement.clientHeight;
         let popoverHeight = popoverSize.height;
-        if (isVertical) {
+        if (this.isVertical) {
             popoverHeight += this.hideArrow ? 0 : ARROW_SIZE;
             clientHeight -= Popover_1.VIEWPORT_MARGIN;
         }
-        switch (placement) {
-            case PopoverPlacement.Top:
+        switch (actualPlacement) {
+            case PopoverActualPlacement.Top:
                 if (targetRect.top < popoverHeight
                     && targetRect.top < clientHeight - targetRect.bottom) {
-                    actualPlacement = PopoverPlacement.Bottom;
+                    actualPlacement = PopoverActualPlacement.Bottom;
                 }
                 break;
-            case PopoverPlacement.Bottom:
+            case PopoverActualPlacement.Bottom:
                 if (clientHeight - targetRect.bottom < popoverHeight
                     && clientHeight - targetRect.bottom < targetRect.top) {
-                    actualPlacement = PopoverPlacement.Top;
+                    actualPlacement = PopoverActualPlacement.Top;
                 }
                 break;
-            case PopoverPlacement.Start:
+            case PopoverActualPlacement.Left:
                 if (targetRect.left < popoverSize.width) {
-                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
+                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || actualPlacement;
                 }
                 break;
-            case PopoverPlacement.End:
+            case PopoverActualPlacement.Right:
                 if (clientWidth - targetRect.right < popoverSize.width) {
-                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
+                    actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || actualPlacement;
                 }
                 break;
         }
         return actualPlacement;
     }
     getVerticalLeft(targetRect, popoverSize) {
-        const horizontalAlign = this._actualHorizontalAlign;
+        const actualHorizontalAlign = this._actualHorizontalAlign;
         let left = Popover_1.VIEWPORT_MARGIN;
-        switch (horizontalAlign) {
-            case PopoverHorizontalAlign.Center:
-            case PopoverHorizontalAlign.Stretch:
+        switch (actualHorizontalAlign) {
+            case PopoverActualHorizontalAlign.Center:
+            case PopoverActualHorizontalAlign.Stretch:
                 left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
+                left = this._popoverResize.getCorrectedLeft(left);
                 break;
-            case PopoverHorizontalAlign.Start:
+            case PopoverActualHorizontalAlign.Left:
                 left = targetRect.left;
                 break;
-            case PopoverHorizontalAlign.End:
+            case PopoverActualHorizontalAlign.Right:
                 left = targetRect.right - popoverSize.width;
                 break;
         }
@@ -580,6 +692,7 @@ let Popover = Popover_1 = class Popover extends Popup {
             case PopoverVerticalAlign.Center:
             case PopoverVerticalAlign.Stretch:
                 top = targetRect.top - (popoverSize.height - targetRect.height) / 2;
+                top = this._popoverResize.getCorrectedTop(top);
                 break;
             case PopoverVerticalAlign.Top:
                 top = targetRect.top;
@@ -614,6 +727,10 @@ let Popover = Popover_1 = class Popover extends Popup {
     get classes() {
         const allClasses = super.classes;
         allClasses.root["ui5-popover-root"] = true;
+        allClasses.root["ui5-popover-rtl"] = this.isRtl;
+        if (this.resizable) {
+            this._popoverResize.setCorrectResizeHandleClass(allClasses);
+        }
         return allClasses;
     }
     /**
@@ -628,16 +745,31 @@ let Popover = Popover_1 = class Popover extends Popup {
     get _displayFooter() {
         return true;
     }
+    get isRtl() {
+        return this.effectiveDir === "rtl";
+    }
     get _actualHorizontalAlign() {
-        if (this.effectiveDir === "rtl") {
-            if (this.horizontalAlign === PopoverHorizontalAlign.Start) {
-                return PopoverHorizontalAlign.End;
-            }
-            if (this.horizontalAlign === PopoverHorizontalAlign.End) {
-                return PopoverHorizontalAlign.Start;
-            }
+        switch (this.horizontalAlign) {
+            case PopoverHorizontalAlign.Start:
+                return this.isRtl ? PopoverActualHorizontalAlign.Right : PopoverActualHorizontalAlign.Left;
+            case PopoverHorizontalAlign.End:
+                return this.isRtl ? PopoverActualHorizontalAlign.Left : PopoverActualHorizontalAlign.Right;
+            case PopoverHorizontalAlign.Stretch:
+                return PopoverActualHorizontalAlign.Stretch;
+            case PopoverHorizontalAlign.Center:
+            default:
+                return PopoverActualHorizontalAlign.Center;
         }
-        return this.horizontalAlign;
+    }
+    get _showResizeHandle() {
+        return this.resizable && this.onDesktop;
+    }
+    get resizeHandlePlacement() {
+        return this._resizeHandlePlacement;
+    }
+    _onResizeMouseDown(e) {
+        this._popoverResize.onResizeMouseDown(e);
+        this._resizeHandlePlacement = this._popoverResize.getResizeHandlePlacement();
     }
 };
 __decorate([
@@ -661,6 +793,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], Popover.prototype, "allowTargetOverlap", void 0);
+__decorate([
+    property({ type: Boolean })
+], Popover.prototype, "resizable", void 0);
 __decorate([
     property({ type: Number, noAttribute: true })
 ], Popover.prototype, "arrowTranslateX", void 0);
@@ -677,10 +812,13 @@ __decorate([
     property({ type: Number, noAttribute: true })
 ], Popover.prototype, "_maxWidth", void 0);
 __decorate([
-    slot({ type: HTMLElement })
+    property({ noAttribute: true })
+], Popover.prototype, "_resizeHandlePlacement", void 0);
+__decorate([
+    slot()
 ], Popover.prototype, "header", void 0);
 __decorate([
-    slot({ type: HTMLElement })
+    slot()
 ], Popover.prototype, "footer", void 0);
 __decorate([
     property({ converter: DOMReferenceConverter })
@@ -696,10 +834,8 @@ Popover = Popover_1 = __decorate([
         template: PopoverTemplate,
     })
 ], Popover);
-const instanceOfPopover = (object) => {
-    return "opener" in object;
-};
 Popover.define();
 export default Popover;
-export { instanceOfPopover };
+export const instanceOfPopover = createInstanceChecker("isPopover");
+export { PopoverActualPlacement, PopoverActualHorizontalAlign };
 //# sourceMappingURL=Popover.js.map