@salla.sa/twilight-components 2.14.438 → 2.14.440

package/dist/components/salla-loyalty.js

@@ -173,6 +173,12 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
     async resetExchange() {
         return await salla.loyalty.reset();
     }
+    getApiErrorMessage(error) {
+        return error?.response?.data?.error?.message
+            || error?.response?.data?.message
+            || (typeof error === 'string' ? error : null)
+            || salla.lang.get('common.errors.error_occurred');
+    }
     /**
      * Open Confirmation modal
      */
@@ -196,12 +202,16 @@ const SallaLoyalty$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty exten
      */
     async exchangeLoyaltyPoint() {
         this.buttonLoading = true;
-        return await salla.loyalty.exchange(this.selectedItem?.id)
-            .then(() => this.selectedItem.key == "FREE_PRODUCT" && salla.url.is_page('cart') && window.location.reload())
-            .finally(() => {
-            this.buttonLoading = false;
-            this.cancelProcess();
+        const selectedItem = this.selectedItem;
+        await salla.loyalty.exchange(selectedItem?.id)
+            .then(async () => {
+            selectedItem?.key == "FREE_PRODUCT" && salla.url.is_page('cart') && window.location.reload();
+            await this.cancelProcess();
+        })
+            .catch((error) => {
+            salla.notify.error(this.getApiErrorMessage(error));
         });
+        this.buttonLoading = false;
     }
     render() {
         // A. when the exchange is done, and we have the final prize points to show it in cart page

package/dist/components/salla-multiple-bundle-product-details2.js

@@ -35,22 +35,37 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
         this.productSelectedHandler = null;
         // handle selecting a product (toggle)
         this.onSelectProduct = (sectionId, product) => {
+            const productId = product.id;
+            const wasSelected = this.selectedProducts[sectionId]?.has(productId) ?? false;
+            const section = this.sections.find(s => s.id == sectionId);
+            if (wasSelected && section && this.isProductSelectionLocked(section)) {
+                return;
+            }
+            if (!wasSelected) {
+                if (!section) {
+                    return;
+                }
+                if (this.getEffectiveMax(section) !== 1 && this.isAtSelectionLimit(section)) {
+                    return;
+                }
+            }
             this.selectedProducts = {
                 ...this.selectedProducts,
                 [sectionId]: new Set(this.selectedProducts[sectionId] || []),
             };
-            const productId = product.id;
-            const wasSelected = this.selectedProducts[sectionId].has(productId);
             if (wasSelected) {
-                // Product is being deselected
                 this.selectedProducts[sectionId].delete(productId);
-                // Clear form data and modal options for this product in this specific section
                 this.clearProductFormData(productId, sectionId);
                 this.clearProductModalOptions(productId, sectionId);
             }
             else {
-                // Product is being selected
-                this.selectedProducts[sectionId].add(productId);
+                const effectiveMax = this.getEffectiveMax(section);
+                if (effectiveMax === 1) {
+                    this.syncSectionSelection(sectionId, productId);
+                }
+                else {
+                    this.selectedProducts[sectionId].add(productId);
+                }
             }
             // force re-render
             this.selectedProducts = { ...this.selectedProducts };
@@ -70,31 +85,45 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
                 [sectionId]: new Set(this.selectedProducts[sectionId] || []),
             };
             const productId = product.id;
-            // Only add if not already selected
-            if (!this.selectedProducts[sectionId].has(productId)) {
+            if (this.selectedProducts[sectionId].has(productId)) {
+                return;
+            }
+            const section = this.sections.find(s => s.id == sectionId);
+            if (!section) {
+                return;
+            }
+            const effectiveMax = this.getEffectiveMax(section);
+            if (effectiveMax === 1) {
+                this.syncSectionSelection(sectionId, productId);
+            }
+            else if (effectiveMax > 1 && this.isAtSelectionLimit(section)) {
+                return;
+            }
+            else {
                 this.selectedProducts[sectionId].add(productId);
-                // force re-render
-                this.selectedProducts = { ...this.selectedProducts };
-                // dispatch event
-                salla.event.dispatch('on-bundle-product-selected', {
-                    id: product.id,
-                    name: product.name,
-                    options: product.options,
-                });
             }
+            this.selectedProducts = { ...this.selectedProducts };
+            salla.event.dispatch('on-bundle-product-selected', {
+                id: product.id,
+                name: product.name,
+                options: product.options,
+            });
         };
         // open product options modal
         this.onSelectProductOptions = (product, sectionId) => {
-            // Find the section index from the sectionId
-            const sectionIndex = this.sections.findIndex(section => section.id == sectionId);
-            // Find the product index within the section
-            const section = this.sections.find(section => section.id == sectionId);
-            const productIndex = section?.products?.findIndex(p => p.id == product.id) ?? 0;
+            const section = this.sections.find(s => s.id == sectionId);
+            if (!section || !this.canSelectProductInSection(section, product.id)) {
+                return;
+            }
+            const sectionIndex = this.sections.findIndex(s => s.id == sectionId);
+            const productIndex = section.products?.findIndex(p => p.id == product.id) ?? 0;
+            const isProductAlreadySelected = this.selectedProducts[sectionId]?.has(product.id) ?? false;
             salla.event.dispatch('multiple-bundle-product-modal::open', {
                 product,
                 sectionId,
                 sectionIndex,
                 productIndex,
+                isProductAlreadySelected,
             });
         };
         // Event handlers for bundle slider component
@@ -107,22 +136,164 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
             this.onSelectProductOptions(product, sectionId);
         };
     }
+    isSingleProductSection(section) {
+        return (section.products?.length ?? 0) === 1;
+    }
+    getObligatoryMin(section) {
+        const min = section.obligatory_products;
+        if (min == null) {
+            return 0;
+        }
+        const numericMin = Number(min);
+        return Number.isNaN(numericMin) ? 0 : numericMin;
+    }
+    isProductSelectionLocked(section) {
+        return this.isSingleProductSection(section) && this.getObligatoryMin(section) === 1;
+    }
+    /** Empty max → cap is the number of products in the section. */
+    getEffectiveMax(section) {
+        const productCount = section.products?.length ?? 0;
+        const max = section.max_obligatory_products;
+        if (max != null && max > 0) {
+            return Math.min(max, productCount);
+        }
+        return productCount;
+    }
+    getSelectedCount(sectionId) {
+        return this.selectedProducts[sectionId]?.size ?? 0;
+    }
+    isAtSelectionLimit(section) {
+        return this.getSelectedCount(section.id) >= this.getEffectiveMax(section);
+    }
+    canSelectProductInSection(section, productId) {
+        if (this.selectedProducts[section.id]?.has(productId)) {
+            return true;
+        }
+        if (this.getEffectiveMax(section) === 1) {
+            return true;
+        }
+        return !this.isAtSelectionLimit(section);
+    }
+    async canSelectBundleProduct(sectionId, productId) {
+        const section = this.sections.find(s => s.id == sectionId);
+        if (!section) {
+            return false;
+        }
+        return this.canSelectProductInSection(section, productId);
+    }
+    queryProductCheckbox(sectionId, productIndex) {
+        const selector = `input.s-multiple-bundle-product-checkbox[name="bundle[${sectionId}][${productIndex}][id]"]`;
+        const form = this.host.closest('form');
+        const fromForm = form?.querySelector(selector);
+        if (fromForm) {
+            return fromForm;
+        }
+        for (const slider of this.host.querySelectorAll('salla-multiple-bundle-product-slider')) {
+            const root = slider.shadowRoot ?? slider;
+            const input = root.querySelector(selector);
+            if (input) {
+                return input;
+            }
+        }
+        return null;
+    }
+    dispatchBubblingChange(target) {
+        requestAnimationFrame(() => {
+            target.dispatchEvent(new window.Event('change', { bubbles: true }));
+        });
+    }
+    /** Uncheck checkbox, remove form inputs, and reset modal state for one product slot. */
+    clearSectionProductSlot(sectionId, productId, productIndex) {
+        const checkbox = this.queryProductCheckbox(sectionId, productIndex);
+        if (checkbox) {
+            checkbox.checked = false;
+        }
+        const form = this.host.closest('form');
+        if (form) {
+            const slotPrefix = `bundle[${sectionId}][${productIndex}]`;
+            Array.from(form.querySelectorAll('input')).forEach((input) => {
+                const inSlot = input.name?.startsWith(slotPrefix) ?? false;
+                if (!inSlot) {
+                    return;
+                }
+                if (input.type === 'checkbox' && input.name?.endsWith('][id]')) {
+                    input.checked = false;
+                    return;
+                }
+                input.remove();
+            });
+        }
+        this.clearProductModalOptions(productId, sectionId);
+    }
+    /** max=1: replace section selection and keep DOM/form in sync. */
+    syncSectionSelection(sectionId, productId) {
+        const section = this.sections.find(s => s.id == sectionId);
+        section?.products?.forEach((product, productIndex) => {
+            if (product.id != productId) {
+                this.clearSectionProductSlot(sectionId, product.id, productIndex);
+            }
+        });
+        this.selectedProducts[sectionId] = new Set([productId]);
+        const selectedIndex = section?.products?.findIndex(p => p.id == productId) ?? -1;
+        const checkbox = selectedIndex >= 0 ? this.queryProductCheckbox(sectionId, selectedIndex) : null;
+        if (checkbox) {
+            checkbox.checked = true;
+            this.dispatchBubblingChange(checkbox);
+        }
+    }
+    autoSelectSingleProductSections() {
+        if (!this.sections?.length) {
+            return;
+        }
+        const newSelectedProducts = { ...this.selectedProducts };
+        let updated = false;
+        const selectedEvents = [];
+        for (const section of this.sections) {
+            if (!this.isProductSelectionLocked(section)) {
+                continue;
+            }
+            const product = section.products?.[0];
+            if (!product || (!product.unlimited_quantity && (product.quantity ?? 0) <= 0)) {
+                continue;
+            }
+            const sectionId = section.id;
+            const currentSet = new Set(newSelectedProducts[sectionId] || []);
+            if (currentSet.has(product.id)) {
+                continue;
+            }
+            currentSet.add(product.id);
+            newSelectedProducts[sectionId] = currentSet;
+            updated = true;
+            selectedEvents.push({ product });
+        }
+        if (!updated) {
+            return;
+        }
+        this.selectedProducts = newSelectedProducts;
+        selectedEvents.forEach(({ product }) => {
+            salla.event.dispatch('on-bundle-product-selected', {
+                id: product.id,
+                name: product.name,
+                options: product.options,
+            });
+        });
+    }
     // Clear form data for a specific product in specific section
     clearProductFormData(productId, sectionId) {
-        const form = this.host.closest('form');
-        if (sectionId) {
-            // Remove inputs for specific section/productIndex combination
-            const productInputPattern = `bundle[${sectionId}][`;
-            const inputsToRemove = Array.from(form.querySelectorAll('input')).filter((input) => input.getAttribute('data-product-id') === String(productId) &&
-                input.name &&
-                input.name.startsWith(productInputPattern));
-            inputsToRemove.forEach(input => input.remove());
+        if (sectionId != null) {
+            const section = this.sections.find(s => s.id == sectionId);
+            const productIndex = section?.products?.findIndex(product => product.id == productId) ?? -1;
+            if (productIndex >= 0) {
+                this.clearSectionProductSlot(sectionId, productId, productIndex);
+                return;
+            }
         }
-        else {
-            // Fallback: Remove all hidden inputs related to this product (legacy behavior)
-            const inputsToRemove = form.querySelectorAll(`[data-product-id="${productId}"]`);
-            inputsToRemove.forEach(input => input.remove());
+        const form = this.host.closest('form');
+        if (!form) {
+            return;
         }
+        const inputsToRemove = form.querySelectorAll(`[data-product-id="${productId}"]`);
+        inputsToRemove.forEach(input => input.remove());
     }
     // Clear modal options state for a specific product
     clearProductModalOptions(productId, sectionId) {
@@ -146,10 +317,42 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
             productIndex,
         });
     }
-    renderAccordionHeader(section, selectedCount) {
-        return (h(Fragment, null, h("h2", { slot: "title" }, section?.name), section?.obligatory_products ? (h("span", { slot: "note" }, salla.lang.get('pages.products.obligatory_products', {
-            count: section?.obligatory_products || 0,
-        }))) : '', h("span", { slot: "progress" }, selectedCount, "/", section?.products?.length || 0)));
+    getProgressStatus(section) {
+        const selectedCount = this.getSelectedCount(section.id);
+        const effectiveMax = this.getEffectiveMax(section);
+        if (effectiveMax > 0) {
+            return `${selectedCount}/${effectiveMax}`;
+        }
+        return '0';
+    }
+    getSectionSelectionNote(section) {
+        const min = this.getObligatoryMin(section);
+        const max = Number(section.max_obligatory_products) || 0;
+        const hasMin = min > 0;
+        const hasMax = max > 0;
+        if (!hasMin && !hasMax) {
+            return null;
+        }
+        if (hasMin && hasMax) {
+            if (min === max) {
+                return salla.lang.getWithDefault('pages.products.bundle_select_exact', `اختر ${min} منتجات`, { count: min });
+            }
+            return salla.lang.getWithDefault('pages.products.bundle_select_range', `اختر من ${min} إلى ${max} منتجات`, { min, max });
+        }
+        if (hasMin) {
+            return salla.lang.getWithDefault('pages.products.bundle_select_min', `اختر على الأقل ${min} منتجات`, { min });
+        }
+        return salla.lang.getWithDefault('pages.products.bundle_select_max', `اختر حتى ${max} منتجات`, { max });
+    }
+    handleSectionsChange() {
+        this.autoSelectSingleProductSections();
+    }
+    componentWillLoad() {
+        this.autoSelectSingleProductSections();
+    }
+    renderAccordionHeader(section) {
+        const selectionNote = this.getSectionSelectionNote(section);
+        return (h(Fragment, null, h("h2", { slot: "title" }, section?.name), selectionNote ? h("span", { slot: "note" }, selectionNote) : null, h("span", { slot: "progress" }, this.getProgressStatus(section))));
     }
     componentDidLoad() {
         // Listen for product selected event from modal
@@ -180,16 +383,21 @@ const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class
         }
     }
     render() {
-        return (h(Host, { key: '27a3d6baa97585e983db19522ab2981ecc9e50f1', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: 'c96cf52dfaee161a03a6bf97de267d9942a47a49', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
-            const selectedCount = this.selectedProducts[section.id]?.size || 0;
-            return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section, selectedCount)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
-        })), h("salla-multiple-bundle-product-options-modal", { key: '6627ee4f67bcd775b16e470dd4735848e6087fd4' })));
+        return (h(Host, { key: '74b123c432e77263cf0ddcf20ab742885c54d5f4', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '24bef0958a2a7d29bb4485eac08c7e6b8614a00d', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+            return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, selectionLimit: this.getEffectiveMax(section), isSelectionLocked: this.isProductSelectionLocked(section), onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
+        })), h("salla-multiple-bundle-product-options-modal", { key: '556b4e51a4b79dfc00371a07296556fb74111524' })));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "sections": ["handleSectionsChange"]
+    }; }
     static get style() { return sallaMultipleBundleProductDetailsCss; }
 }, [0, "salla-multiple-bundle-product-details", {
         "sections": [16],
-        "selectedProducts": [32]
+        "selectedProducts": [32],
+        "canSelectBundleProduct": [64]
+    }, undefined, {
+        "sections": ["handleSectionsChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/salla-multiple-bundle-product-options-modal2.js

@@ -34,6 +34,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.validationErrors = [];
+        this.isProductAlreadySelected = false;
     }
     /**
      * Generate a unique cache key for selected options using section ID, product index, and product ID
@@ -95,6 +96,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
             this.sectionId = data.sectionId || null;
             this.sectionIndex = data.sectionIndex || 0;
             this.productIndex = data.productIndex || 0;
+            this.isProductAlreadySelected = !!data.isProductAlreadySelected;
             this.open();
         };
         salla.event.on('multiple-bundle-product-modal::open', this.modalOpenListener);
@@ -125,6 +127,10 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
                 // Extract section info from the checkbox name: bundle[sectionId][productIndex][id]
                 const nameMatch = target.name.match(/^bundle\[([^\]]+)\]\[([^\]]+)\]\[id\]$/);
                 if (nameMatch && !target.checked) {
+                    if (target.getAttribute('data-selection-locked') === 'true') {
+                        target.checked = true;
+                        return;
+                    }
                     const [, sectionId, productIndex] = nameMatch;
                     const productId = target.value;
                     const form = this.host.closest('form');
@@ -363,6 +369,14 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
             salla.notify.error(this.validationErrors.join(', '));
             return;
         }
+        if (!this.isProductAlreadySelected && this.sectionId != null) {
+            const details = this.host.closest('salla-multiple-bundle-product-details');
+            const canSelect = await details?.canSelectBundleProduct(this.sectionId, productId);
+            if (!canSelect) {
+                salla.notify.error(salla.lang.getWithDefault('pages.products.bundle_selection_limit_reached', 'لا يمكنك اختيار المزيد من المنتجات في هذا القسم'));
+                return;
+            }
+        }
         this.isLoading = true;
         try {
             // please don't change this with this.host.querySelector it will return null
@@ -479,7 +493,7 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: 'd9dc4018798fe902048f3e3e37fcb2edf84713b0' }, h("salla-modal", { key: 'af3cc56a9c2c969dc0cbb2b4caba14fd270a11bb', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '10fcc08be35bfd4231f9cf48501614ae49a985a3', slot: "loading" }, h("salla-skeleton", { key: '1aee9616e4f05188067708506352b0d97d504696', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'a7d7a459d383c353b5ef716365ba0a0ac5d3a0b7', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '6c1d1d3911867e30240676f3e2b7353e9ecf76c3' }, h("salla-modal", { key: 'b02110d80cd422d64962d78812ae0b0637c56237', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '20a52bbc732c6edfffde86577e99bbe300a1a4c8', slot: "loading" }, h("salla-skeleton", { key: '3a69fc75939d8b8f8639983d0f2f8dd8bf961152', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: '185639c54f79188093df98ac1cece1958879f71d', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
@@ -487,13 +501,13 @@ const SallaMultipleBundleProductOptionsModal = /*@__PURE__*/ proxyCustomElement(
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: '11970032bdc37e5d20d6737e3109fcec9b4de4cb', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: '3b6a88fe3862870d674dadc31967df6cc8fac365', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: 'c7d0fd432d8449e4742f0686ddecb7e87bebf159', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '6fce48b5b035cc61866aaf6c339866fa2314be87', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: 'c9b5f53696d9f8800e3a6be31ec78b51f0cb9bb1', slot: "footer" }, h("div", { key: 'e972370006feae6c17797f54c415ef0d2aaa3f57', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '7a3787936eec6c0c8a69a64799af5595f51909f9', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '3d555ea40fe5d9f3685fc6dafa4b6fad16732091', slot: "footer" }, h("div", { key: '1b4c6834899efbd09f3ea1db251999f50ec655b2', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '0818a75a444cca510c7f0cfea2ec53414c12db53', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

package/dist/components/salla-multiple-bundle-product-slider2.js

@@ -15,39 +15,71 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         this.productOptionsSelected = createEvent(this, "productOptionsSelected", 7);
         /** A dictionary tracking which product IDs are currently selected per section. */
         this.selectedProducts = {};
+        /** When true, the selected product cannot be deselected (single-product section with min = 1). */
+        this.isSelectionLocked = false;
+        /** Maximum selectable products for this section (empty max → all products in section). */
+        this.selectionLimit = 0;
         this.savedOptionsByInstance = {};
         this.handleProductClick = (product, productIndex) => {
-            // Find the checkbox input for this product
-            const checkboxId = this.generateEventName(this.section.id, productIndex);
-            const checkbox = document.getElementById(checkboxId);
-            if (!checkbox)
-                return;
-            if (checkbox) {
-                const willBeChecked = !checkbox.checked;
-                if (!willBeChecked) {
-                    this.dispatchClearOptionsEvent(product, productIndex);
-                    this.clearSavedOptionsState(this.section.id, productIndex);
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            const checkbox = this.getCheckbox(this.section.id, productIndex);
+            if (isChecked && this.isSelectionLocked) {
+                if (checkbox) {
+                    checkbox.checked = true;
                 }
-                // Toggle the checkbox state
-                checkbox.checked = willBeChecked;
-                // Dispatch a change event to trigger form validation/submission
-                requestAnimationFrame(() => {
-                    const changeEvent = new window.Event('change', { bubbles: true });
-                    checkbox.dispatchEvent(changeEvent);
+                return;
+            }
+            if (!isChecked && this.isMaxSelectionReached() && this.selectionLimit !== 1) {
+                return;
+            }
+            // max = 1: parent replaces selection and syncs all checkboxes in the section
+            if (this.selectionLimit === 1 && !isChecked) {
+                this.productSelected.emit({
+                    product,
+                    sectionId: this.section.id,
                 });
+                return;
+            }
+            if (!checkbox)
+                return;
+            const willBeChecked = !checkbox.checked;
+            if (!willBeChecked) {
+                this.dispatchClearOptionsEvent(product, productIndex);
+                this.clearSavedOptionsState(this.section.id, productIndex);
             }
+            checkbox.checked = willBeChecked;
+            requestAnimationFrame(() => {
+                const changeEvent = new window.Event('change', { bubbles: true });
+                checkbox.dispatchEvent(changeEvent);
+            });
             this.productSelected.emit({
                 product,
                 sectionId: this.section.id,
             });
         };
         this.handleOptionsClick = (product) => {
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            if (!isChecked && this.isMaxSelectionReached() && this.selectionLimit !== 1) {
+                return;
+            }
             this.productOptionsSelected.emit({
                 product,
                 sectionId: this.section.id,
             });
         };
     }
+    getSelectedCount() {
+        return this.selectedProducts[this.section?.id]?.size ?? 0;
+    }
+    isMaxSelectionReached() {
+        return this.selectionLimit > 1 && this.getSelectedCount() >= this.selectionLimit;
+    }
+    isProductSelectionDisabled(product, isChecked) {
+        if (product.quantity === 0) {
+            return true;
+        }
+        return !isChecked && this.isMaxSelectionReached();
+    }
     getProductInstanceKey(sectionId, productIndex) {
         return `${sectionId}::${productIndex}`;
     }
@@ -93,9 +125,26 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
     generateEventName(sectionId, productIndex) {
         return `bundle[${sectionId}][${productIndex}][id]`;
     }
+    getCheckbox(sectionId, productIndex) {
+        const name = this.generateEventName(sectionId, productIndex);
+        return this.host.querySelector(`input.s-multiple-bundle-product-checkbox[name="${name}"]`);
+    }
+    preventLockedDeselect(event, isChecked) {
+        if (!this.isSelectionLocked || !isChecked) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const checkbox = event.target;
+        if (checkbox?.type === 'checkbox') {
+            checkbox.checked = true;
+        }
+    }
     render() {
-        return (h(Host, { key: 'ecdac4638007d9435ec8b06f32114a0dada03b86' }, h("salla-slider", { key: 'c245e7dcfd157908063fd5ec13c6d49f8862dd18', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '17bdd6def2ff6f1d2ad22fa8b5299fc0000b1e82', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+        return (h(Host, { key: 'd52eb26454606df2526fa4c086110a54f7466644' }, h("salla-slider", { key: '1aa1fce5943c3721a8e4f762171c864d9097bb28', type: "carousel", controlsOuter: false, showControls: false, id: `accordion-multiple-bundle-product-${this.section.id}`, pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: { spaceBetween: 0 } }, h("div", { key: '9342381bc43389bae48b906a1ab23a4f3cf8d00a', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
             const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            const isLocked = isChecked && this.isSelectionLocked;
+            const isDisabled = this.isProductSelectionDisabled(product, isChecked);
             const hasSavedOptions = this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id, productIndex)];
             const optionsButtonLabel = hasSavedOptions
                 ? salla.lang.getWithDefault('pages.products.edit_selected_options', 'تعديل الخيارات')
@@ -103,9 +152,7 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
             let optionsArrowIcon = salla.config.get('theme.is_rtl', true)
                 ? KeyBoardArrowLeftIcon
                 : KeyBoardArrowRightIcon;
-            return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
-                    ? 's-multiple-bundle-product-slide-one-third-disabled'
-                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
+            return (h("div", { class: `s-multiple-bundle-product-slide-one-third${isDisabled ? ' s-multiple-bundle-product-slide-one-third-disabled' : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, "data-selection-locked": isLocked ? 'true' : undefined, name: this.generateEventName(this.section.id, productIndex), value: product.id, onClick: event => this.preventLockedDeselect(event, isChecked), onChange: event => this.preventLockedDeselect(event, isChecked) }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
         })))));
     }
     get host() { return this; }
@@ -114,6 +161,8 @@ const SallaMultipleBundleProductSlider = /*@__PURE__*/ proxyCustomElement(class
         "section": [16],
         "sectionIndex": [2, "section-index"],
         "selectedProducts": [16, "selected-products"],
+        "isSelectionLocked": [4, "is-selection-locked"],
+        "selectionLimit": [2, "selection-limit"],
         "savedOptionsByInstance": [32]
     }, [[4, "optionsSaved", "handleOptionsSaved"]]]);
 function defineCustomElement() {