@salla.sa/twilight-components 2.14.486 → 2.14.488

package/dist/esm/salla-order-cancel.entry.js

@@ -0,0 +1,294 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
+
+const sallaOrderCancelCss = ".s-order-cancel-reason .s-order-cancel-radio::before,.s-order-cancel-reason .s-radio::before{content:\"\";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:120ms transform ease-in-out;background-color:#fff;box-shadow:inset 1em 1em #fff}.s-order-cancel-reason .s-order-cancel-radio:checked::before,.s-order-cancel-reason .s-radio:checked::before{transform:scale(1);background-color:var(--color-primary);box-shadow:inset 1em 1em var(--color-primary)}";
+
+const MAX_NOTE = 250;
+const ORDER_WAIT_MS = 2500;
+const DATE_HEADER = 'td.single-order-header-item:not(.flex)';
+const CANCELLED_MARKER = '[data-salla-order-cancelled-reason]';
+const CANCELLED_BY_LABELS = {
+    customer: 'أُلغي الطلب من قِبل العميل',
+    merchant: 'أُلغي الطلب من قِبل المتجر',
+};
+const LANG_PAIRS = [
+    ['pages.orders.cancel_modal_title', 'إلغاء الطلب', 'Cancel order'],
+    ['pages.orders.cancel_reason_title', 'لماذا ترغب في إلغاء الطلب؟', 'Why do you want to cancel this order?'],
+    ['pages.orders.cancel_reason_subtitle', 'ساعدنا نعرف السبب لتحسين تجربتك.', 'Help us understand why to improve your experience.'],
+    ['pages.orders.cancel_reason_confirm', 'تأكيد إلغاء الطلب', 'Confirm order cancellation'],
+    ['pages.orders.cancel_reason_back', 'تراجع', 'Go back'],
+    ['pages.orders.cancel_reason_note_placeholder', 'اذكر السبب', 'Mention the reason'],
+    ['pages.orders.cancelled_by_customer', CANCELLED_BY_LABELS.customer, 'Order cancelled by the customer'],
+    ['pages.orders.cancelled_by_merchant', CANCELLED_BY_LABELS.merchant, 'Order cancelled by the merchant'],
+    ['pages.orders.cancel_reason_char_limit', 'يتجاوز النص حد الأحرف المسموح', 'Text exceeds the allowed character limit'],
+];
+const parseJson = (value) => {
+    if (!value)
+        return null;
+    try {
+        const data = typeof value === 'string' ? JSON.parse(value) : value;
+        return data && typeof data === 'object' ? data : null;
+    }
+    catch {
+        return null;
+    }
+};
+const parseCancelledReason = (raw) => {
+    const data = parseJson(raw);
+    const reasons = Array.isArray(data?.reasons)
+        ? data.reasons.filter((r) => typeof r === 'string' && r.length > 0)
+        : [];
+    if (!reasons.length)
+        return null;
+    return { cancelled_by: data?.cancelled_by === 'merchant' ? 'merchant' : 'customer', reasons };
+};
+const normalizeReasons = (reasons) => reasons.filter(r => r.is_active !== false).sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0));
+const parseReasonsProp = (value) => {
+    if (value == null || value === '')
+        return null;
+    const parsed = typeof value === 'string' ? parseJson(value) : value;
+    return Array.isArray(parsed) && parsed.length ? parsed : null;
+};
+const SallaOrderCancel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.reasons = [];
+        this.selectedReasonId = null;
+        this.reasonNote = '';
+        this.confirmLoading = false;
+        this.loading = true;
+        this.modalTitleLabel = '';
+        this.questionLabel = '';
+        this.subtitleLabel = '';
+        this.confirmLabel = '';
+        this.backLabel = '';
+        this.notePlaceholder = '';
+        this.charLimitLabel = '';
+        salla.lang.onLoaded(() => {
+            const ar = salla.lang.messages?.['ar.trans'];
+            const en = salla.lang.messages?.['en.trans'];
+            if (ar && en && salla.helpers?.setNested) {
+                for (const [key, arText, enText] of LANG_PAIRS) {
+                    salla.helpers.setNested(ar, key, arText);
+                    salla.helpers.setNested(en, key, enText);
+                }
+            }
+            this.refreshLabels();
+        });
+    }
+    onCancellationReasonsChange() {
+        void this.load();
+    }
+    async componentWillLoad() {
+        await salla.onReady();
+        this.refreshLabels();
+        await this.load();
+    }
+    refreshLabels() {
+        const t = (key, fb) => salla.lang.getWithDefault(key, fb);
+        this.modalTitleLabel = t('pages.orders.cancel_modal_title', 'إلغاء الطلب');
+        this.questionLabel = t('pages.orders.cancel_reason_title', 'لماذا ترغب في إلغاء الطلب؟');
+        this.subtitleLabel = t('pages.orders.cancel_reason_subtitle', 'ساعدنا نعرف السبب لتحسين تجربتك.');
+        this.confirmLabel = t('pages.orders.cancel_reason_confirm', 'تأكيد إلغاء الطلب');
+        this.backLabel = t('pages.orders.cancel_reason_back', 'تراجع');
+        this.notePlaceholder = t('pages.orders.cancel_reason_note_placeholder', 'اذكر السبب');
+        this.charLimitLabel = t('pages.orders.cancel_reason_char_limit', 'يتجاوز النص حد الأحرف المسموح');
+    }
+    get resolvedOrderId() {
+        const id = this.orderId ?? this.pageOrder?.id ?? salla.config.get('page.id');
+        const n = Number(id);
+        return Number.isFinite(n) ? n : id;
+    }
+    readPageOrder() {
+        const el = document.querySelector('salla-order-totals-card');
+        return el ? parseJson(el.order ?? el.getAttribute('order')) : null;
+    }
+    waitForPageOrder() {
+        const order = this.readPageOrder();
+        if (order)
+            return Promise.resolve(order);
+        if (typeof MutationObserver === 'undefined') {
+            // ponytail: jsdom has no MutationObserver; one microtask retry for spec DOM
+            return Promise.resolve().then(() => this.readPageOrder());
+        }
+        return new Promise(resolve => {
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                observer.disconnect();
+                clearTimeout(timer);
+                resolve(this.readPageOrder());
+            };
+            const card = document.querySelector('salla-order-totals-card');
+            const observer = new MutationObserver(finish);
+            observer.observe(card ?? document.documentElement, card
+                ? { attributes: true, attributeFilter: ['order'] }
+                : { childList: true, subtree: true, attributes: true, attributeFilter: ['order'] });
+            const timer = setTimeout(finish, ORDER_WAIT_MS);
+        });
+    }
+    cancelledByLabel(by) {
+        return salla.lang.getWithDefault(`pages.orders.cancelled_by_${by}`, CANCELLED_BY_LABELS[by]);
+    }
+    mountCancelledHeader(attempt = 0) {
+        const cancelled = this.orderCancelledReason;
+        const reason = cancelled?.reasons[0];
+        if (!reason || document.querySelector(CANCELLED_MARKER))
+            return;
+        const anchor = document.querySelector(DATE_HEADER);
+        if (!anchor) {
+            // ponytail: hook mounts before header table in single.twig; retry until anchor exists
+            if (attempt < 20)
+                requestAnimationFrame(() => this.mountCancelledHeader(attempt + 1));
+            return;
+        }
+        const cell = document.createElement('td');
+        cell.className = 's-order-cancel-cancelled-header-item';
+        cell.setAttribute('data-salla-order-cancelled-reason', '');
+        const label = document.createElement('div');
+        label.className = 's-order-cancel-cancelled-header-label';
+        label.textContent = this.cancelledByLabel(cancelled.cancelled_by);
+        const value = document.createElement('b');
+        value.className = 's-order-cancel-cancelled-header-reason';
+        value.textContent = reason;
+        value.title = reason;
+        cell.append(label, value);
+        anchor.insertAdjacentElement('afterend', cell);
+    }
+    purgeLegacyModal() {
+        if (!this.reasons.length)
+            return;
+        for (const el of document.querySelectorAll('salla-modal#modal-order-cancel:not([data-salla-order-cancel])')) {
+            el.remove();
+        }
+    }
+    applyPageOrder(order) {
+        this.pageOrder = order;
+        this.orderCancelledReason = parseCancelledReason(order.order_cancelled_reason) ?? undefined;
+    }
+    async load() {
+        this.loading = true;
+        try {
+            const fromProp = parseReasonsProp(this.cancellationReasons);
+            if (!this.pageOrder) {
+                const order = this.readPageOrder();
+                if (order)
+                    this.applyPageOrder(order);
+            }
+            if (!this.pageOrder && !fromProp) {
+                const order = await this.waitForPageOrder();
+                if (order)
+                    this.applyPageOrder(order);
+            }
+            else if (!this.pageOrder) {
+                void this.waitForPageOrder().then(order => {
+                    if (order) {
+                        this.applyPageOrder(order);
+                        this.mountCancelledHeader();
+                    }
+                });
+            }
+            const order = this.pageOrder;
+            this.reasons = fromProp
+                ? normalizeReasons(fromProp)
+                : order
+                    ? normalizeReasons(Array.isArray(order.cancellation_reasons) ? order.cancellation_reasons : [])
+                    : [];
+        }
+        finally {
+            this.loading = false;
+            this.purgeLegacyModal();
+            this.mountCancelledHeader();
+        }
+    }
+    reasonLabel(reason) {
+        const locale = salla.lang.getLocale?.() || 'ar';
+        return reason.translations?.[locale]?.name || reason.name;
+    }
+    get hasOtherSelected() {
+        return this.selectedReasonId !== null && this.reasons.some(r => r.id === this.selectedReasonId && r.slug === 'other');
+    }
+    get canConfirm() {
+        if (this.selectedReasonId === null)
+            return false;
+        if (!this.hasOtherSelected)
+            return true;
+        const len = this.reasonNote.trim().length;
+        return len > 0 && len <= MAX_NOTE;
+    }
+    selectReason(id) {
+        if (this.selectedReasonId === id) {
+            if (this.reasons.find(r => r.id === id)?.slug === 'other')
+                this.reasonNote = '';
+            this.selectedReasonId = null;
+            return;
+        }
+        if (this.reasons.find(r => r.id === this.selectedReasonId)?.slug === 'other') {
+            this.reasonNote = '';
+        }
+        this.selectedReasonId = id;
+        if (this.reasons.length && this.reasons[this.reasons.length - 1].id === id) {
+            const timer = setTimeout(() => {
+                requestAnimationFrame(() => {
+                    document.getElementById(`s-order-cancel-reason-${id}`)?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+                    const textarea = document.querySelector('.s-order-cancel-textarea');
+                    textarea?.focus();
+                    clearTimeout(timer);
+                });
+            }, 200);
+        }
+    }
+    resetForm() {
+        this.selectedReasonId = null;
+        this.reasonNote = '';
+        this.confirmLoading = false;
+    }
+    setReasonNote(event) {
+        this.reasonNote = event.target.value;
+    }
+    onKeyActivate(event, action) {
+        if (event.key === 'Enter' || event.key === ' ')
+            action();
+    }
+    async confirmCancel() {
+        if (!this.canConfirm || this.confirmLoading)
+            return;
+        this.confirmLoading = true;
+        try {
+            const note = this.hasOtherSelected ? this.reasonNote.trim() : '';
+            const payload = {
+                reasons: [String(this.selectedReasonId)],
+                ...(note && { reason_note: note }),
+            };
+            await salla.order.api.cancel(this.resolvedOrderId, payload);
+            window.location.reload();
+        }
+        catch {
+            this.confirmLoading = false;
+        }
+    }
+    render() {
+        if (this.loading || !this.reasons.length)
+            return h(Host, { class: "s-order-cancel-wrapper" });
+        return (h(Host, { class: "s-order-cancel-wrapper" }, h("salla-modal", { id: "modal-order-cancel", class: "s-order-cancel-modal", "data-salla-order-cancel": "", ref: el => {
+                this.modal = el;
+                void el?.setTitle?.(this.modalTitleLabel);
+            }, width: "sm", onModalVisibilityChanged: e => !e.detail && this.resetForm() }, h("div", { class: "s-order-cancel-content" }, h("div", { class: "s-order-cancel-intro" }, h("p", { class: "s-order-cancel-heading" }, this.questionLabel), h("p", { class: "s-order-cancel-subtitle" }, this.subtitleLabel)), h("div", { class: "s-order-cancel-reasons s-scrollbar" }, this.reasons.map(reason => {
+            const id = `s-order-cancel-reason-${reason.id}`;
+            return (h("label", { key: reason.id, class: "s-order-cancel-reason", htmlFor: id }, h("input", { type: "radio", name: "cancellation_reason", id: id, class: "s-order-cancel-radio s-radio", checked: this.selectedReasonId === reason.id, onChange: () => this.selectReason(reason.id) }), h("span", { class: "s-order-cancel-reason-label" }, this.reasonLabel(reason))));
+        })), this.hasOtherSelected && (h("div", { class: "s-order-cancel-other-field" }, h("textarea", { class: "s-order-cancel-textarea", placeholder: this.notePlaceholder, value: this.reasonNote, onInput: e => this.setReasonNote(e) }), h("p", { class: {
+                's-order-cancel-counter': true,
+                's-order-cancel-counter--limit': this.reasonNote.length >= MAX_NOTE,
+            } }, this.reasonNote.length >= MAX_NOTE && `${this.charLimitLabel} `, MAX_NOTE, "/", this.reasonNote.length))), h("div", { class: "s-order-cancel-actions" }, h("salla-button", { color: "primary", class: "w-full", width: "wide", disabled: !this.canConfirm, loading: this.confirmLoading, onClick: () => this.confirmCancel(), onKeyDown: e => this.onKeyActivate(e, () => this.confirmCancel()) }, this.confirmLabel), h("salla-button", { class: "w-full", width: "wide", fill: "outline", color: "gray", onClick: () => this.modal?.close(), onKeyDown: e => this.onKeyActivate(e, () => this.modal?.close()) }, this.backLabel))))));
+    }
+    static get watchers() { return {
+        "cancellationReasons": ["onCancellationReasonsChange"]
+    }; }
+};
+SallaOrderCancel.style = sallaOrderCancelCss;
+
+export { SallaOrderCancel as salla_order_cancel };

package/dist/esm/salla-order-details-multiple-bundle-product.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 
 const sallaOrderDetailsMultipleBundleProductCss = "";
 

package/dist/esm/salla-order-details-options.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 
 var copyIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-order-details.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, F as Fragment, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, F as Fragment, H as Host } from './index-K0OclOPO.js';
 
 const sallaOrderDetailsCss = "";
 

package/dist/esm/salla-order-edit-item.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-K0OclOPO.js';
 import { a as getOrderEditProductMaxQuantity } from './helpers-DR_vlSvU.js';
 import './interfaces-CoQJOPRz.js';
 

package/dist/esm/salla-order-edit-product-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-K0OclOPO.js';
 
 const sallaOrderEditProductCardCss = ":host{display:block;min-width:0}";
 

package/dist/esm/salla-order-edit.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 import { g as getOrderItemSelectedOptions, a as getOrderEditProductMaxQuantity, c as clampOrderEditQuantity, u as updateOrderItems, r as removeOrderItems, m as mergePayloadItems, b as cloneOrderEditProduct, f as findMergeableItem, d as updateAddedPayloadList, e as upsertPayloadUpdateList, h as createAddedOrderItem, i as buildSavePayload } from './helpers-DR_vlSvU.js';
 import './interfaces-CoQJOPRz.js';
 

package/dist/esm/salla-order-options-modal_3.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, a as getElement, H as Host } from './index-K0OclOPO.js';
 import { S as Star } from './star2-D4oPi1Ov.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import './anime.es-CgtvEd63.js';
 
 const sallaOrderOptionsModalCss = ".s-order-options-modal-host .s-modal-header-inner,.s-order-options-modal-host .s-modal-header-content,.s-order-options-modal-host .s-modal-title{text-align:start !important}.s-order-options-modal-apple-pay{display:block;width:100%;--apple-pay-button-width:100%;--apple-pay-button-height:44px;--apple-pay-button-border-radius:0.75rem}.s-order-options-modal-apple-pay-wrap{display:flex;flex-direction:column;gap:0.75rem;width:100%}.s-order-options-modal-apple-pay-total{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.s-order-options-modal-apple-pay-label,.s-order-options-modal-apple-pay-amount{font-size:1.125rem;line-height:1.5rem;font-weight:700;color:#111827}";

package/dist/esm/salla-order-summary.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-BF901xIc.js';
+import { r as registerInstance, h } from './index-K0OclOPO.js';
 import { i as iconCopy } from './swap-stroke-DqDX5na4.js';
 import { S as SICheck } from './check-BZp0rKEO.js';
 

package/dist/esm/salla-order-totals-card.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 
 const sallaOrderTotalsCardCss = ":host{display:block}";
 

package/dist/esm/salla-orders.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-BF901xIc.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { r as registerInstance, h, a as getElement } from './index-K0OclOPO.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import './anime.es-CgtvEd63.js';
 
 const sallaOrdersCss = ":host{display:block}";

package/dist/esm/salla-payments.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 
 const sallaPaymentsCss = ":host{display:block}";
 

package/dist/esm/salla-placeholder.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 
 var Inbox = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-price-range.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-K0OclOPO.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 
 var arrowRight = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-product-card-embed.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 
 const sallaProductCardEmbedCss = "@charset \"UTF-8\";:host{display:inline-block;vertical-align:top;max-width:12rem}:host([align=left]){float:inline-start;margin-block-end:1em;margin-inline-end:1em;shape-outside:margin-box}:host([align=right]){float:inline-end;margin-block-end:1em;margin-inline-start:1em;shape-outside:margin-box}:host([align=center]){display:block;clear:both;margin-block:1em;margin-inline:auto}.s-product-card-embed-card{display:block}";
 

package/dist/esm/salla-product-size-guide.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, a as getElement } from './index-K0OclOPO.js';
 
 var PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

package/dist/esm/salla-products-list.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 
 const sallaProductsListCss = ".s-products-list-selectable-item{position:relative;border-radius:0.5rem;transition:box-shadow 0.15s ease-in-out}.s-products-list-item-selected{box-shadow:0 0 0 2px var(--color-primary)}.s-products-list-select-control{position:absolute;top:10px;inset-inline-start:10px;z-index:5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.s-products-list-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:22px;height:22px;margin:0;cursor:pointer;color:var(--color-primary);border:1px solid rgba(0, 0, 0, 0.15);border-radius:6px;background-color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:background-color 0.15s ease-in-out, border-color 0.15s ease-in-out}.s-products-list-select-checkbox:hover{border-color:var(--color-primary)}.s-products-list-select-checkbox:focus,.s-products-list-select-checkbox:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent)}.s-products-list-select-checkbox:checked,.s-products-list-select-checkbox:checked:hover,.s-products-list-select-checkbox:checked:focus{background-color:var(--color-primary);border-color:var(--color-primary)}.s-products-list-select-checkbox:checked::after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%, -60%) rotate(45deg)}.s-products-list-row-cards .s-products-list-select-control{top:50%;inset-inline-start:14px;transform:translateY(-50%)}.s-products-list-row-cards .s-products-list-selectable-item>:not(.s-products-list-select-control){padding-inline-start:2.75rem}";
 
@@ -140,10 +140,11 @@ const SallaProductsList = class {
         window.scrollTo({ top: 0, behavior: 'smooth' });
         // Create a deep copy of the filters object to avoid mutating the original object
         this.parsedFilters = JSON.parse(JSON.stringify(filters));
-        if (this.currentPage?.slug == 'product.index' &&
-            this.parsedFilters &&
-            this.parsedFilters.category_id) {
-            this.currentCategoryIdFilter = [this.parsedFilters.category_id];
+        if (this.currentPage?.slug == 'product.index') {
+            // clear when category_id disappears, otherwise getSourceValue() keeps filtering by the removed category
+            this.currentCategoryIdFilter = this.parsedFilters?.category_id
+                ? this.toCategoryIdFilter(this.parsedFilters.category_id)
+                : null;
         }
         return this.reload();
     }
@@ -606,6 +607,14 @@ const SallaProductsList = class {
     isAuxiliaryProductsListSource() {
         return ['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource());
     }
+    // Normalize a category_id filter (array, legacy {0:,1:} object, or scalar) into a flat list of ids
+    toCategoryIdFilter(catId) {
+        if (Array.isArray(catId))
+            return catId;
+        if (catId && typeof catId === 'object')
+            return Object.values(catId);
+        return [catId];
+    }
     getSourceValue() {
         if (this.getSource() === 'wishlist') {
             const searchParams = new URLSearchParams(window.location.search);
@@ -910,7 +919,7 @@ const SallaProductsList = class {
                 this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
                 this.parsedFilters = Helper.extractFiltersFromUrl(searchParams);
                 if (this.parsedFilters && this.parsedFilters.category_id) {
-                    this.currentCategoryIdFilter = [this.parsedFilters.category_id];
+                    this.currentCategoryIdFilter = this.toCategoryIdFilter(this.parsedFilters.category_id);
                 }
             }
             catch (e) {
@@ -1031,12 +1040,15 @@ const SallaProductsList = class {
                         title = salla.lang.get('common.elements.search_about', { word: this.getSourceValue() });
                     }
                     else if (!title) {
-                        let catId = this.parsedFilters.category_id || this.getSourceValue()[0];
+                        // with user-applied filters a category name in the title is misleading — show count only;
+                        // the unfiltered base state keeps the page category's name
+                        let catId = Object.keys(this.parsedFilters || {}).length ? null : this.getSourceValue()[0];
                         // get the first filter that its key is category_id, then get the value when filter.value.*.key==catId
                         title =
                             response.filters
                                 ?.find(filter => filter.key === 'category_id')
-                                ?.values?.find(cat => cat.key === catId)?.value ?? '';
+                                // loose == : catId may be a number (auto-appended page.id) while API keys are strings
+                                ?.values?.find(cat => cat.key == catId)?.value ?? '';
                     }
                     title +=
                         (title ? ' - ' : '') +

package/dist/esm/salla-quick-order.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 import { S as SIiPhoneX } from './iphone-x-CciN5Q_x.js';
 import { e as email } from './mail-DzAIgzdz.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';

package/dist/esm/salla-rating-modal.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 import { W as WishListIcon } from './star-ZT7ehBBk.js';
 import { C as CheckCircle2 } from './check-circle2-BV4kqbdL.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import { I as ImageIcon } from './image-C-tzSDxw.js';
 import { W as WhatsappIcon } from './whatsapp2-CgR-T_ZS.js';
 import { e as email } from './mail-DzAIgzdz.js';

package/dist/esm/salla-reward-action_4.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BF901xIc.js';
-import { c as closeModals, b as brand_path, f as formattedPointsJsx } from './functions-DflaFDbL.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-K0OclOPO.js';
+import { c as closeModals, b as brand_path, f as formattedPointsJsx } from './functions-CJdqLH4P.js';
 import { S as SIGift } from './gift-CXRKXFgT.js';
 import { S as SITag } from './tag-cgSL_BIo.js';
 import { S as SICheck } from './check-BZp0rKEO.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';
-import { T as TrackedPromise } from './tracked-promise-CNdO8SSl.js';
+import { T as TrackedPromise } from './tracked-promise-yWzlErXb.js';
 
 const sallaLoyaltyProgramCss$3 = "";
 

package/dist/esm/salla-scopes.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 import { S as Search } from './search-BscTeWDc.js';
 
 var StoreAlt = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-search.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, a as getElement } from './index-K0OclOPO.js';
 import { S as Search } from './search-BscTeWDc.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import './anime.es-CgtvEd63.js';
 
 const sallaSearchCss = ".s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}";

package/dist/esm/salla-skeleton.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host } from './index-K0OclOPO.js';
 
 const sallaSkeletonCss = ":host{display:block}";
 

package/dist/esm/salla-slider.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 import { a as ArrowRightIcon, A as ArrowLeftIcon } from './keyboard_arrow_right-Vqpj4CWE.js';
 
 /**

package/dist/esm/salla-social-share.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, a as getElement } from './index-K0OclOPO.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 import { e as email } from './mail-DzAIgzdz.js';

package/dist/esm/salla-social.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-K0OclOPO.js';
 import { f as facebook, t as twitter } from './facebook-CO-PeZ27.js';
 
 var instagram = `<!-- Generated by IcoMoon.io -->

package/dist/esm/salla-tab-content_3.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, c as createEvent, a as getElement } from './index-BF901xIc.js';
+import { r as registerInstance, h, c as createEvent, a as getElement } from './index-K0OclOPO.js';
 
 const sallaTabContentCss = "";