/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';

const sallaTooltipCss = ".s-tooltip-container{position:relative;display:inline-block}.s-tooltip-item{position:absolute;transform:translateX(-39%);background-color:#baf3e6;color:#004d5a;bottom:100%;left:50%;text-align:center;border-radius:5px;z-index:1;white-space:nowrap;opacity:0;transition:opacity 0.3s;pointer-events:none;margin:0 0 16px 8px;padding:12px;max-width:150px;width:190px;white-space:normal;opacity:1}.s-tooltip-item::after{content:\"\";position:absolute;bottom:-10px;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#baf3e6 transparent transparent transparent}.s-tooltip-item:dir(ltr){transform:translateX(-72%)}.s-tooltip-item--dark{background-color:#555555;color:white;padding:5px 15px;border-radius:8px;font-size:12px;font-weight:normal;max-width:330px;width:max-content}.s-tooltip-item--dark::after{border-color:#555555 transparent transparent transparent}";

const SallaTooltip = /*@__PURE__*/ proxyCustomElement(class SallaTooltip extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * The theme of the tooltip (default, dark)
         */
        this.theme = 'default';
        this.show = false;
        this.targetElement = null;
    }
    handleMouseOver(event) {
        if (this.targetElement && this.targetElement.contains(event.target)) {
            this.show = true;
        }
    }
    handleMouseOut(event) {
        if (this.targetElement && this.targetElement.contains(event.target)) {
            this.show = false;
        }
    }
    componentDidLoad() {
        // Find the target element based on the targetSelector prop
        this.targetElement = document.getElementById(this.targetId);
    }
    render() {
        const validTheme = ['default', 'dark'].includes(this.theme) ? this.theme : 'default';
        return (h("div", { key: '789e7e8e0653d68b5387b2199e05f287c8b91c92', class: "s-tooltip-container" }, h("div", { key: '0342a96fa7c3d316cfc9f5435dc7321920044a12', class: `s-tooltip-item s-tooltip-item--${validTheme}`, style: { display: this.show ? 'block' : 'none' } }, this.text ? h("span", null, this.text) : h("slot", null))));
    }
    get el() { return this; }
    static get style() { return sallaTooltipCss; }
}, [4, "salla-tooltip", {
        "text": [1],
        "targetId": [1, "target-id"],
        "theme": [1],
        "show": [32]
    }, [[9, "mouseover", "handleMouseOver"], [9, "mouseout", "handleMouseOut"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-tooltip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaTooltip);
            }
            break;
    } });
}
defineCustomElement();

export { SallaTooltip as S, defineCustomElement as d };
