@salla.sa/twilight-components 2.14.564 → 2.14.565

package/dist/components/salla-order-options-modal2.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$3 } from './salla-product-options2.js';
 import { d as defineCustomElement$2 } from './salla-progress-bar2.js';
 import { d as defineCustomElement$1 } from './salla-slider2.js';
 
-const sallaOrderOptionsModalCss = "/*!twlt*/.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}.static{position:static}.block{display:block}.hidden{display:none}.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)}.s-order-options-modal-body{display:block}.s-order-options-modal-subtitle{margin-bottom:1rem;font-size:0.875rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-order-options-modal-fields{display:flex;flex-direction:column;gap:1rem}.s-order-options-modal-item{display:block}.s-order-options-modal-footer{display:flex;width:100%;align-items:center}.s-order-options-modal-cta-content{display:flex;align-items:center;gap:0.25rem}.s-order-options-modal-cta-text{font-weight:700}.s-order-options-modal-cta-total{font-weight:700}";
+const sallaOrderOptionsModalCss = "/*!twlt*/@charset \"UTF-8\";.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-host.s-oom-wizard-modal .s-modal-title{display:none}.s-order-options-modal-host.s-oom-wizard-modal .s-modal-header-inner{flex:1;min-width:0}.s-order-options-modal-host.s-oom-wizard-modal .s-modal-header-content{display:none}.s-oom-steps{display:flex;align-items:center;justify-content:flex-start;gap:0.5rem;width:100%;padding:0}.s-oom-step{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem 0.375rem 0.625rem;border-radius:9999px;font-size:0.8125rem;font-weight:600;line-height:1;white-space:nowrap;color:#9ca3af;background:transparent;border:1.5px solid #e5e7eb;transition:background 0.2s, color 0.2s, border-color 0.2s}.s-oom-step.active{background:#1a2533;color:#ffffff;border-color:#1a2533}.s-oom-step.active .s-oom-step-num{background:rgba(255, 255, 255, 0.2);color:#ffffff}.s-oom-step.done{color:#6b7280;border-color:#d1d5db}.s-oom-step-num{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-size:0.6875rem;font-weight:700;background:#e5e7eb;color:#6b7280;flex-shrink:0}.s-oom-step-label{font-size:0.8125rem}.s-oom-connector{flex:1;max-width:3rem;height:0;border-top:1.5px dashed #d1d5db}.s-oom-free-product-card{display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;margin-bottom:1rem;border:1px solid #e5e7eb;border-radius:0.75rem;background:#f9fafb;}.s-oom-free-product-info{display:flex;flex-direction:column;gap:0.25rem;min-width:0;flex:1}.s-oom-free-product-tags{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem}.s-oom-free-product-name{font-size:0.9375rem;font-weight:700;color:#111827;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.s-oom-free-badge{display:inline-block;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.6875rem;font-weight:600;color:#059669;background:#d1fae5;align-self:flex-start}.s-oom-free-offer-name{display:inline-block;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.6875rem;font-weight:500;color:#6b7280;background:#f3f4f6;align-self:flex-start}.s-oom-free-product-thumb{width:3.5rem;height:3.5rem;object-fit:cover;border-radius:0.5rem;flex-shrink:0;border:1px solid #e5e7eb}.s-order-options-modal-body{padding-top:0.25rem;max-height:60vh;overflow-y:auto;overscroll-behavior:contain}.s-order-options-modal-subtitle{font-size:0.875rem;color:#6b7280;margin-bottom:1rem;text-align:start}.s-order-options-modal-cta-content{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%}.s-order-options-modal-cta-text{flex:1;text-align:center}.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}.s-oom-cta-arrow{font-size:0.875rem;flex-shrink:0}.static{position:static}.hidden{display:none}.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)}.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)}.s-order-options-modal-body{display:block;max-height:60vh;overflow-y:auto;overscroll-behavior:contain}.s-order-options-modal-subtitle{margin-bottom:1rem;font-size:0.875rem;line-height:1.5rem;--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.s-order-options-modal-fields{display:flex;flex-direction:column;gap:1rem}.s-order-options-modal-item{display:block}.s-order-options-modal-footer{display:flex;width:100%;align-items:center}.s-order-options-modal-cta-content{display:flex;align-items:center;gap:0.25rem}.s-order-options-modal-cta-text{font-weight:700}.s-order-options-modal-cta-total{font-weight:700}";
 
 const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrderOptionsModal extends HTMLElement {
     constructor() {
@@ -26,20 +26,48 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         this.rejectFn = null;
         this.optionsRefs = new Map();
         this.changeHandler = null;
-        /** Sync hook for callers that need to act under the submit user gesture (Apple Pay). */
         this.submitCallback = null;
+        /** Wizard bookkeeping — not @State, only used for logic */
+        this._realOrderOptions = [];
+        this._collectedFreeOptions = [];
+        this._isWizard = false;
+        /** Pending free-product steps and where we are in them. */
+        this._freeQueue = [];
+        this._freeIndex = 0;
+        this._collectedFreeProducts = [];
+        /**
+         * The product's own price, held across the wizard. Gift steps show a 0 base (the gift is
+         * free), so without this the final total — which Apple Pay charges — would omit the product.
+         */
+        this._orderBasePrice = 0;
+        /** Surcharges picked on gift steps already left behind, folded into the final total. */
+        this._accumulatedExtra = 0;
+        /** @State — all rendering decisions are driven by these */
         this.orderOptions = [];
         this.basePrice = 0;
         this.liveTotal = 0;
         this.isSubmitting = false;
-        /** Bumped each open() so the inner <salla-product-options> remounts. */
         this.sessionId = 0;
         this.paymentMode = 'default';
+        /** Card data for the free product being configured right now (null on the final step). */
+        this.freeProduct = null;
+        /**
+         * True while a free-product step is active. Tracked separately from `freeProduct` so an
+         * entry that arrives without card data still runs as its own step instead of silently
+         * rendering as the order-options step.
+         */
+        this.inFreeStep = false;
         this.title = '';
         this.subtitle = '';
         this.submitLabel = '';
         this.totalLabel = '';
         this.requiredMessage = '';
+        // Hardcode Arabic defaults — salla.lang.get() returns the key string itself when a key is
+        // missing, so `|| fallback` never fires. Defaults here guarantee correct text even before
+        // translations load or when the keys don't exist in the store's language file yet.
+        this.freeProductTitle = 'خيارات المنتج المجاني';
+        this.freeProductSubtitle = 'اختر ما يناسبك من خيارات المنتج';
+        this.freeProductContinueLabel = 'تابع واحصل على هديتك الان';
         this.handleClose = () => {
             if (this.isSubmitting)
                 return;
@@ -54,41 +82,109 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
     componentWillLoad() {
         this.loadTranslations();
     }
+    /** True when the page reads right-to-left, so directional icons can mirror. */
+    isRtl() {
+        return document?.documentElement?.getAttribute('dir') === 'rtl';
+    }
+    /** Returns the translated value only when the key actually resolves (not the key string itself). */
+    t(key, fallback) {
+        const val = salla.lang.get(key);
+        return val && val !== key ? val : fallback;
+    }
     loadTranslations() {
         this.title = salla.lang.get('blocks.order_options.title');
         this.subtitle = salla.lang.get('blocks.order_options.subtitle');
         this.submitLabel = salla.lang.get('blocks.order_options.continue');
         this.totalLabel = salla.lang.get('blocks.order_options.total');
         this.requiredMessage = salla.lang.get('blocks.order_options.required_message');
+        this.freeProductTitle = this.t('pages.products.free_product_options_title', 'خيارات المنتج المجاني');
+        this.freeProductSubtitle = this.t('pages.products.free_product_options_subtitle', 'اختر ما يناسبك من خيارات المنتج');
+        this.freeProductContinueLabel = this.t('pages.products.free_product_cta', 'تابع واحصل على هديتك الان');
     }
-    /**
-     * Open the modal. Resolves with selections on submit; rejects on dismiss.
-     * `onSubmit` fires sync in the submit click (for Apple Pay user-gesture).
-     * `paymentMode: 'apple-pay'` swaps the footer button for <apple-pay-button>.
-     */
     async open(payload) {
-        // Normalize here, not in the shared salla-product-options: text/number order options ship no
-        // `details`, which product-options dereferences unguarded.
-        this.orderOptions = (Array.isArray(payload.orderOptions) ? payload.orderOptions : [])
+        const normalize = (arr) => (Array.isArray(arr) ? arr : [])
             .map((o) => ({ ...o, details: o.details ?? [] }));
-        this.basePrice = Number(payload.basePrice) || 0;
-        this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        const realOrderOptions = normalize(payload.orderOptions);
+        const freeQueue = this.buildFreeQueue(payload, normalize);
+        this._realOrderOptions = realOrderOptions;
+        this._collectedFreeOptions = [];
+        this._collectedFreeProducts = [];
+        this._freeQueue = freeQueue;
+        this._freeIndex = 0;
+        this._orderBasePrice = Number(payload.basePrice) || 0;
+        this._accumulatedExtra = 0;
+        // The step bar appears whenever there is more than one step to walk — N gifts alone
+        // still needs it, not just the gift + order-options pairing.
+        this._isWizard = (freeQueue.length + (realOrderOptions.length > 0 ? 1 : 0)) > 1;
         this.isSubmitting = false;
-        this.sessionId++;
         this.optionsRefs.clear();
         this.submitCallback = payload.onSubmit ?? null;
         this.paymentMode = payload.paymentMode ?? 'default';
+        if (freeQueue.length > 0) {
+            this.loadFreeStep(0);
+        }
+        else {
+            // Single step: store order options
+            this.sessionId++;
+            this.inFreeStep = false;
+            this.orderOptions = realOrderOptions;
+            this.freeProduct = null;
+            this.basePrice = Number(payload.basePrice) || 0;
+            this.liveTotal = this.basePrice + this.seedOptionsPrice(this.orderOptions);
+        }
         await this.modal?.open();
+        // salla-modal reads modal-title once in its constructor (@State, not @Prop) so it
+        // won't react to attribute changes. Push the correct title imperatively after open().
+        this.modal?.setTitle(this.inFreeStep ? this.freeProductTitle : this.title);
         this.attachChangeListener();
         return new Promise((resolve, reject) => {
             this.resolveFn = resolve;
             this.rejectFn = reject;
         });
     }
+    /**
+     * Normalize `freeProducts` (and the legacy single-gift pair) into the step queue.
+     * Entries without options are dropped — there is nothing to ask, and the offer still
+     * auto-adds that product with its defaults.
+     */
+    buildFreeQueue(payload, normalize) {
+        const queue = [];
+        (Array.isArray(payload.freeProducts) ? payload.freeProducts : []).forEach((entry) => {
+            const options = normalize(entry?.options);
+            if (!options.length)
+                return;
+            queue.push({
+                product: entry?.product
+                    ? { ...entry.product, offer_name: entry.offer_name ?? entry.product.offer_name ?? null }
+                    : null,
+                options,
+                // The offer decides how many of Y are granted.
+                quantity: Number(entry?.quantity) > 0 ? Number(entry.quantity) : 1,
+            });
+        });
+        if (queue.length)
+            return queue;
+        const legacyOptions = normalize(payload.freeProductOptions);
+        if (legacyOptions.length) {
+            queue.push({ product: payload.freeProduct ?? null, options: legacyOptions, quantity: 1 });
+        }
+        return queue;
+    }
+    /** Swap the modal onto free-product step `index`. */
+    loadFreeStep(index) {
+        const step = this._freeQueue[index];
+        this._freeIndex = index;
+        this.optionsRefs.clear();
+        this.inFreeStep = true;
+        this.orderOptions = step.options;
+        this.freeProduct = step.product;
+        this.basePrice = 0;
+        this.liveTotal = this.seedOptionsPrice(step.options);
+        this.sessionId++;
+    }
     async close() {
         await this.modal?.close();
     }
-    /** Sync walk of inputs — avoids `await` through the @Method that would consume the AP user gesture. */
     collectOrderOptionsSync() {
         const result = [];
         for (const [, el] of this.optionsRefs) {
@@ -96,9 +192,8 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
                 continue;
             const inputs = el.querySelectorAll('[name^="options["],[name*="[options]["]');
             inputs.forEach((input) => {
-                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked) {
+                if (input instanceof HTMLInputElement && (input.type === 'radio' || input.type === 'checkbox') && !input.checked)
                     return;
-                }
                 const match = input.name.match(/(?:^|\[)options\]?\[(\d+)\]/);
                 if (!match)
                     return;
@@ -114,7 +209,6 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         }
         return result;
     }
-    /** Sync native validity — keeps the AP user gesture intact. */
     validateSync() {
         let pass = true;
         for (const [, el] of this.optionsRefs) {
@@ -122,8 +216,6 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
                 continue;
             const requiredInputs = el.querySelectorAll('[required]');
             requiredInputs.forEach((input) => {
-                // Mirror salla-product-options.reportValidity(): skip hidden/disabled inputs so a
-                // required field in a `.hidden` conditional container can't silently block submit.
                 if (input.disabled || input.closest('.hidden'))
                     return;
                 if ('reportValidity' in input && !input.reportValidity())
@@ -132,11 +224,6 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         }
         return pass;
     }
-    /**
-     * Sum the per-quantity fee (total_price = additional_price × qty) of any pre-selected details.
-     * Uses total_price so the total scales with product quantity; falls back to the per-unit
-     * additional_price only when total_price is absent. (CHOD-13172)
-     */
     seedOptionsPrice(orderOptions) {
         let sum = 0;
         orderOptions.forEach((opt) => {
@@ -147,7 +234,6 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         });
         return sum;
     }
-    /** salla.event.on is global — attach per open, detach on close to avoid stacking. */
     attachChangeListener() {
         this.detachChangeListener();
         this.changeHandler = () => this.recomputeTotal();
@@ -168,7 +254,6 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
                 ? await el.getSelectedOptions()
                 : [];
             (selected || []).forEach((s) => {
-                // total_price already includes the product-quantity multiplier (CHOD-13172).
                 selectedPrice += Number(s.total_price ?? s.additional_price) || 0;
             });
         }
@@ -181,44 +266,148 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
             salla.notify?.error?.(this.requiredMessage);
             return;
         }
+        if (this.inFreeStep) {
+            const step = this._freeQueue[this._freeIndex];
+            const selected = this.collectOrderOptionsSync();
+            // Legacy single-gift callers still read the flat list off the first gift.
+            if (this._freeIndex === 0)
+                this._collectedFreeOptions = selected;
+            // A step left entirely empty is not forced into products[] — the offer still
+            // auto-adds that gift with its defaults.
+            if (selected.length && step?.product?.id) {
+                const options = {};
+                selected.forEach(({ id, value }) => { options[id] = value; });
+                this._collectedFreeProducts.push({
+                    productId: step.product.id,
+                    quantity: step.quantity,
+                    options,
+                });
+            }
+            // Bank this step's surcharges — the gift's own base is 0, so liveTotal is pure surcharge.
+            this._accumulatedExtra += Math.max(0, this.liveTotal - this.basePrice);
+            // More gifts to configure — advance to the next one.
+            const next = this._freeIndex + 1;
+            if (next < this._freeQueue.length) {
+                this.loadFreeStep(next);
+                this.modal?.setTitle(this.freeProductTitle);
+                return;
+            }
+            if (this._realOrderOptions.length) {
+                // Gifts done — advance to the store order-options step.
+                this.optionsRefs.clear();
+                this.inFreeStep = false;
+                this.freeProduct = null; // @State → re-render to the final step
+                this.orderOptions = this._realOrderOptions; // @State → swaps to store order options
+                // Restore the product's price: this step's total is what the shopper pays, and in
+                // apple-pay mode it becomes the sheet amount.
+                this.basePrice = this._orderBasePrice;
+                this.liveTotal = this._orderBasePrice + this.seedOptionsPrice(this._realOrderOptions);
+                this.sessionId++; // forces salla-product-options remount
+                this.modal?.setTitle(this.title); // update header: "خيارات الطلب"
+                return;
+            }
+            // Gifts only, no store order options — this was the last step, so fire the submit hook
+            // (Apple Pay starts its session in there) before resolving.
+            this.isSubmitting = true;
+            // This step's surcharge is already banked above, so swap liveTotal for the product price
+            // rather than adding it — otherwise the surcharge is counted twice.
+            this.liveTotal = this._orderBasePrice;
+            this.fireSubmitCallback([]);
+            this.resolveAndClose([]);
+            this.isSubmitting = false;
+            return;
+        }
+        // Step 2 (or single step) — resolve
         this.isSubmitting = true;
         const orderOptions = this.collectOrderOptionsSync();
-        const total = Math.round(this.liveTotal * 100) / 100;
-        // Fire onSubmit BEFORE any await — Apple Pay needs the user gesture.
+        this.fireSubmitCallback(orderOptions);
+        this.resolveAndClose(orderOptions);
+        this.isSubmitting = false;
+    }
+    /** Product price + every surcharge picked across the wizard. This is what Apple Pay charges. */
+    finalTotal() {
+        return Math.round((this.liveTotal + this._accumulatedExtra) * 100) / 100;
+    }
+    /** Fire the sync submit hook — Apple Pay opens its session inside this call, so never await. */
+    fireSubmitCallback(orderOptions) {
         try {
-            this.submitCallback?.(orderOptions, total);
+            this.submitCallback?.(orderOptions, this.finalTotal(), this._collectedFreeProducts);
         }
         catch (err) {
             salla?.logger?.warn?.('order-options modal onSubmit threw', err);
         }
-        this.resolveFn?.({ orderOptions });
+    }
+    /** Hand the collected selections back to the caller and tear the modal down. */
+    resolveAndClose(orderOptions) {
+        this.resolveFn?.({
+            orderOptions,
+            freeProductOptions: this._collectedFreeOptions,
+            freeProducts: this._collectedFreeProducts,
+        });
         this.resolveFn = null;
         this.rejectFn = null;
         this.submitCallback = null;
         this.detachChangeListener();
         this.modal?.close().then(() => this.reset());
-        this.isSubmitting = false;
     }
-    /** Clear options on close so the inner <salla-product-options> unmounts. */
     reset() {
         this.orderOptions = [];
+        this.freeProduct = null;
+        this.inFreeStep = false;
         this.optionsRefs.clear();
         this.liveTotal = 0;
+        this._realOrderOptions = [];
+        this._collectedFreeOptions = [];
+        this._collectedFreeProducts = [];
+        this._freeQueue = [];
+        this._freeIndex = 0;
+        this._isWizard = false;
     }
     render() {
-        // salla.money returns HTML (sicon-sar icon) → render via innerHTML. Round
-        // first so floating-point sum doesn't show as 1174.3799999999999.
         const totalHtml = salla.money(Math.round(this.liveTotal * 100) / 100);
-        return (h("salla-modal", { key: 'e84a40e1a27447d58ca5651a7ed76cbcf886495c', ref: el => (this.modal = el), class: "s-order-options-modal-host", width: "md", "modal-title": this.title, onModalVisibilityChanged: (e) => {
+        const isStep1 = this.inFreeStep;
+        const productIdAttr = isStep1
+            ? String(this.freeProduct?.id || `free-prod-${this.orderOptions[0]?.id}`)
+            : `order-options-${this.orderOptions[0]?.id}`;
+        // Distinct per gift so consecutive steps can't share a stale options ref.
+        const uniqueKey = isStep1 ? `free-product-options-${this._freeIndex}` : 'order-options';
+        // One chip per gift, then one for the store order options. `current` is the index of
+        // the step on screen; anything before it is done.
+        const stepLabels = [
+            ...this._freeQueue.map(() => this.freeProductTitle),
+            ...(this._realOrderOptions.length ? [this.title] : []),
+        ];
+        const current = isStep1 ? this._freeIndex : this._freeQueue.length;
+        // Apple Pay must be offered on whichever step is genuinely last. With gifts but no store
+        // order options the last step IS a gift step, and gating on `!isStep1` would leave the
+        // shopper on a plain Continue button that never opens the payment sheet.
+        const isLastStep = current === Math.max(0, stepLabels.length - 1);
+        const showApplePay = this.paymentMode === 'apple-pay' && isLastStep;
+        // In wizard mode the step chips live in the modal header (slot="icon") so they appear
+        // next to the close button. A non-breaking space triggers salla-modal to render the
+        // header-inner container; the empty title div is hidden via .s-oom-wizard-modal CSS.
+        // In single-step mode the header shows the relevant title text directly.
+        const modalTitle = this._isWizard ? ' ' : (isStep1 ? this.freeProductTitle : this.title);
+        return (h("salla-modal", { key: '60e626bb49f8592c952182c182e6d73ddcaadeed', ref: el => (this.modal = el), class: `s-order-options-modal-host${this._isWizard ? ' s-oom-wizard-modal' : ''}`, width: "md", "modal-title": modalTitle, onModalVisibilityChanged: (e) => {
                 if (!e.detail)
                     this.handleClose();
-            } }, h("div", { key: 'fafa3cdeb22787d4a02f3fc8afb70770e1c3b4b5', class: "s-order-options-modal-body" }, h("p", { key: 'c563c24e1b8744f3248328ec16a18c5a668e7949', class: "s-order-options-modal-subtitle" }, this.subtitle), h("div", { key: '475599cc47435b077d2321573328321888e60aa6', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
+            } }, this._isWizard && (h("div", { key: 'a842b5d1566c8bb0bd68d5986fb092c14f8a01d6', slot: "icon", class: "s-oom-steps" }, stepLabels.map((label, index) => [
+            index > 0 && h("div", { class: "s-oom-connector" }),
+            h("div", { class: `s-oom-step ${index === current ? 'active' : (index < current ? 'done' : '')}` }, h("span", { class: "s-oom-step-num" }, index + 1), h("span", { class: "s-oom-step-label" }, label)),
+        ]))), h("div", { key: '1f61a756dcf824bf4d8be71ccbd9a0c2742851d2', class: "s-order-options-modal-body" }, isStep1 && this.freeProduct && (h("div", { key: '667841475dff0deda06d8d04e0a2841f33ec54b6', class: "s-oom-free-product-card" }, this.freeProduct.thumbnail && (h("img", { key: '129b99226216f0c1ca59fccbc0ba35d5af8cdee7', class: "s-oom-free-product-thumb", src: this.freeProduct.thumbnail, alt: this.freeProduct.name })), h("div", { key: 'ae385e2d4fb967144743d67eadd50f31c23332ec', class: "s-oom-free-product-info" }, h("span", { key: '4f48a3fd0af91435060a0d303a6d0f77f5afd1bc', class: "s-oom-free-product-name" }, this.freeProduct.name), h("div", { key: 'de62961aba2246c1d52d411461d6a45aed620eab', class: "s-oom-free-product-tags" }, h("span", { key: 'db1af48cc1a7583a7f2d026159ff01f03ad216bf', class: "s-oom-free-badge" }, this.t('common.elements.free', 'مجاني')), this.freeProduct.offer_name && (h("span", { key: 'ce595bccd755e908deb1c566758ca3629171962b', class: "s-oom-free-offer-name" }, this.freeProduct.offer_name)))))), h("p", { key: '161740bddbf25369392f362f9613f2e9c6a94fc1', class: "s-order-options-modal-subtitle" }, isStep1 ? this.freeProductSubtitle : this.subtitle), h("div", { key: '20d3f92f0f3782d599ec5ce923c2dad93f7c7608', class: "s-order-options-modal-fields" }, this.orderOptions.length > 0 && (h("salla-product-options", { key: this.sessionId, ref: el => {
                 if (!el)
                     return;
-                this.optionsRefs.set('order-options', el);
-                // Without seeding, first multi-select toggle wipes pre-selected defaults.
+                this.optionsRefs.set(uniqueKey, el);
                 el.seedSelectedOptions?.();
-            }, "product-id": `order-options-${this.orderOptions[0]?.id}`, "unique-key": "order-options", options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'e00641853937f745c8cc798c7f9e15b389faf540', slot: "footer", class: "s-order-options-modal-footer" }, this.paymentMode === 'apple-pay' ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, this.submitLabel), h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
+            }, "product-id": productIdAttr, "unique-key": uniqueKey, options: JSON.stringify(this.orderOptions), "hide-out-label": "1", "no-padding": true })))), h("div", { key: 'c80a0c1f1b32e5396483171196879bc43713c2f4', slot: "footer", class: "s-order-options-modal-footer" }, showApplePay ? (h("div", { class: "s-order-options-modal-apple-pay-wrap" }, h("div", { class: "s-order-options-modal-apple-pay-total" }, h("span", { class: "s-order-options-modal-apple-pay-label" }, this.totalLabel), h("span", { class: "s-order-options-modal-apple-pay-amount", innerHTML: totalHtml })), h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', buttonstyle: "black", type: "buy", class: "s-order-options-modal-apple-pay", onClick: () => this.handleSubmit() }))) : (h("salla-button", { type: "button", color: "primary", fill: "solid", width: "wide", loading: this.isSubmitting, onClick: () => this.handleSubmit() }, h("span", { class: "s-order-options-modal-cta-content" }, h("span", { class: "s-order-options-modal-cta-text" }, isStep1 ? this.freeProductContinueLabel : this.submitLabel), isStep1
+            ? h("i", { class: {
+                    's-oom-cta-arrow': true,
+                    // "Forward" is left in RTL and right in LTR; hardcoding arrow-left made
+                    // English stores show a back-pointing arrow (CP-3813).
+                    'sicon-arrow-left': this.isRtl(),
+                    'sicon-arrow-right': !this.isRtl(),
+                } })
+            : h("span", { class: "s-order-options-modal-cta-total", innerHTML: totalHtml })))))));
     }
     get host() { return this; }
     static get style() { return sallaOrderOptionsModalCss; }
@@ -229,11 +418,16 @@ const SallaOrderOptionsModal = /*@__PURE__*/ proxyCustomElement(class SallaOrder
         "isSubmitting": [32],
         "sessionId": [32],
         "paymentMode": [32],
+        "freeProduct": [32],
+        "inFreeStep": [32],
         "title": [32],
         "subtitle": [32],
         "submitLabel": [32],
         "totalLabel": [32],
         "requiredMessage": [32],
+        "freeProductTitle": [32],
+        "freeProductSubtitle": [32],
+        "freeProductContinueLabel": [32],
         "open": [64],
         "close": [64]
     }]);

package/dist/components/salla-order-summary.js

@@ -87,7 +87,7 @@ const SallaOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaOrderSum
         this.copyCodeButtonTimeout && clearTimeout(this.copyCodeButtonTimeout);
     }
     render() {
-        return (h("ul", { key: 'd699111d423dbb47469d813f64e5f956f5860522', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
+        return (h("ul", { key: '96ce5c2d31f1908bd1522ad2f87094ab7d37cbd5', class: "s-order-summary-wrapper" }, this.noItemFound ? h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" })) :
             this.order_items.map((item) => (this.isDigitalCard(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.codes_text, " (", item.name, ")"), item.codes.map((code) => (h("div", { key: code.code, class: "s-order-summary-code-item-wrapper" }, h("p", null, h("span", { innerHTML: iconCreditCard }), h("span", null, code.code)), h("salla-button", { class: `s-order-summary-item-copy-button ${this.codeCopied === code.code ? 'copied' : ''}`, onClick: () => this.copyToClipboardHandler(code.code), shape: "link" }, h("span", { innerHTML: this.codeCopied === code.code ? IconVerified : iconCopy }), h("span", null, this.copy_text))))))) :
                 this.isDigitalProduct(item) ? (h("li", { key: item.product.id, class: "s-order-summary-item" }, h("h2", { class: "s-order-summary-item-title" }, this.files_text, " (", item.name, ")"), h("ul", null, item.files.map((file) => (h("li", { class: "s-order-summary-digital-item-wrapper" }, h("div", null, h("span", { innerHTML: iconFileArchive }), h("span", null, file.name)), h("a", { href: file.url, target: "_blank", class: "s-order-summary-item-download" }, h("span", { innerHTML: iconDownload }), h("span", null, this.download_text)))))))) : null))));
     }

package/dist/components/salla-payments.js

@@ -42,12 +42,12 @@ const SallaPayments$1 = /*@__PURE__*/ proxyCustomElement(class SallaPayments ext
     render() {
         const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
         const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
-        return (h(Host, { key: 'aaa2a9297d16666d9cf686aea17319026145ed1d', class: "s-payments-list-wrap" }, h("ul", { key: '0c9a19d7ba93555e897fdb5068572d90f64a87e5', class: "s-payments-list" }, madeInKSA && h("li", { key: '1da474ca870831495e7bee34e8e8ba538927c716', class: "s-payments-list-item" }, h("img", { key: '66b42b93ef788b7091e8343338182ffc93cae74f', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.filter(payment => !this.exclude.includes(payment)).map((payment) => (payment == "cod" ?
+        return (h(Host, { key: '7b48366eb122743315532e53cfcf05ac31c5ad60', class: "s-payments-list-wrap" }, h("ul", { key: 'e278c90249fa655ede607689afd366e5dc538532', class: "s-payments-list" }, madeInKSA && h("li", { key: '6a2494479aaef3dbe8557feaf07b290b9a7fc3a9', class: "s-payments-list-item" }, h("img", { key: '386ee723fce881bf4206a3113ff8e611bf48c0c8', width: 58, height: 58, decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.filter(payment => !this.exclude.includes(payment)).map((payment) => (payment == "cod" ?
             h("div", { id: "cod-slot", innerHTML: this.codSlot
                     .replace(/\{image\}/g, this.paymentLogo(`cod`)) }) :
             h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                     .replace(/\{image\}/g, this.paymentLogo(payment))
-                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '511b086294391bc21af831e838ffcfc1a601aace', id: "sbc-slot", innerHTML: this.sbcSlot
+                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '7a355da7a8f0ee873264807504d2d353739331bf', id: "sbc-slot", innerHTML: this.sbcSlot
                 .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                 .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
     }

package/dist/components/salla-placeholder2.js

@@ -42,7 +42,7 @@ const SallaPlaceholder = /*@__PURE__*/ proxyCustomElement(class SallaPlaceholder
         };
     }
     render() {
-        return (h(Host, { key: 'c1d7092a1bfdbf8e25595ef2205d7e5721f338ed', class: this.alignmentClass() }, h("div", { key: '85929e725cbd6e092b18038a240fbe0bda095648', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '773b9c9723a4542ca9518833ffad1470955a973b', class: "s-placeholder-title" }, h("slot", { key: 'c42d3d92f66cd5917952542360aacf936bde0d23', name: 'title' }, h("span", { key: '850e1a5abb42bbe69ea64d7c26f196d05fcf721d' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '4f56988f2a84ab394f39ff931f5ac8858a010d1e', class: "s-placeholder-description" }, h("slot", { key: '886cae5311fa0ca5b763fb20ce9fe7c1845d4cab', name: 'description' }, h("span", { key: 'f0cb7f4c50a1449d12467aaa802d47abbb4e0e53' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: 'bb1e87ff964770b00667e5ba934e025a184056fe', class: this.alignmentClass() }, h("div", { key: '6a75cef023d5f1a719ebb8d91a8b2181e1635161', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: 'cb68c4045df8dac84cd7c0626d9d8c322202e73d', class: "s-placeholder-title" }, h("slot", { key: '09f95446b63392eee020fa7d970e5387f83c4769', name: 'title' }, h("span", { key: 'b72e61aeabcc48fd5b3e14d76f4dcfab7c37703b' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'c9ba74e9a6dbe65c3e3d7994364182919bbbf3b0', class: "s-placeholder-description" }, h("slot", { key: '5441dc166551ead2f1386a58417d991fb62065f9', name: 'description' }, h("span", { key: 'd823d7f9bb6afa98df3307265b734ac06b3361ff' }, salla.lang.get('common.errors.empty_results'))))));
     }
     static get style() { return sallaPlaceholderCss; }
 }, [4, "salla-placeholder", {

package/dist/components/salla-price-range2.js

@@ -153,9 +153,9 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class SallaPriceRange e
         this.maxPrice = value === undefined ? '' : value;
     }
     render() {
-        return (h(Host, { key: 'dc74966c1d2d9e5626b23db0a80b693fef047f41' }, this.filterValues.map((filterValue, index) => {
+        return (h(Host, { key: 'b03ebb94bc24463935ff1ef49872ebc85343276f' }, this.filterValues.map((filterValue, index) => {
             return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
-        }), h("div", { key: 'b12dad0c27f3fbe9ad8a9c98b9bd1302388b35ef', class: "flex justify-center items-center" }, h("div", { key: 'e034058e195a94c2434e99c5b30b2e5909daff87', class: "relative max-w-xl w-full" }, h("div", { key: '4c59f5a3c8249717c4c6decbcdb63d97343bd871', class: "s-price-range-inputs" }, h("div", { key: '65de0733e3ce1ea7b37976f1d077d1f3192056c5', class: "s-price-range-relative" }, h("div", { key: 'ed842802aff5cd874e708c062aa79e8185d330f3', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '78d020948e3edc4e53fff976fa8e00b2e6ac6868', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: 'edfb3dd62b7898d4493a1adefeee20bdb305c89a', class: "s-price-range-gray-text" }, " -"), h("div", { key: 'f2227f09a344b8cc8c1160c23a6dbc9cd96cb260', class: "s-price-range-relative" }, h("div", { key: 'e528e7766eb7f6b9e0791116c87374441c73afe6', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '6dda7a17097ae51c50c3d4aae290ce1b0369dcfa', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '970d39060c565e7dc18e6a2039452a3b3df04082', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'da9b6ed688a64d624eedc3834ad3be47533c9dd5', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
+        }), h("div", { key: '701869c55602ed0ef68d2a1495b76f2159cf8d9d', class: "flex justify-center items-center" }, h("div", { key: '956a0ca9ab38e364baa9c1e7427c428143de2d64', class: "relative max-w-xl w-full" }, h("div", { key: '454523dfd41c249bc3ee984d9ebc908e257da655', class: "s-price-range-inputs" }, h("div", { key: 'f0047855d712ce0c637da08e0b5087253a4fa2d4', class: "s-price-range-relative" }, h("div", { key: '79d5ca39cb0da6b31523ae69f2ea62a1d49f4eed', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '5caa99eb839a0bfb651b7080fc51f8a99102380d', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '8df49030aa912e646a82a16b75416f5b86a54735', class: "s-price-range-gray-text" }, " -"), h("div", { key: '9c7eaa41986246f5d1e0f42c8f917c83643abf83', class: "s-price-range-relative" }, h("div", { key: '79de4f4520d63e038a51153372b1aabf729aeaff', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '497d516b45de96f205021cace76604a04887aeb4', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '3179fd8523d7aabe0a61f496752294416a02edd5', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: 'd3a4660e76c1baef73e24ff23d79622535d80cfc', innerHTML: this.isRTL ? IconArrowLeft : arrowRight })))))));
     }
     componentDidLoad() {
         this.isReady = true;

package/dist/components/salla-product-availability2.js

@@ -146,7 +146,7 @@ const SallaProductAvailability = /*@__PURE__*/ proxyCustomElement(class SallaPro
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: 'ccb098126e7809a6386ff38c74dfa0f00f64deeb', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '646195e9982d709d58b12eae7ee0649f85a76d93', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));

package/dist/components/salla-product-card-embed.js

@@ -99,7 +99,7 @@ const SallaProductCardEmbed$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
             's-product-card-embed-card-align-right': this.align === 'right',
             's-product-card-embed-card-align-center': this.align === 'center',
         };
-        return (h(Host, { key: '3d9fb0dc8473e0959bbe13b4f8c8eea7a51830ea' }, this.hasError && h("span", { key: '25228d6d007d7dcda5e5767e14d2c363abfdab3e', class: "s-product-card-embed-fallback" }), h("div", { key: 'd66d592bfad1468b745f3a954c335f72ecda1e08', class: cardClasses, ref: (el) => {
+        return (h(Host, { key: 'd001e10a89c192004bfdfdcbeeb83d2d9c695d95' }, this.hasError && h("span", { key: '2c35003750483da3d17d6df0ee5add7a3aaf530b', class: "s-product-card-embed-fallback" }), h("div", { key: 'ff5743f1a26421488677a28503f448d410b49abb', class: cardClasses, ref: (el) => {
                 this.cardContainer = el;
             } })));
     }

package/dist/components/salla-product-card2.js

@@ -163,14 +163,14 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: 'e0748a44b8e851c7aff3ee741a17dcb19dabfdaf', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '10cc1deb8384ad2bbe83263f82b257d5042cff8e', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'd976cc14bb10c2d5fe6c55253ea051b8a57d7721', ...hrefProp }, h("img", { key: '9007014be0cb7adc56541e0b1e823fb4d6f92b84', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'd1564818d562c0fb87d85b91b8b555834d89dc97', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '207349279fc7c23f085aa6ac3b3d7ef35af1bf30', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '175253af991d2bc48ea0e325adf2e16bc6f9bb9d', ...hrefProp }, h("img", { key: 'f5d5effc090a5b47287e8c9fbb1b929335c73037', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'c101c02eeb4e0245fbcd713b0e83c81148e594c1', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'f02eaeabefd56d7b560dcd268e2b941cf843cc95', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: 'b8157ea9f720c219d4217b2a1f5c7d11c2093cae', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", loading: false, "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => this.handleWishlistClick() }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'fb21d4c6290a05721f10a30c1321d9f5558d7b41', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '9776564de24468852192dce1ff0db35cd6c533c3', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'd78ea05cba95053f99495c5e8aeb59a9b66557c8', class: "s-product-card-content-title" }, h("a", { key: 'a8ba81e8ba7a4e59cf4c6bcb4370ea0965b82087', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: 'fca467f3f2407870d9c203f1ba8533f15b01d180', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '34d89df8c8a1f8372ea53f1811b7246d27f36639', class: "s-product-card-content-title" }, h("a", { key: '24ff6f134a33ca108c3ff15649d7bee101fa3d2f', ...hrefProp }, this.getDisplayTitle())), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -179,7 +179,7 @@ const SallaProductCard = /*@__PURE__*/ proxyCustomElement(class SallaProductCard
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: '290e93db790c81a11e8d2edf3d215cec03edc965', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
+            : '', h("div", { key: '10ee13faf57862712b3ce80d5ef6cb7b542090d9', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.showOutOfStockBesidePrice && this.productData?.is_out_of_stock ?
             h("span", { class: "s-product-card-out-of-stock-label" }, this.outOfStock)
             : '', this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Rate }), h("span", null, this.productData.rating.stars))

package/dist/components/salla-product-size-guide.js

@@ -60,11 +60,11 @@ const SallaProductSizeGuide$1 = /*@__PURE__*/ proxyCustomElement(class SallaProd
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: '063a407b20a58cd485aab5545bc36ef7bcf97bda', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: 'f3020bc65b716269d77e46bf28a6ff610ebff117', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '588de84c8b24de3331ff825a29e8332c1c426752', slot: "loading" }, h("div", { key: 'be0c2882631109efd8099d96cc9c8b22ff266893', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '04030e4cb75e1f49d939d1c87b97eb0fe73eff0f', height: '15px', width: '25%' }), h("div", { key: '1576c0a47284315aa3ec408d75bcbb261f230b3f', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '4edba887e3a631d1fccaa4379c3f7b9ebc8e3fb9', height: '40px' }), h("salla-skeleton", { key: 'da6c9bdf9eb7cb8cd6366b9dc954055ed3f79607', height: '40px' }), h("salla-skeleton", { key: '322e2e5d0f05949a6a957b695c6f557512acc689', height: '40px' }), h("salla-skeleton", { key: '4914a613bf190d2fc7029098ba7c7fd54bdace4c', height: '40px' })), h("div", { key: '209144302d7127ffc6933519db28d9cba949827f', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: 'cca674f6d7fe8a88c240b38df567f2980efdb9e1', height: '15px', width: '25%' }), h("salla-skeleton", { key: '9754e50822954fa6a333634a40d4414cc1785c04', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'b18e8d9fb7d1ddb9766fb9b24285480dbeb6d678', height: '10px', width: '50%' }), h("salla-skeleton", { key: '6904a849b03278f8a99aa5056772f58d14ecc10e', height: '10px', width: '75%' }), h("salla-skeleton", { key: '357446cfbab8c5b5062ef582dabc5a41b987a2d6', height: '10px', width: '100%' }), h("salla-skeleton", { key: 'b8d2ab21d3c68f1f7c325aac46c6574b8f62878c', height: '10px', width: '25%' }), h("salla-skeleton", { key: '578de2e17060b4b8f1d8e18e77e423b8a2ca746f', height: '10px', width: '60%' }), h("salla-skeleton", { key: '442da0c1997e968f77ef7d5ea14b507387004814', height: '10px', width: '45%' }), h("salla-skeleton", { key: '0ff2e33c0f931e577b020e83f5704454169c697a', height: '10px', width: '30%' })))), h("slot", { key: '83f7baaa539d8084e6efb898a865723fab3552ff', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: '821a0f8c890f62c278f2c6fbb0081c58074134fa', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '54972cbc6899d788b3543f882d3f3cf0c6a50071', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '251eca54b49ccd504cec94371103d52db3dceae5', slot: "loading" }, h("div", { key: '65563fe5e6114cdc1958b6acfc23338f87629ee9', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '66c8da1a0ca4ff7bb48b7274135de2a79c08cf69', height: '15px', width: '25%' }), h("div", { key: '33f7ec9dc4d1749bebdd8d1765b63b04f13473f3', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '1f1e52c77826df60eae9c814d0db6dfa22976495', height: '40px' }), h("salla-skeleton", { key: '608fc344f8b06e23776fac615b49730f5934baec', height: '40px' }), h("salla-skeleton", { key: '876f24fb4e06b8bd094ca9bc18c55e196b388201', height: '40px' }), h("salla-skeleton", { key: 'd3f0c5baad4e0d940b3a30598353629dd199cd38', height: '40px' })), h("div", { key: 'f492afd9c329add253c60c8692173288437213d8', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '7246853ccd94c5de70dac399593cf3dd64ae85de', height: '15px', width: '25%' }), h("salla-skeleton", { key: '5b314c2a99a4437891a7fcaf4d01a29597a03422', height: '10px', width: '75%' }), h("salla-skeleton", { key: '4cde9368235a5f355d3ce4c28642cb3f29716880', height: '10px', width: '50%' }), h("salla-skeleton", { key: 'fb7be5927efc29a993049632dde462e5e329d74b', height: '10px', width: '75%' }), h("salla-skeleton", { key: '945f9901fdd6b681c28b80f3a7b9c253c5063424', height: '10px', width: '100%' }), h("salla-skeleton", { key: '991f7e304524d0acc6c8eab5dfef4be75eee7655', height: '10px', width: '25%' }), h("salla-skeleton", { key: '9d2c66c90b20abd0984ea2ef3ced2f9dbe3479c2', height: '10px', width: '60%' }), h("salla-skeleton", { key: '0943d7f53030e26034e01c89c8edf1cfd76a87ab', height: '10px', width: '45%' }), h("salla-skeleton", { key: '683502d6f44eb68fe7ba7f9b54df456b725bd126', height: '10px', width: '30%' })))), h("slot", { key: 'bf50073356c49df10842635491e2606321faaa50', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '598c8e9603633bbb4d89f767237eda21282b4e04', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '2f357ddc66624cb7c05324ed9fb8c1164b39eda1', name: "footer" })));
     }
     get host() { return this; }
     static get style() { return sallaProductSizeGuideCss; }

package/dist/components/salla-quantity-input2.js

@@ -95,7 +95,7 @@ const SallaQuantityInput = /*@__PURE__*/ proxyCustomElement(class SallaQuantityI
         if (!inputAttributes['aria-label'] && !inputAttributes['aria-labelledby']) {
             inputAttributes['aria-label'] = salla.lang.getWithDefault('common.elements.quantity', 'Quantity');
         }
-        return (h(Host, { key: 'c797988f98c583df0064468e39f622d6e56e24e2', class: "s-quantity-input" }, h("div", { key: 'de47e2fda231074d7d7d0787dfda9cf5499f843e', class: "s-quantity-input-container" }, h("button", { key: '7c9e1918d5cbb682c1e64d59250fb9240966b8b0', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'a3ee0a9ca52089113b5af350b167a37118a20893', name: "increment-button" })), h("input", { key: '6137f675da24a5ef3325ec333f66299319c21e16', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), inputMode: "numeric", pattern: "[0-9]*", min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: '64d016e0fcb7339d0125c4d1f66862cb0331c296', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'd7f3859f72897db514c77eb0119680e00574902c', name: "decrement-button" })))));
+        return (h(Host, { key: 'bf0882609ec0e164d8280789ee6deeaadeb3e484', class: "s-quantity-input" }, h("div", { key: 'c69afe51313f69250454cf6cf72dba89fb1f92e2', class: "s-quantity-input-container" }, h("button", { key: '8a02d3452f9727278acae90f1017eed65033c0a3', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button", "aria-label": salla.lang.getWithDefault('common.elements.increase_quantity', 'Increase quantity') }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: 'f4f1dbb40e2d90205075a8d3bf31a7e4a08ee6b5', name: "increment-button" })), h("input", { key: '67b7cdc6ef5311799d200660f26a7520e122b411', class: "s-quantity-input-input", ...inputAttributes, ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), inputMode: "numeric", pattern: "[0-9]*", min: "1", readOnly: this.disableInput, value: this.quantity }), h("button", { key: 'f0139bd8e74744e9396cbae706151ec3c092766b', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button", "aria-label": salla.lang.getWithDefault('common.elements.decrease_quantity', 'Decrease quantity') }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: 'd051c3ca89310e67f834a970788abc606e5d2bbc', name: "decrement-button" })))));
     }
     get host() { return this; }
     static get watchers() { return {