'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-111a6bec.js');
const helpers = require('./helpers-a7be7ad9.js');
const popper = require('./popper-31badbf8.js');

const styleCss = "x-tooltip{display:inherit}x-tooltip-overlay{font-family:\"TT Norms Pro\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";background:var(--color-dark-tinted, #626262);color:var(--color-text-light, #FEFEFE);padding:4px 8px;font-size:0.9rem;border-radius:4px;display:none;-webkit-box-shadow:0 0 1em rgba(0, 0, 0, 0.2);box-shadow:0 0 1em rgba(0, 0, 0, 0.2);z-index:10000;position:relative;text-align:inherit}x-tooltip-overlay:empty{display:none}.is-dark-mode x-tooltip-overlay{background:var(--color-light-shade, #d8d8d8);color:var(--color-text, #4A4A4A)}x-tooltip-overlay[data-show]{display:block;-webkit-animation:0.4s fadeIn;animation:0.4s fadeIn}x-tooltip-overlay>p{margin:0px;font-family:\"TT Norms Pro\", \"Arial\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"}x-tooltip-overlay .tooltip-arrow,x-tooltip-overlay .tooltip-arrow::before{position:absolute;width:8px;height:8px;z-index:-1}x-tooltip-overlay .tooltip-arrow::before{content:\"\";-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--color-dark-tinted, #626262)}.is-dark-mode x-tooltip-overlay .tooltip-arrow::before{background:var(--color-light-shade, #d8d8d8)}x-tooltip-overlay[data-popper-placement^=top]>.tooltip-arrow{bottom:-4px}x-tooltip-overlay[data-popper-placement^=bottom]>.tooltip-arrow{top:-4px}x-tooltip-overlay[data-popper-placement^=left]>.tooltip-arrow{right:-4px}x-tooltip-overlay[data-popper-placement^=right]>.tooltip-arrow{left:-4px}";
const XTooltipStyle0 = styleCss;

const popperDefaultConfig = {
    placement: 'auto',
    modifiers: [
        {
            name: 'offset',
            options: {
                offset: [0, 4],
            },
        },
    ],
};
const showEvents = ['mouseenter'];
const hideEvents = ['mouseleave', 'blur'];
const XTooltip = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.content = undefined;
        this.align = 'top';
    }
    /**
     * On component did loaded hook
     */
    componentDidLoad() {
        this.tooltip = helpers.getTooltipElement();
        showEvents.forEach(event => {
            this.el.addEventListener(event, this.showHandler.bind(this));
        });
        hideEvents.forEach(event => {
            this.el.addEventListener(event, this.hideHandler.bind(this));
        });
    }
    /**
     * On component did destroyed hook
     */
    disconectedCallback() {
        showEvents.forEach(event => {
            this.el.removeEventListener(event, this.showHandler);
        });
        hideEvents.forEach(event => {
            this.el.removeEventListener(event, this.hideHandler);
        });
        if (this.popper) {
            this.popper.destroy();
        }
    }
    /**
     * Show tooltip overlay popper
     */
    showHandler() {
        this.tooltip.setAttribute('data-show', '');
        this.tooltip.querySelector('span').innerHTML = helpers.tinyMDtoHTML(this.content) || '';
        this.popper = popper.createPopper(this.el, this.tooltip, Object.assign(Object.assign({}, popperDefaultConfig), { placement: this.align }));
    }
    /**
     * Hide tooltip overlay popper
     */
    hideHandler() {
        this.tooltip.removeAttribute('data-show');
        this.tooltip.querySelector('span').innerHTML = '';
        this.popper.destroy();
        this.popper = null;
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: '669f42576ddaef625a326a978032007cd7aa8ade', "aria-label": this.content });
    }
    get el() { return index.getElement(this); }
};
XTooltip.style = XTooltipStyle0;

exports.x_tooltip = XTooltip;
