@salla.sa/twilight-components/dist/collection/components/salla-maintenance-alert/salla-maintenance-alert.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
import Cancel from "../../assets/svg/cancel.svg";
export class SallaMaintenanceAlert {
    componentWillLoad() {
        this.title = salla.config.get('maintenance_details.title');
        this.message = salla.config.get('maintenance_details.message');
        // Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed)
        const isMobile = typeof window !== 'undefined' && !window.matchMedia('(min-width: 768px)').matches;
        this.buttonTitle = isMobile ? salla.config.get('maintenance_details.button_title') : salla.config.get('maintenance_details.button_full_title');
    }
    closeAlert() {
        salla.storage.set('hide_salla-maintenance-alert_at', Date.now());
        this.host.style.display = 'none';
    }
    render() {
        return (h(Host, { key: '01c89bdfb43cf8167a80c3b534db99c2b065b470', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'f0fec5518de00e00302f157b99c38c645b5c1b7b', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'e1f17c022bf2c7f375c07f39f6d30e55895d8dac', class: "s-maintenance-alert-content" }, h("div", { key: '511254633626bb8a2b1ce31941cc738d67a90d78', class: "s-maintenance-alert-container" }, h("div", { key: '2d9383e29fdfb9af904e2892801518c6d6f880eb', class: "s-maintenance-alert-icon" }, h("img", { key: '4937284ac2ded08930bed981895ad66f08c6c6c3', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: 'faf22e77325fc231bc03f5e78116a53110cd5b76', class: "s-maintenance-alert-text" }, h("h2", { key: 'a0bb82c477b0b7f2bfe096a7a1496b05649ece8f' }, this.title), h("p", { key: '6120b9c1029eb13b75829d4e87398b245f7e6f8c' }, this.message))), h("div", { key: '33513f0620a097f742dbb0c42a0612e7d25e9ac1' }, h("a", { key: 'de397335279f2ac6127e591599d9562029bfb462', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
    }
    componentDidLoad() {
        //auto-hide the alert if close button is clicked before one hour
        let hidden_at = salla.storage.get('hide_salla-maintenance-alert_at');
        if (hidden_at && ((Date.now() - hidden_at) / 1000 / 60) < 60) {
            this.closeAlert();
        }
    }
    static get is() { return "salla-maintenance-alert"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-maintenance-alert.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-maintenance-alert.css"]
        };
    }
    static get states() {
        return {
            "title": {},
            "message": {},
            "buttonTitle": {}
        };
    }
    static get elementRef() { return "host"; }
}