import { p as proxyCustomElement, H, e as createEvent, w as writeTask, h, c as Host } from './p-ae373651.js';
import { c as computePosition, o as offset, f as flip, s as shift, a as arrow } from './p-b1a93be0.js';

const rtkTooltipCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{--background-color:var(--rtk-tooltip-background-color, rgb(var(--rtk-colors-background-600, 60 60 60)));--color:var(--rtk-tooltip-color, rgb(var(--rtk-colors-text-1000, 255 255 255)));display:inline-flex}#trigger{display:block;width:100%;flex:1 1 0%}.tooltip{max-width:var(--rtk-space-64, 256px);position:fixed;z-index:20;display:none;width:-moz-max-content;width:max-content;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px);padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);border-radius:var(--rtk-border-radius-sm, 4px);--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);font-size:12px}.tooltip,#arrow{position:absolute;background-color:var(--background-color);color:var(--color)}#arrow{position:absolute;height:var(--rtk-space-2, 8px);width:var(--rtk-space-2, 8px);transform:rotate(45deg)}:host([variant='primary']){--background-color:rgb(var(--rtk-colors-brand-500, 33 96 253));--color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)))}:host([kind='block']){display:block}";
const RtkTooltipStyle0 = rtkTooltipCss;

const RtkMenu = /*@__PURE__*/ proxyCustomElement(class RtkMenu extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.openChange = createEvent(this, "rtkOpenChange", 7);
        /** Tooltip label */
        this.label = '';
        /** Tooltip variant */
        this.variant = 'secondary';
        /** Disabled */
        this.disabled = false;
        /** Open */
        this.open = false;
        /** Tooltip kind */
        this.kind = 'inline';
        /** Placement of menu */
        this.placement = 'top';
        /** Delay before showing the tooltip */
        this.delay = 0;
        this.isInFocus = false;
        this.showMenu = () => {
            if (this.disabled)
                return;
            this.isInFocus = true;
            setTimeout(() => {
                if (this.isInFocus) {
                    this.tooltipEl.style.display = 'block';
                    this.update();
                    this.openChange.emit(true);
                    if (this.size === 'sm') {
                        setTimeout(() => {
                            if (this.isInFocus) {
                                this.hideMenu();
                            }
                        }, 1000);
                    }
                }
            }, this.delay);
        };
        this.hideMenu = () => {
            if (this.open || this.disabled)
                return;
            this.isInFocus = false;
            this.tooltipEl.style.display = 'none';
            this.openChange.emit(false);
        };
    }
    componentDidLoad() {
        this.triggerEl.addEventListener('focusin', this.showMenu);
        this.triggerEl.addEventListener('mouseenter', this.showMenu);
        this.triggerEl.addEventListener('focusout', this.hideMenu);
        this.triggerEl.addEventListener('mouseleave', this.hideMenu);
        writeTask(() => {
            this.openChanged(this.open);
        });
    }
    disconnectedCallback() {
        if (!this.triggerEl)
            return;
        this.triggerEl.removeEventListener('focusin', this.showMenu);
        this.triggerEl.removeEventListener('mouseenter', this.showMenu);
        this.triggerEl.removeEventListener('focusout', this.hideMenu);
        this.triggerEl.removeEventListener('mouseleave', this.hideMenu);
        this.triggerEl = undefined;
    }
    openChanged(open) {
        if (open) {
            this.showMenu();
        }
        else {
            this.hideMenu();
        }
    }
    update() {
        computePosition(this.triggerEl, this.tooltipEl, {
            placement: this.placement,
            middleware: [offset(8), flip(), shift({ padding: 5 }), arrow({ element: this.arrowEl })],
        }).then(({ x, y, placement, middlewareData }) => {
            Object.assign(this.tooltipEl.style, {
                left: `${x}px`,
                top: `${y}px`,
            });
            const { x: arrowX, y: arrowY } = middlewareData.arrow;
            const staticSide = {
                top: 'bottom',
                right: 'left',
                bottom: 'top',
                left: 'right',
            }[placement.split('-')[0]];
            Object.assign(this.arrowEl.style, {
                left: arrowX != null ? `${arrowX}px` : '',
                top: arrowY != null ? `${arrowY}px` : '',
                right: '',
                bottom: '',
                [staticSide]: '-4px',
            });
        });
    }
    render() {
        return (h(Host, { key: 'ce9cb2211743e50c83b7f572b2e9dc5b02fa3ac8' }, h("span", { key: '74f73894f5a62519b3bf8c03a83e7102092ccd5c', part: "trigger", id: "trigger", ref: (el) => (this.triggerEl = el) }, h("slot", { key: '4551b2a438b1c57ca68e4a2973529186063a13c2' })), h("div", { key: 'e3dd196c6ee225cb363bcf54d35836ff17ed5969', part: "tooltip", class: "tooltip", id: "tooltip", role: "tooltip", ref: (el) => (this.tooltipEl = el) }, h("div", { key: '4eb8bb3af588160018ef9d8899afc09edf4b195d', id: "arrow", ref: (el) => (this.arrowEl = el), part: "arrow" }), this.label, h("slot", { key: 'c427ef3ef9953b764f9b1adcb4a8b7eee1fe91cd', name: "tooltip" }))));
    }
    static get watchers() { return {
        "open": ["openChanged"]
    }; }
    static get style() { return RtkTooltipStyle0; }
}, [1, "rtk-tooltip", {
        "label": [1],
        "variant": [513],
        "disabled": [516],
        "open": [516],
        "kind": [513],
        "size": [513],
        "placement": [1],
        "delay": [2],
        "isInFocus": [32]
    }, undefined, {
        "open": ["openChanged"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["rtk-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "rtk-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, RtkMenu);
            }
            break;
    } });
}
defineCustomElement();

export { RtkMenu as R, defineCustomElement as d };
