@zanichelli/albe-web-components 18.7.7 → 18.8.0

package/dist/components/index23.js

@@ -1,476 +1,106 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P as PopoverPosition, g as KeyboardCode, p as Device } from './index2.js';
-import { a as containsElement, i as findScrollableParent, g as getDevice, j as isElementVisibleInContainer } from './utils.js';
+import { O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
 
-const stylesCss = ":host{position:fixed;display:none;max-width:calc(100% - var(--grid-margin) * 2);max-height:calc(100% - var(--grid-margin) * 2);padding:var(--z-popover-padding, 0);background:var(--z-popover-theme--surface, var(--color-surface01));border-radius:var(--border-radius-small);color:var(--z-popover-theme--text, var(--color-default-text));fill:currentcolor;filter:var(--z-popover-shadow-filter, drop-shadow(0 1px 2px var(--shadow-color-base)));text-align:center;visibility:hidden;}:host([open]:not([open=\"false\"])[current-position]){display:block}:host([center][current-position=\"top\"]),:host([center][current-position=\"bottom\"]){transform:translateX(-50%)}:host([center][current-position=\"right\"]),:host([center][current-position=\"left\"]){transform:translateY(-50%)}:host([current-position^=\"top\"]){margin:0 0 var(--space-unit)}:host([current-position^=\"bottom\"]){margin:var(--space-unit) 0 0}:host([current-position^=\"left\"]){margin:0 var(--space-unit) 0 0}:host([current-position^=\"right\"]){margin:0 0 0 var(--space-unit)}:host([current-position])::before{--arrow-size:6px;--arrow-edge-offset:calc(100% - var(--space-unit) - (var(--arrow-size) / 2));--arrow-center-x-offset:calc(50% - (var(--arrow-size) / 2));--arrow-center-y-offset:calc(100% - (var(--arrow-size) / 2));position:absolute;display:block;width:var(--arrow-size);height:var(--arrow-size);background:var(--z-popover-theme--surface, var(--color-surface01));content:\"\";transform:rotate(45deg)}:host([show-arrow=\"false\"])::before,:host(:not([show-arrow]))::before{display:none}:host([current-position^=\"top\"])::before{top:var(--arrow-center-y-offset)}:host([current-position^=\"bottom\"])::before{bottom:var(--arrow-center-y-offset)}:host([current-position=\"top\"])::before,:host([current-position=\"bottom\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before,:host([current-position=\"left\"])::before{bottom:var(--arrow-edge-offset)}:host([current-position=\"right\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"top_right\"])::before,:host([current-position=\"bottom_right\"])::before{right:var(--arrow-edge-offset)}:host([current-position=\"top_left\"])::before,:host([current-position=\"bottom_left\"])::before{left:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"left_top\"])::before{top:var(--arrow-edge-offset)}:host([current-position=\"right_top\"])::before,:host([current-position=\"right_bottom\"])::before{right:var(--arrow-center-y-offset)}:host([current-position=\"left_top\"])::before,:host([current-position=\"left_bottom\"])::before{left:var(--arrow-center-y-offset)}:host([current-position=\"right_bottom\"])::before,:host([current-position=\"left_bottom\"])::before{bottom:var(--arrow-edge-offset)}:host([center][current-position=\"top\"])::before,:host([center][current-position=\"bottom\"])::before{right:auto;left:var(--arrow-center-x-offset)}:host([center][current-position=\"right\"])::before,:host([center][current-position=\"left\"])::before{top:var(--arrow-center-x-offset);bottom:auto}";
-const ZPopoverStyle0 = stylesCss;
+const stylesCss = ".sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant=\"overlay\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant=\"pushcontent\"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0}@media (min-width: 768px){[variant=\"pushcontent\"].sc-z-offcanvas-h:not([transitiondirection=\"up\"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection=\"up\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection=\"right\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection=\"left\"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}";
+const ZOffcanvasStyle0 = stylesCss;
 
-const ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover extends HTMLElement {
+const ZOffcanvas = /*@__PURE__*/ proxyCustomElement(class ZOffcanvas extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
-        this.positionChange = createEvent(this, "positionChange", 7);
-        this.openChange = createEvent(this, "openChange", 7);
-        /** space tolerance for space calculations */
-        this.spaceTolerance = 3;
-        this.position = PopoverPosition.TOP;
+        this.canvasOpenStatusChanged = createEvent(this, "canvasOpenStatusChanged", 7);
+        this.variant = OffCanvasVariant.PUSHCONTENT;
         this.open = false;
-        this.bindTo = undefined;
-        this.showArrow = false;
-        this.center = false;
-        this.closable = true;
-        this.currentPosition = undefined;
-    }
-    closePopoverWithKeyboard(e) {
-        if (this.closable && e.key === KeyboardCode.ESC) {
-            this.open = false;
-        }
+        this.transitiondirection = TransitionDirection.LEFT;
+        this.skipLoadAnimation = false;
+        this.showBackdrop = true;
+        this.skipAnimation = false;
     }
     /**
-     * Close the popover when clicking outside of its content.
-     * Stop event propagation if the click was fired by popover's trigger element,
-     * to prevent close and reopen glitches.
+     * Stop the event default behavior and propagation when the offcanvas is closed.
      */
-    handleOutsideClick(e) {
-        const target = e.target;
-        if (!this.closable || !this.open || containsElement(this.host, target)) {
-            return;
-        }
-        if (containsElement(this.boundElement, target)) {
-            // stop propagation if the click was on the trigger element to prevent close and reopen glitches
-            e.stopPropagation();
-        }
-        this.open = false;
-    }
-    validatePosition(newValue) {
-        if (!Object.values(PopoverPosition).includes(newValue) || newValue === PopoverPosition.AUTO) {
-            newValue = PopoverPosition.TOP;
-            this.position = newValue;
-        }
-        this.currentPosition = newValue;
+    stopEvent(event) {
         if (this.open) {
-            this.setPosition();
-        }
-    }
-    /** Setup popover behaviors when `open` changes. */
-    onOpen() {
-        cancelAnimationFrame(this.animationFrameRequestId);
-        this.openChange.emit({ open: this.open });
-        if (!this.open) {
-            Object.assign(this.host.style, {
-                // Reset all positioning properties
-                top: "auto",
-                right: "auto",
-                bottom: "auto",
-                left: "auto",
-                maxWidth: "",
-                maxHeight: "",
-                // Set initial visibility to hidden while calculating position...
-                visibility: "hidden",
-            });
-            this.currentPosition = undefined;
             return;
         }
-        const updatePositionLoop = () => {
-            if (!this.open) {
-                return;
-            }
-            this.setPosition();
-            this.animationFrameRequestId = requestAnimationFrame(updatePositionLoop);
-        };
-        // call `setPosition` after a tick to ensure the DOM is ready and sizes are available
-        setTimeout(() => {
-            updatePositionLoop();
-        }, 0);
-    }
-    onBindingChange() {
-        this.findBoundElement();
-    }
-    /** Returns the offset modifier to use in calculations to align the popover with the bound element. */
-    get offsetModifier() {
-        return this.center ? 0.5 : 0;
-    }
-    findBoundElement() {
-        if (typeof this.bindTo === "string") {
-            this.boundElement = this.host.ownerDocument.querySelector(this.bindTo);
-        }
-        else if (this.bindTo) {
-            this.boundElement = this.bindTo;
-        }
-        else {
-            this.boundElement = this.host.parentElement;
-        }
-    }
-    /**
-     * Check if element has enough space to the right and left to be centered.
-     * Used for `TOP` and `BOTTOM` position.
-     * When `center` is not enabled, only one side needs to be checked and `RIGHT` is the default.
-     */
-    hasCenteredHorizontalSpace(availableLeft, availableRight, hostWidth, boundElementWidth) {
-        const requiredSideSpace = (hostWidth - boundElementWidth) * (1 - this.offsetModifier);
-        if (!this.center) {
-            return availableRight >= requiredSideSpace - this.spaceTolerance;
-        }
-        return (availableRight >= requiredSideSpace - this.spaceTolerance &&
-            availableLeft >= requiredSideSpace - this.spaceTolerance);
-    }
-    /**
-     * Check if element has enough space to the top and bottom to be centered.
-     * Used for `RIGHT` and `LEFT` position.
-     * When `center` is not enabled, only one side needs to be checked and `BOTTOM` is the default.
-     */
-    hasCenteredVerticalSpace(availableTop, availableBottom, hostHeight, boundElementHeight) {
-        const requiredSideSpace = (hostHeight - boundElementHeight) * (1 - this.offsetModifier);
-        if (!this.center) {
-            return availableBottom >= requiredSideSpace - this.spaceTolerance;
-        }
-        return (availableTop >= requiredSideSpace - this.spaceTolerance &&
-            availableBottom >= requiredSideSpace - this.spaceTolerance);
-    }
-    /**
-     * Check if there is enough space in the given direction to fit the popover.
-     * Used for composed positions like TOP_RIGHT, LEFT_BOTTOM, etc.
-     */
-    hasEnoughSideSpace(availableSpace, hostSize, boundElementSize, offsetModifier) {
-        return availableSpace >= hostSize - boundElementSize * (1 - offsetModifier) - this.spaceTolerance;
+        event.preventDefault();
+        event.stopPropagation();
     }
     /**
-     * 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.
+     * Hide the body overflow when the offcanvas is open.
      */
-    getOptimalPopoverPosition(desiredPosition, availableSpace) {
-        const hostWidth = this.host.offsetWidth;
-        const hostHeight = this.host.offsetHeight;
-        const boundElementWidth = this.boundElement.getBoundingClientRect().width;
-        const boundElementHeight = this.boundElement.getBoundingClientRect().height;
-        const offsetModifier = this.offsetModifier;
-        /** Check if there is enough space to fit the popover in the desired position */
-        const fits = (pos) => {
-            switch (pos) {
-                case PopoverPosition.TOP:
-                    return (availableSpace.top >= hostHeight - this.spaceTolerance &&
-                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth));
-                case PopoverPosition.TOP_RIGHT:
-                    return (availableSpace.top >= hostHeight &&
-                        this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier));
-                case PopoverPosition.TOP_LEFT:
-                    return (availableSpace.top >= hostHeight &&
-                        this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier));
-                case PopoverPosition.RIGHT:
-                    return (availableSpace.right >= hostWidth &&
-                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight));
-                case PopoverPosition.RIGHT_BOTTOM:
-                    return (availableSpace.right >= hostWidth &&
-                        this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, offsetModifier));
-                case PopoverPosition.RIGHT_TOP:
-                    return (availableSpace.right >= hostWidth &&
-                        this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier));
-                case PopoverPosition.BOTTOM:
-                    return (availableSpace.bottom >= hostHeight &&
-                        this.hasCenteredHorizontalSpace(availableSpace.left, availableSpace.right, hostWidth, boundElementWidth));
-                case PopoverPosition.BOTTOM_LEFT:
-                    return (availableSpace.bottom >= hostHeight &&
-                        this.hasEnoughSideSpace(availableSpace.left, hostWidth, boundElementWidth, offsetModifier));
-                case PopoverPosition.BOTTOM_RIGHT:
-                    return (availableSpace.bottom >= hostHeight &&
-                        this.hasEnoughSideSpace(availableSpace.right, hostWidth, boundElementWidth, offsetModifier));
-                case PopoverPosition.LEFT:
-                    return (availableSpace.left >= hostWidth &&
-                        this.hasCenteredVerticalSpace(availableSpace.top, availableSpace.bottom, hostHeight, boundElementHeight));
-                case PopoverPosition.LEFT_TOP:
-                    return (availableSpace.left >= hostWidth &&
-                        this.hasEnoughSideSpace(availableSpace.top, hostHeight, boundElementHeight, offsetModifier));
-                case PopoverPosition.LEFT_BOTTOM:
-                    return (availableSpace.left >= hostWidth &&
-                        this.hasEnoughSideSpace(availableSpace.bottom, hostHeight, boundElementHeight, 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;
-            }
-        }
-        return this.findBestFallbackPosition(availableSpace);
-    }
-    /** Find the best fallback position based on available space when no position fits perfectly. */
-    findBestFallbackPosition(availableSpace) {
-        // Determine which horizontal and vertical direction has the most available 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 axis has more space overall
-        const maxHorizontalSpace = Math.max(availableSpace.right, availableSpace.left);
-        const maxVerticalSpace = Math.max(availableSpace.bottom, availableSpace.top);
-        const mainDirection = maxVerticalSpace >= maxHorizontalSpace ? bestVerticalDirection : bestHorizontalDirection;
-        // Decide if a secondary direction is needed
-        // Only add a secondary direction if the difference between min and max in that axis is at least double
-        let needsSecondaryDirection = false;
-        if (mainDirection === bestVerticalDirection) {
-            // If main direction is vertical, check horizontal space difference
-            const minHorizontalSpace = Math.min(availableSpace.right, availableSpace.left);
-            needsSecondaryDirection = maxHorizontalSpace >= minHorizontalSpace * 2;
+    handlePageOverflow() {
+        const overflow = this.variant === OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP
+            ? "overflow-y"
+            : "overflow-x";
+        document.body.style[overflow] = this.open ? "hidden" : "";
+    }
+    onOpenChanged() {
+        var _a;
+        this.canvasOpenStatusChanged.emit(this.open);
+        if (!this.open) {
+            // when the offcanvas is closing, wait for the transitionend event to end before handling the body overflow
+            const listenerCallback = () => {
+                this.handlePageOverflow();
+                this.canvasContainer.removeEventListener("transitionend", listenerCallback);
+            };
+            (_a = this.canvasContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", listenerCallback);
         }
         else {
-            // If 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;
-        // Return a combined position (e.g., "bottom_right")
-        return `${mainDirection}_${secondaryDirection}`;
-    }
-    /**
-     * Calculate available space around the element bound with the popover, based on its nearest scrollable ancestor.
-     *
-     * Calculations for `right` and `bottom` can be a little bit confusing because `boundingRect.right` and `bottom` may not be what you expect...
-     * For more information see the explanation in the docs.
-     * @link https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#return_value
-     */
-    calculateAvailableSpace() {
-        const boundElementRect = this.boundElement.getBoundingClientRect();
-        if (this.lastBoundRect &&
-            this.lastBoundRect.x === boundElementRect.x &&
-            this.lastBoundRect.y === boundElementRect.y &&
-            this.lastBoundRect.width === boundElementRect.width &&
-            this.lastBoundRect.height === boundElementRect.height &&
-            this.cachedAvailableSpace) {
-            // If the bound element's rect hasn't changed, return the cached rect
-            return this.cachedAvailableSpace;
+            this.handlePageOverflow();
         }
-        this.lastBoundRect = boundElementRect;
-        const scrollableParent = findScrollableParent(this.boundElement);
-        const scrollableParentRect = scrollableParent.getBoundingClientRect();
-        const hasNestedScrollableParent = scrollableParent !== this.boundElement.ownerDocument.documentElement;
-        const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;
-        const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;
-        const safeSpace = 8; // extra space to avoid popover being too close to the edges
-        // These deltas represent the offset between the scrollable parent and the viewport.
-        // They are used to adjust the available space calculations when the scrollable parent is not the document or body,
-        // to try to fit the popover inside the scrollable parent.
-        const deltaTop = hasNestedScrollableParent ? scrollableParentRect.top : 0;
-        const deltaRight = hasNestedScrollableParent ? documentWidth - scrollableParentRect.right : 0;
-        const deltaBottom = hasNestedScrollableParent ? documentHeight - scrollableParentRect.bottom : 0;
-        const deltaLeft = hasNestedScrollableParent ? scrollableParentRect.left : 0;
-        this.cachedAvailableSpace = {
-            top: boundElementRect.top - deltaTop - safeSpace,
-            right: documentWidth - boundElementRect.right - deltaRight - safeSpace,
-            bottom: documentHeight - boundElementRect.bottom - deltaBottom - safeSpace,
-            left: boundElementRect.left - deltaLeft - safeSpace,
-        };
-        return this.cachedAvailableSpace;
     }
-    /** Calculate the space around an element relative to the viewport. */
-    calculateElementOffsets(element) {
-        const elementRect = element.getBoundingClientRect();
-        const viewportWidth = element.ownerDocument.documentElement.clientWidth;
-        const viewportHeight = element.ownerDocument.documentElement.clientHeight;
-        return {
-            top: elementRect.top,
-            right: viewportWidth - elementRect.right,
-            bottom: viewportHeight - elementRect.bottom,
-            left: elementRect.left,
-        };
-    }
-    /** Apply positioning styles based on passed position. */
-    applyPositionStyles(position, availableSpace) {
-        const boundElementWidth = this.boundElement.offsetWidth;
-        const boundElementHeight = this.boundElement.offsetHeight;
-        /** Distance between the popover and the bound element */
-        const distanceFromBound = 8;
-        const offsetModifier = this.offsetModifier;
-        /** Distance between the arrow center and the popover edge. Needed to align the center of the arrow with the center of the bound element when `showArrow` and `center` are enabled. */
-        const arrowModifier = this.showArrow && this.center ? 8 : 0;
-        const hostStyle = this.host.style;
-        const boundElementOffsets = this.calculateElementOffsets(this.boundElement);
-        let maxWidth;
-        let maxHeight;
-        switch (position) {
-            case PopoverPosition.TOP:
-            case PopoverPosition.TOP_RIGHT:
-                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;
-                hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.TOP_RIGHT ? arrowModifier : 0)}px`;
-                maxHeight = availableSpace.top - distanceFromBound;
-                if (position === PopoverPosition.TOP_RIGHT) {
-                    maxWidth = availableSpace.right + boundElementWidth * offsetModifier;
-                }
-                break;
-            case PopoverPosition.TOP_LEFT:
-                hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;
-                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight}px`;
-                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
-                maxHeight = availableSpace.top - distanceFromBound;
-                break;
-            case PopoverPosition.BOTTOM:
-            case PopoverPosition.BOTTOM_RIGHT:
-                hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;
-                hostStyle.left = `${boundElementOffsets.left + boundElementWidth * offsetModifier - (position === PopoverPosition.BOTTOM_RIGHT ? arrowModifier : 0)}px`;
-                maxHeight = availableSpace.bottom - distanceFromBound;
-                if (position === PopoverPosition.BOTTOM_RIGHT) {
-                    maxWidth = availableSpace.right + boundElementWidth * offsetModifier;
-                }
-                break;
-            case PopoverPosition.BOTTOM_LEFT:
-                hostStyle.top = `${boundElementOffsets.top + boundElementHeight}px`;
-                hostStyle.right = `${boundElementOffsets.right + boundElementWidth * offsetModifier - arrowModifier}px`;
-                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
-                maxHeight = availableSpace.bottom - distanceFromBound;
-                break;
-            case PopoverPosition.RIGHT:
-            case PopoverPosition.RIGHT_BOTTOM:
-                hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;
-                maxWidth = availableSpace.right - distanceFromBound;
-                if (position === PopoverPosition.RIGHT) {
-                    maxHeight = availableSpace.top + availableSpace.bottom + boundElementHeight;
-                }
-                else {
-                    maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
-                }
-                break;
-            case PopoverPosition.RIGHT_TOP:
-                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;
-                hostStyle.left = `${boundElementOffsets.left + boundElementWidth}px`;
-                maxWidth = availableSpace.right - distanceFromBound;
-                maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
-                break;
-            case PopoverPosition.LEFT:
-            case PopoverPosition.LEFT_BOTTOM:
-                hostStyle.top = `${boundElementOffsets.top + boundElementHeight * offsetModifier - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;
-                maxWidth = availableSpace.left - distanceFromBound;
-                if (position === PopoverPosition.LEFT_BOTTOM) {
-                    maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
-                }
-                break;
-            case PopoverPosition.LEFT_TOP:
-                hostStyle.right = `${boundElementOffsets.right + boundElementWidth}px`;
-                hostStyle.bottom = `${boundElementOffsets.bottom + boundElementHeight * offsetModifier - arrowModifier}px`;
-                maxWidth = availableSpace.left - distanceFromBound;
-                maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
-                break;
-        }
-        if (getDevice() !== Device.MOBILE) {
-            // Only force max sizes on non-mobile viewports
-            Object.assign(hostStyle, {
-                maxWidth: maxWidth ? `${maxWidth}px` : "",
-                maxHeight: maxHeight ? `${maxHeight}px` : "",
-            });
+    componentWillLoad() {
+        if (this.open) {
+            this.skipAnimation = true;
         }
     }
-    /** Set the position of the popover. */
-    setPosition() {
-        if (!this.boundElement) {
-            return;
-        }
-        if (!isElementVisibleInContainer(this.boundElement, findScrollableParent(this.boundElement))) {
-            // If the bound element is not visible, hide the popover too
-            this.open = false;
-            return;
-        }
-        Object.assign(this.host.style, {
-            // Reset all positioning properties
-            top: "auto",
-            right: "auto",
-            bottom: "auto",
-            left: "auto",
-            maxWidth: "",
-            maxHeight: "",
-            // Set initial visibility to hidden while calculating position...
-            visibility: "hidden",
-        });
-        const availableSpace = this.calculateAvailableSpace();
-        const position = this.getOptimalPopoverPosition(this.position, availableSpace);
-        this.applyPositionStyles(position, availableSpace);
-        this.currentPosition = position;
-        this.positionChange.emit({ position: this.currentPosition });
-        // ...then restore the visibility
-        this.host.style.visibility = "visible";
+    componentDidLoad() {
+        this.handlePageOverflow();
     }
-    componentWillLoad() {
-        this.validatePosition(this.position);
+    componentDidRender() {
+        this.skipAnimation = false;
     }
-    componentDidLoad() {
-        this.findBoundElement();
-        if (this.open) {
-            this.onOpen();
-        }
+    connectedCallback() {
+        this.handlePageOverflow();
     }
     disconnectedCallback() {
-        cancelAnimationFrame(this.animationFrameRequestId);
+        this.open = false;
     }
     render() {
-        return (h(Host, { key: 'bb4de929f55c973afca21cd9b0ddea9f24194e3e', "current-position": this.currentPosition }, h("slot", { key: '40df21ad7258139c4296a792f9105229b7379dd1' })));
+        return (h(Host, { key: '52ce71415709ffe342802b789448fe168eef9d3d', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '93173c6176acd24a8f02541b5becd3dfd7f98ac3', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '82b36a24cbf7856d8f8ee17952e0cf733529f7ae', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: 'e5281598686c2d0de459045ceaa81c1c31dbcd22', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'b912144f9bf525114394cd03f84f38f810c8cb29', class: "backdrop", onClick: () => (this.open = false) }))));
     }
-    get host() { return this; }
     static get watchers() { return {
-        "position": ["validatePosition"],
-        "open": ["onOpen"],
-        "bindTo": ["onBindingChange"]
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
     }; }
-    static get style() { return ZPopoverStyle0; }
-}, [1, "z-popover", {
-        "position": [1537],
+    static get style() { return ZOffcanvasStyle0; }
+}, [6, "z-offcanvas", {
+        "variant": [513],
         "open": [1540],
-        "bindTo": [1, "bind-to"],
-        "showArrow": [516, "show-arrow"],
-        "center": [516],
-        "closable": [4],
-        "currentPosition": [32]
-    }, [[8, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
-        "position": ["validatePosition"],
-        "open": ["onOpen"],
-        "bindTo": ["onBindingChange"]
+        "transitiondirection": [513],
+        "skipLoadAnimation": [4, "skip-load-animation"],
+        "showBackdrop": [4, "show-backdrop"],
+        "skipAnimation": [32]
+    }, [[2, "click", "stopEvent"], [2, "focusin", "stopEvent"]], {
+        "variant": ["handlePageOverflow"],
+        "open": ["onOpenChanged"]
     }]);
-// Clockwise order of positions.
-ZPopover.positionOrder = [
-    PopoverPosition.TOP,
-    PopoverPosition.TOP_RIGHT,
-    PopoverPosition.TOP_LEFT,
-    PopoverPosition.RIGHT,
-    PopoverPosition.RIGHT_BOTTOM,
-    PopoverPosition.RIGHT_TOP,
-    PopoverPosition.BOTTOM,
-    PopoverPosition.BOTTOM_LEFT,
-    PopoverPosition.BOTTOM_RIGHT,
-    PopoverPosition.LEFT,
-    PopoverPosition.LEFT_TOP,
-    PopoverPosition.LEFT_BOTTOM,
-];
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-popover"];
+    const components = ["z-offcanvas"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-popover":
+        case "z-offcanvas":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZPopover);
+                customElements.define(tagName, ZOffcanvas);
             }
             break;
     } });
 }
 
-export { ZPopover as Z, defineCustomElement as d };
+export { ZOffcanvas as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index23.js.map