import { Host, h } from "@stencil/core";
import { positionTooltip } from "../../utils/overlay";
/**
 * @slot (default) - The tooltip's target element
 * @slot content - HTML content for the tooltip
 */
export class PdsTooltip {
    constructor() {
        this.handleHide = () => {
            this.hideTooltip();
        };
        this.handleShow = () => {
            this.showTooltip();
        };
        this.isOpen = false;
        this.content = undefined;
        this.componentId = undefined;
        this.hasArrow = true;
        this.htmlContent = false;
        this.placement = 'right';
        this.maxWidth = '352px';
        this.opened = false;
    }
    handleOpenToggle() {
        if (this.opened) {
            this.handleShow();
        }
        else {
            this.handleHide();
        }
    }
    componentWillLoad() {
        if (this.opened) {
            this.showTooltip();
        }
        this.el.addEventListener('blur', this.handleHide, true);
        this.el.addEventListener('focus', this.handleShow, true);
    }
    componentDidUpdate() {
        if (this.opened) {
            this.showTooltip();
        }
    }
    componentDidRender() {
        positionTooltip({ elem: this.el, elemPlacement: this.placement, overlay: this.contentEl });
    }
    /**
     * Shows the tooltip by enabling the opened property
     */
    async showTooltip() {
        this.opened = true;
    }
    /**
     * Hides the tooltip by disabling the opened property
     */
    async hideTooltip() {
        this.opened = false;
    }
    render() {
        return (h(Host, { key: 'cd40b8fab6c861456b87390f138ee7b41f4d37a0', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '7aa003d0600cdda1452acec8ab5392cd6dbeeed8', class: `
            pds-tooltip
            pds-tooltip--${this.placement}
            ${this.htmlContent ? 'pds-tooltip--has-html-content' : ''}
            ${this.opened ? 'pds-tooltip--is-open' : ''}
            ${this.hasArrow ? '' : 'pds-tooltip--no-arrow'}
          ` }, h("span", { key: '2f83a557860d79c0930390689ce72a9fa5726b3d', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: 'a78f31dae475a53ab709711a3c59142ed8d14418' })), h("div", { key: '42cabc5b6ef126e054383361531b982a4472953d', class: "pds-tooltip__content", "aria-hidden": this.opened ? 'false' : 'true', "aria-live": this.opened ? 'polite' : 'off', id: this.componentId, ref: (el) => (this.contentEl = el), role: "tooltip", style: { maxWidth: this.maxWidth } }, h("slot", { key: '990c5170d5f84863b7eaaeb4781a8ab6eff4b1b8', name: "content" }), this.content))));
    }
    static get is() { return "pds-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../../global/styles/base.scss", "pds-tooltip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../../global/styles/base.css", "pds-tooltip.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Content for the tooltip. If HTML is required, use the content slot"
                },
                "attribute": "content",
                "reflect": false
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "hasArrow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "true"
                        }],
                    "text": "Determines whether or not the tooltip has an arrow"
                },
                "attribute": "has-arrow",
                "reflect": false,
                "defaultValue": "true"
            },
            "htmlContent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Enable this option when using the content slot"
                },
                "attribute": "html-content",
                "reflect": false,
                "defaultValue": "false"
            },
            "placement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "\"right\""
                        }],
                    "text": "Determines the preferred position of the tooltip"
                },
                "attribute": "placement",
                "reflect": true,
                "defaultValue": "'right'"
            },
            "maxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "\"352px\""
                        }],
                    "text": "Sets the maximum width of the tooltip content"
                },
                "attribute": "max-width",
                "reflect": false,
                "defaultValue": "'352px'"
            },
            "opened": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether or not the tooltip is visible"
                },
                "attribute": "opened",
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isOpen": {}
        };
    }
    static get methods() {
        return {
            "showTooltip": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Shows the tooltip by enabling the opened property",
                    "tags": []
                }
            },
            "hideTooltip": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Hides the tooltip by disabling the opened property",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "opened",
                "methodName": "handleOpenToggle"
            }];
    }
}
//# sourceMappingURL=pds-tooltip.js.map
