import { createPopper } from "@popperjs/core";
import { h, Host } from "@stencil/core";
const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
/**
 * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
 *
 * ```ts
 * <verdocs-help-icon text="Sample help text" />
 * ```
 */
export class VerdocsHelpIcon {
    constructor() {
        /**
         * Help text to display on hover/focus
         */
        this.text = '';
        /**
         * Optional icon to display. If not supplied, a standard help icon will be shown.
         */
        this.icon = helpIcon;
        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
    }
    componentDidLoad() {
        this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
        // placement: 'top-end',
        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
        });
    }
    disconnectedCallback() {
        if (this.popperInstance) {
            this.popperInstance.destroy();
            this.popperInstance = null;
        }
    }
    show() {
        var _a, _b;
        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
    }
    hide() {
        var _a;
        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
    }
    render() {
        return (h(Host, { key: '7485e6e1c7ab3599fea27bced3b5823ec3e7ea60', class: {} }, h("div", { key: 'a3e61ca5b064a8c3771265d25dd4936b316e14db', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: 'e0d8d0804f5bbe00dc8e42a4cfb0792c5a199fac', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '3cea984dcde9dd2147b3c39aa2f370b27cef9e70', innerHTML: this.text }), h("div", { key: '450dfa4f2e21aa84eb03f46cb356ad67edab2b87', "data-popper-arrow": "true", class: "arrow" }))));
    }
    static get is() { return "verdocs-help-icon"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-help-icon.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-help-icon.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": "Help text to display on hover/focus"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Optional icon to display. If not supplied, a standard help icon will be shown."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "helpIcon"
            }
        };
    }
    static get states() {
        return {
            "containerId": {}
        };
    }
}
//# sourceMappingURL=verdocs-help-icon.js.map
