@salla.sa/twilight-components/dist/collection/components/salla-cookies-bar/salla-cookies-bar.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { h, Host } from "@stencil/core";
export class SallaCookiesBar {
    constructor() {
        /**
         * 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))))));
    }
    static get is() { return "salla-cookies-bar"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-cookies-bar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-cookies-bar.css"]
        };
    }
    static get states() {
        return {
            "isVisible": {},
            "isMobile": {},
            "messageLabel": {},
            "linkLabel": {},
            "acceptLabel": {},
            "rejectLabel": {}
        };
    }
    static get methods() {
        return {
            "accept": {
                "complexType": {
                    "signature": "() => Promise<HTMLElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    },
                    "return": "Promise<HTMLElement>"
                },
                "docs": {
                    "text": "Accept cookies consent.",
                    "tags": []
                }
            },
            "reject": {
                "complexType": {
                    "signature": "() => Promise<HTMLElement>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    },
                    "return": "Promise<HTMLElement>"
                },
                "docs": {
                    "text": "Reject cookies consent.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "host"; }
}