@salla.sa/twilight-components
Version:
Salla Web Component
111 lines (106 loc) • 4.68 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './salla-button2.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$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar extends HTMLElement {
constructor() {
super();
this.__registerHost();
/**
* 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 this; }
static get style() { return sallaCookiesBarCss; }
}, [0, "salla-cookies-bar", {
"isVisible": [32],
"isMobile": [32],
"messageLabel": [32],
"linkLabel": [32],
"acceptLabel": [32],
"rejectLabel": [32],
"accept": [64],
"reject": [64]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-cookies-bar", "salla-button"];
components.forEach(tagName => { switch (tagName) {
case "salla-cookies-bar":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaCookiesBar$1);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
defineCustomElement$1();
const SallaCookiesBar = SallaCookiesBar$1;
const defineCustomElement = defineCustomElement$1;
export { SallaCookiesBar, defineCustomElement };