@salla.sa/twilight-components
Version:
Salla Web Component
157 lines (152 loc) • 7.28 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)}.s-cookies-bar-btn--active{box-shadow:0 0 0 2px rgba(0, 0, 0, 0.08)}";
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);
this.openRequestedHandler = () => this.open();
this.selectedConsent = 'rejected';
}
async componentWillLoad() {
await Salla.onReady();
await Salla.lang.onLoaded();
this.loadTranslations();
this.selectedConsent = this.getStoredConsentChoice();
Salla.event.on('salla-cookies-bar::open', this.openRequestedHandler);
this.unregisterAfterFetchMenuItemsHook = Salla.hooks.registerHook('salla-menu', 'afterFetchMenuItems', (menuComponent) => this.appendCookiesSettingsLink(menuComponent));
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);
Salla.event.off('salla-cookies-bar::open', this.openRequestedHandler);
this.unregisterAfterFetchMenuItemsHook?.();
this.unregisterAfterFetchMenuItemsHook = undefined;
}
/**
* Accept cookies consent.
*/
async accept() {
this.selectedConsent = 'accepted';
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.selectedConsent = 'rejected';
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;
}
/**
* Show cookies settings bar to allow updating consent.
*/
async open() {
this.selectedConsent = this.getStoredConsentChoice();
this.isVisible = true;
return this.host;
}
getStoredConsentChoice() {
const stored = Salla.storage.get('cookies-consent');
return stored === 'accepted' || stored === 'rejected' ? stored : 'rejected';
}
isRtl() {
return Salla.config.get('theme.is_rtl', true);
}
appendCookiesSettingsLink(menuComponent) {
const websiteCookiesEnabled = Salla.config.get('store.features')?.includes('website-cookies');
if (!websiteCookiesEnabled || !menuComponent?.withCookiePreferences || menuComponent?.source !== 'footer')
return;
const settingsHref = '#cookies-settings';
const hasSettingsLink = menuComponent?.menus.some((m) => m?.url === settingsHref);
if (hasSettingsLink)
return;
// IMPORTANT: avoid mutating @State arrays in-place (Stencil reactivity).
// Always create a new array reference.
menuComponent.menus = [...menuComponent.menus, {
id: 'cookies-settings',
order: null,
title: Salla.lang.get('common.cookies.settings'),
url: settingsHref,
target: '_self',
is_by_form_builder: false,
children: [],
image: null,
callback: () => Salla.event.emit('salla-cookies-bar::open'),
}];
}
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 ${this.selectedConsent === 'rejected' ? 's-cookies-bar-btn--active' : ''}`, color: "primary", fill: this.selectedConsent === 'rejected' ? 'solid' : 'outline', type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptLabel), h("salla-button", { class: `s-cookies-bar-btn--reject ${this.selectedConsent === 'accepted' ? 's-cookies-bar-btn--active' : ''}`, color: this.selectedConsent === 'accepted' ? 'primary' : undefined, fill: this.selectedConsent === 'accepted' ? 'solid' : '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],
"selectedConsent": [32],
"accept": [64],
"reject": [64],
"open": [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 };