UNPKG

@salla.sa/twilight-components

Version:
47 lines (46 loc) 2.67 kB
/*! * 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'); this.buttonTitle = window.innerWidth <= 768 ? 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: 'e8ef967a01f6a71469d1437bd32cea0f642148e0', class: "s-maintenance-alert-wrapper" }, h("button", { key: '18c1aca947b13aef8b37dc76b578873ac35bbf43', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'e48f462dfb6053f07510c9cc0ee4baf0f056b9a4', class: "s-maintenance-alert-content" }, h("div", { key: '3f92e7a057e07ffd5120ffa24deaf72303e1ae4c', class: "s-maintenance-alert-container" }, h("div", { key: 'fdfc434fc3246a316c8eadefe246feb58ece8470', class: "s-maintenance-alert-icon" }, h("img", { key: 'dc0eb55831dd6edefd2ab64d6432b4d5c7d0bf34', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '6f969613bfd3b9593856bf0bf3076a09e66b8534', class: "s-maintenance-alert-text" }, h("h2", { key: 'a27f890f103c75e89cdbc39882315f4c447cf1df' }, this.title), h("p", { key: '0b152597c9346ea60f747dbcf9bda913c36be249' }, this.message))), h("div", { key: '176903ec563f106293a3e65aba5410441966ca50' }, h("a", { key: '9d2757408ece4e712f040b9ec6eff279c6a652fb', 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"; } } //# sourceMappingURL=salla-maintenance-alert.js.map