import { r as registerInstance, h, g as getElement, H as Host } from './index-6191c26c.js';
import { h as getTooltipElement, t as tinyMDtoHTML } from './helpers-2fce0c0e.js';
import { c as computePosition, d as autoPlacement, f as flip, s as shift, o as offset, e as arrow } from './floating-ui.dom.esm-6802681c.js';

const styleCss = "x-tooltip{display:inherit}x-tooltip-overlay{font-family:\"Poppins\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";background:var(--color-dark-tinted, #626262);color:var(--color-text-light, #FEFEFE);padding:4px 8px;font-size:0.9rem;border-radius:4px;display:none;-webkit-box-shadow:0 0 1em rgba(0, 0, 0, 0.2);box-shadow:0 0 1em rgba(0, 0, 0, 0.2);z-index:10000;position:absolute;text-align:inherit;top:0;left:0;width:-webkit-max-content;width:-moz-max-content;width:max-content}x-tooltip-overlay:empty{display:none}.is-dark-mode x-tooltip-overlay{background:var(--color-light-shade, #d8d8d8);color:var(--color-text, #4A4A4A)}x-tooltip-overlay[data-show]{display:block;-webkit-animation:0.4s fadeIn;animation:0.4s fadeIn}x-tooltip-overlay>p{margin:0px;font-family:\"Poppins\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}x-tooltip-overlay .tooltip-arrow{position:absolute;background:var(--color-dark-tinted, #626262);width:8px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.is-dark-mode x-tooltip-overlay .tooltip-arrow{background:var(--color-light-shade, #d8d8d8)}";
const XTooltipStyle0 = styleCss;

const showEvents = ['mouseenter', 'touchstart'];
const hideEvents = ['mouseleave', 'blur', 'touchend'];
const XTooltip = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.content = undefined;
        this.align = 'top';
    }
    onPropChange() {
        const isVisible = XTooltip.activeElements.has(this.el);
        if (isVisible) {
            this.hideHandler();
            setTimeout(() => {
                this.showHandler();
            }, 10);
        }
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.tooltip = getTooltipElement();
        showEvents.forEach(event => {
            this.el.addEventListener(event, this.showHandler.bind(this));
        });
        hideEvents.forEach(event => {
            this.el.addEventListener(event, this.hideHandler.bind(this));
        });
        window.addEventListener('scroll', this.hideHandler, true);
        window.addEventListener('resize', this.hideHandler, true);
        document.addEventListener('visibilitychange', this.hideHandler, true);
        document.addEventListener('touchmove', this.hideHandler, true);
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        this.hideHandler();
        XTooltip.activeElements.delete(this.el);
        showEvents.forEach(event => {
            this.el.removeEventListener(event, this.showHandler);
        });
        hideEvents.forEach(event => {
            this.el.removeEventListener(event, this.hideHandler);
        });
        window.removeEventListener('scroll', this.hideHandler, true);
        window.removeEventListener('resize', this.hideHandler, true);
        document.removeEventListener('visibilitychange', this.hideHandler, true);
        document.removeEventListener('touchmove', this.hideHandler, true);
    }
    /**
     * Show tooltip overlay
     */
    showHandler() {
        XTooltip.activeElements.add(this.el);
        this.tooltip.setAttribute('data-show', '');
        this.tooltip.querySelector('span').innerHTML = tinyMDtoHTML(this.content) || '';
        const arrowEl = this.tooltip.querySelector('.tooltip-arrow');
        computePosition(this.el, this.tooltip, {
            placement: this.align,
            middleware: [this.align == 'auto' ? autoPlacement() : flip(), shift({ padding: 10 }), offset(4), arrow({ element: arrowEl })],
        }).then(({ x, y, middlewareData, placement }) => {
            this.tooltip.style.left = `${x}px`;
            this.tooltip.style.top = `${y}px`;
            if (middlewareData.arrow) {
                const { x: arrowX, y: arrowY } = middlewareData.arrow;
                const staticSide = {
                    top: 'bottom',
                    right: 'left',
                    bottom: 'top',
                    left: 'right',
                }[placement.split('-')[0]];
                Object.assign(arrowEl.style, {
                    left: arrowX != null ? `${arrowX}px` : '',
                    top: arrowY != null ? `${arrowY}px` : '',
                    right: '',
                    bottom: '',
                    [staticSide]: '-4px',
                });
            }
        });
    }
    /**
     * Hide tooltip overlay
     */
    hideHandler() {
        XTooltip.activeElements.delete(this.el);
        if (XTooltip.activeElements.size === 0) {
            this.tooltip.setAttribute('data-show', '');
            this.tooltip.removeAttribute('data-show');
            this.tooltip.querySelector('span').innerHTML = '';
        }
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'cf277a7fdd90eb2a0f05a8e92609fae4ff2ae7fa', "aria-label": this.content });
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "content": ["onPropChange"],
        "align": ["onPropChange"]
    }; }
};
/**
 * All active elements
 */
XTooltip.activeElements = new Set();
XTooltip.style = XTooltipStyle0;

export { XTooltip as x_tooltip };
