import { r as registerInstance, h, a as getElement } from './index-DtIEDtZ8.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';
import { c as createPopper } from './popper-BfP9ezJQ.js';

const tooltipCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}: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);
        this.tooltipVisible = false;
        this.header = '';
        this.text = '';
        this.position = 'auto';
        this.internalPosition = 'auto';
        this.variant = 'compact';
        this.popperInstance = null;
        this.onMouseEnter = () => {
            var _a, _b;
            // Enable the event listeners immediately
            (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
                    ...options.modifiers,
                    { name: 'eventListeners', enabled: true },
                ] })));
            // Initialize the popper instance
            this.initializePopper();
            // Make the tooltip visible
            this.tooltipVisible = true;
            this.tooltipEl.style.display = 'block';
            // Update the popper instance immediately after initialization
            (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
        };
        this.onMouseLeave = () => {
            this.tooltipVisible = false;
            this.tooltipEl.style.display = 'none';
        };
        this.onClick = () => {
            var _a;
            if (this.variant.toLowerCase() === 'dismissible') {
                this.initializePopper();
                this.tooltipVisible = !this.tooltipVisible;
                this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';
                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
            }
        };
        this.onDismissClick = () => {
            this.tooltipVisible = false;
            this.tooltipEl.style.display = 'none';
        };
    }
    componentWillLoad() {
        if (this.variant.toLowerCase().trim() === "") {
            this.variant = 'compact';
        }
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-tooltip', await framework);
        }
        const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;
        if (this.variant.toLowerCase() === 'compact' || this.variant.toLowerCase() === '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;
        if (this.variant.toLowerCase() === 'compact') {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');
        }
        else if (this.variant.toLowerCase() === 'dismissible') {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');
        }
        else {
            this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');
        }
        const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;
        // Set the internalPosition
        this.internalPosition = effectivePosition;
        if (this.tooltipEl && this.referenceEl) {
            this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {
                placement: this.internalPosition,
                modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element
                        }
                    },
                    {
                        name: 'arrow',
                        options: {
                            element: '.tooltip-arrow-svg'
                        }
                    }
                ]
            });
        }
        // Add this line to set the 'data-placement' attribute on the tooltip
        this.tooltipEl.setAttribute('data-placement', effectivePosition);
    }
    determineBestPosition() {
        // This is a simplified version, you can enhance this based on available viewport space.
        const rect = this.referenceEl.getBoundingClientRect();
        const yOffset = window.scrollY; // Get current scroll position
        const xOffset = window.scrollX; // Get current horizontal scroll position
        const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;
        const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;
        if (this.position === 'auto') {
            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';
                }
            }
        }
        else {
            return this.position;
        }
    }
    positionChanged(newVal) {
        var _a;
        this.internalPosition = newVal;
        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
        this.popperInstance = null; // Force re-initialization on next mouse enter
    }
    disconnectedCallback() {
        var _a;
        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
    }
    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: '73fe0cd0ba30b772907db89dc10248ca8fab5d5b', "aria-label": this.ariaLabel, "aria-value": this.header, class: "tooltip__container" }, h("slot", { key: 'c322892c782277d8640de4d7f86c073c82ff5b87' }), this.variant.toLowerCase() === 'dismissible' && h("div", { key: 'd268c502ee61550b6bb96512220bb10f73a6ec53', class: tooltipDismissible }, h("button", { key: 'e2ef4f4709a58adca779f60afbae4d5d990bf2b0', "aria-label": "Close Tooltip", class: "close-button", onClick: this.onDismissClick }, h("ifx-icon", { key: '85c008fc5bb577d3ed6dc3dc7ae824f3e579217a', icon: "cross16" })), h("div", { key: 'b6bbb49d16efdacb67596bd8006ad94be7895e24', class: "tooltip-dismissible-content" }, this.header && h("div", { key: 'b62b5521156c7ae5a9ceb95d2bbf02322345f7ef', class: "tooltip-dismissible-header" }, this.header), h("div", { key: 'cec7a6ea9e7536d18916547646864729396eb60f', class: "tooltip-dismissible-body" }, this.text)), h("svg", { key: 'c51e82c058a9cb4c4e7a0cbb13bb476f8afeb928', 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: '1029a62c61d0357a731b2951ea38d05c7c269551', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'compact' &&
            h("div", { key: '830e279a14e2935f4e08021bd7399865e1ef44a2', class: tooltipCompact }, this.text, h("svg", { key: '93e80185a37e7121f858790fb3fa33ffb18092f6', 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: '0158bcc8dcd9259d92d512f8e96d325b616d50a0', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" }))), this.variant.toLowerCase() === 'extended' &&
            h("div", { key: '661134a45b938246e9c58f2d456920a6035a90c9', class: tooltipExtended }, h("slot", { key: 'c601220c6b6d357800b3b697f78e68bb9d614431', 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: 'cee24e9d36ca9f745c397ba328eae361fc19741a', class: "tooltip-extended-content" }, this.header && h("div", { key: 'a7cd9c2a5614e33300e2ad18677655d96c8bb16f', class: "tooltip-extended-header" }, this.header), h("div", { key: '04075ce9041db50760373c24d5b15481bc1803fb', class: "tooltip-extended-body" }, this.text)), h("svg", { key: '003660f174f2d82b61fe122fc7102e5f5c345571', 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: '4212775539c5aad8f0b89edd938c9786c7662fef', id: "Indicator", d: "M6 0L12 8L0 8L6 0Z", fill: "#1D1D1D" })))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "position": ["positionChanged"]
    }; }
};
Tooltip.style = tooltipCss;

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

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