@salla.sa/twilight-components 2.14.539 → 2.14.540

package/dist/components/salla-cookies-bar.js

@@ -2,9 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { C as Cancel } from './cancel.js';
 import { d as defineCustomElement$2 } from './salla-button2.js';
 
-const sallaCookiesBarCss = "/*!twlt*/: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)}.visible{visibility:visible}.fixed{position:fixed}.inset-x-0{left:0px;right:0px}.bottom-0{bottom:0px}.z-50{z-index:50}.m-0{margin:0px}.mx-auto{margin-left:auto;margin-right:auto}.ms-1{margin-inline-start:0.25rem}.flex{display:flex}.max-w-screen-xl{max-width:1280px}.shrink-0{flex-shrink:0}.resize{resize:both}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.gap-6{gap:1.5rem}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.leading-relaxed{line-height:1.625}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-primary{color:var(--color-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}";
+const sallaCookiesBarCss = "/*!twlt*/:host{display:block;overflow:visible}.s-cookies-bar{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:100;background-color:#fff;border-radius:1rem;padding:1.25rem;width:calc(100% - 2rem);max-width:48rem;box-shadow:0 10px 30px -5px rgba(0, 0, 0, 0.2)}.s-cookies-bar-consent{display:flex;flex-direction:row;align-items:center;gap:1rem;flex-wrap:wrap}@media (max-width: 640px){.s-cookies-bar-consent{flex-direction:column;align-items:end}}.s-cookies-bar-consent-actions{display:flex;align-items:center;gap:0.75rem;flex-shrink:0}.s-cookies-bar-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}.s-cookies-bar-title{font-size:1rem;font-weight:bold;color:#1f2937}.s-cookies-bar-close{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;background:transparent;cursor:pointer;flex-shrink:0}.s-cookies-bar-close svg{width:1.125rem;height:1.125rem;fill:currentColor}.s-cookies-bar-close:hover{color:#4b5563}.s-cookies-bar-categories{display:flex;flex-direction:column;gap:1rem}.s-cookies-bar-category{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.s-cookies-bar-category .s-toggle{flex-shrink:0}.s-cookies-bar-category .s-toggle--disabled{cursor:not-allowed}.s-cookies-bar-category-title-row{display:flex;align-items:center;gap:0.5rem}.s-cookies-bar-category-title{font-size:0.875rem;font-weight:500;color:#1f2937}.s-cookies-bar-category-description{font-size:0.75rem;color:#9ca3af;margin-top:0.25rem}.s-cookies-bar-badge{display:inline-flex;align-items:center;padding:0.0625rem 0.5rem;border-radius:9999px;background-color:#f3f4f6;color:#6b7280;font-size:0.6875rem;font-weight:500;white-space:nowrap}.s-cookies-bar-footer{display:flex;align-items:center;gap:0.75rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid #e5e7eb}.s-cookies-bar-message{flex:1;font-size:0.75rem;line-height:1.625;font-weight:700}.s-cookies-bar-btn--save{flex-shrink:0}.visible{visibility:visible}.invisible{visibility:hidden}.m-0{margin:0px}.ms-1{margin-inline-start:0.25rem}.resize{resize:both}.text-primary{color:var(--color-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.toggle-checkbox .s-toggle-input{position:absolute;visibility:hidden}.toggle-checkbox .s-toggle-switcher{display:inline-block;background:#ccc;border-radius:16px;width:40px;height:25px;position:relative;vertical-align:middle;transition:background 0.25s}.toggle-checkbox .s-toggle-switcher:before,.toggle-checkbox .s-toggle-switcher:after{content:\"\"}.toggle-checkbox .s-toggle-switcher:before{display:block;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.25);width:20px;height:21px;position:absolute;top:2.2px;left:1px;transition:left 0.25s}.toggle-checkbox .s-toggle-input:checked+div{background:#30D158}.toggle-checkbox .s-toggle-input:checked+div:before{left:18px}.s-toggle{cursor:pointer;display:inline-block}.s-toggle .s-toggle-input{position:absolute;visibility:hidden}.s-toggle .s-toggle-label{margin-left:5px;position:relative;top:2px}.s-toggle .s-toggle-switcher{display:inline-block;background:#ccc;border-radius:16px;width:40px;height:25px;position:relative;vertical-align:middle;transition:background 0.25s}.s-toggle .s-toggle-switcher:before,.s-toggle .s-toggle-switcher:after{content:\"\"}.s-toggle .s-toggle-switcher:before{display:block;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,0.25);width:20px;height:21px;position:absolute;top:2.2px;left:1px;transition:left 0.25s}.s-toggle .s-toggle-input:checked+div{background:#30D158}.s-toggle .s-toggle-input:checked+div:before{left:18px}";
 
 const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar extends HTMLElement {
     constructor() {
@@ -14,6 +15,11 @@ const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar
          * Whether the cookies bar is visible.
          */
         this.isVisible = true;
+        /**
+         * Which step of the bar is shown: the initial consent message with
+         * accept/customize actions, or the per-category customization panel.
+         */
+        this.step = 'consent';
         /**
          * Whether the viewport is mobile width (updates on resize).
          */
@@ -21,24 +27,141 @@ const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar
         this.mobileBreakpoint = 768;
         this.mobileQueryHandler = (e) => (this.isMobile = e.matches);
         this.openRequestedHandler = () => this.open();
-        this.selectedConsent = 'rejected';
+        this.authLoggedInHandler = () => this.syncConsentAfterLogin();
+        this.authLoggedOutHandler = () => this.clearLocalConsent();
+        /**
+         * Consent cookie names, matching the category keys the backend expects.
+         */
+        this.necessaryCookieKey = 'necessary_cookies';
+        this.performanceCookieKey = 'performance_cookies';
+        this.functionalCookieKey = 'functional_cookies';
+        this.advertisingCookieKey = 'advertising_cookies';
+        this.consentCookieDays = 365;
+        /**
+         * Known first-party cookie names (a trailing `*` matches by prefix) set by common
+         * third-party scripts, grouped by the category they belong to. Only first-party
+         * cookies (set on the store's own domain) can actually be read/removed from here —
+         * cookies scoped to a third-party domain (e.g. doubleclick.net) are invisible to us.
+         */
+        this.trackingCookiesByCategory = {
+            performance_cookies: [
+                // Google Analytics
+                '_ga',
+                '_ga_*',
+                '_gid',
+                '_gat',
+                '_gat_gtag_*',
+                // Hotjar
+                '_hjSessionUser_*',
+                '_hjSession_*',
+                '_hjIncludedInSessionSample_*',
+                '_hjAbsoluteSessionInProgress',
+                '_hjFirstSeen',
+                // Microsoft Clarity
+                '_clck',
+                '_clsk',
+                'MUID',
+                'MR',
+                'ANONCHK',
+                // Yandex Metrica
+                '_ym_uid',
+                '_ym_d',
+                '_ym_isad',
+            ],
+            advertising_cookies: [
+                // Google Ads / DoubleClick
+                '_gcl_au',
+                '_gcl_aw',
+                '_gcl_dc',
+                'IDE',
+                'test_cookie',
+                '1P_JAR',
+                'NID',
+                // Meta (Facebook) Pixel
+                '_fbp',
+                '_fbc',
+                'fr',
+                // TikTok Pixel
+                '_ttp',
+                // Snapchat Pixel
+                '_scid',
+                'sc_at',
+                // Twitter/X
+                'personalization_id',
+                'guest_id',
+                'muc_ads',
+                // Pinterest
+                '_pin_unauth',
+                '_pinterest_ct_ua',
+                // LinkedIn Insight Tag
+                'li_sugr',
+                'bcookie',
+                'lidc',
+                'UserMatchHistory',
+                'AnalyticsSyncHistory',
+            ],
+            functional_cookies: [
+                // Intercom
+                'intercom-id-*',
+                'intercom-session-*',
+                // Zendesk Chat
+                '__zlcmid',
+                // Crisp
+                'crisp-client%2Fsession%2F*',
+                // YouTube embeds
+                'YSC',
+                'VISITOR_INFO1_LIVE',
+                'PREF',
+            ],
+        };
+        this.performanceEnabled = false;
+        this.functionsEnabled = false;
+        this.adsEnabled = false;
     }
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
         this.loadTranslations();
-        this.selectedConsent = this.getStoredConsentChoice();
         Salla.event.on('salla-cookies-bar::open', this.openRequestedHandler);
+        Salla.event.on('auth::logged.in', this.authLoggedInHandler);
+        Salla.event.on('auth::logged.out', this.authLoggedOutHandler);
         this.unregisterAfterFetchMenuItemsHook = Salla.hooks.registerHook('salla-menu', 'afterFetchMenuItems', (menuComponent) => this.appendCookiesSettingsLink(menuComponent));
+        this.hydrateToggleState();
         if (Salla.storage.get('cookies-consent')) {
             this.isVisible = false;
         }
+        // Keep tracking cookies enforced on every load/refresh, not just when the
+        // customer actively changes their choice in the bar.
+        this.enforceCurrentConsent();
+    }
+    isArabicLocale() {
+        const locale = Salla.lang.getLocale?.() ?? document.documentElement.lang ?? 'ar';
+        return locale.toLowerCase().startsWith('ar');
+    }
+    // TODO: remove the fallback defaults once the `common.cookies.*` keys below are added to the language files.
+    translate(key, arFallback, enFallback) {
+        const value = Salla.lang.get(key);
+        if (value && value !== key)
+            return value;
+        return this.isArabicLocale() ? arFallback : enFallback;
     }
     loadTranslations() {
+        this.titleLabel = this.translate('common.cookies.settings_title', 'تخصيص إعدادات ملفات تعريف الارتباط', 'Customize Cookie Preferences Settings');
+        this.saveLabel = this.translate('common.cookies.save', 'حفظ الخيارات', 'Save Options');
         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');
+        this.acceptLabel = this.translate('common.cookies.accept', 'قبول', 'Accept');
+        this.acceptAllLabel = this.translate('common.cookies.accept_all', 'قبول الكل', 'Accept All');
+        this.customizeLabel = this.translate('common.cookies.customize', 'تخصيص', 'Customize');
+        this.essentialTitleLabel = this.translate('common.cookies.categories.essential.title', 'ملفات تعريف الارتباط الضرورية', 'Essential Cookies');
+        this.essentialDescriptionLabel = this.translate('common.cookies.categories.essential.description', 'ضروريه لتشغيل الوظائف الأساسية للموقع الإلكتروني.', "Required for the website's basic functions.");
+        this.essentialBadgeLabel = this.translate('common.cookies.categories.essential.badge', 'إجباري', 'Required');
+        this.performanceTitleLabel = this.translate('common.cookies.categories.performance.title', 'ملفات تعريف الارتباط الخاصة بالأداء', 'Performance Cookies');
+        this.performanceDescriptionLabel = this.translate('common.cookies.categories.performance.description', 'تساعدنا في تحليل كيفية استخدامك للموقع وتحسين أدائه.', 'Help us analyze site usage and improve performance.');
+        this.functionsTitleLabel = this.translate('common.cookies.categories.functions.title', 'ملفات تعريف الارتباط الوظيفية', 'Functional Cookies');
+        this.functionsDescriptionLabel = this.translate('common.cookies.categories.functions.description', 'تُتيح لك تجربة مخصصة وتفعيل ميزات متقدمة داخل الموقع.', 'Enable enhanced functionality and personalization.');
+        this.adsTitleLabel = this.translate('common.cookies.categories.ads.title', 'ملفات تعريف الارتباط الإعلانية', 'Advertising Cookies');
+        this.adsDescriptionLabel = this.translate('common.cookies.categories.ads.description', 'تُستخدم لعرض محتوى تسويقي مخصص يناسب اهتماماتك.', 'Allow personalized content.');
     }
     componentDidLoad() {
         this.mobileQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint - 1}px)`);
@@ -48,57 +171,187 @@ const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar
     disconnectedCallback() {
         this.mobileQuery?.removeEventListener('change', this.mobileQueryHandler);
         Salla.event.off('salla-cookies-bar::open', this.openRequestedHandler);
+        Salla.event.off('auth::logged.in', this.authLoggedInHandler);
+        Salla.event.off('auth::logged.out', this.authLoggedOutHandler);
         this.unregisterAfterFetchMenuItemsHook?.();
         this.unregisterAfterFetchMenuItemsHook = undefined;
     }
+    allCategoryKeys() {
+        return [
+            this.necessaryCookieKey,
+            this.performanceCookieKey,
+            this.functionalCookieKey,
+            this.advertisingCookieKey,
+        ];
+    }
+    writeLocalConsentCookies(points) {
+        for (const key of this.allCategoryKeys()) {
+            Salla.cookie.set(key, String(key === this.necessaryCookieKey || points.includes(key)), this.consentCookieDays);
+        }
+    }
     /**
-     * Accept cookies consent.
+     * Store the accepted categories as local cookies (works for guests too), then, for
+     * signed-in customers, replace their saved preference server-side.
+     * `points` is a full replace: any category left out is stored as declined.
      */
-    async accept() {
-        this.selectedConsent = 'accepted';
+    applyConsent(points) {
+        this.writeLocalConsentCookies(points);
+        this.sweepDisabledCategoryCookies(points);
+        if (!Salla.config.isGuest()) {
+            Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
+        }
+    }
+    /**
+     * The currently known accepted categories, read from local cookies — there is no
+     * backend endpoint to read the customer's saved preference back, so the cookies
+     * written on save are the only source of truth we have. Returns `null` when no
+     * choice has been made yet — the bar itself is the source of truth in that case,
+     * not a sweep.
+     */
+    currentConsentPoints() {
+        if (!Salla.storage.get('cookies-consent'))
+            return null;
+        return this.allCategoryKeys().filter(key => key === this.necessaryCookieKey || Salla.cookie.get(key) === 'true');
+    }
+    enforceCurrentConsent() {
+        const points = this.currentConsentPoints();
+        if (points)
+            this.sweepDisabledCategoryCookies(points);
+    }
+    /**
+     * Reflect the currently known choice (server record, or local cookies for a guest)
+     * in the toggles, so reopening the settings panel shows what was actually saved
+     * instead of resetting to all-off.
+     */
+    hydrateToggleState() {
+        const points = this.currentConsentPoints();
+        if (!points)
+            return;
+        this.performanceEnabled = points.includes(this.performanceCookieKey);
+        this.functionsEnabled = points.includes(this.functionalCookieKey);
+        this.adsEnabled = points.includes(this.advertisingCookieKey);
+    }
+    /**
+     * Wipe the locally-stored choice on logout. Local cookies/storage are scoped to the
+     * browser, not the account — without this, whatever the previous customer chose would
+     * be misread as "the visitor's own prior choice" and pushed to the next account that
+     * logs in (or is created) on this same browser.
+     */
+    clearLocalConsent() {
+        for (const key of this.allCategoryKeys()) {
+            Salla.cookie.remove(key);
+        }
+        Salla.storage.remove('cookies-consent');
+        // Whoever continues on this browser next (guest or a different account) hasn't
+        // made a choice yet, so the bar should show again right away.
+        this.isVisible = true;
+    }
+    /**
+     * Runs when a guest signs in. There is no backend endpoint to check whether the
+     * account already has a saved preference, so if the visitor already made a choice
+     * as a guest (guest choices are never sent server-side), attribute that local
+     * choice to the account now — this is the only source of truth available.
+     */
+    syncConsentAfterLogin() {
+        const points = this.currentConsentPoints();
+        if (!points)
+            return;
+        Salla.api.request('account/data-privacy', { points }, 'post').catch(() => { });
+    }
+    cookieNameMatchesPattern(cookieName, pattern) {
+        return pattern.endsWith('*')
+            ? cookieName.startsWith(pattern.slice(0, -1))
+            : cookieName === pattern;
+    }
+    /**
+     * Remove known first-party tracking cookies for any category the customer just
+     * declined. Cookies scoped to a third-party domain (e.g. doubleclick.net) can't be
+     * reached from here — only cookies the tracking script set on the store's own domain.
+     */
+    sweepDisabledCategoryCookies(points) {
+        const disabledCategories = Object.keys(this.trackingCookiesByCategory).filter(category => !points.includes(category));
+        if (!disabledCategories.length)
+            return;
+        const patterns = disabledCategories.flatMap(category => this.trackingCookiesByCategory[category]);
+        const currentCookieNames = document.cookie
+            .split(';')
+            .map(cookie => cookie.split('=')[0].trim());
+        currentCookieNames
+            .filter(cookieName => patterns.some(pattern => this.cookieNameMatchesPattern(cookieName, pattern)))
+            .forEach(cookieName => Salla.cookie.remove(cookieName));
+    }
+    dismiss(eventName) {
         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');
+        Salla.event.emit(`salla-cookies-bar::${eventName}`);
+        Salla.storage.set('cookies-consent', eventName);
+    }
+    /**
+     * Persist the customized per-category toggle choices, then dismiss.
+     */
+    savePreferences() {
+        const points = [this.necessaryCookieKey];
+        if (this.performanceEnabled)
+            points.push(this.performanceCookieKey);
+        if (this.functionsEnabled)
+            points.push(this.functionalCookieKey);
+        if (this.adsEnabled)
+            points.push(this.advertisingCookieKey);
+        this.applyConsent(points);
+        this.dismiss('accepted');
+    }
+    /**
+     * Accept cookies consent.
+     */
+    async accept() {
+        this.applyConsent(this.allCategoryKeys());
+        this.dismiss('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');
+        this.applyConsent([this.necessaryCookieKey]);
+        this.dismiss('rejected');
         return this.host;
     }
     /**
-     * Show cookies settings bar to allow updating consent.
+     * Show cookies settings bar to allow updating consent. Always opens on the initial
+     * consent step, same as first load — the customer picks "customize" to reach the
+     * per-category panel.
      */
     async open() {
-        this.selectedConsent = this.getStoredConsentChoice();
+        this.hydrateToggleState();
+        this.step = 'consent';
         this.isVisible = true;
         return this.host;
     }
-    getStoredConsentChoice() {
-        const stored = Salla.storage.get('cookies-consent');
-        return stored === 'accepted' || stored === 'rejected' ? stored : 'rejected';
+    /**
+     * Move from the initial consent step to the per-category customization panel.
+     */
+    openPreferences() {
+        this.hydrateToggleState();
+        this.step = 'preferences';
     }
     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')
+        if (!websiteCookiesEnabled ||
+            !menuComponent?.withCookiePreferences ||
+            menuComponent?.source !== 'footer')
             return;
         const settingsHref = '#cookies-settings';
-        const hasSettingsLink = menuComponent?.menus.some((m) => m?.url === settingsHref);
+        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, {
+        menuComponent.menus = [
+            ...menuComponent.menus,
+            {
                 id: 'cookies-settings',
                 order: null,
                 title: Salla.lang.get('common.cookies.settings'),
@@ -108,24 +361,63 @@ const SallaCookiesBar$1 = /*@__PURE__*/ proxyCustomElement(class SallaCookiesBar
                 children: [],
                 image: null,
                 callback: () => Salla.event.emit('salla-cookies-bar::open'),
-            }];
+            },
+        ];
+    }
+    renderToggle(checked, disabled, label, onToggle) {
+        return (h("label", { class: { 's-toggle': true, 's-toggle--disabled': disabled } }, h("input", { class: "s-toggle-input", type: "checkbox", checked: checked, disabled: disabled, "aria-label": label, onChange: () => onToggle?.() }), h("div", { class: "s-toggle-switcher" })));
+    }
+    renderCategory(title, description, toggle, badge) {
+        return (h("div", { class: "s-cookies-bar-category" }, h("div", { class: "s-cookies-bar-category-content" }, h("div", { class: "s-cookies-bar-category-title-row" }, h("span", { class: "s-cookies-bar-category-title" }, title), badge && h("span", { class: "s-cookies-bar-badge" }, badge)), h("p", { class: "s-cookies-bar-category-description m-0" }, description)), toggle));
+    }
+    renderMessage() {
+        return (h("p", { class: "s-cookies-bar-message 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))));
+    }
+    /**
+     * Step 1: the initial bar — consent message plus accept/customize actions.
+     * Accepting here accepts every category outright; customizing moves on to
+     * the per-category panel without deciding anything yet.
+     */
+    renderConsentStep() {
+        return (h("div", { class: "s-cookies-bar-consent" }, this.renderMessage(), h("div", { class: "s-cookies-bar-consent-actions" }, h("salla-button", { class: "s-cookies-bar-btn--customize", color: "primary", fill: "outline", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.openPreferences() }, this.customizeLabel), h("salla-button", { class: "s-cookies-bar-btn--accept", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.accept() }, this.acceptAllLabel))));
+    }
+    /**
+     * Step 2: the per-category customization panel.
+     */
+    renderPreferencesStep() {
+        return (h("div", null, h("div", { class: "s-cookies-bar-header" }, h("h3", { class: "s-cookies-bar-title m-0" }, this.titleLabel), h("button", { type: "button", class: "s-cookies-bar-close", "aria-label": this.titleLabel, onClick: () => this.reject() }, h("span", { innerHTML: Cancel }))), h("div", { class: "s-cookies-bar-categories" }, this.renderCategory(this.essentialTitleLabel, this.essentialDescriptionLabel, this.renderToggle(true, true, this.essentialTitleLabel), this.essentialBadgeLabel), this.renderCategory(this.performanceTitleLabel, this.performanceDescriptionLabel, this.renderToggle(this.performanceEnabled, false, this.performanceTitleLabel, () => (this.performanceEnabled = !this.performanceEnabled))), this.renderCategory(this.functionsTitleLabel, this.functionsDescriptionLabel, this.renderToggle(this.functionsEnabled, false, this.functionsTitleLabel, () => (this.functionsEnabled = !this.functionsEnabled))), this.renderCategory(this.adsTitleLabel, this.adsDescriptionLabel, this.renderToggle(this.adsEnabled, false, this.adsTitleLabel, () => (this.adsEnabled = !this.adsEnabled)))), h("div", { class: "s-cookies-bar-footer" }, this.renderMessage(), h("salla-button", { class: "s-cookies-bar-btn--save", color: "primary", fill: "solid", type: "button", size: this.isMobile ? 'small' : 'medium', onClick: () => this.savePreferences() }, this.saveLabel))));
     }
     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))))));
+        return (h(Host, null, h("div", { dir: this.isRtl() ? 'rtl' : 'ltr', class: "s-cookies-bar" }, this.step === 'consent' ? this.renderConsentStep() : this.renderPreferencesStep())));
     }
     get host() { return this; }
     static get style() { return sallaCookiesBarCss; }
 }, [0, "salla-cookies-bar", {
         "isVisible": [32],
+        "step": [32],
         "isMobile": [32],
+        "titleLabel": [32],
+        "saveLabel": [32],
         "messageLabel": [32],
         "linkLabel": [32],
         "acceptLabel": [32],
-        "rejectLabel": [32],
-        "selectedConsent": [32],
+        "acceptAllLabel": [32],
+        "customizeLabel": [32],
+        "essentialTitleLabel": [32],
+        "essentialDescriptionLabel": [32],
+        "essentialBadgeLabel": [32],
+        "performanceTitleLabel": [32],
+        "performanceDescriptionLabel": [32],
+        "performanceEnabled": [32],
+        "functionsTitleLabel": [32],
+        "functionsDescriptionLabel": [32],
+        "functionsEnabled": [32],
+        "adsTitleLabel": [32],
+        "adsDescriptionLabel": [32],
+        "adsEnabled": [32],
         "accept": [64],
         "reject": [64],
         "open": [64]

package/dist/esm/{filepond-DMUE9Fyj.js → filepond-Bxzb6RRZ.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-DBZQTm7s.js → filepond-plugin-file-poster-CZfrjnEX.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-CrKxdsNW.js → filepond-plugin-file-validate-size-Dqa69lX7.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-DvEJrucY.js → filepond-plugin-file-validate-type-C_76nxDb.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-C6ptCg9o.js → filepond-plugin-image-edit-BvzVMeMY.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-IcgeTieF.js → filepond-plugin-image-exif-orientation-Br4ANTi7.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-CDMh74os.js → filepond-plugin-image-preview-e54xZ08P.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CjQzkU95.js';
+import { d as getDefaultExportFromCjs } from './index-5UtJVEzd.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {