/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, H as Host, a as getElement } from './index-Cb4NFvMH.js';

const sallaCookiesBarCss = ":host{display:block;overflow:visible}.s-cookies-bar{box-shadow:0 0 20px 4px rgba(0, 0, 0, 0.15)}";

const SallaCookiesBar = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Whether the cookies bar is visible.
         */
        this.isVisible = true;
        /**
         * Whether the viewport is mobile width (updates on resize).
         */
        this.isMobile = false;
        this.mobileBreakpoint = 768;
        this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
    }
    async componentWillLoad() {
        await Salla.onReady();
        await Salla.lang.onLoaded();
        this.loadTranslations();
        if (Salla.storage.get('cookies-consent')) {
            this.isVisible = false;
        }
    }
    loadTranslations() {
        this.messageLabel = Salla.lang.get('common.cookies.message');
        this.linkLabel = Salla.lang.get('common.cookies.link');
        this.acceptLabel = Salla.lang.get('common.cookies.accept');
        this.rejectLabel = Salla.lang.get('common.cookies.reject');
    }
    componentDidLoad() {
        this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
        this.isMobile = this.mobileQuery.matches;
        this.mobileQuery.addEventListener('change', this.mobileQueryHandler);
    }
    disconnectedCallback() {
        this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
    }
    /**
     * Accept cookies consent.
     */
    async accept() {
        this.isVisible = false;
        //We will call event first because we need to compare between old and new data inside session
        Salla.event.emit('salla-cookies-bar::accepted');
        Salla.storage.set('cookies-consent', 'accepted');
        return this.host;
    }
    /**
     * Reject cookies consent.
     */
    async reject() {
        this.isVisible = false;
        //We will call event first because we need to compare between old and new data inside session
        Salla.event.emit('salla-cookies-bar::rejected');
        Salla.storage.set('cookies-consent', 'rejected');
        return this.host;
    }
    isRtl() {
        return Salla.config.get('theme.is_rtl', true);
    }
    render() {
        if (!this.isVisible) {
            return h(Host, null);
        }
        return (h(Host, null, h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar fixed bottom-0 inset-x-0 z-50 bg-white p-4" }, h("div", { class: "s-cookies-bar-content flex flex-col justify-center gap-6 max-w-screen-xl mx-auto px-4" }, h("p", { class: "s-cookies-bar-message text-sm font-medium leading-relaxed text-gray-500 m-0" }, this.messageLabel, Salla.config.get('policy_url') && (h("a", { href: Salla.config.get('policy_url'), target: "_blank", class: "s-cookies-bar-link text-primary ms-1" }, this.linkLabel))), h("div", { class: "s-cookies-bar-actions flex flex-row gap-2 shrink-0" }, h("salla-button", { class: "s-cookies-bar-btn--accept", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptLabel), h("salla-button", { class: "s-cookies-bar-btn--reject", fill: "outline", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.reject() }, this.rejectLabel))))));
    }
    get host() { return getElement(this); }
};
SallaCookiesBar.style = sallaCookiesBarCss;

export { SallaCookiesBar as salla_cookies_bar };
