@zanichelli/albe-web-components 18.4.1 → 18.4.2-rc2

package/dist/collection/components/z-popover/index.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { KeyboardCode, PopoverPosition } from "../../beans";
 const DOCUMENT_ELEMENT = document.documentElement;
 function getParentElement(element) {
@@ -15,12 +15,18 @@ function getParentElement(element) {
 function findScrollableParent(element) {
     let parent = getParentElement(element);
     while (parent && parent !== DOCUMENT_ELEMENT) {
-        const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
+        const style = window.getComputedStyle(parent);
+        const { overflow, overflowX, overflowY } = style;
+        // Check for hidden overflow first (early return)
         if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
             return parent;
         }
-        if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
-            (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
+        // Only check scrollable if overflow is not visible
+        const isOverflowNotVisible = overflow !== "visible";
+        const isOverflowYNotVisible = overflowY !== "visible";
+        const isOverflowXNotVisible = overflowX !== "visible";
+        if ((parent.scrollHeight > parent.clientHeight && isOverflowNotVisible && isOverflowYNotVisible) ||
+            (parent.scrollWidth > parent.clientWidth && isOverflowNotVisible && isOverflowXNotVisible)) {
             return parent;
         }
         parent = getParentElement(parent);
@@ -32,30 +38,28 @@ function findScrollableParent(element) {
  * It includes matrix transformations.
  * @param element The target element.
  * @param targetParentOffset The relative offset parent.
- * @return A client rect object.
  */
 function computeOffset(element, targetParentOffset) {
     const rect = element.getBoundingClientRect();
-    const width = rect.width;
-    const height = rect.height;
+    const { width, height } = rect;
     let top = 0;
     let left = 0;
     let offsetParent = element;
-    while (offsetParent && offsetParent != targetParentOffset) {
+    while (offsetParent && offsetParent !== targetParentOffset) {
         left += offsetParent.offsetLeft;
-        // document.body sometimes has offsetTop == 0 but still has an
-        // offset because of children margins!
+        // document.body sometimes has offsetTop == 0 but still has an offset because of children margins!
         if (offsetParent === document.body) {
             top += offsetParent.getBoundingClientRect().top + window.scrollY;
         }
         else {
             top += offsetParent.offsetTop;
         }
+        // Handle CSS transforms only when DOMMatrix is available
         if (window.DOMMatrix) {
             const style = window.getComputedStyle(offsetParent);
-            const transform = style.transform || style.webkitTransform;
-            const domMatrix = new DOMMatrix(transform);
-            if (domMatrix) {
+            const { transform } = style;
+            if (transform && transform !== "none") {
+                const domMatrix = new DOMMatrix(transform);
                 left += domMatrix.m41;
                 if (offsetParent !== document.body) {
                     top += domMatrix.m42;
@@ -77,12 +81,18 @@ function computeOffset(element, targetParentOffset) {
         parentWidth = offsetParent.offsetWidth;
         parentHeight = offsetParent.offsetHeight;
     }
-    const right = parentWidth - left - rect.width;
-    const bottom = parentHeight - top - rect.height;
+    const right = parentWidth - left - width;
+    const bottom = parentHeight - top - height;
     return { top, right, bottom, left, width, height };
 }
 /**
  * Popover component.
+ * This component displays a popover that can be bound to an element.
+ * It supports various positions and can automatically adjust its position based on available space.
+ *
+ * Notes:
+ * - To ensure the positioning algorithm finds the right container when calculating the position, set its container's `position` to `relative`.
+ * - Consider manually adjusting the size of the slotted element (using `max-width`, `max-height`, etc...) when its content is "fluid" (like a big text), because it can interfere with the position calculation (for example a long text on one single line can be bigger than the available space, letting the algorithm think that the popover doesn't fit in the available space).
  *
  * @cssprop --z-popover-theme--surface - background color of the popover.
  * @cssprop --z-popover-theme--text - foreground color of the popover.
@@ -91,7 +101,8 @@ function computeOffset(element, targetParentOffset) {
  */
 export class ZPopover {
     constructor() {
-        this.position = PopoverPosition.AUTO;
+        this.spaceTolerance = 3; // 3px tolerance for space calculations
+        this.position = PopoverPosition.TOP;
         this.open = false;
         this.bindTo = undefined;
         this.showArrow = false;
@@ -114,10 +125,18 @@ export class ZPopover {
         if (!this.closable || !this.open) {
             return;
         }
-        if (!e.composedPath().includes(this.host)) {
+        const eventPath = e.composedPath();
+        if (!eventPath.includes(this.host)) {
             const target = e.target;
-            const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
+            let triggerElemClicked = false;
+            if (typeof this.bindTo === "string") {
+                triggerElemClicked = !!target.closest(this.bindTo);
+            }
+            else if (this.bindTo) {
+                triggerElemClicked = this.bindTo.contains(target);
+            }
             if (triggerElemClicked) {
+                // stop propagation if the click was on the trigger element to prevent close and reopen glitches
                 e.stopPropagation();
             }
             this.open = false;
@@ -125,11 +144,13 @@ export class ZPopover {
         }
     }
     validatePosition(newValue) {
-        if (newValue && !Object.values(PopoverPosition).includes(newValue)) {
-            this.position = PopoverPosition.AUTO;
+        if (!Object.values(PopoverPosition).includes(newValue) || newValue === PopoverPosition.AUTO) {
+            newValue = PopoverPosition.TOP;
         }
-        this.currentPosition = this.position;
+        this.position = newValue;
+        this.currentPosition = newValue;
         this.positionChange.emit({ position: this.currentPosition });
+        this.setPosition();
     }
     /**
      * Setup popover behaviors on opening.
@@ -143,165 +164,289 @@ export class ZPopover {
                     this.animationFrameRequestId = requestAnimationFrame(setPosition);
                 }
             };
-            setPosition();
-        }
-        else if (this.host.hasAttribute("current-position")) {
-            this.host.removeAttribute("current-position");
-            this.currentPosition = undefined;
+            // call `setPosition` after a tick to ensure the DOM is ready and sizes are available
+            setTimeout(() => {
+                setPosition();
+            }, 0);
         }
         this.openChange.emit({ open: this.open });
     }
-    disconnectedCallback() {
-        cancelAnimationFrame(this.animationFrameRequestId);
+    /**
+     * Helper functions for space calculation
+     */
+    hasCenteredHorizontalSpace(availableLeft, availableRight, hostWidth, boundWidth, offsetModifier) {
+        const requiredSpace = (hostWidth - boundWidth) * (1 - offsetModifier);
+        return (availableLeft >= requiredSpace - this.spaceTolerance && availableRight >= requiredSpace - this.spaceTolerance);
+    }
+    hasCenteredVerticalSpace(availableTop, availableBottom, hostHeight, boundHeight, offsetModifier) {
+        const requiredSpace = (hostHeight - boundHeight) * (1 - offsetModifier);
+        return (availableTop >= requiredSpace - this.spaceTolerance && availableBottom >= requiredSpace - this.spaceTolerance);
+    }
+    hasOffsetSpace(availableSpace, hostSize, boundSize, offsetModifier) {
+        return availableSpace >= hostSize - boundSize * (1 - offsetModifier) - this.spaceTolerance;
+    }
+    /**
+     * Given a desired position and available space around the bound element, returns the best position
+     * that fits the popover, trying all positions if needed.
+     * Takes into account offsetModifier for centering.
+     * @param desiredPosition The desired position of the popover.
+     * @param availableSpace The available space around the bound element.
+     * @param boundElemSizes The sizes of the bound element.
+     * @param offsetModifier The modifier to apply to the offset for centering.
+     */
+    getOptimalPopoverPosition(desiredPosition, availableSpace, boundElemSizes, offsetModifier) {
+        const hostWidth = this.host.offsetWidth;
+        const hostHeight = this.host.offsetHeight;
+        // Check if the desired position has enough space
+        const fits = (pos) => {
+            switch (pos) {
+                case PopoverPosition.TOP:
+                    return (availableSpace.top >= hostHeight &&
+                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.TOP_RIGHT:
+                    return (availableSpace.top >= hostHeight &&
+                        this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.TOP_LEFT:
+                    return (availableSpace.top >= hostHeight &&
+                        this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.RIGHT:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier));
+                case PopoverPosition.RIGHT_BOTTOM:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier));
+                case PopoverPosition.RIGHT_TOP:
+                    return (availableSpace.right >= hostWidth &&
+                        this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier));
+                case PopoverPosition.BOTTOM:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.BOTTOM_LEFT:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasOffsetSpace(availableSpace.left, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.BOTTOM_RIGHT:
+                    return (availableSpace.bottom >= hostHeight &&
+                        this.hasOffsetSpace(availableSpace.right, hostWidth, boundElemSizes.width, offsetModifier));
+                case PopoverPosition.LEFT:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier));
+                case PopoverPosition.LEFT_TOP:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasOffsetSpace(availableSpace.top, hostHeight, boundElemSizes.height, offsetModifier));
+                case PopoverPosition.LEFT_BOTTOM:
+                    return (availableSpace.left >= hostWidth &&
+                        this.hasOffsetSpace(availableSpace.bottom, hostHeight, boundElemSizes.height, offsetModifier));
+                default:
+                    return false;
+            }
+        };
+        // Check desired position first
+        if (fits(desiredPosition)) {
+            return desiredPosition;
+        }
+        // Find position index and create rotation starting from next position
+        const positions = ZPopover.positionOrder;
+        const startIndex = positions.indexOf(desiredPosition);
+        if (startIndex === -1) {
+            return desiredPosition; // fallback if position not found
+        }
+        // Try all other positions starting from the next one
+        for (let i = 1; i < positions.length; i++) {
+            const posIndex = (startIndex + i) % positions.length;
+            const pos = positions[posIndex];
+            if (fits(pos)) {
+                return pos;
+            }
+        }
+        // If no position fits, find the best fallback based on available space
+        return this.findBestFallbackPosition(availableSpace);
+    }
+    /**
+     * Find the best fallback position based on available space when no position fits perfectly
+     */
+    findBestFallbackPosition(availableSpace) {
+        // Determine the directions with the most space
+        const bestHorizontalDirection = availableSpace.right >= availableSpace.left ? PopoverPosition.RIGHT : PopoverPosition.LEFT;
+        const bestVerticalDirection = availableSpace.bottom >= availableSpace.top ? PopoverPosition.BOTTOM : PopoverPosition.TOP;
+        // Choose the main direction based on which has more space
+        const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);
+        const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);
+        const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;
+        // Check if secondary direction is necessary
+        // Only add secondary direction if the difference between min and max in that direction is at least double
+        let needsSecondaryDirection = false;
+        if (mainDirection === bestVerticalDirection) {
+            // Main direction is vertical, check horizontal space difference
+            const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);
+            needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;
+        }
+        else {
+            // Main direction is horizontal, check vertical space difference
+            const minVerticalSpace = Math.min(availableSpace.bottom, availableSpace.top);
+            needsSecondaryDirection = maxVerticalSpace >= minVerticalSpace * 2;
+        }
+        if (!needsSecondaryDirection) {
+            return mainDirection;
+        }
+        const secondaryDirection = mainDirection === bestVerticalDirection ? bestHorizontalDirection : bestVerticalDirection;
+        // Create a combined position (e.g., "bottom_right")
+        return `${mainDirection}_${secondaryDirection}`;
+    }
+    /**
+     * Calculate available space around the bound element
+     */
+    calculateAvailableSpace(boundElementRect, scrollContainer, scrollingBoundingRect) {
+        const top = boundElementRect.top - scrollContainer.scrollTop;
+        const bottom = scrollingBoundingRect.height - (boundElementRect.top + boundElementRect.height) + scrollContainer.scrollTop;
+        const left = boundElementRect.left - scrollContainer.scrollLeft;
+        const right = scrollingBoundingRect.width - (boundElementRect.left + boundElementRect.width) + scrollContainer.scrollLeft;
+        const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+        const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
+        return {
+            top: Math.min(top, top + scrollingBoundingRect.top),
+            bottom: Math.min(bottom, bottom - overflowBottom),
+            left: Math.min(left, left + scrollingBoundingRect.left),
+            right: Math.min(right, right - overflowRight),
+        };
+    }
+    /**
+     * Calculate relative offsets for positioning
+     */
+    calculateRelativeOffsets(boundElementRect, relativeBoundingRect) {
+        return {
+            top: boundElementRect.top - relativeBoundingRect.top,
+            right: boundElementRect.right - relativeBoundingRect.right,
+            bottom: boundElementRect.bottom - relativeBoundingRect.bottom,
+            left: boundElementRect.left - relativeBoundingRect.left,
+        };
+    }
+    /**
+     * Apply positioning styles based on position
+     */
+    applyPositionStyles(position, style, offsets, boundElementSizes, availableSpace, offsetModifier, arrowModifier) {
+        const distanceFromBound = 8; // 8px is the distance of the popover from the bound element
+        // Reset all positioning properties
+        style.top = "auto";
+        style.right = "auto";
+        style.bottom = "auto";
+        style.left = "auto";
+        style.maxWidth = "";
+        style.maxHeight = "";
+        switch (position) {
+            case PopoverPosition.TOP:
+            case PopoverPosition.TOP_RIGHT:
+                style.bottom = `${offsets.bottom + boundElementSizes.height}px`;
+                style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;
+                style.maxHeight = `${availableSpace.top - distanceFromBound}px`;
+                if (position === PopoverPosition.TOP_RIGHT) {
+                    style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;
+                }
+                break;
+            case PopoverPosition.TOP_LEFT:
+                style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;
+                style.bottom = `${offsets.bottom + boundElementSizes.height}px`;
+                style.maxWidth = `${availableSpace.left}px`;
+                style.maxHeight = `${availableSpace.top - distanceFromBound}px`;
+                break;
+            case PopoverPosition.BOTTOM:
+            case PopoverPosition.BOTTOM_RIGHT:
+                style.top = `${offsets.top + boundElementSizes.height}px`;
+                style.left = `${offsets.left + boundElementSizes.width * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;
+                style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;
+                if (position === PopoverPosition.BOTTOM_RIGHT) {
+                    style.maxWidth = `${availableSpace.right + boundElementSizes.width * offsetModifier}px`;
+                }
+                break;
+            case PopoverPosition.BOTTOM_LEFT:
+                style.top = `${offsets.top + boundElementSizes.height}px`;
+                style.right = `${offsets.right + boundElementSizes.width * offsetModifier - arrowModifier}px`;
+                style.maxWidth = `${availableSpace.left}px`;
+                style.maxHeight = `${availableSpace.bottom - distanceFromBound}px`;
+                break;
+            case PopoverPosition.RIGHT:
+            case PopoverPosition.RIGHT_BOTTOM:
+                style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;
+                style.left = `${offsets.left + boundElementSizes.width}px`;
+                style.maxWidth = `${availableSpace.right - distanceFromBound}px`;
+                if (position === PopoverPosition.RIGHT) {
+                    style.maxHeight = `${Math.min(availableSpace.top + availableSpace.bottom + boundElementSizes.height, window.innerHeight - 20)}px`;
+                }
+                else {
+                    style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;
+                }
+                break;
+            case PopoverPosition.RIGHT_TOP:
+                style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;
+                style.left = `${offsets.left + boundElementSizes.width}px`;
+                style.maxWidth = `${availableSpace.right - distanceFromBound}px`;
+                if (position === PopoverPosition.RIGHT_TOP) {
+                    style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;
+                }
+                break;
+            case PopoverPosition.LEFT:
+            case PopoverPosition.LEFT_BOTTOM:
+                style.top = `${offsets.top + boundElementSizes.height * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;
+                style.right = `${offsets.right + boundElementSizes.width}px`;
+                style.maxWidth = `${availableSpace.left - distanceFromBound}px`;
+                if (position === PopoverPosition.LEFT_BOTTOM) {
+                    style.maxHeight = `${availableSpace.bottom + boundElementSizes.height * offsetModifier}px`;
+                }
+                break;
+            case PopoverPosition.LEFT_TOP:
+                style.right = `${offsets.right + boundElementSizes.width}px`;
+                style.bottom = `${offsets.bottom + boundElementSizes.height * offsetModifier - arrowModifier}px`;
+                style.maxWidth = `${availableSpace.left - distanceFromBound}px`;
+                if (position === PopoverPosition.LEFT_TOP) {
+                    style.maxHeight = `${availableSpace.top + boundElementSizes.height * offsetModifier}px`;
+                }
+                break;
+        }
     }
     /**
      * Set the position of the popover.
      */
     setPosition() {
-        let element;
+        let boundElement;
         if (typeof this.bindTo === "string") {
-            element = this.host.ownerDocument.querySelector(this.bindTo);
+            boundElement = this.host.ownerDocument.querySelector(this.bindTo);
         }
         else if (this.bindTo) {
-            element = this.bindTo;
+            boundElement = this.bindTo;
         }
         else {
-            element = this.host.parentElement;
+            boundElement = this.host.parentElement;
         }
-        if (!element) {
+        if (!boundElement) {
             return;
         }
-        const scrollContainer = findScrollableParent(element);
+        const scrollContainer = findScrollableParent(boundElement);
         const scrollingBoundingRect = scrollContainer.getBoundingClientRect();
         const offsetContainer = this.host.offsetParent;
         const relativeBoundingRect = offsetContainer
             ? computeOffset(offsetContainer, scrollContainer)
             : { top: 0, right: 0, bottom: 0, left: 0 };
-        const boundingRect = computeOffset(element, scrollContainer);
-        const top = boundingRect.top - scrollContainer.scrollTop;
-        const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
-        const left = boundingRect.left - scrollContainer.scrollLeft;
-        const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
-        const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
-        const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
-        const availableTop = Math.min(top, top + scrollingBoundingRect.top);
-        const availableBottom = Math.min(bottom, bottom - overflowBottom);
-        const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
-        const availableRight = Math.min(right, right - overflowRight);
-        const availableHeight = availableTop + availableBottom + boundingRect.height;
-        const availableWidth = availableLeft + availableRight + boundingRect.width;
-        let position = this.currentPosition;
-        const positions = [];
-        if (this.position === PopoverPosition.AUTO) {
-            /**
-             * The `AUTO` position tries to place the popover in the 'safest' area,
-             * where there's more space available.
-             */
-            if (availableLeft / availableWidth > 0.6) {
-                positions.push(PopoverPosition.LEFT);
-            }
-            else if (availableLeft / availableWidth < 0.4) {
-                positions.push(PopoverPosition.RIGHT);
-            }
-            if (availableTop / availableHeight > 0.9) {
-                positions.unshift(PopoverPosition.TOP);
-            }
-            else if (availableTop / availableHeight > 0.6) {
-                positions.push(PopoverPosition.TOP);
-            }
-            else if (availableTop / availableHeight < 0.1) {
-                positions.unshift(PopoverPosition.BOTTOM);
-            }
-            else {
-                positions.push(PopoverPosition.BOTTOM);
-            }
-            position = positions.join("_");
-        }
-        const style = this.host.style;
-        style.position = "absolute";
-        const offsetTop = boundingRect.top - relativeBoundingRect.top;
-        const offsetRight = boundingRect.right - relativeBoundingRect.right;
-        const offsetBottom = boundingRect.bottom - relativeBoundingRect.bottom;
-        const offsetLeft = boundingRect.left - relativeBoundingRect.left;
+        const boundElementRect = computeOffset(boundElement, scrollContainer);
+        const availableSpace = this.calculateAvailableSpace(boundElementRect, scrollContainer, scrollingBoundingRect);
+        const offsets = this.calculateRelativeOffsets(boundElementRect, relativeBoundingRect);
         const offsetModifier = this.center ? 0.5 : 0;
-        const sizeModifier = this.center ? 0.5 : 0;
-        if (position === PopoverPosition.TOP || position === PopoverPosition.TOP_RIGHT) {
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${offsetBottom + boundingRect.height}px`;
-            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
-            style.maxHeight = `${availableTop}px`;
-            if (position === PopoverPosition.TOP_RIGHT) {
-                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
-            }
-        }
-        else if (position === PopoverPosition.TOP_LEFT) {
-            style.top = "auto";
-            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
-            style.bottom = `${offsetBottom + boundingRect.height}px`;
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableTop}px`;
-        }
-        else if (position === PopoverPosition.BOTTOM || position === PopoverPosition.BOTTOM_RIGHT) {
-            style.top = `${offsetTop + boundingRect.height}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
-            style.maxHeight = `${availableBottom}px`;
-            if (position === PopoverPosition.BOTTOM_RIGHT) {
-                style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
-            }
-        }
-        else if (position === PopoverPosition.BOTTOM_LEFT) {
-            style.top = `${offsetTop + boundingRect.height}px`;
-            style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableBottom}px`;
-        }
-        else if (position === PopoverPosition.RIGHT || position === PopoverPosition.RIGHT_BOTTOM) {
-            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
-            style.right = "auto";
-            style.bottom = "auto";
-            style.left = `${offsetLeft + boundingRect.width}px`;
-            style.maxWidth = `${availableRight}px`;
-            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.RIGHT_TOP) {
-            style.top = "auto";
-            style.right = "auto";
-            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
-            style.left = `${offsetLeft + boundingRect.width}px`;
-            style.maxWidth = `${availableRight}px`;
-            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.LEFT || position === PopoverPosition.LEFT_BOTTOM) {
-            style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
-            style.right = `${offsetRight + boundingRect.width}px`;
-            style.bottom = "auto";
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
-        }
-        else if (position === PopoverPosition.LEFT_TOP) {
-            style.top = "auto";
-            style.right = `${offsetRight + boundingRect.width}px`;
-            style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
-            style.left = "auto";
-            style.maxWidth = `${availableLeft}px`;
-            style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
-        }
-        this.currentPosition = position || this.position;
-        this.host.setAttribute("current-position", this.currentPosition);
+        const arrowModifier = this.showArrow && this.center ? 8 : 0; // 8px is the distance of the arrow center from the edge of the popover
+        const position = this.getOptimalPopoverPosition(this.position, availableSpace, { width: boundElementRect.width, height: boundElementRect.height }, offsetModifier);
+        const style = this.host.style;
+        this.applyPositionStyles(position, style, offsets, boundElementRect, availableSpace, offsetModifier, arrowModifier);
+        this.currentPosition = position;
     }
     componentWillLoad() {
         this.validatePosition(this.position);
         this.onOpen();
     }
+    componentDidLoad() {
+        this.setPosition();
+    }
+    disconnectedCallback() {
+        cancelAnimationFrame(this.animationFrameRequestId);
+    }
     render() {
-        return h("slot", { key: 'f7f6f81dc2698b5d560503a984dcd47e377de0bc' });
+        return (h(Host, { key: '38c84d7959587dfef4ef66a4b76be519fe1e0f82', "current-position": this.currentPosition }, h("slot", { key: 'ccd1f8a455c7755e38b5aac231adcb9efeebee17' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -319,7 +464,7 @@ export class ZPopover {
         return {
             "position": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "PopoverPosition",
                     "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
@@ -332,14 +477,14 @@ export class ZPopover {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Popover position."
+                    "text": "The preferred position to render the popover.\nThe popover will automatically search another position if not enough space is available for the preferred position.\nIf the preferred position is not available, it will try to find the best position starting from `TOP` and going clockwise."
                 },
                 "attribute": "position",
                 "reflect": true,
-                "defaultValue": "PopoverPosition.AUTO"
+                "defaultValue": "PopoverPosition.TOP"
             },
             "open": {
                 "type": "boolean",
@@ -501,4 +646,19 @@ export class ZPopover {
             }];
     }
 }
+// Clockwise order of positions.
+ZPopover.positionOrder = [
+    PopoverPosition.TOP_RIGHT,
+    PopoverPosition.TOP,
+    PopoverPosition.TOP_LEFT,
+    PopoverPosition.RIGHT_BOTTOM,
+    PopoverPosition.RIGHT,
+    PopoverPosition.RIGHT_TOP,
+    PopoverPosition.BOTTOM_LEFT,
+    PopoverPosition.BOTTOM,
+    PopoverPosition.BOTTOM_RIGHT,
+    PopoverPosition.LEFT_TOP,
+    PopoverPosition.LEFT,
+    PopoverPosition.LEFT_BOTTOM,
+];
 //# sourceMappingURL=index.js.map