/*!
 * Crafted with ❤ by Salla
 */
import { h } from "@stencil/core";
export class SallaTooltip {
    constructor() {
        /**
         * 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))));
    }
    static get is() { return "salla-tooltip"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-tooltip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-tooltip.css"]
        };
    }
    static get properties() {
        return {
            "text": {
                "type": "string",
                "attribute": "text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The text content to display in the tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "targetId": {
                "type": "string",
                "attribute": "target-id",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The ID of the target element to which the tooltip is attached"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme of the tooltip (default, dark)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "show": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "mouseover",
                "method": "handleMouseOver",
                "target": "window",
                "capture": false,
                "passive": true
            }, {
                "name": "mouseout",
                "method": "handleMouseOut",
                "target": "window",
                "capture": false,
                "passive": true
            }];
    }
}
