/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { awaitTopbar } from './index.js';

const pnReadOnlyButtonCss = () => `${transformTag("pn-read-only-button")}{display:inline-block}${transformTag("pn-read-only-button")} button{cursor:not-allowed;color:#5e554a;background:#f3f2f2;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;display:flex;justify-content:center;align-items:center;-webkit-tap-highlight-color:transparent}${transformTag("pn-read-only-button")} button ${transformTag("pn-icon")}{flex-shrink:0;margin:0 0 0 0.5em}${transformTag("pn-read-only-button")} button .button-tooltip{position:absolute;bottom:calc(100% + 0.35em);left:50%;background:#a70707;color:#ffffff;padding:0.25em 0.75em;font-size:0.875em;font-weight:300;border-radius:1em;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:5;max-width:min(95vw, 40em);transform:translateX(-50%);width:max-content;pointer-events:none;opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-read-only-button")} button .button-tooltip{transition-duration:0s;transition-delay:0s}}${transformTag("pn-read-only-button")} button[data-tooltip-open] .button-tooltip{opacity:1}${transformTag("pn-read-only-button")} button.pn-button-left-icon{flex-direction:row-reverse}${transformTag("pn-read-only-button")} button.pn-button-left-icon ${transformTag("pn-icon")}{margin:0 0.5em 0 0}${transformTag("pn-read-only-button")} button.icon-only{width:3em;min-width:0}${transformTag("pn-read-only-button")} button.icon-only ${transformTag("pn-icon")}{margin:0}${transformTag("pn-read-only-button")} button.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}${transformTag("pn-read-only-button")} button.icon-only span.read-only-icon-only{display:none}${transformTag("pn-read-only-button")} button.pn-button-small{font-size:0.875em;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}${transformTag("pn-read-only-button")} button.pn-button-small ${transformTag("pn-icon")} .pn-icon-svg{height:1.28em;width:1.28em}`;

const PnReadOnlyButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get hostElement() { return getElement(this); }
    readOnlyModeText = '';
    tooltipOpen = false;
    tooltipEl;
    tooltipDx;
    /** The SVG content of the icon you want. */
    icon;
    /** Icon on the left side instead of on the right. */
    leftIcon = false;
    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip. */
    iconOnly = false;
    /** Smaller button. */
    small = false;
    /** Set the language manually. */
    language = null;
    setReadOnlyModeText() {
        const translations = {
            en: 'You cannot complete this action while in read only mode',
            sv: 'Du kan inte utföra denna handling i skrivskyddat läge',
            da: 'Du kan ikke gennemføre denne handling i skrivebeskyttet tilstand',
            fi: 'Et voi suorittaa tätä toimintoa vain luku -tilassa',
            no: 'Du kan ikke utføre denne handlingen i skrivebeskyttet modus',
        };
        this.readOnlyModeText = translations[this.language];
    }
    async componentWillLoad() {
        this.setReadOnlyModeText();
        if (this.language)
            return;
        await awaitTopbar(this.hostElement);
    }
    componentDidLoad() {
        this.initTooltip();
    }
    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
    openHandler() {
        if (this.tooltipOpen) {
            this.checkTooltipPosition();
            return;
        }
        this.setTooltipOffset();
    }
    initTooltip() {
        this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
        const tooltipAnchor = this.hostElement;
        const openEvents = ['mouseenter', 'focus'];
        const closeEvents = ['mouseleave', 'blur'];
        const eventListeners = [...openEvents, ...closeEvents];
        eventListeners.forEach(e => {
            tooltipAnchor.addEventListener(e, event => {
                // Should open?
                if (openEvents.includes(event.type)) {
                    this.tooltipOpen = true;
                    return;
                }
                // Should close?
                if (closeEvents.includes(event.type)) {
                    this.tooltipOpen = false;
                }
            });
        });
    }
    setTooltipOffset() {
        this.tooltipEl.style.transform = `translateX(-50%) translateX(${this.tooltipDx}px)`;
    }
    checkTooltipPosition() {
        this.tooltipEl.style.transform = 'translateX(-50%)';
        requestAnimationFrame(() => {
            const { x, right } = this.tooltipEl.getBoundingClientRect();
            const extraMargin = 8;
            this.tooltipDx = '0';
            this.tooltipEl.style.transform = '';
            if (x < 0)
                this.tooltipDx = `${x * -1 + extraMargin}`;
            if (right > window.innerWidth)
                this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
            requestAnimationFrame(() => {
                this.setTooltipOffset();
            });
        });
    }
    /* ---------------------------------------/TOOLTIP--------------------------------------- */
    getClassNames() {
        let classNames = 'pn-button ';
        if (this.small)
            classNames += 'pn-button-small ';
        if (this.leftIcon)
            classNames += 'pn-button-left-icon ';
        if (this.iconOnly)
            classNames += 'icon-only ';
        return classNames;
    }
    render() {
        return (h(Host, { key: '050c438370b6d5c86e327be03d206880f2f572e5', class: "pn-read-only-button" }, h("button", { key: 'a6cd36bc8f112d3ff7cb6ea65768339dd789813c', class: this.getClassNames(), "data-tooltip-open": this.tooltipOpen, disabled: true }, !this.iconOnly && h("slot", { key: '94979edec979712e7ecc1f683dcf2f32a7889f48' }), this.icon && h("pn-icon", { key: '14012e9a320767c993fab05c614c659f188783e3', icon: this.icon, color: "gray700" }), this.iconOnly && (h("span", { key: '4f75372bf50ec504504ecbd808d3bf1e746c1418', class: "read-only-icon-only" }, h("slot", { key: 'a12bca58ae471729cbb2442b1791bb4ee16c7db5' }))), h("div", { key: '3ec03d46dc7c44229112a90b0df8ea4737a09e79', class: "button-tooltip" }, this.readOnlyModeText))));
    }
    static get watchers() { return {
        "language": [{
                "setReadOnlyModeText": 0
            }],
        "tooltipOpen": [{
                "openHandler": 0
            }]
    }; }
};
PnReadOnlyButton.style = pnReadOnlyButtonCss();

export { PnReadOnlyButton as pn_read_only_button };
