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.pdsTooltipHide.emit();
        };
        this.handleShow = () => {
            this.showTooltip();
            this.pdsTooltipShow.emit();
        };
        this.isOpen = false;
        this.content = undefined;
        this.componentId = undefined;
        this.hasArrow = true;
        this.htmlContent = false;
        this.placement = 'right';
        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: '52999e010e83fb265a46867b0b29169f7363a496', onMouseEnter: this.handleShow, onMouseLeave: this.handleHide, onFocusin: this.handleShow, onFocusout: this.handleHide }, h("div", { key: '6bb63ba10eab04114ced7ead7079d46cc22cb72c', 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: '930c148c837912ad9d5ea57e92246e0211b355c4', "aria-describedby": this.componentId, class: "pds-tooltip__trigger" }, h("slot", { key: '813429e2865fae92050d779ca7f47072313db851' })), h("div", { key: '7f47e8b4ff3d6238f27e38986f032ece94f6b584', 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" }, h("slot", { key: '90b3f02974d250375d55ed332a9c525626ff5439', name: "content" }), this.content))));
    }
    static get is() { return "pds-tooltip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-tooltip.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["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'"
            },
            "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 events() {
        return [{
                "method": "pdsTooltipHide",
                "name": "pdsTooltipHide",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after a tooltip is closed"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "pdsTooltipShow",
                "name": "pdsTooltipShow",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after a tooltip is shown"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    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
