@salla.sa/twilight-components 2.14.469 → 2.14.471

package/dist/components/salla-breadcrumb.js

@@ -22,12 +22,14 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
             }
         })
             .then(() => {
+            const page = salla.config.get("page");
+            if (page?.slug === 'wishlist') {
+                this.breadcrumbs = [];
+                return;
+            }
             if (!salla.config.get('theme.settings.is_breadcrumbs_enabled', true)) {
                 throw new Error('salla-breadcrumb:: merchant disabled the feature');
             }
-        })
-            .then(() => {
-            const page = salla.config.get("page");
             if (!page || !page.slug) {
                 salla.logger.error('salla-breadcrumbs:: page object not existed on salla.config.get("page")!');
                 this.breadcrumbs = [];
@@ -147,8 +149,8 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
     storeBreadcrumbSnapshot() {
         try {
             const page = salla.config.get("page");
-            // Skip storing breadcrumbs for product.single page
-            if (page?.slug === 'product.single') {
+            // Skip storing breadcrumbs for pages that should not affect navigation history
+            if (page?.slug === 'product.single' || page?.slug === 'wishlist') {
                 return;
             }
             const items = [...this.breadcrumbs];
@@ -169,6 +171,10 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
             salla.log('salla-breadcrumb:: There is no breadcrumbs!');
             return null;
         }
+        const isShareWishList = salla.config.get('page.slug') === 'wishlist';
+        if (isShareWishList) {
+            return null;
+        }
         const isProductSingle = salla.config.get('page.slug') === "product.single";
         return [
             h("ol", { class: {
@@ -243,6 +249,16 @@ const SallaBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class SallaBreadcrumb
         let lastEl = this.host.querySelectorAll('.s-breadcrumb-item')[this.breadcrumbs.length - 1]?.querySelector('a');
         lastEl && lastEl.replaceWith(lastEl.firstChild);
     }
+    componentDidLoad() {
+        // Remove the page main title if the page is a share wishlist page
+        // when the component is loaded, page-main-title exists in the DOM as it's a theme markup.
+        // So whenever breadcrumb is rendered, the main title is most likely rendered too.
+        // Therefore, we remove it if the page is a share wishlist page.
+        const isShareWishList = salla.config.get('page.slug') === 'wishlist';
+        if (isShareWishList) {
+            document.getElementById('page-main-title')?.remove();
+        }
+    }
     get host() { return this; }
     static get style() { return sallaBreadcrumbCss; }
 }, [0, "salla-breadcrumb", {

package/dist/components/salla-gifting.js

@@ -31,7 +31,7 @@ var Alert = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:0.2s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}.s-gifting-modal .s-searchable-dropdown-trigger{border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger:hover:not(.s-searchable-dropdown-trigger--disabled){border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger--open,.s-gifting-modal .s-searchable-dropdown-trigger:focus{border-color:var(--color-primary, #00897b);box-shadow:0 0 0 1px var(--color-primary, #00897b)}.s-gifting-modal .s-searchable-dropdown-trigger-placeholder{color:#000}.s-gifting-modal .s-gifting-image-section{margin-bottom:1.5rem}.s-gifting-modal .s-gifting-slider{margin-bottom:0.5rem}.s-gifting-modal .s-gifting-image{display:block}.s-gifting-modal .s-gifting-image img{display:block;width:auto;height:100px;object-fit:contain}.s-gifting-modal .s-gifting-image-section+.anime-item .s-gifting-text-title{margin-top:1rem}";
+const sallaGiftingCss = ".s-gifting-steps-wrapper{transition:height 0.8s cubic-bezier(0.55, 0, 0.1, 1) 0s}.s-gifting-select{background-image:url(\"data:image/svg+xml;utf8,<svg version='1.1' fill='gray' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><title>keyboard_arrow_down</title><path d='M9.875 11.104l6.125 6.125 6.125-6.125 1.875 1.875-8 8-8-8z'></path></svg>\");background-size:24px;background-repeat:no-repeat;background-position:99%;appearance:none}[dir=rtl] .s-gifting-select{background-position:5px}.s-gifting-widget-vertical .s-list-tile-item [slot=title]{display:flex;align-items:center;gap:1.5rem}.s-gifting-widget-vertical .s-list-tile-item-content{width:100%}.s-gifting-modal .s-searchable-dropdown-trigger{border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger:hover:not(.s-searchable-dropdown-trigger--disabled){border-color:#d1d5db}.s-gifting-modal .s-searchable-dropdown-trigger--open,.s-gifting-modal .s-searchable-dropdown-trigger:focus{border-color:var(--color-primary, #00897b);box-shadow:0 0 0 1px var(--color-primary, #00897b)}.s-gifting-modal .s-searchable-dropdown-trigger-placeholder{color:#000}.s-gifting-modal .s-gifting-image-section{margin-bottom:1.5rem}.s-gifting-modal .s-gifting-slider{margin-bottom:0.5rem}.s-gifting-modal .s-gifting-image{display:block}.s-gifting-modal .s-gifting-image img{display:block;width:auto;height:100px;object-fit:contain}.s-gifting-modal .s-gifting-image-section+.anime-item .s-gifting-text-title{margin-top:1rem}";
 
 const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting extends HTMLElement {
     constructor() {
@@ -201,26 +201,25 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
             salla.event.dispatch('login::open', { withoutReload: true });
             return;
         }
+        // Reopen on step 1, but KEEP the user's selections (image / text / custom
+        // message / sender+receiver). The modal element is never destroyed, so its
+        // state and DOM survive close→reopen without a page refresh — we only reset
+        // the step view and clear anime.js's leftover inline styles so the slide
+        // doesn't reopen with step 2 painted on top.
+        this.resetStepsAnimation();
         this.currentStep = 1;
         this.parentClass = 'is-current-step-1';
         this.step2Animated = false;
-        this.selectedText = undefined;
-        this.selectedGiftTextOption = undefined;
-        this.uploadedImage = undefined;
-        this.selectedImage = undefined;
+        // Drop any stale inline height from the previous session's step (e.g. step 2,
+        // shorter for digital products) so reopening to step 1 isn't clipped. Cleared
+        // while the modal is hidden, so the later set won't animate.
+        this.stepsWrapper?.style.removeProperty('height');
         await this.modal.open();
         // Determine the appropriate method to call based on the `physicalProducts` flag
         const giftDetailsMethod = this.productId ? () => salla.product.getGiftProductDetails(this.productId) : () => salla.cart.getGiftCartDetails();
         return await salla.api.withoutNotifier(giftDetailsMethod)
             .then((response) => {
             this.gift = response.data;
-            // Backward-compat: older BE responses omit these visibility flags. Treat a
-            // missing flag as enabled so the image/text steps still render until the BE
-            // that returns them is deployed. Use `??` so an explicit `false` is preserved.
-            this.gift.show_texts = this.gift.show_texts ?? true;
-            this.gift.show_images = this.gift.show_images ?? true;
-            this.gift.show_custom_text = this.gift.show_custom_text ?? true;
-            this.gift.show_image_upload = this.gift.show_image_upload ?? true;
             this.senderName = this.gift.sender_name;
             this.disableClass = this.gift?.show_image_upload ? '' : 'pointer-events-none';
             if (!this.gift.show_texts) {
@@ -236,11 +235,6 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                 this.parentClass = 'is-current-step-2';
                 this.step2Animated = true;
             }
-            else if (!this.gift.show_images) {
-                // the slider lays out asynchronously,
-                // so an early measurement would pin it too short and overlap the button.
-                this.setWrapperHeight(1, 250, 5);
-            }
         })
             .catch(e => {
             this.hasError = true;
@@ -251,6 +245,31 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     skipStep1() {
         return !!this.gift && !this.gift.show_images && !this.gift.show_texts;
     }
+    /**
+     * anime.js writes inline transform/opacity onto the step containers and their
+     * `.anime-item` children while transitioning between steps. The modal is only
+     * hidden on close (the component is never destroyed), and Stencil never set
+     * those inline styles so it won't clear them on re-render. Without this reset,
+     * reopening keeps step 2 painted on top (leftover opacity/translate) while the
+     * markup is back on step 1 — clicks then fall through to step 1's uploader.
+     */
+    resetStepsAnimation() {
+        // `.anime-item` children carry no JSX-managed style, so clearing them fully is safe.
+        [this.step1Elems, this.step2Elems].forEach(stepEl => {
+            stepEl?.querySelectorAll('.anime-item')
+                .forEach(item => item.removeAttribute('style'));
+        });
+        // step 1 container can carry anime leftovers (goToStep1 animates it) and has
+        // no JSX-managed style, so a full clear is safe.
+        this.step1Elems?.removeAttribute('style');
+        // step 2 container is animated by goToStep2 too, but in the skip-step-1 case
+        // its style is JSX-managed. Only strip the anime-applied props so we don't
+        // fight Stencil's vnode-level style diffing (which would not restore it).
+        if (this.step2Elems && !this.skipStep1()) {
+            this.step2Elems.style.removeProperty('opacity');
+            this.step2Elems.style.removeProperty('transform');
+        }
+    }
     /**
      *
      * Hide / close the gifting modal window
@@ -316,7 +335,17 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
         if (withValidation && !this.validateStep1()) {
             return;
         }
-        this.setWrapperHeight(2, 600, 0);
+        // Pin the wrapper to step 1's current height as an explicit px value first.
+        // The wrapper is `auto` on open, and CSS can't transition from `auto` — it
+        // would snap (flash straight to the big size). With a px starting point the
+        // grow to step 2 animates smoothly, in sync with the slide.
+        if (this.stepsWrapper && this.step1Elems) {
+            this.stepsWrapper.style.height = `${this.step1Elems.offsetHeight}px`;
+        }
+        // Step 2 is absolutely positioned, so its height is measurable even while it's
+        // translated off-screen. Grow right away (small delay only to flush the pending
+        // re-render and let the px start-height paint) so the background expands in sync.
+        this.setWrapperHeight(2, 50, 0);
         let stepNextAnime = new anime.timeline();
         stepNextAnime.add({
             targets: this.step1Elems.querySelectorAll(`#${this.hostId} .anime-item`),
@@ -647,8 +676,12 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
             this.setWrapperHeight(2, 150, 0);
             return;
         }
+        // A preset option from the list sends its id as `text_id`; the custom option
+        // sends the typed message as `text`.
+        const isCustomText = this.selectedGiftTextOption === 'custom';
         const giftPayload = {
-            text: this.selectedText,
+            text: isCustomText ? this.selectedText : undefined,
+            text_id: !isCustomText && this.selectedGiftTextOption ? Number(this.selectedGiftTextOption) : undefined,
             sender_name: this.senderName,
             quantity: this.quantity,
             deliver_at: this.showCalendar ? this.deliveryDate : null,
@@ -721,7 +754,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
     }
     render() {
         return [
-            h("div", { key: 'fdb6b68a052a9fa0a0d527edb25e3d7783cc47e9' }, h("salla-list-tile", { key: '3cfb7f37df96e924af7f977fd17f4161e40f83fe', class: this.generateClass() }, h("div", { key: '291a27d70bc43d6edac5c5838d93eaa6a51fb84a', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: 'c49f119d84a279338c4478872883ba7356e118ce' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '2ccfb84620132477c0845ffc0bbc257c350cdeb9', slot: "subtitle" }, h("div", { key: '2840a426b505f7fe7ac5c285ab9b74ca4f99ab55' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'e3560b1bc8a6c062417f3e2b7a91b5b20b4e1880', slot: "action" }, h("salla-button", { key: '5d96fb354f2845955344d782e693fe27a0fa2652', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '384ab549dc1942a600cc37c4df26008a8a05e9ab', name: "widget-btn-content" }, h("div", { key: '80d83cd6296f2e93ebbc0eada8737d65c76e4ce0', class: "s-gifting-widget-action-content" }, h("span", { key: '69f6686f6fe23bdab891ab12b295cf918ba0a8fb', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: '495c9e9b10dcb69a1335d0345d42a8323b52abef' }, this.sectionBtnText)))))), h("salla-modal", { key: '303a208c394aa2c91f2273b3909208c29266b490', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '985a4d292ea01cb7ff48b443afe854de6f293abf', slot: "loading" }, h("div", { key: 'ba2b61f3bebf33d04d7132a00d3334a35042646a', class: "s-gifting-skeleton" }, h("div", { key: '4c8d2a5f128407423fd0c3070907d7781fb92283', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8585263f0bcb523a5b537c3b13f9c2a0a3a898d0', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'dbd2c3efbe5c91563275c09efd832709b6ed6748', class: "s-gifting-modal-title" }, h("div", { key: '4885e29c71001b530be33a4cf585fd77cf434dfd', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6c248a65bcc92c51555f0dd8f6d10c6f9d4a2b9a', height: '15px', width: '150px' })))), h("div", { key: '07de64586572cea82b2561344b5922ad4f7cb2c1', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '9a9e45772c6f5ce30a19ebcb53405032dfc25862', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'd1165987504fb2e5a7d013118b6ca5db2bf1523c', height: '230px' }), h("salla-skeleton", { key: '33cc657831541bcf6916c54c8dffca3b9933ccbb', height: '10px', width: '150px' }), h("salla-skeleton", { key: '46ff78b7725c57c955c73e9a71b9bf1c7340a354', height: '30px' }), h("salla-skeleton", { key: '520bd0a02c0bf4ef6109f014856dfad71d779aca', height: '40px' })))), h("slot", { key: '5519fd6df4f911b042f68f6825a563ce92f16733', name: "header" }), !!this.hasError ?
+            h("div", { key: 'b26068c5c6b0c40814e1cb67208afa352b1d913c' }, h("salla-list-tile", { key: '22189813371c56f1b66334d826c342d30dade34f', class: this.generateClass() }, h("div", { key: '5f9c597b87ab39d591144c4943feba0c775d645b', slot: "title" }, this.vertical ? h("span", { innerHTML: SIGiftSharing }) : '', h("h3", { key: '4341ea66f7d9a547d919be173476908c5d0f018a' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'f2eb13ddcd7810da368ea35e161addbef1af5ce4', slot: "subtitle" }, h("div", { key: '1b69dfbce6b7b7d94bbee4e325d8f65c2b34dcce' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '6a8f526bcbb0a659e028155ce08aec2538e4fff2', slot: "action" }, h("salla-button", { key: '5cf31da452a173a487c4ea9dbd1356fd10d3b800', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '4aef407fd0a79b0172f0803a7134bd366ac6b034', name: "widget-btn-content" }, h("div", { key: '333273064da0b5071a7a7433ec7626ef00bd9e1e', class: "s-gifting-widget-action-content" }, h("span", { key: '913d82d641ed54218f20a76acefca855d1324427', innerHTML: SIGiftSharing }), " \u00A0", h("span", { key: 'acc39208f212714bef2c56bd9b5e5c482e3a7122' }, this.sectionBtnText)))))), h("salla-modal", { key: '9bceb2e1a4bb4c9880b220d679a0e295ba1ae732', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '0ea0746b7c11c98c8a6d9535771afb3a4681c1c1', slot: "loading" }, h("div", { key: '5dcfb9acd127f3cf786b626a1be7e9f27ff7ac31', class: "s-gifting-skeleton" }, h("div", { key: 'd5205c53714ca60277a82abce7fb12f0a01dd38d', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'fde7ede398b9edb638ade25677915747855584f2', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '61bb2c36958080e37f83b9bc27ce05db5abb3230', class: "s-gifting-modal-title" }, h("div", { key: '10125cb25732100787b118f34a4e323aa215185c', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '2ee525ae05fb6540bc0fdcaa846b14e4a476a297', height: '15px', width: '150px' })))), h("div", { key: '8e4544f3bd4a81c961259de27ebf255a998a5e4f', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '237f0961f0748aeef3c5b77819234b3215f794e2', height: '10px', width: '150px' }), h("salla-skeleton", { key: '19510cb426335b9733ef4a34dc7b8e5bffe0c23c', height: '230px' }), h("salla-skeleton", { key: '78defffee0c94e9323ede7e12660ae234d84d019', height: '10px', width: '150px' }), h("salla-skeleton", { key: '21b800dff2bec3c1caea94115a37153e406eef11', height: '30px' }), h("salla-skeleton", { key: 'd8a08143339c184d05758d1497e22ad23cdac4f6', height: '40px' })))), h("slot", { key: '9ef7679d02250428236347b5bb4a080b04244a53', 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" }, " "))
                 :
                     [
@@ -732,8 +765,8 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                                 h("salla-slider", { id: "gifting-slider", loop: false, "controls-outer": true, class: "s-gifting-slider", type: "carousel" }, h("div", { slot: "items" }, this.gift && this.gift.gift_images ?
                                     this.gift?.gift_images.map((item) => h("a", { class: "s-gifting-clickable s-gifting-image", onClick: () => this.setPreview(item) }, h("img", { src: item.url, alt: `${item.id}` }))) : ''))
                                 : "")), this.gift && this.gift.show_texts ?
-                            h("div", { class: "anime-item" }, h("div", { class: "s-gifting-modal-uploader-title s-gifting-text-title" }, this.giftText), h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: true }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
-                                this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom" }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
+                            h("div", { class: "anime-item" }, h("div", { class: "s-gifting-modal-uploader-title s-gifting-text-title" }, this.giftText), h("div", { class: "s-form-group s-gifting-selectText", ref: el => this.textSelect = el }, h("select", { id: "gift-text-selection", name: "gift-text-selection", class: "s-form-control s-gifting-select", onChange: e => this.toggleGiftText(e) }, h("option", { "data-id": null, selected: !this.selectedGiftTextOption }, this.selectGiftMessage), this.gift && this.gift.gift_texts ?
+                                this.gift?.gift_texts.map((txt) => h("option", { "data-id": txt.id, value: txt.text, key: txt.id, selected: String(this.selectedGiftTextOption) === String(txt.id) }, txt.text)) : '', this.gift && this.gift.show_custom_text ? h("option", { "data-id": "custom", selected: this.selectedGiftTextOption === 'custom' }, this.giftCustomText) : null)), h("div", { class: this.showGiftText && this.gift && this.gift.show_custom_text ? "s-form-group s-gifting-textarea shown" : "s-form-group s-gifting-textarea hide", ref: (el) => this.customTextArea = el }, h("label", { htmlFor: "gift-custom-text", class: "s-form-label" }, this.giftCustomText), h("div", { class: "mt-1" }, h("textarea", { onInput: (event) => this.handleTextAreaChange(event), rows: 4, ref: (el) => this.textArea = el, name: "gift-custom-text", id: "gift-custom-text", class: "s-form-control" })))) : null, h("div", { class: "anime-item" }, h("salla-button", { color: "primary", width: "wide", onClick: () => this.goToStep2(!!this.gift?.show_texts) }, h("span", null, this.nextStep)))), h("div", { class: "s-gifting-step-two gift-step-2", style: this.skipStep1() ? { opacity: '1', transform: 'translateX(0)', position: 'relative' } : undefined, ref: el => this.step2Elems = el }, h("div", { class: this.step2ItemClass(this.errors?.['sender_name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "sender_name", class: "s-form-label" }, this.senderNameLabel), h("input", { type: "text", class: "s-form-control", name: "sender_name", id: "sender_name", value: this.senderName, onInput: (event) => this.handleSenderName(event), placeholder: "" }), this.errors && this.errors['sender_name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['sender_name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.name'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { htmlFor: "receiver_name", class: "s-form-label" }, this.receiverNameFieldLabel), h("input", { type: "text", class: "s-form-control", name: "receiver_name", id: "receiver_name", value: "", onInput: (event) => this.handleReceiverName(event), placeholder: "" }), this.errors && this.errors['receiver.name'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.name']) : ''), h("div", { class: this.step2ItemClass(this.errors?.['receiver.mobile'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label" }, this.receiverMobileFieldLabel), h("salla-tel-input", { class: "s-gifting-tel-input", phone: this.receiverMobile, countryCode: this.receiverCountryCode, onPhoneEntered: (e) => this.handlePhoneInputChange(e) }), this.errors && this.errors['receiver.mobile'] ?
                             h("span", { class: "s-gifting-error" }, this.errors['receiver.mobile']) : ''), this.isPhysical() &&
@@ -744,7 +777,7 @@ const SallaGifting$1 = /*@__PURE__*/ proxyCustomElement(class SallaGifting exten
                             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() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.selectCityInfo)), !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: IconArrowLeft, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: '9413ec459b3b5dc137a90979990022b7ec1c6453', name: "footer" })))
+                    ], h("slot", { key: 'e40029ee1e6fa463711fd088ba05c0edda5dd683', name: "footer" })))
         ];
     }
     static get style() { return sallaGiftingCss; }

package/dist/components/salla-loyalty-reward.js

@@ -42,7 +42,7 @@ const SallaLoyaltyReward$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty
         return (h("div", { key: 'c99714fbefea9c43a199201d6e9d331ed4b50e7f', class: {
                 's-loyalty-program-reward-container': true,
                 's-loyalty-program-reward-xs': this.size === 'xs',
-            } }, h("div", { key: 'b3139a4325629e3e23b09096b96fbb9079ebb4f5', onClick: this.handleActionArea, role: "button" }, h("div", { key: '8d2951399db70f2672619149583d3821429611fa', class: "s-loyalty-program-reward-img" }, h("img", { key: 'd03e024172b99a72fdeb311e24f91d9ca11b69a1', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: '23901c0a96c9af1ae459d5bbcad0f4429933225b', class: "s-loyalty-program-reward-content" }, h("div", { key: '795743061efd1270a1a24eceb66f67e2bbb9eb1e', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '83545f69e513a563dfaef7bb107ae119656406a0', size: "xs" }, h("span", { key: '28751b88c77af1acfb746f58f55f4b84f2364141', innerHTML: loyaltyProgramIcon }), h("span", { key: '2ab694a2ff30f419171191c0746b80f74edfeea4', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: 'a67f1577b61604d88b54637a8951248663239a6e', class: "s-loyalty-program-reward-title" }, h("span", { key: 'c3a6df53cff6339bbd81018d69bcf3a8637e0a46' }, this.group)), h("div", { key: '6790fc3a3d44e7e25a2e5c1ea246515245fa1e61', class: "s-loyalty-program-reward-name" }, h("div", { key: 'fa99561fa8d2efafc2aee2796eceea93721e525d', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '948edaacd021950384418aedab807c11dee15754', class: "p-4" }, h("button", { key: '982c4c516b508aabec8489dc6f5c9ca326264f2a', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+            } }, h("div", { key: 'b3139a4325629e3e23b09096b96fbb9079ebb4f5', onClick: this.handleActionArea, role: "button" }, h("div", { key: '8d2951399db70f2672619149583d3821429611fa', class: "s-loyalty-program-reward-img" }, h("img", { key: 'd03e024172b99a72fdeb311e24f91d9ca11b69a1', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: '23901c0a96c9af1ae459d5bbcad0f4429933225b', class: "s-loyalty-program-reward-content" }, h("div", { key: '795743061efd1270a1a24eceb66f67e2bbb9eb1e', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '83545f69e513a563dfaef7bb107ae119656406a0', size: "xs" }, h("span", { key: '28751b88c77af1acfb746f58f55f4b84f2364141', innerHTML: loyaltyProgramIcon }), h("span", { key: '8f54d363299656788211e19299f666596694be77', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '89abc08dc391219c6c2a2fad15cb1e02b0b26472', class: "s-loyalty-program-reward-title" }, h("span", { key: '8908db983e49adacf9ba6d7adb9ad941ffc57d09' }, this.group)), h("div", { key: '2715999ae9c1e473762fb463cf8e52c42f746c77', class: "s-loyalty-program-reward-name" }, h("div", { key: 'e0a81d6e9aeebcb6671203f51429d614fc80c78b', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: 'f87feb0a81be86687bd4bf746807c45860f47224', class: "p-4" }, h("button", { key: '43e294b3b2f6caaccf3eea24c77d47513e129172', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
                 's-loyalty-program-rewards-action-base': true,
                 's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
                 's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),

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

@@ -44,6 +44,58 @@ var Currency;
     Currency["Sar"] = "SAR";
 })(Currency || (Currency = {}));
 
+/**
+ * Builds a per-detail availability map from SKU-level data.
+ *
+ * Exported as a pure function so it can be unit-tested independently of the
+ * Stencil component (the @State availabilityMap backing-store is not accessible
+ * via page.rootInstance in the Stencil mock-doc test environment).
+ *
+ * Status values:
+ *   'available'    – at least one in-stock SKU for this detail + current selections
+ *   'out_of_stock' – all matching SKUs are out of stock
+ *   'impossible'   – no SKU intersection exists for this combination
+ *
+ * skus_availability is always the authoritative source when present; is_out is
+ * consulted only as a last resort when a detail has no SKU data at all.
+ */
+function computeAvailabilityMap(optionsData, selectedOptions) {
+    const map = {};
+    if (!optionsData?.length)
+        return map;
+    const variantGroups = optionsData.filter(opt => opt.details?.some(d => d.skus_availability && Object.keys(d.skus_availability).length > 0));
+    const isSingleGroup = variantGroups.length <= 1;
+    for (const optionGroup of variantGroups) {
+        const otherSelected = selectedOptions.filter(s => s.option_id !== optionGroup.id);
+        for (const detail of optionGroup.details) {
+            const skusAvail = detail.skus_availability;
+            // No skus_availability data — fall back to is_out as last resort only.
+            if (!skusAvail || !Object.keys(skusAvail).length) {
+                map[detail.id] = detail.is_out ? 'out_of_stock' : 'available';
+                continue;
+            }
+            const detailSkus = Object.keys(skusAvail).map(Number);
+            // No cross-group context yet — evaluate this detail's own SKUs directly.
+            if (isSingleGroup || otherSelected.length === 0) {
+                map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                continue;
+            }
+            // Intersect this detail's SKUs with those of each other selected detail.
+            let candidates = detailSkus;
+            for (const other of otherSelected) {
+                const otherSkus = new Set(Object.keys(other.skus_availability || {}).map(Number));
+                candidates = candidates.filter(sku => otherSkus.has(sku));
+            }
+            if (!candidates.length) {
+                map[detail.id] = 'impossible';
+                continue;
+            }
+            map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+        }
+    }
+    return map;
+}
+
 var FileIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>file-upload</title>
@@ -77,6 +129,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
         this.isCartMode = false;
+        this.availabilityMap = {};
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -167,12 +220,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     async setOptionsData(optionsData) {
         this.optionsData = optionsData;
-        const that = this;
-        this.optionsData[0]?.details?.forEach(function (detail) {
+        this.outSkus = [];
+        this.optionsData[0]?.details?.forEach(detail => {
             Object.entries(detail.skus_availability || {})
-                .filter(sku => !sku[1])
-                .map(sku => that.outSkus.push(Number(sku[0])));
+                .filter(([, available]) => !available)
+                .forEach(([sku]) => this.outSkus.push(Number(sku)));
         });
+        this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Get the current options state, including selected values/details.
@@ -358,8 +413,9 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     setSelectedSkus() {
         this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
-            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .reduce((p, c) => p.filter(e => c.includes(e)), [])
             .map(sku => Number(sku));
+        this.computeAvailability();
     }
     handleRequiredMultipleOptions(option) {
         if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
@@ -688,6 +744,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         this.disableCardValue = false;
         this.canDisabled = true;
         this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
@@ -798,22 +855,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
+    computeAvailability() {
+        this.availabilityMap = computeAvailabilityMap(this.optionsData || [], this.selectedOptions || []);
+    }
     isOptionDetailOut(detail) {
-        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
-            return detail.is_out;
-        }
-        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
-        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
-        if (isDetailSelected && this.selectedOptions.length === 1) {
-            return false;
-        }
-        //if current details has sku in the possible outSkus it's out for sure
-        if (isDetailSelected) {
-            //here we will get the possible outSkus for current selected options
-            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
-            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
-        }
-        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+        const status = this.availabilityMap[detail.id];
+        // !!detail.is_out guards against TypeScript optimising away `?? false`
+        // for the non-nullable `is_out: boolean` field when the value is actually undefined at runtime.
+        return status !== undefined ? status !== 'available' : !!detail.is_out;
     }
     /**
      * Renders a single input element (radio or checkbox) for an option detail.
@@ -826,10 +875,14 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
      */
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
-        const isDisabled = this.isOptionDetailOut(detail);
+        const isOutOfStock = this.isOptionDetailOut(detail);
         return (h("label", { class: {
-                "s-product-options-disabled": isDisabled,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+                "s-product-options-option-stock-out": isOutOfStock,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: {
+                "s-product-options-grid-mode-span": buttonStyle,
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+            } }, this.getOptionDetailName(detail))));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -902,15 +955,22 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return (h("div", { class: {
+                    "s-product-options-colors-item": true,
+                    "s-product-options-option-stock-out": isOutOfStock,
+                }, key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) }))));
+        })));
     }
     //@ts-ignore
     thumbnailOption(option) {
         return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: IconVerified, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("div", { key: detail.id, class: { "s-product-options-option-stock-out": isOutOfStock } }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: IconVerified, class: "s-product-options-thumbnails-icon" }), isOutOfStock ?
                 [
-                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                    h("small", { key: `badge-${detail.id}`, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: `overlay-${detail.id}`, class: "s-product-options-thumbnails-badge-overlay" }) : '',
                 ]
                 : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
         }));
@@ -925,7 +985,8 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
     }
     countryOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
-            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": isOutOfStock, "s-product-options-option-stock-out": isOutOfStock } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
                     e.currentTarget.onerror = null;
                     e.currentTarget.src =
                         salla.url.cdn('images/globe.svg');
@@ -955,6 +1016,7 @@ const SallaProductOptions = /*@__PURE__*/ proxyCustomElement(class SallaProductO
         "availableDigitalCardValues": [32],
         "userInitiatedValidation": [32],
         "isCartMode": [32],
+        "availabilityMap": [32],
         "setOptionsData": [64],
         "getOptionsData": [64],
         "getSelectedOptionsData": [64],

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

@@ -15,7 +15,7 @@ const SallaRewardCard = /*@__PURE__*/ proxyCustomElement(class SallaRewardCard e
         this.actionClick = createEvent(this, "actionClick", 7);
     }
     render() {
-        return (h(Host, { key: 'ff2c85a1de1ce4275f2552cecdf822001e3ad337', class: "s-loyalty-program-reward-host" }, h("div", { key: 'd9a5d86af489008dd0d6025bde5dcb1e9dd29bda', class: "s-loyalty-program-reward-container" }, h("div", { key: 'aba7aa8ee4b3c0200a122fcdb38b4ea39c7f10ec', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: '71234c7e6176f7c557892ef6ffa039b0f33da1ad', class: "s-loyalty-program-reward-img" }, h("img", { key: 'c74287127a9784d6a5500f4cf106089ef610c140', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'ee30491d21384a2a2fc60efbe4b0012b72509d4b', class: "s-loyalty-program-reward-content" }, h("div", { key: '94b465db9a56ca3afdfabf63cd155a4ef124dcce', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '7e92d9c135ff7acd7acce77c0abd4ef0b81f9c5f', size: "xs" }, h("span", { key: '83ed6d98e353843837fcf3944f424ca722583c41', innerHTML: loyaltyProgramIcon }), h("span", { key: '1fbf2826e7f24b5164cedb22d5875fb6956bbcdc', class: "s-loyalty-program-rewards-points" }, this.prize.cost_points, " ", salla.lang.get('pages.loyalty_program.points')))), h("div", { key: '70ecd2efe641e411127c205c689f07bc5f10a782', class: "s-loyalty-program-reward-title" }, h("span", { key: '274b619ba28faf0088abf3fd4053085dad570ab7' }, this.prize.group_title)), h("div", { key: 'e96b5ae844b6bd8ba1058361f04d63e294c873a3', class: "s-loyalty-program-reward-name" }, h("div", { key: 'ef4b44f80213e85882d8a5be1bbd093564d19f3c', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: 'bf3d981f842da109f8371fe7d2346cb837974454', class: "p-4" }, h("slot", { key: 'e953a9eecffad0d309953805910c6bb9a66fefcf', name: "action" }, h("button", { key: '828ba0093dc42732c47ea635c7ea1c2ff76b0dfe', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
+        return (h(Host, { key: 'ff2c85a1de1ce4275f2552cecdf822001e3ad337', class: "s-loyalty-program-reward-host" }, h("div", { key: 'd9a5d86af489008dd0d6025bde5dcb1e9dd29bda', class: "s-loyalty-program-reward-container" }, h("div", { key: 'aba7aa8ee4b3c0200a122fcdb38b4ea39c7f10ec', onClick: (e) => this.areaClick.emit(e), role: "button" }, h("div", { key: '71234c7e6176f7c557892ef6ffa039b0f33da1ad', class: "s-loyalty-program-reward-img" }, h("img", { key: 'c74287127a9784d6a5500f4cf106089ef610c140', alt: "", src: this.prize.image || salla.url.cdn('images/s-empty.png'), class: "s-loyalty-program-rewards-img" })), h("div", { key: 'ee30491d21384a2a2fc60efbe4b0012b72509d4b', class: "s-loyalty-program-reward-content" }, h("div", { key: '94b465db9a56ca3afdfabf63cd155a4ef124dcce', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '7e92d9c135ff7acd7acce77c0abd4ef0b81f9c5f', size: "xs" }, h("span", { key: '83ed6d98e353843837fcf3944f424ca722583c41', innerHTML: loyaltyProgramIcon }), h("span", { key: 'dad919bbf6fda62a604bfb652fe5a1807d7c5231', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '2f9a4692a125da6fe9724b09998db4bb1efa8a63', class: "s-loyalty-program-reward-title" }, h("span", { key: 'bf24743da8340460839986efe5eac46649e3b751' }, this.prize.group_title)), h("div", { key: '85e6343102982e2e2bf35ad105aec7834f3d91b6', class: "s-loyalty-program-reward-name" }, h("div", { key: 'cc73021208eee7702d1e074fa13f7aef43ce6d32', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name, this.prize.description ? `: ${this.prize.description}` : '')))), h("div", { key: '51860a235d912a4dc6d166add4b982c71805fc8d', class: "p-4" }, h("slot", { key: 'c12b37a27617986e8701190b6feb1c371887a822', name: "action" }, h("button", { key: '80ddf2e70e7cbdacae56a8310aff260e9eb99579', onClick: (e) => this.actionClick.emit(e.detail), class: "s-loyalty-program-rewards-action-base s-loyalty-program-rewards-action-on" }, salla.lang.get('pages.loyalty_program.show_reward')))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [4, "salla-reward-card", {

package/dist/esm/{filepond-D4dDq1wa.js → filepond-Doklzvb6.js}

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

package/dist/esm/{filepond-plugin-file-poster-CcnsMPSH.js → filepond-plugin-file-poster-BSBF1f0z.js}

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

package/dist/esm/{filepond-plugin-file-validate-size-qgEgRYkk.js → filepond-plugin-file-validate-size-CbaXmA8m.js}

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

package/dist/esm/{filepond-plugin-file-validate-type-BuFGnco8.js → filepond-plugin-file-validate-type-FjPelZ0O.js}

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

package/dist/esm/{filepond-plugin-image-edit-kS2Sie2d.js → filepond-plugin-image-edit-BmG7tc8Q.js}

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

package/dist/esm/{filepond-plugin-image-exif-orientation-Bjoh_of2.js → filepond-plugin-image-exif-orientation-DhRt-kLt.js}

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

package/dist/esm/{filepond-plugin-image-preview-b_VEHHGf.js → filepond-plugin-image-preview-DZ2XM7gt.js}

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

package/dist/esm/{functions-ISZQDw0y.js → functions-_-9PUSBv.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-Cqh-ta1v.js';
+import { h } from './index-Cly9a4nm.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);

package/dist/esm/{index-CqC4wD_f.js → index-CJ2jUKh4.js}

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