'use strict';

var index = require('./index-CpWVsZ_u.js');
var tracking = require('./tracking-BPjaTlNR.js');
var domUtils = require('./dom-utils-BdvOgC2b.js');

const popoverCss = () => `:host{display:inline-block;position:relative}.popover__container{position:relative;display:inline-block;font-family:var(--ifx-font-family)}.popover{position:absolute;z-index:1000;display:none;background:#FFFFFF;box-shadow:0 0 16px 0 rgba(29, 29, 29, 0.1);width:var(--ifx-popover-width, 240px);min-width:var(--ifx-popover-width, 240px);max-width:320px;pointer-events:auto;box-sizing:border-box}.popover.visible{display:flex;flex-direction:column}.popover--disabled{opacity:0.5;pointer-events:none}.popover-close{all:unset;cursor:pointer;position:absolute;top:12px;right:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;height:24px;transition:background-color 0.2s ease}.popover-close:hover{background-color:#F7F7F7}.popover-close:focus{outline:2px solid #0A8276;outline-offset:1px}.popover-content{display:flex;flex-direction:column;padding:12px;gap:4px;text-align:left}.popover-title{font-size:1rem;font-weight:600;color:#1D1D1D;margin:0;padding-right:24px;text-align:left}.popover-text{font-size:0.875rem;font-weight:400;line-height:1.25rem;color:#575352;margin:0;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;text-align:left}.popover-arrow-svg{position:absolute;width:12px;height:8px;color:#FFFFFF;pointer-events:none;z-index:1001}.popover-arrow-svg path{fill:currentColor}`;

const Popover = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.ifxOpen = index.createEvent(this, "ifxOpen", 7);
        this.ifxClose = index.createEvent(this, "ifxClose", 7);
    }
    get el() { return index.getElement(this); }
    popoverVisible = false;
    computedArrowPosition = {};
    /** Title text displayed in the popover header */
    popoverTitle = '';
    /** Body text displayed in the popover content */
    text = '';
    /** Position of the popover relative to the trigger element */
    position = 'auto';
    /** Whether the popover is disabled */
    disabled = false;
    /** Whether the popover is initially open */
    open = false;
    /** Accessible label for the popover */
    ariaLabel = null;
    /** Emitted when the popover is opened */
    ifxOpen;
    ifxClose;
    static GAP = 12;
    popoverEl;
    triggerEl;
    lastOpenTrigger = null;
    openChanged(newValue) {
        this.popoverVisible = newValue;
        if (!this.popoverEl)
            return;
        if (newValue) {
            this.popoverEl.style.visibility = 'hidden';
            this.popoverEl.style.display = 'flex';
            this.positionPopover();
            this.popoverEl.style.visibility = 'visible';
        }
        else {
            this.popoverEl.style.display = 'none';
            this.popoverEl.style.visibility = '';
        }
    }
    async componentDidLoad() {
        if (!domUtils.isNestedInIfxComponent(this.el)) {
            const framework = tracking.detectFramework();
            tracking.trackComponent('ifx-popover', await framework);
        }
        this.popoverEl = this.el.shadowRoot.querySelector('.popover');
        this.setupTriggerElement();
        this.popoverVisible = this.open;
        if (this.open) {
            this.popoverEl.style.visibility = 'hidden';
            this.popoverEl.style.display = 'flex';
            this.positionPopover();
            this.popoverEl.style.visibility = 'visible';
            this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
        }
        // Outside click closing disabled by design
    }
    setupTriggerElement() {
        this.cleanupTriggerListeners();
        const slotElements = Array.from(this.el.children);
        this.triggerEl = slotElements[0] || this.el;
        this.triggerEl.addEventListener('click', this.onClick);
    }
    disconnectedCallback() {
        this.cleanupTriggerListeners();
    }
    cleanupTriggerListeners() {
        if (!this.triggerEl)
            return;
        this.triggerEl.removeEventListener('click', this.onClick);
    }
    getViewportSpace(triggerRect) {
        return {
            above: triggerRect.top,
            below: window.innerHeight - triggerRect.bottom,
            left: triggerRect.left,
            right: window.innerWidth - triggerRect.right
        };
    }
    resetPositioningStyles() {
        if (!this.popoverEl)
            return;
        this.popoverEl.style.top = '';
        this.popoverEl.style.bottom = '';
        this.popoverEl.style.left = '';
        this.popoverEl.style.right = '';
        this.popoverEl.style.transform = '';
        this.popoverEl.style.visibility = '';
    }
    positionPopover() {
        if (!this.popoverEl || !this.triggerEl)
            return;
        const triggerRect = this.triggerEl.getBoundingClientRect();
        const popoverRect = this.popoverEl.getBoundingClientRect();
        const space = this.getViewportSpace(triggerRect);
        let position = this.position;
        if (position === 'auto') {
            position = this.getBestPosition(popoverRect, space);
        }
        else {
            position = this.validateAndAdjustPosition(position, popoverRect, space);
        }
        this.resetPositioningStyles();
        const { popoverStyle, arrowStyle } = this.calculatePosition(triggerRect, popoverRect, position);
        Object.assign(this.popoverEl.style, popoverStyle);
        this.computedArrowPosition = arrowStyle;
        this.popoverEl.setAttribute('data-placement', position);
    }
    getBestPosition(popoverRect, space) {
        const gap = Popover.GAP;
        if (space.above >= popoverRect.height + gap) {
            return 'top';
        }
        else if (space.below >= popoverRect.height + gap) {
            return 'bottom';
        }
        else if (space.right >= popoverRect.width + gap) {
            return 'right';
        }
        else if (space.left >= popoverRect.width + gap) {
            return 'left';
        }
        return 'bottom';
    }
    validateAndAdjustPosition(desiredPosition, popoverRect, space) {
        const gap = Popover.GAP;
        switch (desiredPosition) {
            case 'top':
            case 'top-start':
            case 'top-end':
                if (space.above >= popoverRect.height + gap)
                    return desiredPosition;
                if (space.below >= popoverRect.height + gap)
                    return 'bottom';
                if (space.left >= popoverRect.width + gap)
                    return 'left';
                if (space.right >= popoverRect.width + gap)
                    return 'right';
                return 'bottom';
            case 'bottom':
            case 'bottom-start':
            case 'bottom-end':
                if (space.below >= popoverRect.height + gap)
                    return desiredPosition;
                if (space.above >= popoverRect.height + gap)
                    return 'top';
                if (space.left >= popoverRect.width + gap)
                    return 'left';
                if (space.right >= popoverRect.width + gap)
                    return 'right';
                return 'top';
            case 'left':
                if (space.left >= popoverRect.width + gap)
                    return 'left';
                if (space.right >= popoverRect.width + gap)
                    return 'right';
                if (space.below >= popoverRect.height + gap)
                    return 'bottom';
                if (space.above >= popoverRect.height + gap)
                    return 'top';
                return 'right';
            case 'right':
                if (space.right >= popoverRect.width + gap)
                    return 'right';
                if (space.left >= popoverRect.width + gap)
                    return 'left';
                if (space.below >= popoverRect.height + gap)
                    return 'bottom';
                if (space.above >= popoverRect.height + gap)
                    return 'top';
                return 'left';
            default:
                return 'bottom';
        }
    }
    calculatePosition(triggerRect, popoverRect, position) {
        const gap = Popover.GAP;
        const popoverStyle = {
            position: 'absolute',
            zIndex: '1000'
        };
        let arrowStyle = {};
        switch (position) {
            case 'top-start':
                popoverStyle.left = `0px`;
                popoverStyle.bottom = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    top: `100%`,
                    left: '12px'
                };
                break;
            case 'top-end':
                popoverStyle.right = `0px`;
                popoverStyle.bottom = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    top: `100%`,
                    right: '12px'
                };
                break;
            case 'top':
                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
                popoverStyle.bottom = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    top: `100%`,
                    left: '50%',
                    transform: 'translateX(-50%)'
                };
                break;
            case 'bottom-start':
                popoverStyle.left = `0px`;
                popoverStyle.top = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    bottom: `100%`,
                    left: '12px',
                    transform: 'rotate(180deg)'
                };
                break;
            case 'bottom-end':
                popoverStyle.right = `0px`;
                popoverStyle.top = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    bottom: `100%`,
                    right: '12px',
                    transform: 'rotate(180deg)'
                };
                break;
            case 'bottom':
                popoverStyle.left = `${(triggerRect.width / 2) - (popoverRect.width / 2)}px`;
                popoverStyle.top = `${triggerRect.height + gap}px`;
                arrowStyle = {
                    bottom: `100%`,
                    left: '50%',
                    transform: 'translateX(-50%) rotate(180deg)'
                };
                break;
            case 'left':
                popoverStyle.right = `${triggerRect.width + gap}px`;
                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
                arrowStyle = {
                    top: '50%',
                    right: '-10px',
                    transform: 'translateY(-50%) rotate(-90deg)'
                };
                break;
            case 'right':
                popoverStyle.left = `${triggerRect.width + gap}px`;
                popoverStyle.top = `${(triggerRect.height / 2) - (popoverRect.height / 2)}px`;
                arrowStyle = {
                    top: '50%',
                    left: '-10px',
                    transform: 'translateY(-50%) rotate(90deg)'
                };
                break;
        }
        return { popoverStyle, arrowStyle };
    }
    positionChanged() {
        if (this.popoverVisible) {
            setTimeout(() => this.positionPopover(), 0);
        }
    }
    /** Programmatically show the popover */
    async show() {
        if (this.disabled)
            return;
        this.open = true;
        this.popoverEl.style.visibility = 'hidden';
        this.popoverEl.style.display = 'flex';
        this.positionPopover();
        this.popoverEl.style.visibility = 'visible';
        this.popoverVisible = true;
        this.lastOpenTrigger = this.triggerEl || null;
        this.ifxOpen.emit({ trigger: this.lastOpenTrigger });
    }
    /** Programmatically hide the popover */
    async hide() {
        this.open = false;
        this.popoverVisible = false;
        if (this.popoverEl) {
            this.popoverEl.style.display = 'none';
            this.popoverEl.style.visibility = '';
        }
        this.ifxClose.emit();
    }
    /** Programmatically toggle the popover visibility */
    async toggle() {
        if (this.popoverVisible) {
            this.hide();
        }
        else {
            this.show();
        }
    }
    onClick = (event) => {
        event.stopPropagation();
        this.lastOpenTrigger = this.triggerEl || event.currentTarget || null;
        this.toggle();
    };
    onCloseClick = (event) => {
        event.stopPropagation();
        this.hide();
    };
    render() {
        const popoverClass = {
            'popover': true,
            'visible': this.popoverVisible,
            'popover--disabled': this.disabled
        };
        const arrowStyles = {
            position: 'absolute',
            ...this.computedArrowPosition
        };
        return (index.h("div", { key: 'c1b430bdb99d78ec510a984f1502cc8e807cd01d', class: "popover__container", "aria-label": this.ariaLabel }, index.h("slot", { key: 'd981267d9458c2a4b3fbdb1043e7d9dc9b04762b' }), index.h("div", { key: '36a8b680aae512a51a0860c639f3e3e4e058c83d', class: popoverClass, role: "dialog", "aria-modal": "false" }, index.h("button", { key: 'df82bf8ea282ad4831cd574d71c8168ac1a9d83f', "aria-label": "Close Popover", class: "popover-close", onClick: this.onCloseClick }, index.h("ifx-icon", { key: '13efb0bd8de10c29bfcae0bd6d9e13319204b46c', icon: "cross16" })), index.h("div", { key: '44d93330f66d17f5e0ba01c7b810d0326003b3cd', class: "popover-content" }, this.popoverTitle && index.h("div", { key: '76dc758b7a6ac465caeb9afdaed0167a07ea1d1b', class: "popover-title" }, this.popoverTitle), this.text && index.h("div", { key: '4c498f48b3792bed41e410c23422ab60375cfd67', class: "popover-text" }, this.text), index.h("slot", { key: '98d6669a4e7fb9d23341aa14771629271fa1a7d6', name: "content" })), index.h("svg", { key: '2119f3248dec260a643ee5e44994751d8612431c', class: "popover-arrow-svg", xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", style: arrowStyles }, index.h("path", { key: '7b395305ca25a5406197e8a7b78be01e9f9d1e98', d: "M6 8L0 0L12 0L6 8Z", fill: "currentColor" })))));
    }
    static get watchers() { return {
        "open": [{
                "openChanged": 0
            }],
        "position": [{
                "positionChanged": 0
            }]
    }; }
};
Popover.style = popoverCss();

exports.ifx_popover = Popover;
//# sourceMappingURL=ifx-popover.entry.cjs.js.map

//# sourceMappingURL=ifx-popover.cjs.entry.js.map