@salla.sa/twilight-components 2.14.563 → 2.14.565

package/dist/esm/salla-count-down_2.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-GfnuORRm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 
 const sallaCountDownCss = "/*!twlt*/.s-count-down-horizontal{background-color:rgba(0, 0, 0, 0.06);background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.text-sm{font-size:0.875rem;line-height:1.25rem}.s-basket-gap-card-offer .s-count-down-list{margin-left:-0px !important;margin-right:-0px !important;margin-bottom:0px !important;margin-top:0px !important;display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start !important;column-gap:0px;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.s-basket-gap-card-offer .s-count-down-list:where([dir=\"ltr\"],[dir=\"ltr\"] *){flex-direction:row-reverse !important}.s-basket-gap-card-offer .s-count-down-list:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row !important}.s-basket-gap-card-offer .s-count-down-item{position:relative !important;margin-left:0px !important;margin-right:0px !important;display:inline-flex !important;width:auto !important;flex:none !important;flex-grow:0 !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;padding-top:0px !important;padding-bottom:0px !important;padding-left:0px !important;padding-right:0px !important;font-size:12px !important;font-weight:700 !important;line-height:1 !important;--tw-text-opacity:1 !important;color:rgb(21 128 61 / var(--tw-text-opacity, 1)) !important}.s-basket-gap-card-offer .s-count-down-item-value{display:inline-block !important;width:2ch !important;min-width:2ch !important;text-align:center;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);line-height:1}.s-basket-gap-card-offer .s-count-down-item-label{display:none}.s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item::before{content:none !important}.s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item::after{content:none !important;position:static;left:auto;right:auto;transform:none}[dir='rtl'] .s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item:not(:last-child)::after{content:':' !important;position:static;left:auto;right:auto;transform:none;margin-left:0.15rem;margin-right:0.15rem;color:#15803d;font-size:12px;font-weight:700;line-height:1}[dir='ltr'] .s-basket-gap-entry .s-basket-gap-card-offer.s-basket-gap-card-offer .s-count-down-item:not(:first-child)::after{content:':' !important;position:static;left:auto;right:auto;transform:none;margin-left:0.15rem;margin-right:0.15rem;color:#15803d;font-size:12px;font-weight:700;line-height:1}.s-count-down-wrapper{position:relative}.s-count-down-list{margin-left:-0.25rem;margin-right:-0.25rem;margin-bottom:1.25rem;margin-top:0.625rem;display:flex;align-items:center;justify-content:space-between}.s-count-down-list:where([dir=\"ltr\"],[dir=\"ltr\"] *){flex-direction:row-reverse}.s-count-down-list:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row}.s-count-down-item{position:relative;margin-left:0.25rem;margin-right:0.25rem;display:flex;flex:1 1 0%;flex-direction:column;align-items:center;justify-content:center;padding-top:0.5rem;padding-bottom:0.5rem;font-family:var(--font-main);font-weight:700}.s-count-down-item::after{position:absolute;left:-2px;font-family:inherit;--tw-content:':';content:var(--tw-content)}.s-count-down-item:last-child::after{--tw-content:'';content:var(--tw-content)}.s-count-down-item-label{margin-top:0.25rem;display:block;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1));opacity:0.4}.s-count-down-boxed .s-count-down-item{border-radius:var(--s-radius, 0.25rem);--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.s-count-down-boxed .s-count-down-item::after{--tw-content:'';content:var(--tw-content)}.s-count-down-sm .s-count-down-item{font-size:1rem;line-height:1.5rem;font-weight:400}.s-count-down-sm .s-count-down-item::after{content:var(--tw-content);font-size:1rem;line-height:1.5rem}.s-count-down-sm+.s-count-down-end-text{font-size:1rem;line-height:1.5rem;font-weight:400}.s-count-down-md .s-count-down-item{font-size:1.125rem;line-height:1.75rem;font-weight:500}.s-count-down-md .s-count-down-item::after{content:var(--tw-content);font-size:1.125rem;line-height:1.75rem}.s-count-down-md+.s-count-down-end-text{font-size:1.125rem;line-height:1.75rem;font-weight:500}.s-count-down-lg .s-count-down-item{font-size:1.875rem;line-height:2.25rem;font-weight:700}.s-count-down-lg .s-count-down-item::after{content:var(--tw-content);font-size:1.875rem;line-height:2.25rem}.s-count-down-lg+.s-count-down-end-text{font-size:1.5rem;line-height:2rem;font-weight:700}.s-count-down-light .s-count-down-item{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-count-down-light .s-count-down-item::after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.s-count-down-dark .s-count-down-item{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-count-down-dark .s-count-down-item::after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.s-count-down-primary .s-count-down-item{color:var(--color-primary)}.s-count-down-primary .s-count-down-item::after{content:var(--tw-content);color:var(--color-primary)}.s-count-down-ended .s-count-down-item{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1));opacity:0.1}.s-count-down-ended .s-count-down-item::after{content:var(--tw-content);--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.s-count-down-end-text{position:absolute;top:50%;left:50%;--tw-translate-x:-50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));font-family:var(--font-main);--tw-text-opacity:1;color:rgb(234 84 85 / var(--tw-text-opacity, 1))}.s-count-down-text-center{text-align:center}.s-count-down-info-message{display:flex;gap:0.5rem;padding-top:0.625rem;padding-bottom:0.625rem;font-size:0.875rem;line-height:1.25rem;--tw-text-opacity:1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.s-count-down-pre-order{display:flex;flex:1 1 0%;flex-direction:column;align-items:center;gap:0.5rem}@media (min-width: 1024px){.s-count-down-pre-order{flex-direction:row}}.s-count-down-pre-order .s-count-down-item{position:relative;display:flex;height:2.7rem;width:2.25rem;flex-direction:column;align-items:center;justify-content:center;border-radius:2px}.s-count-down-pre-order .s-count-down-item::after{left:-7px;--tw-content:':';content:var(--tw-content)}.s-count-down-pre-order .s-count-down-item:last-child::after{--tw-content:'';content:var(--tw-content)}.s-count-down-pre-order-container{margin-bottom:1.25rem;margin-top:0.625rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem}@media (min-width: 1024px){.s-count-down-pre-order-container{flex-direction:row}}.s-count-down-pre-order-container .s-count-down-list{margin:0px;padding:0px}.s-count-down-pre-order .s-count-down-item-value{font-size:1rem;line-height:1.5rem;font-weight:700;line-height:1}.s-count-down-pre-order .s-count-down-item-label{margin-top:0px;font-size:0.6rem;opacity:1}.s-count-down-horizontal{display:inline-flex;flex-direction:row;align-items:center;gap:0.75rem;border-radius:0.75rem;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);line-height:1}.s-count-down-horizontal.s-count-down-ended{opacity:0.5}.s-count-down-horizontal .s-count-down-list{margin:0px;width:auto;justify-content:flex-start;padding-left:0px;padding-right:0px}.s-count-down-horizontal .s-count-down-list .s-count-down-item{margin-left:0.25rem;margin-right:0.25rem;height:1.75rem;min-width:2rem;flex:none;border-radius:0.375rem;background-color:var(--color-primary);padding-top:0px;padding-bottom:0px;padding-left:0.5rem;padding-right:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:600;line-height:1.5;color:var(--color-primary-reverse)}.s-count-down-horizontal .s-count-down-list .s-count-down-item::after{font-weight:600;content:var(--tw-content);color:var(--color-primary)}.s-count-down-horizontal .s-count-down-item-label{margin-top:0.125rem;font-size:0.625rem;line-height:1;--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity, 1));opacity:0.7}.s-count-down-with-button{display:inline-flex;align-items:center;column-gap:0.75rem}.s-count-down-with-button button .s-button-text{display:flex;align-items:center;column-gap:0.5rem}.s-count-down-with-button button .s-button-text:where([dir=\"ltr\"],[dir=\"ltr\"] *){flex-direction:row-reverse}.s-count-down-with-button button .s-button-text:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row}.s-count-down-prefix-text{font-size:0.875rem;line-height:1.25rem;font-weight:700;color:var(--color-primary)}";
 
@@ -233,12 +233,12 @@ const SallaCountDown = class {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: 'e2805e528a52b71ad71f4f1f16a473947dafb5bc', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: '7f3e240f25c715b3faaac4e85c48f017e54c7907', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
 };
 SallaCountDown.style = sallaCountDownCss;
 
-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 = class {
     constructor(hostRef) {
@@ -247,20 +247,48 @@ const SallaOrderOptionsModal = class {
         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;
@@ -275,41 +303,109 @@ const SallaOrderOptionsModal = class {
     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) {
@@ -317,9 +413,8 @@ const SallaOrderOptionsModal = class {
                 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;
@@ -335,7 +430,6 @@ const SallaOrderOptionsModal = class {
         }
         return result;
     }
-    /** Sync native validity — keeps the AP user gesture intact. */
     validateSync() {
         let pass = true;
         for (const [, el] of this.optionsRefs) {
@@ -343,8 +437,6 @@ const SallaOrderOptionsModal = class {
                 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())
@@ -353,11 +445,6 @@ const SallaOrderOptionsModal = class {
         }
         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) => {
@@ -368,7 +455,6 @@ const SallaOrderOptionsModal = class {
         });
         return sum;
     }
-    /** salla.event.on is global — attach per open, detach on close to avoid stacking. */
     attachChangeListener() {
         this.detachChangeListener();
         this.changeHandler = () => this.recomputeTotal();
@@ -389,7 +475,6 @@ const SallaOrderOptionsModal = class {
                 ? 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;
             });
         }
@@ -402,44 +487,148 @@ const SallaOrderOptionsModal = class {
             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 getElement(this); }
 };

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-GfnuORRm.js';
+import { r as registerInstance, c as createEvent, h } from './index-BC0OSCdw.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-GfnuORRm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 import { i as isMapOriginIntent } from './helpers-CV6uPJEJ.js';
 
 const DEBUG_KEY = 'salla-delivery-promise-debug';

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-GfnuORRm.js';
+import { r as registerInstance, h, H as Host } from './index-BC0OSCdw.js';
 
 const sallaEditOrderButtonCss = "/*!twlt*/:host{display:block}";
 

package/dist/esm/salla-filters-widget.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-GfnuORRm.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 import { F as FilterOptionTypes, H as Helper } from './Helper-Cql-WbqR.js';
 import './anime.es-CgtvEd63.js';
 
@@ -175,12 +175,12 @@ const SallaFiltersWidget = class {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: '831f7655b903634e0eb3abc7338ea3296883cbbf', class: "s-filters-widget-container" }, h("h3", { key: '72a31fb2c9adab3df37550e930d5be981aafd8f6', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '7512914e8a7348d146384d67f117c8b06507def0' }, this.option.label), h("span", { key: '50d62723255618a2a51512722388ff686c92bdab', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '76792390d33c2051082541e18e9b354b2b63c644', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b39462721ff4572b3572c0ed6171c07fa53b57a9', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '759b2ab6b80d0fd0bb03fcd3746414d9e4b80c7d', 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: 'db918c4a43bebc35c23810dc97736584504d0e47', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '92dc440b79ed0929a39db7a4a96a1981f3b49974' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: 'af3f05601697115a001949d5c23d8925f6c68135', class: "s-filters-widget-container" }, h("h3", { key: '689046ac453166e29fdb4e3ad10568a989446bfb', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '00d65abda360e88e26a08016bb1bd23eceee9f4b' }, this.option.label), h("span", { key: '1915aaec2e1ea66235071f0b4f872bd6d9717a21', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'd94f99643aa914391f131acebfb71d4183263df5', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '0b67486012b38ce82a377b0f3cb6465892d718ae', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '00bf03c96c9fa7199872f1444c4484bf23049dd4', 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: '79b29b30854583559ee8b0082210ad2f34e31e1a', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '0e657a77d5e62ee04cf2d3bd30982bb6addf06ef' }), 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: '885668e717441581cd1b92494ebc3927cd70daf1', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '29a3578886c0c88b6af2dc529004f9f4ab663986', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/salla-filters.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-GfnuORRm.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 import { H as Helper, F as FilterOptionTypes } from './Helper-Cql-WbqR.js';
 import './anime.es-CgtvEd63.js';
 
@@ -216,7 +216,7 @@ const SallaFilters = class {
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: '32ede23f7fb3d9c7fbcd136ad2773e3212c2f5b8' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: 'd72b6ce577e47864d9095922f9c2d88068c2a2c4' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }

package/dist/esm/salla-fulfillment-methods.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-GfnuORRm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 
 const sallaFulfillmentMethodsCss = "/*!twlt*/:host{display:block}.s-fulfillment-methods{font-family:inherit}.s-fulfillment-methods-list{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px;margin-top:12px}:host-context([dir=rtl]) .s-fulfillment-methods-content{flex-direction:row-reverse}:host-context([dir=ltr]) .s-fulfillment-methods-content{flex-direction:row}.s-fulfillment-methods-card{flex:1;min-width:0;border:1px solid var(--color-border, #e5e7eb);border-radius:12px;padding:16px}.s-fulfillment-methods-content{display:flex;align-items:center;gap:12px}.s-fulfillment-methods-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.s-fulfillment-methods-title{font-weight:700;font-size:14px;line-height:1.3;color:var(--color-text-primary, #2b2d34)}.s-fulfillment-methods-subtitle{font-size:12px;line-height:1.4;color:var(--color-text-secondary, #6b7280)}.s-fulfillment-methods-icon-wrap{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-secondary, #f3f4f6);border-radius:10px}.s-fulfillment-methods-icon{font-size:22px;color:var(--color-text-secondary, #6b7280);line-height:1}.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-fulfillment-methods-list{margin-bottom:0.75rem;margin-top:0.75rem;display:flex;flex-wrap:wrap;gap:1rem}.s-fulfillment-methods-card{min-width:0px;flex:1 1 0%;border-radius:0.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));padding:1rem}.s-fulfillment-methods-content{display:flex;flex-direction:row;align-items:center;gap:0.75rem}.s-fulfillment-methods-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row-reverse}.s-fulfillment-methods-text{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:0.25rem}.s-fulfillment-methods-title{font-size:0.875rem;line-height:1.25rem;font-weight:700;line-height:1.375;color:var(--color-text-primary,#2b2d34)}.s-fulfillment-methods-subtitle{font-size:0.75rem;line-height:1rem;line-height:1.4;color:var(--color-text-secondary,#6b7280)}.s-fulfillment-methods-icon-wrap{display:flex;height:2.75rem;width:2.75rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:10px;background-color:var(--color-surface-secondary,#f3f4f6)}.s-fulfillment-methods-icon{font-size:22px;line-height:1;color:var(--color-text-secondary,#6b7280)}";
 

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

@@ -1,12 +1,12 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-GfnuORRm.js';
+import { r as registerInstance, h } from './index-BC0OSCdw.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 import { C as Cancel } from './cancel-BsLF_HK7.js';
 import { G as GiftSharing } from './gift-sharing-DxkgAGoT.js';
-import { a as appendOrderOptionsToPayload } from './apple-pay-order-options-Bg2HuLRr.js';
+import { a as appendOrderOptionsToPayload } from './apple-pay-order-options-s0kn7yr8.js';
 
 var Images = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>images</title>
@@ -864,7 +864,7 @@ const SallaGifting = class {
     }
     render() {
         return [
-            h("div", { key: 'fd15533a1dbb57c0bbf31d66046b7051b63221d7' }, h("salla-list-tile", { key: 'b6f298371176e3fc829a8f0a7de775adbc70f903', class: this.generateClass() }, h("div", { key: '46c0dfc5d7d89576d411b5765d92a72b3dd289ba', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'd0b9bbd243458f9ea25aa7a970d3084d16ca56a8' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '0ac470d3daa813ca8177e9f92c9c0eec402784b0', slot: "subtitle" }, h("div", { key: 'a783624dfe67959544cd70b3a087ccd004fb517f' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'd76689c03fdff0aa9ff50323227a191e8aa7aa11', slot: "action" }, h("salla-button", { key: '1516f29ca50b92f78a8f7e5a07daa9e70740dae9', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '9d9b070b98e7a60736ca87347b0982a3034681a2', name: "widget-btn-content" }, h("div", { key: '4813d5f3bf85c3f5a0eefb5bd5478a009b6aceb2', class: "s-gifting-widget-action-content" }, h("span", { key: '738760ee256892c2f654ebae06877ca6cdaf0bec', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'bb181feda8126bd541517dabe107c44ab4da177a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0d4478c6d9cf6bd1e75e81dca234c05af9303e0e', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'cea9b69f0af18a825f1cf4ac979fb571cc4b497f', slot: "loading" }, h("div", { key: '8190baa4b26d4de58ea98a4bd3662a54ca024e3a', class: "s-gifting-skeleton" }, h("div", { key: '6271ba338d1e85c5337f9b4956b2b0eb1c610669', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '77fb7f73e5dd748b69c9ed7263e3cefc9b24d643', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '4e436f8ad10aad25ffb84632973376855c0d803d', class: "s-gifting-modal-title" }, h("div", { key: '98c17840dd15e6d8495bd709a76d257001a3c2f3', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '9582b325011b36f5dbb7bf70a044554e339af05a', height: '15px', width: '150px' })))), h("div", { key: 'd95d5c41fb226a654e62c183fcababcf1a1af9b5', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '73ee2dd11f30ad370261a9b88324f40a52607973', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8b07be46818f49401a5c7aae8a19de0445e9785e', height: '230px' }), h("salla-skeleton", { key: '6a7a9ff47ad18efdfc51d2c70dba6cf89c572974', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f033c20b65077bfa99fb302415e10ff55f2d112d', height: '30px' }), h("salla-skeleton", { key: '60bf4740d16b9cf852536315b62d1abafc14e4d5', height: '40px' })))), h("slot", { key: 'eac7b126556b6895457fdd0c87f15b872975947f', name: "header" }), !!this.hasError ?
+            h("div", { key: 'eb77c96ecc39291dc3def641cea481cc90b3e267' }, h("salla-list-tile", { key: 'a9e8e946a5a06c6fe380073a068612fadeb0fc20', class: this.generateClass() }, h("div", { key: 'eebf210be6fe5e1672e695d47c9bde11320883c8', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'f0e8320f7b29878ec7a96c201c47c5f60f4d9b21' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '446c7e990c11838a3356acce58730392822bec93', slot: "subtitle" }, h("div", { key: '9a70815ad3c56c0360f7f5df1863c5aba5bc896e' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '952b4ba1b1c864f7700ad907661b0d8962f04ab8', slot: "action" }, h("salla-button", { key: 'fb226574b5780e51da64cba8b664845f9fc9eb34', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6d15b2311b8fa8971438fe413e195f0d8b45b14d', name: "widget-btn-content" }, h("div", { key: 'ac5118ea07ad9048f4302397f59620cc20707f2f', class: "s-gifting-widget-action-content" }, h("span", { key: 'ecd29618212e32d4c9a9630e1041757175050a7e', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'b0ea950ea255e38b8070adc258f6fe95257f4ee6' }, this.sectionBtnText)))))), h("salla-modal", { key: 'a5c2f373772e75fb2d4317a4870e9d164ee1c11c', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '23b4f5e5184ac45553c064b82534935b69f4971c', slot: "loading" }, h("div", { key: 'ba556012198ceec99b547b4bb81c498a684b582e', class: "s-gifting-skeleton" }, h("div", { key: '6440590d61dd8e0fc43228bbdc474aab6fe5cebc', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '4a7b1911383367aa4d8dec04f28ac82df21a5d73', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '22105ca62fcf60145e40bcf03eccafa562288cd9', class: "s-gifting-modal-title" }, h("div", { key: 'dd1b90825ebc0d7dbd676d3862fb50ee20455b89', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6554734da468f07ebe5e8b78aff926c3b0235a07', height: '15px', width: '150px' })))), h("div", { key: '9bbad16d73fb651480312cc1920b7a08cca91fd2', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '18fa7ea81b582e3ae6f47efb56197b06ce66651e', height: '10px', width: '150px' }), h("salla-skeleton", { key: '2af61d925bb04c9713a7792b21ecd354f0516f67', height: '230px' }), h("salla-skeleton", { key: '8f7d2007c374b89ea252782d54e111fcd8e6f0c0', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'ad2241ce42187cab3d5e487577f984571191476f', height: '30px' }), h("salla-skeleton", { key: 'f5923597280a309f81edf21960c1a1a0ffcee30f', height: '40px' })))), h("slot", { key: '607f49b24ad953ace7a49aae0198150c29842350', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -887,7 +887,7 @@ const SallaGifting = class {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: arrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '8f516d4a4275f867f0564ef7aa187fb2bcc1e32f', name: "footer" })))
+                    ], h("slot", { key: 'c83487720cc77c14ccc08e8b2872b5f4fbd0bfa3', name: "footer" })))
         ];
     }
 };

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-GfnuORRm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 
 const SallaHook = class {
     constructor(hostRef) {
@@ -15,7 +15,7 @@ const SallaHook = class {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: '1acc6e7c4e3e9695576a820cbc68c539e81fa36e' });
+        return h(Host, { key: 'e9402928843fe4612c514c4a0f6374b2d1f02736' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/esm/salla-infinite-scroll.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-GfnuORRm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BC0OSCdw.js';
 import { H as Helper } from './Helper-Cql-WbqR.js';
 import './anime.es-CgtvEd63.js';