@salla.sa/twilight-components 2.14.486 → 2.14.487

package/dist/esm/salla-cart-summary-card.entry.js

@@ -0,0 +1,347 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DBMDFsFH.js';
+
+const SKELETON_ROWS = [
+    { label: '100px', value: '56px' },
+    { label: '72px', value: '64px' },
+    { label: '96px', value: '48px' },
+];
+const SallaCartSummaryCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.validateForms = true;
+        this.cartCount = 0;
+        this.cartTotal = 0;
+        this.cartTotalDiscount = 0;
+        this.cartSubTotal = 0;
+        this.cartOptionsTotal = 0;
+        this.cartShippingCost = 0;
+        this.cartTaxAmount = 0;
+        this.cartHasShipping = false;
+        this.isOpen = false;
+        this.isDesktop = false;
+        /** True until the first cart payload (API response or cart event) arrives. */
+        this.isLoading = true;
+        // Original DOM location — needed to restore the host on the mobile→desktop flip.
+        this.originalParent = null;
+        this.originalNextSibling = null;
+        this.bodyObserver = null;
+        this.mediaQueryList = null;
+        this.submitObserver = null;
+        this.isSubmitting = false;
+        // Stable handler refs — anonymous functions can't be unbound from listeners.
+        this.mqlChangeHandler = (e) => {
+            this.isDesktop = e.matches;
+            this.applyMode();
+        };
+        this.cartEventNames = [
+            'cart::details.fetched',
+            'cart::updated',
+            'cart::latest.fetched',
+            'cart::coupon.added',
+            'cart::coupon.deleted',
+        ];
+        this.cartEventHandler = (payload) => this.applyCartData(this.extractCart(payload));
+        this.toggleSheet = () => {
+            if (!this.isDesktop)
+                this.isOpen = !this.isOpen;
+        };
+        this.handleSubmit = async (event) => {
+            // Re-entrancy guard, set before the async validation so a second tap during
+            // that window can't fire a second submit. Covers all user types.
+            if (this.isSubmitting) {
+                event.preventDefault();
+                return;
+            }
+            this.isSubmitting = true;
+            if (this.validateForms && !(await this.validateCartForms())) {
+                event.preventDefault();
+                salla.notify?.error?.(salla.lang?.get?.('common.messages.required_fields'));
+                this.isSubmitting = false; // validation failed → allow retry
+                return;
+            }
+            const btn = this.host.querySelector('#s-cart-summary-card-submit');
+            if (typeof salla !== 'undefined' && salla.config?.get?.('user.type') !== 'guest' && btn) {
+                btn.load?.();
+                // Pin loading across re-renders; auto-clear after 10s so a failed submit
+                // doesn't lock the button forever.
+                this.submitObserver?.disconnect();
+                if (this.submitObserverTimeout)
+                    clearTimeout(this.submitObserverTimeout);
+                this.submitObserver = new MutationObserver(() => {
+                    if (!btn.hasAttribute('loading'))
+                        btn.setAttribute('loading', '');
+                });
+                this.submitObserver.observe(btn, { attributes: true, attributeFilter: ['loading'] });
+                this.submitObserverTimeout = window.setTimeout(() => {
+                    this.submitObserver?.disconnect();
+                    this.submitObserver = null;
+                    btn.removeAttribute?.('loading');
+                }, 10000);
+            }
+            salla.cart?.submit?.();
+            // Release after submit kicks off: success navigates away, a guest opens the
+            // login modal. Short delay blocks the double-tap race without a long lock.
+            window.setTimeout(() => { this.isSubmitting = false; }, 1500);
+        };
+    }
+    // Sync: returning a promise would make Stencil defer first paint. init() runs async.
+    componentWillLoad() {
+        this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+        this.isDesktop = this.mediaQueryList.matches;
+        if (this.isDesktop)
+            this.isOpen = true;
+        // isLoading is true by default → first paint is the skeleton.
+        this.init();
+    }
+    // Not awaited by componentWillLoad, so it can't block first paint.
+    async init() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.loadTranslations();
+        // 'cart::updated' is in cartEventNames — don't also use onUpdated (it leaks, no off()).
+        this.cartEventNames.forEach(name => salla.event.on(name, this.cartEventHandler));
+        this.fetchCart();
+    }
+    loadTranslations() {
+        this.summaryLabel = salla.lang.get('pages.cart.summary');
+        this.itemsTotalLabel = salla.lang.get('pages.cart.items_total');
+        this.itemsTotalNoTaxLabel = salla.lang.get('pages.cart.items_total_without_tax');
+        this.optionsTotalLabel = salla.lang.get('pages.cart.order_options_total');
+        this.shippingCostLabel = salla.lang.get('pages.cart.shipping_cost');
+        this.vatTaxLabel = salla.lang.get('pages.cart.VAT_tax_amount');
+        this.savedLabel = salla.lang.get('pages.cart.discount');
+        this.discountBadge = salla.lang.get('pages.cart.saved');
+        this.finalTotalLabel = salla.lang.get('pages.cart.final_total');
+        this.pricesTaxedLabel = salla.lang.get('pages.cart.prices_taxed');
+        this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
+        this.openSummaryLabel = salla.lang.get('pages.cart.open_summary');
+        this.closeSummaryLabel = salla.lang.get('pages.cart.close_summary');
+        this.itemsCountTemplate = salla.lang.get('pages.cart.items_with_count');
+    }
+    /** Coerces PHP cart values: numbers, strings, and Money/MoneyTaxable objects. */
+    num(v) {
+        if (v === null || v === undefined)
+            return 0;
+        if (typeof v === 'number')
+            return isFinite(v) ? v : 0;
+        if (typeof v === 'string')
+            return parseFloat(v) || 0;
+        if (typeof v === 'object') {
+            if ('amount' in v)
+                return this.num(v.amount);
+            if ('value' in v)
+                return this.num(v.value);
+            if ('formatted' in v)
+                return this.num(v.formatted);
+        }
+        return 0;
+    }
+    // Desktop cutoff — must match the SCSS media queries so JS and CSS never diverge.
+    breakpointPx() {
+        return 1024;
+    }
+    desktopMediaQuery() {
+        return `(min-width: ${this.breakpointPx()}px)`;
+    }
+    componentDidLoad() {
+        // Capture original location BEFORE the portal relocates the host.
+        this.originalParent = this.host.parentElement;
+        this.originalNextSibling = this.host.nextSibling;
+        // Re-init if componentWillLoad failed to set it (rare hydration/race edge case).
+        if (!this.mediaQueryList) {
+            this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+            this.isDesktop = this.mediaQueryList.matches;
+        }
+        this.applyMode();
+        // iOS Safari < 14 lacks addEventListener on MediaQueryList — fall back to addListener.
+        if (this.mediaQueryList.addEventListener) {
+            this.mediaQueryList.addEventListener('change', this.mqlChangeHandler);
+        }
+        else {
+            this.mediaQueryList.addListener(this.mqlChangeHandler);
+        }
+    }
+    // Mobile: portal host to <body> so position:fixed escapes any transformed
+    // ancestor. Desktop: restore to its original DOM location.
+    applyMode() {
+        if (this.isDesktop) {
+            this.isOpen = true;
+            this.bodyObserver?.disconnect();
+            this.bodyObserver = null;
+            if (this.originalParent && this.host.parentElement !== this.originalParent) {
+                // Sibling may have been removed while we were portaled — fall back
+                // to appendChild instead of letting insertBefore throw.
+                const ref = this.originalNextSibling?.parentNode === this.originalParent
+                    ? this.originalNextSibling
+                    : null;
+                this.originalParent.insertBefore(this.host, ref);
+            }
+        }
+        else {
+            this.pinToBodyEnd();
+        }
+    }
+    // Re-pin via MutationObserver so a late-mounted footer can't paint over us.
+    pinToBodyEnd() {
+        if (this.host.parentElement !== document.body || document.body.lastElementChild !== this.host) {
+            document.body.appendChild(this.host);
+        }
+        if (!this.bodyObserver) {
+            this.bodyObserver = new MutationObserver(() => {
+                if (!this.isDesktop && document.body.lastElementChild !== this.host) {
+                    document.body.appendChild(this.host);
+                }
+            });
+            this.bodyObserver.observe(document.body, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        // Fires synchronously on every removal, incl. our own reparenting — defer a
+        // microtask and bail if reconnected, else the portal loses its listeners.
+        Promise.resolve().then(() => {
+            if (this.host.isConnected)
+                return;
+            this.bodyObserver?.disconnect();
+            this.submitObserver?.disconnect();
+            if (this.submitObserverTimeout) {
+                clearTimeout(this.submitObserverTimeout);
+                this.submitObserverTimeout = undefined;
+            }
+            // Mirror the iOS-Safari-<14 path used in componentDidLoad.
+            if (this.mediaQueryList?.removeEventListener) {
+                this.mediaQueryList.removeEventListener('change', this.mqlChangeHandler);
+            }
+            else {
+                this.mediaQueryList?.removeListener(this.mqlChangeHandler);
+            }
+            this.mediaQueryList = null;
+            this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
+        });
+    }
+    fetchCart() {
+        const cartId = salla.config?.get?.('page.id');
+        const result = salla.cart?.api?.details?.(cartId);
+        if (result && typeof result.then === 'function') {
+            result
+                .then((res) => this.applyCartData(this.extractCart(res)))
+                // On failure, fall back to the cached summary instead of stranding the skeleton.
+                .catch(() => this.applyCachedSummary());
+        }
+        else {
+            this.applyCachedSummary();
+        }
+    }
+    // Cart API failed → use the SDK's cached summary (localStorage, set on
+    // cart::updated). May be stale but beats zeros; events refresh it. Clears the
+    // skeleton either way so the CTA always renders.
+    applyCachedSummary() {
+        const summary = salla.storage?.get?.('cart.summary');
+        if (summary && typeof summary === 'object')
+            this.applyCartData(summary);
+        this.isLoading = false;
+    }
+    extractCart(payload) {
+        if (!payload)
+            return null;
+        if (payload.data?.cart)
+            return payload.data.cart;
+        if (payload.cart)
+            return payload.cart;
+        return payload;
+    }
+    applyCartData(data) {
+        if (!data)
+            return;
+        // First real payload ends the skeleton.
+        this.isLoading = false;
+        if (data.count !== undefined)
+            this.cartCount = this.num(data.count);
+        if (data.total !== undefined)
+            this.cartTotal = this.num(data.total);
+        // `total_discount` is the live field (untyped); `discount` is the typed fallback.
+        const discount = data.total_discount ?? data.discount;
+        if (discount !== undefined)
+            this.cartTotalDiscount = this.num(discount);
+        if (data.sub_total !== undefined)
+            this.cartSubTotal = this.num(data.sub_total);
+        if (data.options_total !== undefined)
+            this.cartOptionsTotal = this.num(data.options_total);
+        if (data.tax_amount !== undefined)
+            this.cartTaxAmount = this.num(data.tax_amount);
+        // Shipping cost (free-shipping aware): prefer `shipping_cost`, else `real_shipping_cost`.
+        const hasFreeShipping = !!data.free_shipping_bar?.has_free_shipping;
+        if (data.shipping_cost !== undefined)
+            this.cartShippingCost = this.num(data.shipping_cost);
+        else if (data.real_shipping_cost !== undefined)
+            this.cartShippingCost = hasFreeShipping ? 0 : this.num(data.real_shipping_cost);
+        // `has_shipping` isn't in the API response — derive row visibility from the cost.
+        this.cartHasShipping = this.cartShippingCost > 0 || !!data.has_shipping;
+    }
+    // Native reportValidity() covers standard fields; custom product options
+    // validate via their own async reportValidity() (incl. multi-option required
+    // logic), so await that too — else option validation is skipped at checkout.
+    async validateCartForms() {
+        let isValid = true;
+        document
+            .querySelectorAll('form[id^="item-"]')
+            .forEach(f => {
+            if (!f.reportValidity())
+                isValid = false;
+        });
+        const optionEls = Array.from(document.querySelectorAll('form[id^="item-"] salla-product-options'));
+        for (const el of optionEls) {
+            if (typeof el.reportValidity === 'function' && !(await el.reportValidity()))
+                isValid = false;
+        }
+        return isValid;
+    }
+    money(value) {
+        try {
+            if (typeof salla !== 'undefined' && typeof salla.money === 'function') {
+                return salla.money(value);
+            }
+        }
+        catch (_) { }
+        return String(value ?? 0);
+    }
+    getItemsLabel() {
+        return this.itemsCountTemplate?.replace(':count', String(this.cartCount)) ?? '';
+    }
+    // Skeleton during the initial fetch
+    renderSkeleton() {
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--loading': true,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, this.isDesktop && (h("div", { class: "s-cart-summary-card-sheet-wrap s-cart-summary-card-sheet-wrap--open" }, h("div", { class: "s-cart-summary-card-sheet" }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, h("salla-skeleton", { width: "140px", height: "16px" }))), SKELETON_ROWS.map(({ label, value }, i) => (h("div", { class: "s-cart-summary-card-line", key: i }, h("salla-skeleton", { width: label, height: "16px" }), h("salla-skeleton", { width: value, height: "16px" }))))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("salla-skeleton", { width: "90px", height: "16px" }), h("salla-skeleton", { width: "48px", height: "12px" }))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, h("salla-skeleton", { width: "80px", height: "20px" })))), h("div", { class: "s-cart-summary-card-action" }, h("salla-skeleton", { width: "100%", height: "44px" }))));
+    }
+    render() {
+        if (this.isLoading)
+            return this.renderSkeleton();
+        const showSavings = this.cartTotalDiscount > 0;
+        const subTotalLabel = this.cartTaxAmount ? this.itemsTotalNoTaxLabel : this.itemsTotalLabel;
+        // Inline transform so sheet motion doesn't depend on SCSS load order.
+        const sheetStyle = this.isDesktop
+            ? {}
+            : {
+                transform: this.isOpen ? 'translateY(0)' : 'translateY(100%)',
+                transition: 'transform 0.4s cubic-bezier(0.32, 0.72, 0, 1)',
+            };
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--open': this.isOpen,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, h("div", { class: {
+                's-cart-summary-card-sheet-wrap': true,
+                's-cart-summary-card-sheet-wrap--open': this.isOpen,
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.cartTotal + this.cartTotalDiscount))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), showSavings && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+    }
+    get host() { return getElement(this); }
+};
+
+export { SallaCartSummaryCard as salla_cart_summary_card };

package/dist/esm/salla-cashback-banner.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-DBMDFsFH.js';
 
 var StarFilledIcon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_5667_2008)">

package/dist/esm/salla-comment-form_8.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, i as require_root, j as requireIsObject, k as requireIsSymbol, d as getDefaultExportFromCjs } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, i as require_root, j as requireIsObject, k as requireIsSymbol, d as getDefaultExportFromCjs } from './index-DBMDFsFH.js';
 import { S as SICheck } from './check-BZp0rKEO.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import { S as Star } from './star2-D4oPi1Ov.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';

package/dist/esm/salla-conditional-offer.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-DBMDFsFH.js';
 
 var DiscountType;
 (function (DiscountType) {

package/dist/esm/salla-contacts.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-DBMDFsFH.js';
 import { W as WhatsappIcon } from './whatsapp2-CgR-T_ZS.js';
 import { e as email } from './mail-DzAIgzdz.js';
 

package/dist/esm/salla-cookies-bar.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-DBMDFsFH.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)}";
 

package/dist/esm/salla-count-down.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-DBMDFsFH.js';
 
 const sallaCountDownCss = ".s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}";
 

package/dist/esm/salla-custom-fields.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h } from './index-BF901xIc.js';
+import { r as registerInstance, c as createEvent, h } from './index-DBMDFsFH.js';
 import { C as CameraIcon } from './camera-C6jIkM-X.js';
 import { F as FormFieldTypes } from './interfaces-OF8QcbMM.js';
 

package/dist/esm/salla-delivery-promise.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-DBMDFsFH.js';
 
 const DEBUG_KEY = 'salla-delivery-promise-debug';
 function log(message, data) {

package/dist/esm/salla-edit-order-button.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-DBMDFsFH.js';
 
 const sallaEditOrderButtonCss = ":host{display:block}";
 

package/dist/esm/salla-filters-widget.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BF901xIc.js';
-import { H as Helper } from './Helper-CD8d-Brd.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DBMDFsFH.js';
+import { H as Helper } from './Helper-BQ9mvrt9.js';
 import { F as FilterOptionTypes } from './interfaces-DL4h2bc3.js';
 import './anime.es-CgtvEd63.js';
 
@@ -141,7 +141,7 @@ const SallaFiltersWidget = class {
         //@ts-ignore
         return filteredValues.map((filterOption, index) => {
             let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
-            return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: "radio", checked: this.isSelectedOption(option, value), class: `s-filters-radio`, onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
+            return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: option.type === FilterOptionTypes.VALUES ? 'checkbox' : 'radio', checked: this.isSelectedOption(option, value), class: option.type === FilterOptionTypes.VALUES ? 's-filters-checkbox' : 's-filters-radio', onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
         });
     }
     isSelectedOption(option, value) {
@@ -149,13 +149,18 @@ const SallaFiltersWidget = class {
             return this.filtersData[option.key] == value;
         }
         if (option.type === FilterOptionTypes.VARIANTS) {
-            return this.filtersData[option.type] && this.filtersData[option.type][Object.keys(this.filtersData[option.type])[0]] == value;
+            // selections are stored per widget key (handleOptionChange: filtersData.variants[option.key])
+            return this.filtersData[option.type] && this.filtersData[option.type][option.key] == value;
         }
         if (option.type === FilterOptionTypes.RANGE) {
             return this.filtersData[option.key] && this.filtersData[option.key].min == value.min && this.filtersData[option.key].max == value.max;
         }
         if (option.type === FilterOptionTypes.VALUES) {
-            return this.filtersData[option.key] && Number(this.filtersData[option.key]) == Number(value);
+            const selected = this.filtersData[option.key];
+            if (Array.isArray(selected)) {
+                return selected.some(v => Number(v) === Number(value));
+            }
+            return selected != null && Number(selected) === Number(value);
         }
         return false;
     }
@@ -165,16 +170,18 @@ const SallaFiltersWidget = class {
             return h("salla-rating-stars", { size: "small", value: filterOption });
         }
         let label = filterOption.value || 'null';
-        //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';
+        if (filterOption.count != null) {
+            label += ` (${salla.helpers.number(filterOption.count)})`;
+        }
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: '2cdd3bbc88b473e9b5d52bf5e95de16f9ad47a51', class: "s-filters-widget-container" }, h("h3", { key: '4d3d522469681c5d7cde040938b0ce15324d7cc3', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '60fa18c667a1b00f03e8eebc484da68e78fa8d90' }, this.option.label), h("span", { key: 'ac8cff411fbb76c43e0134b0c7381b682a8afcd0', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '5705ab244d712512e156994bbf21d9bb49dbb43b', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'a59f45a5fbd803dcd65f0a5b40060a1dcfed00e0', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3275790105bfe9b84df564b9385c4a9556c2f03a', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '70d57184a8089422d96ea62ddaa7697f7f207441', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '959512d2256b5a29236572fc8078c5baa5d9a571' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '3ea32331738365fc422b500b3e70fa590d4dbdb5', class: "s-filters-widget-container" }, h("h3", { key: 'c5cb7a27841bf85e4c108e15d606c1c45059e5ca', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '641164d403dd4c9b79a540f4da5829f5238cded4' }, this.option.label), h("span", { key: '5cf687d80ff627f306f5876f69b799b6b7a3813d', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'd9b753223b4fb1c468ed6c4c3a269b861bc5b34b', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '0ca4f8c598e5965e23ef56610df7afc31799f168', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '7b43ec84dcbeb5b7f9cbe9335133e32c278c00fd', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '5bf79fc5f51389d087fed93acee51a097a46af65', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8dacd49ba003562d347a6c1b62e85ac447a62fcb' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '305b4a155c2b3705bcf139c81b5f8bcb3d744d05', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '85ca188ff9f0db7c0a23b94e4705ae2ca5c38d55', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     get host() { return getElement(this); }
 };