@ui5/webcomponents 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/dist/Popover.js

@@ -8,11 +8,10 @@ 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 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";
@@ -20,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
  *
@@ -87,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
@@ -107,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
@@ -121,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.
@@ -151,15 +177,26 @@ let Popover = Popover_1 = class Popover extends Popup {
         if (!opener) {
             return;
         }
-        if (this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
+        if (!opener || this.isOpenerOutsideViewport(opener.getBoundingClientRect())) {
             await renderFinished();
             this.open = false;
             this.fireDecoratorEvent("close");
             return;
         }
+        this._initialWidth = this.style.width;
+        this._initialHeight = this.style.height;
         this._openerRect = opener.getBoundingClientRect();
         await super.openPopup();
     }
+    closePopup(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        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);
@@ -174,6 +211,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
@@ -189,7 +235,7 @@ let Popover = Popover_1 = class Popover extends Popup {
         removeOpenedPopover(this);
     }
     getOpenerHTMLElement(opener) {
-        if (opener === undefined) {
+        if (opener === undefined || opener === null) {
             return opener;
         }
         if (opener instanceof HTMLElement) {
@@ -211,8 +257,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,
         };
@@ -248,12 +294,25 @@ 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();
         const opener = this.getOpenerHTMLElement(this.opener);
+        if (!opener) {
+            Object.assign(this.style, {
+                top: `0px`,
+                left: `0px`,
+            });
+            return;
+        }
         if (opener && instanceOfUI5Element(opener) && !opener.getDomRef()) {
             return;
         }
@@ -283,13 +342,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;
@@ -299,6 +358,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;
         }
@@ -320,8 +382,22 @@ let Popover = Popover_1 = class Popover extends Popup {
         const actualTop = Math.ceil(this.getBoundingClientRect().top);
         return top + (Number.parseInt(this.style.top || "0") - actualTop);
     }
-    getPopoverSize() {
-        const rect = this.getBoundingClientRect(), width = rect.width, height = rect.height;
+    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 { width, height };
     }
     _showOutsideViewport() {
@@ -353,29 +429,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, 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`;
-        }
-        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) {
@@ -385,14 +463,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) {
@@ -435,9 +513,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;
     }
@@ -453,12 +534,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;
@@ -486,61 +567,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, popoverSize) {
+    getActualPlacement(targetRect) {
         const placement = this.placement;
-        let actualPlacement = placement;
-        const clientWidth = document.documentElement.clientWidth;
-        const clientHeight = document.documentElement.clientHeight;
+        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:
-                if (targetRect.top < popoverSize.height
+                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 (this.isVertical) {
+            popoverHeight += this.hideArrow ? 0 : ARROW_SIZE;
+            clientHeight -= Popover_1.VIEWPORT_MARGIN;
+        }
+        switch (actualPlacement) {
+            case PopoverActualPlacement.Top:
+                if (targetRect.top < popoverHeight
                     && targetRect.top < clientHeight - targetRect.bottom) {
-                    actualPlacement = PopoverPlacement.Bottom;
+                    actualPlacement = PopoverActualPlacement.Bottom;
                 }
                 break;
-            case PopoverPlacement.Bottom:
-                if (clientHeight - targetRect.bottom < popoverSize.height
+            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;
         }
@@ -552,6 +654,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;
@@ -586,6 +689,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;
     }
     /**
@@ -600,16 +707,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([
@@ -633,6 +755,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);
@@ -649,10 +774,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 })
@@ -664,15 +792,12 @@ Popover = Popover_1 = __decorate([
             Popup.styles,
             PopupsCommonCss,
             PopoverCss,
-            getEffectiveScrollbarStyle(),
         ],
         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