/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var alert_exclamation_circle = require('./alert_exclamation_circle-BiBEJK9P.js');

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m-1.015 7.207c.14-.422.536-.707.981-.707h.18a.87.87 0 0 1 .854.871c0 .313-.179.6-.447.735A2.81 2.81 0 0 0 11 12.618V13a1 1 0 1 0 2 0v-.382a.81.81 0 0 1 .447-.724A2.83 2.83 0 0 0 15 9.371C15 7.807 13.734 6.5 12.146 6.5h-.18a3.03 3.03 0 0 0-2.878 2.075l-.037.109a1 1 0 1 0 1.898.632zM12 17.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
const alert_question_circle = icon;

const pnTooltipCss = () => `${index.transformTag("pn-tooltip")}{display:inline-block;font-size:1em}${index.transformTag("pn-tooltip")} .pn-tooltip{background:none;background-color:transparent;border:none;position:relative;padding:0;border-radius:50%;transition-property:outline-color, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tooltip")} .pn-tooltip{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tooltip")} .pn-tooltip{cursor:pointer;font-size:inherit;outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-tooltip")} .pn-tooltip:focus-visible{outline-color:#005d92;background-color:#e0f8ff}${index.transformTag("pn-tooltip")} .pn-tooltip:hover{background-color:#e0f8ff}${index.transformTag("pn-tooltip")} .pn-tooltip[data-light] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#ffffff}${index.transformTag("pn-tooltip")} .pn-tooltip[data-light]:focus,${index.transformTag("pn-tooltip")} .pn-tooltip[data-light]:hover{background-color:rgba(255, 255, 255, 0.2)}${index.transformTag("pn-tooltip")} .pn-tooltip[data-warning] ${index.transformTag("pn-icon")} .pn-icon-svg path{fill:#a70707}${index.transformTag("pn-tooltip")} .pn-tooltip[data-warning]{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-tooltip")} .pn-tooltip[data-warning]:focus-visible{outline-color:#a70707;background-color:#fdefee}${index.transformTag("pn-tooltip")} .pn-tooltip[data-warning]:hover{background-color:#fdefee}${index.transformTag("pn-tooltip")} .pn-tooltip-content{position:absolute;text-align:left;bottom:calc(100% + 0.75em);left:50%;background:#ffffff;padding:1em;border-radius:0.8rem;box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tooltip")} .pn-tooltip-content{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tooltip")} .pn-tooltip-content{transition-delay:0.15s;transform:scale(0) translateX(-50%);transform-origin:bottom left;width:max-content;color:#2d2013}${index.transformTag("pn-tooltip")} .pn-tooltip-content[data-simple]{background:#0d234b;color:#ffffff;border-radius:10em;padding:0.5em 0.85em;bottom:100%;font-size:0.875em;font-weight:300;margin-bottom:0.1em;margin-top:0.1em}${index.transformTag("pn-tooltip")} .pn-tooltip>${index.transformTag("pn-icon")}{position:relative;pointer-events:none}${index.transformTag("pn-tooltip")} .pn-tooltip>${index.transformTag("pn-icon")}:before{content:"";pointer-events:none;width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #ffffff;filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));bottom:102%;left:50%;position:absolute;z-index:2;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-tooltip")} .pn-tooltip>${index.transformTag("pn-icon")}:before{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-tooltip")} .pn-tooltip>${index.transformTag("pn-icon")}:before{transition-delay:0;transform:scale(0) translateX(-50%);transform-origin:top left}${index.transformTag("pn-tooltip")} .pn-tooltip>${index.transformTag("pn-icon")}[data-simple]:before{content:none}${index.transformTag("pn-tooltip")} .pn-tooltip[data-open] .pn-tooltip-content{transition-delay:0}${index.transformTag("pn-tooltip")} .pn-tooltip[data-open] ${index.transformTag("pn-icon")}:before{transform:scale(1) translateX(-50%);transition-delay:0.15s;pointer-events:auto}${index.transformTag("pn-tooltip")} .pn-tooltip[data-downwards] .pn-tooltip-content{bottom:unset;top:calc(100% + 0.75em);transform-origin:top left}${index.transformTag("pn-tooltip")} .pn-tooltip[data-downwards] ${index.transformTag("pn-icon")}:before{top:102%;transform-origin:bottom left;filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #ffffff}`;

const PnTooltip = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    content;
    button;
    openEvents = ['mouseover', 'focus'];
    closeEvents = ['mouseleave', 'blur', 'touchcancel', 'touchleave'];
    eventListeners = [...this.openEvents, ...this.closeEvents];
    timeout;
    get hostElement() { return index.getElement(this); }
    downwards = false;
    open = false;
    deltaX = '0';
    /** Apply the warning color and change the icon to `!`. */
    warning = false;
    /** Apply the light color if you use a dark background. */
    light = false;
    /** Overrides the slotted content to create a small tooltip instead. @since v7.3.0 */
    tooltip;
    openHandler() {
        if (this.open)
            this.checkPosition();
        else
            this.setTransform();
    }
    componentDidLoad() {
        this.initTooltip();
    }
    setTransform() {
        this.content.style.transform = `scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`;
    }
    getSymbol() {
        return this.warning ? alert_exclamation_circle.alert_exclamation_circle : alert_question_circle;
    }
    checkPosition() {
        this.content.style.transition = 'none';
        this.content.style.transform = 'scale(1) translateX(-50%)';
        this.downwards = false;
        requestAnimationFrame(() => {
            const { x, y, right } = this.content.getBoundingClientRect();
            const extraMargin = 8;
            this.deltaX = '0';
            this.downwards = y < 0;
            this.content.style.transform = '';
            if (x < 0)
                this.deltaX = `${x * -1 + extraMargin}`; // left edge
            if (right > window.innerWidth)
                this.deltaX = `${window.innerWidth - right - extraMargin}`; // right edge
            requestAnimationFrame(() => {
                this.content.style.transition = '';
                this.setTransform();
            });
        });
    }
    initTooltip() {
        this.eventListeners.forEach(name => this.button.addEventListener(name, (event) => this.toggleTooltip(event)));
    }
    toggleTooltip(event) {
        const status = this.openEvents.includes(event.type);
        let time = 500;
        if (status)
            time = 0;
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            this.open = status;
        }, time);
    }
    render() {
        return (index.h("button", { key: '1898e87fa0848bb546807416112feb7ee9f8c5a5', class: "pn-tooltip", "data-light": this.light, "data-warning": this.warning, "data-downwards": this.downwards, "data-open": this.open, ref: el => (this.button = el) }, index.h("pn-icon", { key: 'd4a28061a6c69ffa41cb69c4fd39961b4927949c', icon: this.getSymbol(), "data-simple": !!this.tooltip }), index.h("div", { key: 'cc7ae46d8c228136a29356083734104bfbb2a30d', class: "pn-tooltip-content", "data-simple": !!this.tooltip, ref: el => (this.content = el) }, this.tooltip, index.h("div", { key: '9ccae396edf92999920b99bf97d0818541a44bf1', hidden: !!this.tooltip }, index.h("slot", { key: '61b67be4486d95208e09630d58a3dc3b344c5354' })))));
    }
    static get watchers() { return {
        "open": [{
                "openHandler": 0
            }]
    }; }
};
PnTooltip.style = pnTooltipCss();

exports.pn_tooltip = PnTooltip;
