import { r as registerInstance, a as getElement, h } from './index-Cby2wKoI.js';
import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';
import { c as createPopper } from './popper-BfP9ezJQ.js';

const tooltipCss = () => `:host{display:inline-flex}.tooltip__container{display:inline-flex;flex-direction:column;position:relative;font-family:var(--ifx-font-family)}.tooltip-extended,.tooltip-compact,.tooltip-dismissible{background-color:#1D1D1D;border:1px solid black;z-index:1080;display:none;transition:opacity 0.3s;position:absolute;font-size:14px;font-style:normal;font-weight:400;line-height:20px;color:#FFFFFF;width:max-content;box-sizing:border-box;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;}.visible.tooltip-extended,.visible.tooltip-compact,.visible.tooltip-dismissible{display:flex !important;align-items:start}.tooltip-dismissible .close-button{all:unset;cursor:pointer;position:relative;order:2;margin-top:12px;margin-right:12px;line-height:0px}.tooltip-dismissible .tooltip-dismissible-content{display:flex;flex-direction:column;gap:12px;padding:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-dismissible .tooltip-dismissible-header,.tooltip-dismissible .tooltip-dismissible-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-dismissible .tooltip-dismissible-header{font-weight:600}.tooltip-dismissible .tooltip-dismissible-body{font-weight:400}.tooltip-compact{padding:4px 8px;text-align:center;flex-grow:1}.tooltip-extended{align-items:center;padding:12px;gap:10px}.tooltip-extended .extended_icon{display:flex;align-self:flex-start;align-items:center;cursor:pointer}.tooltip-extended .tooltip-extended-content{display:flex;flex-direction:column;gap:12px;flex-grow:1;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}.tooltip-extended .tooltip-extended-header,.tooltip-extended .tooltip-extended-body{font-size:14px;font-style:normal;line-height:20px}.tooltip-extended .tooltip-extended-header{font-weight:600}.tooltip-extended .tooltip-extended-body{font-weight:400}.tooltip__container .tooltip-arrow-svg{position:absolute;width:8px;height:8px}[data-placement=top].tooltip-extended>.tooltip-arrow-svg,[data-placement=top].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:50%;transform:rotate(180deg) translateX(-50%)}[data-placement=top-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-start].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;left:10px;transform:rotate(180deg)}[data-placement=top-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=top-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=top-end].tooltip-compact>.tooltip-arrow-svg{bottom:-7px;right:10px;transform:rotate(180deg)}[data-placement=bottom].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:50%;transform:translateX(-50%)}[data-placement=bottom-start].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-start].tooltip-compact>.tooltip-arrow-svg{top:-7px;left:10px}[data-placement=bottom-end].tooltip-extended>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=bottom-end].tooltip-compact>.tooltip-arrow-svg{top:-7px;right:10px}[data-placement=left].tooltip-extended>.tooltip-arrow-svg,[data-placement=left].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=left].tooltip-compact>.tooltip-arrow-svg{right:-3px;top:50%;transform:rotate(90deg) translateY(-50%) translateX(-50%)}[data-placement=right].tooltip-extended>.tooltip-arrow-svg,[data-placement=right].tooltip-dismissible>.tooltip-arrow-svg,[data-placement=right].tooltip-compact>.tooltip-arrow-svg{left:-3px;top:50%;transform:rotate(270deg) translateY(-50%) translateX(50%)}.tooltip-compact{min-width:28px !important;max-width:145px !important}.tooltip-dismissible{min-width:145px !important;max-width:310px !important}.tooltip-extended{min-width:145px !important;max-width:310px !important}`;

const Tooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get el() { return getElement(this); }
    tooltipVisible = false;
    header = '';
    text = '';
    position = 'auto';
    internalPosition = 'auto';
    ariaLabel;
    variant = 'compact';
    icon;
    appendToBody = false;
    tooltipContainer;
    tooltipEl;
    referenceEl;
    popperInstance = null;
    getVariant() {
        const normalizedVariant = this.variant?.toLowerCase().trim();
        if (normalizedVariant === 'compact' ||
            normalizedVariant === 'dismissible' ||
            normalizedVariant === 'extended') {
            return normalizedVariant;
        }
        return 'compact';
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-tooltip', await framework);
        }
        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
        const variant = this.getVariant();
        if (variant === 'compact' || variant === 'extended') {
            slotElement.addEventListener('mouseenter', this.onMouseEnter);
            slotElement.addEventListener('mouseleave', this.onMouseLeave);
        }
        else {
            slotElement.addEventListener('click', this.onClick);
        }
    }
    initializePopper() {
        if (this.popperInstance)
            return;
        this.referenceEl = this.el;
        let originalTooltipEl;
        const variant = this.getVariant();
        if (variant === 'compact') {
            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
        }
        else if (variant === 'dismissible') {
            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
        }
        else {
            originalTooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
        }
        if (this.appendToBody && originalTooltipEl && !this.tooltipContainer) {
            this.tooltipContainer = originalTooltipEl.cloneNode(true);
            const computedStyle = window.getComputedStyle(originalTooltipEl);
            Array.from(computedStyle).forEach(key => {
                this.tooltipContainer.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
            });
            document.body.appendChild(this.tooltipContainer);
            originalTooltipEl.style.visibility = 'hidden';
            this.tooltipEl = this.tooltipContainer;
        }
        else if (this.appendToBody && this.tooltipContainer) {
            this.tooltipEl = this.tooltipContainer;
        }
        else {
            this.tooltipEl = originalTooltipEl;
        }
        let effectivePosition;
        if (this.position === 'auto') {
            effectivePosition = this.determineBestPosition();
        }
        else {
            effectivePosition = this.position;
        }
        this.internalPosition = effectivePosition;
        if (this.tooltipEl && this.referenceEl) {
            this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
                placement: this.internalPosition,
                strategy: 'fixed',
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [0, 8],
                        },
                    },
                    {
                        name: 'preventOverflow',
                        options: {
                            boundary: 'clippingParents',
                            altBoundary: false,
                            rootBoundary: 'viewport',
                        },
                    },
                    {
                        name: 'flip',
                        enabled: this.position === 'auto',
                        options: {
                            fallbackPlacements: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'],
                            flipVariations: false,
                        },
                    },
                    {
                        name: 'computeStyles',
                        options: {
                            gpuAcceleration: false,
                            adaptive: true,
                        },
                    },
                ],
            });
        }
        if (this.tooltipEl) {
            this.tooltipEl.setAttribute('data-placement', this.internalPosition);
        }
    }
    determineBestPosition() {
        const rect = this.referenceEl.getBoundingClientRect();
        const yOffset = window.scrollY;
        const xOffset = window.scrollX;
        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
        if (verticalHalfwayPoint > window.innerHeight / 2) {
            if (horizontalHalfwayPoint > window.innerWidth / 2) {
                return 'top-end';
            }
            else {
                return 'top-start';
            }
        }
        else {
            if (horizontalHalfwayPoint > window.innerWidth / 2) {
                return 'bottom-end';
            }
            else {
                return 'bottom-start';
            }
        }
    }
    positionChanged(newVal) {
        this.internalPosition = newVal;
        this.popperInstance?.destroy();
        this.popperInstance = null; // Force re-initialization on next mouse enter
    }
    onMouseEnter = () => {
        this.initializePopper();
        this.tooltipVisible = true;
        if (this.tooltipEl) {
            this.tooltipEl.style.display = 'block';
        }
        this.popperInstance?.update();
    };
    onMouseLeave = () => {
        this.tooltipVisible = false;
        if (this.tooltipEl) {
            this.tooltipEl.style.display = 'none';
        }
    };
    disconnectedCallback() {
        const slotElement = this.el.shadowRoot?.querySelector('.tooltip__container')?.firstChild;
        if (slotElement) {
            slotElement.removeEventListener('mouseenter', this.onMouseEnter);
            slotElement.removeEventListener('mouseleave', this.onMouseLeave);
            slotElement.removeEventListener('click', this.onClick);
        }
        this.popperInstance?.destroy();
        if (this.tooltipContainer && this.tooltipContainer.parentNode) {
            document.body.removeChild(this.tooltipContainer);
        }
    }
    onClick = () => {
        if (this.getVariant() === 'dismissible') {
            this.initializePopper();
            this.tooltipVisible = !this.tooltipVisible;
            this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
            this.popperInstance?.update();
        }
    };
    onDismissClick = () => {
        this.tooltipVisible = false;
        this.tooltipEl.style.display = 'none';
    };
    render() {
        const tooltipDismissible = {
            "tooltip-dismissible": true,
            visible: this.tooltipVisible,
        };
        const tooltipCompact = {
            "tooltip-compact": true,
            visible: this.tooltipVisible,
        };
        const tooltipExtended = {
            "tooltip-extended": true,
            visible: this.tooltipVisible,
        };
        return (h("div", { key: '1d26ebfada1969e94568c153b1ac9079ec214cba', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'a3705aca98c471eafb17eefc4fd3ba8e7cd148ba' }), this.getVariant() === 'dismissible' && (h("div", { key: '90f956ff8343a66a7ee2ef8987636273074a5cf3', class: tooltipDismissible }, h("button", { key: '628f16a84f3e95b6409cc277ef8778d421146a20', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '2ec44c605995288e4fb57c89bc27323e45a066fa', icon: "cross16" })), h("div", { key: '7784c41936344189c856777d9520ae9707b072ed', class: "tooltip-dismissible-content" }, this.header && h("div", { key: '172556369934f549887ec9118433ebd340c7eef6', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'd74c0319155ceac20a76c5b504948b5a704b25c5', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'e9eee446024a8a565b6884e5d16a7802327a3ee2', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '213f6b360730eb2912c466b995f6496e71b923d9', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'compact' && (h("div", { key: 'a75a5c4d7437c46cfb7729529c4c81915506b4e7', class: tooltipCompact }, this.text, h("svg", { key: 'd36a7a84d21493b9cef004d8c8ee3bbd947e4902', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'deaf993b0f7b361e9de23eba4295f730aa5c5aae', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))), this.getVariant() === 'extended' && (h("div", { key: '093236df78f06117f266379756b352e43fce75cd', class: tooltipExtended }, h("slot", { key: '30a04d0e6d5ad5a69cc998f77d5270c438b78dff', name: "icon" }, this.icon ? (h("div", { class: "extended_icon" }, h("ifx-icon", { icon: this.icon }))) : (h("svg", { class: "extended_icon", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24" }, h("path", { stroke: "#fff", "stroke-linecap": "round", "stroke-linejoin": "round", d: "M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z" }), h("path", { stroke: "#fff", d: "M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z" }), h("path", { fill: "#fff", d: "M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" })))), h("div", { key: '92c3ac58a8eb2bb37c0786272a4e44140296f0e6', class: "tooltip-extended-content" }, this.header && h("div", { key: '0dfbff1979cd15ef87bf92fc20caea6bd68801d3', class: "tooltip-extended-header" }, this.header), h("div", { key: '963fc12d9cd97d1f4a51dc3bc1c796a8355f54c6', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '1a699a78124738b1f9b39457a035460f96c344ec', class: "tooltip-arrow-svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'c15084af6dd0489c35d12dfeb7c3f0e8d01cf96f', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))))));
    }
    static get watchers() { return {
        "position": [{
                "positionChanged": 0
            }]
    }; }
};
Tooltip.style = tooltipCss();

export { Tooltip as ifx_tooltip };
//# sourceMappingURL=ifx-tooltip.entry.js.map

//# sourceMappingURL=ifx-tooltip.entry.js.map