@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 {
  constructor() {
    this.title = undefined;
    this.message = undefined;
    this.buttonTitle = undefined;
  }
  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, { class: "s-maintenance-alert-wrapper" }, h("button", { class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { class: "s-maintenance-alert-content" }, h("div", { class: "s-maintenance-alert-container" }, h("div", { class: "s-maintenance-alert-icon" }, h("img", { src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { class: "s-maintenance-alert-text" }, h("h2", null, this.title), h("p", null, this.message))), h("div", null, h("a", { 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