@zanichelli/albe-web-components 19.2.1 → 19.2.3-RC1

package/dist/components/index24.js

@@ -1,549 +1 @@
-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 getParentElement, j as findContainingBlockAncestor, g as getDevice, k as isElementVisibleInContainer } from './utils.js';
-
-const stylesCss = ":host{position:fixed;display:none;max-width:calc(100dvw - var(--grid-margin) * 2);max-height:calc(100dvh - 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 ZPopover = /*@__PURE__*/ proxyCustomElement(class ZPopover 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.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) {
-            e.stopPropagation();
-            this.open = 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.
-     */
-    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;
-        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 = getParentElement(this.host);
-            if (this.boundElement.tagName.toLowerCase() === "z-tooltip") {
-                // If the popover is used inside a tooltip without a specified `bindTo`, bind it to the parent of the tooltip.
-                this.boundElement = getParentElement(this.boundElement);
-            }
-        }
-    }
-    /**
-     * 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;
-    }
-    /**
-     * 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.
-     */
-    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;
-        }
-        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}`;
-    }
-    /**
-     * Find the nearest scrollable ancestor of an element to take as a reference for positioning.
-     * The ancestor is considered scrollable if it doesn't have `overflow` property set to `hidden` and its scroll size is bigger than its client size.
-     */
-    findScrollableAncestor(element) {
-        let parent = getParentElement(element);
-        while (parent) {
-            if (parent === element.ownerDocument.documentElement) {
-                return parent;
-            }
-            const style = getComputedStyle(parent);
-            const { overflow, overflowX, overflowY } = style;
-            const hasHiddenOverflow = overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden";
-            const isScrollable = (parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
-                (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible");
-            if (!hasHiddenOverflow && isScrollable) {
-                return parent;
-            }
-            parent = getParentElement(parent);
-        }
-        return element.ownerDocument.documentElement;
-    }
-    /**
-     * 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.lastBoundRect = boundElementRect;
-        const scrollableAncestor = this.findScrollableAncestor(this.boundElement);
-        const scrollableAncestorRect = scrollableAncestor.getBoundingClientRect();
-        const isScrollableAncestorNested = scrollableAncestor !== 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 ancestor and the viewport.
-        // They are used to adjust the available space calculations when the scrollable ancestor is not the document or body,
-        // to try to fit the popover inside the scrollable ancestor.
-        const deltaTop = isScrollableAncestorNested ? scrollableAncestorRect.top : 0;
-        const deltaRight = isScrollableAncestorNested ? documentWidth - scrollableAncestorRect.right : 0;
-        const deltaBottom = isScrollableAncestorNested ? documentHeight - scrollableAncestorRect.bottom : 0;
-        const deltaLeft = isScrollableAncestorNested ? scrollableAncestorRect.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 the bound element relative to the viewport. */
-    getBoundElementOffsets() {
-        const elementRect = this.boundElement.getBoundingClientRect();
-        const documentWidth = this.boundElement.ownerDocument.documentElement.clientWidth;
-        const documentHeight = this.boundElement.ownerDocument.documentElement.clientHeight;
-        return {
-            top: elementRect.top,
-            right: documentWidth - elementRect.right,
-            bottom: documentHeight - elementRect.bottom,
-            left: elementRect.left,
-        };
-    }
-    /** Compute positioning offsets in the appropriate coordinate space, accounting for transformed containing blocks and scroll. */
-    computePositionOffsets() {
-        const boundElementOffsets = this.getBoundElementOffsets();
-        const containingBlockAncestor = findContainingBlockAncestor(this.host);
-        const isDocumentElement = containingBlockAncestor === this.host.ownerDocument.documentElement;
-        if (isDocumentElement) {
-            return boundElementOffsets;
-        }
-        const containingBlockRect = containingBlockAncestor.getBoundingClientRect();
-        const containingBlockStyle = getComputedStyle(containingBlockAncestor);
-        /** Padding box of the containing block, accounting for borders. */
-        const paddingBox = {
-            top: containingBlockRect.top + parseFloat(containingBlockStyle.borderTopWidth),
-            right: containingBlockRect.right - parseFloat(containingBlockStyle.borderRightWidth),
-            bottom: containingBlockRect.bottom - parseFloat(containingBlockStyle.borderBottomWidth),
-            left: containingBlockRect.left + parseFloat(containingBlockStyle.borderLeftWidth),
-        };
-        const boundElementRect = this.boundElement.getBoundingClientRect();
-        /** Bound element offsets relative to the containing block padding box. */
-        const relativeOffsets = {
-            top: boundElementRect.top - paddingBox.top,
-            right: paddingBox.right - boundElementRect.right,
-            bottom: paddingBox.bottom - boundElementRect.bottom,
-            left: boundElementRect.left - paddingBox.left,
-        };
-        /** Account for scroll to keep the popover aligned while the containing block scrolls. */
-        return {
-            top: relativeOffsets.top + containingBlockAncestor.scrollTop,
-            right: relativeOffsets.right - containingBlockAncestor.scrollLeft,
-            bottom: relativeOffsets.bottom - containingBlockAncestor.scrollTop,
-            left: relativeOffsets.left + containingBlockAncestor.scrollLeft,
-        };
-    }
-    /** Apply positioning styles based on `position` parameter. */
-    applyPositionStyles(position, availableSpace) {
-        const boundElementWidth = this.boundElement.offsetWidth;
-        const boundElementHeight = this.boundElement.offsetHeight;
-        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;
-        /** Gap between the popover and the bound element, set as margin in CSS. */
-        const distanceFromBound = parseFloat(getComputedStyle(this.host).marginTop.replace("px", "")) || 0;
-        const positionOffsets = this.computePositionOffsets();
-        /**
-         * Precomputed bases to reduce repeated arithmetic in the switch below.
-         * They represent the bound element edges plus optional centering offsets.
-         */
-        const leftBase = positionOffsets.left + boundElementWidth * offsetModifier;
-        const rightBase = positionOffsets.right + boundElementWidth * offsetModifier;
-        const topBase = positionOffsets.top + boundElementHeight;
-        const bottomBase = positionOffsets.bottom + boundElementHeight;
-        const sideTopBase = positionOffsets.top + boundElementHeight * offsetModifier;
-        const sideBottomBase = positionOffsets.bottom + boundElementHeight * offsetModifier;
-        let maxWidth;
-        let maxHeight;
-        switch (position) {
-            case PopoverPosition.TOP:
-            case PopoverPosition.TOP_RIGHT:
-                hostStyle.bottom = `${bottomBase}px`;
-                hostStyle.left = `${leftBase - (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 = `${rightBase - arrowModifier}px`;
-                hostStyle.bottom = `${bottomBase}px`;
-                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
-                maxHeight = availableSpace.top - distanceFromBound;
-                break;
-            case PopoverPosition.BOTTOM:
-            case PopoverPosition.BOTTOM_RIGHT:
-                hostStyle.top = `${topBase}px`;
-                hostStyle.left = `${leftBase - (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 = `${topBase}px`;
-                hostStyle.right = `${rightBase - arrowModifier}px`;
-                maxWidth = availableSpace.left + boundElementWidth * offsetModifier;
-                maxHeight = availableSpace.bottom - distanceFromBound;
-                break;
-            case PopoverPosition.RIGHT:
-            case PopoverPosition.RIGHT_BOTTOM:
-                hostStyle.top = `${sideTopBase - (position === PopoverPosition.RIGHT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.left = `${positionOffsets.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 = `${sideBottomBase - arrowModifier}px`;
-                hostStyle.left = `${positionOffsets.left + boundElementWidth}px`;
-                maxWidth = availableSpace.right - distanceFromBound;
-                maxHeight = availableSpace.top + boundElementHeight * offsetModifier;
-                break;
-            case PopoverPosition.LEFT:
-            case PopoverPosition.LEFT_BOTTOM:
-                hostStyle.top = `${sideTopBase - (position === PopoverPosition.LEFT_BOTTOM ? arrowModifier : 0)}px`;
-                hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;
-                maxWidth = availableSpace.left - distanceFromBound;
-                if (position === PopoverPosition.LEFT_BOTTOM) {
-                    maxHeight = availableSpace.bottom + boundElementHeight * offsetModifier;
-                }
-                break;
-            case PopoverPosition.LEFT_TOP:
-                hostStyle.right = `${positionOffsets.right + boundElementWidth}px`;
-                hostStyle.bottom = `${sideBottomBase - 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` : "",
-            });
-        }
-    }
-    /** Set the position of the popover. */
-    setPosition() {
-        if (!this.boundElement) {
-            return;
-        }
-        if (!isElementVisibleInContainer(this.boundElement, this.findScrollableAncestor(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";
-    }
-    componentWillLoad() {
-        this.validatePosition(this.position);
-    }
-    componentDidLoad() {
-        this.findBoundElement();
-        if (this.open) {
-            this.onOpen();
-        }
-    }
-    disconnectedCallback() {
-        cancelAnimationFrame(this.animationFrameRequestId);
-    }
-    render() {
-        return (h(Host, { key: 'c3483157f2664088a337118936d81f551dcf25b1', "current-position": this.currentPosition }, h("slot", { key: 'fc9856b30959fc041dbf295fe7bbf523ce6adaf6' })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "position": ["validatePosition"],
-        "open": ["onOpen"],
-        "bindTo": ["onBindingChange"]
-    }; }
-    static get style() { return ZPopoverStyle0; }
-}, [1, "z-popover", {
-        "position": [1537],
-        "open": [1540],
-        "bindTo": [1, "bind-to"],
-        "showArrow": [516, "show-arrow"],
-        "center": [516],
-        "closable": [4],
-        "currentPosition": [32]
-    }, [[10, "keyup", "closePopoverWithKeyboard"], [18, "click", "handleOutsideClick"]], {
-        "position": ["validatePosition"],
-        "open": ["onOpen"],
-        "bindTo": ["onBindingChange"]
-    }]);
-// 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"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-popover":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZPopover);
-            }
-            break;
-    } });
-}
-
-export { ZPopover as Z, defineCustomElement as d };
-
-//# sourceMappingURL=index24.js.map
+import{proxyCustomElement as t,HTMLElement as e,h as s,transformTag as r}from"@stencil/core/internal/client";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}hadleOnImageError(){this.img=this.defaultimg}render(){return s("img",{key:"5d148d2ef8ab0f6075a368593da59a860ce575be",class:this.faded&&"faded",onError:this.hadleOnImageError.bind(this),alt:this.titolo,src:this.img})}static get style(){return"img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}"}},[1,"z-myz-card-cover",{img:[1],titolo:[1],faded:[4],defaultimg:[1]}]);function a(){"undefined"!=typeof customElements&&["z-myz-card-cover"].forEach((t=>{"z-myz-card-cover"===t&&(customElements.get(r(t))||customElements.define(r(t),i))}))}export{i as Z,a as d}