@salla.sa/twilight-components 2.14.439 → 2.14.441

package/dist/components/salla-delivery-promise.js

@@ -2,9 +2,10 @@
  * Crafted with ❤ by Salla
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './salla-button2.js';
-import { d as defineCustomElement$4 } from './salla-loading2.js';
-import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-button2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-modal2.js';
+import { d as defineCustomElement$3 } from './salla-searchable-dropdown2.js';
 import { d as defineCustomElement$2 } from './salla-skeleton2.js';
 
 const DEBUG_KEY = 'salla-delivery-promise-debug';
@@ -14,9 +15,10 @@ function log(message, data) {
     }
 }
 /** Fetch available cities for a product's delivery promises. */
-async function fetchCities(productId) {
-    log('fetchCities start', { productId });
-    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities`));
+async function fetchCities(productId, keyword) {
+    log('fetchCities start', { productId, keyword });
+    const queryString = keyword != null ? `?keyword=${encodeURIComponent(keyword)}` : '';
+    const response = await salla.api.request(salla.url.api(`products/${productId}/delivery-promises/cities${queryString}`));
     if (!response.success || !Array.isArray(response.data) || response.data.length === 0) {
         log('fetchCities: no data', { response });
         return { cities: [] };
@@ -44,15 +46,6 @@ async function fetchDeliveryMessage(productId, id, optionType, isLoginCycleEnabl
     return message || null;
 }
 
-/** Filters cities by Arabic/English name (used inside the city-change modal). */
-function filterCitiesForModal(cities, query) {
-    const q = query.trim().toLowerCase();
-    if (!q) {
-        return [...cities];
-    }
-    return cities.filter(city => city.name.toLowerCase().includes(q) || (city.name_en || '').toLowerCase().includes(q));
-}
-
 const INTENT_KEY = 'bullet_delivery_intent';
 function getIntentStorage() {
     const rememberLastSession = Boolean(salla.config.get('store.settings.bullet_delivery.settings.remember_last_session'));
@@ -167,21 +160,24 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         this.selectedCity = null;
         this.isLoadingCities = false;
         // ── City-change modal state (non–login-cycle) ─────────────────────────
-        this.modalSearchQuery = '';
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [];
+        this.isSearchingCities = false;
+        this.citySearchCounter = 0;
         // ═══════════════════════════════════════════════════════════════════════
         //  Login-cycle (bullet delivery) integration
         // ═══════════════════════════════════════════════════════════════════════
         this.onBulletDeliveryConfirmed = () => {
             this.applyBulletIntent();
         };
-        this.handleModalSearchInput = (event) => {
-            this.modalSearchQuery = event.target.value;
-            this.isCityPopoverOpen = true;
-        };
-        this.handleModalComboboxActivate = () => {
-            this.isCityPopoverOpen = true;
+        this.handleCitySearch = (keyword) => {
+            clearTimeout(this.citySearchTimer);
+            if (!keyword.trim()) {
+                this.modalCities = [...this.cities];
+                this.isSearchingCities = false;
+                return;
+            }
+            this.citySearchTimer = setTimeout(() => this.searchCitiesRemote(keyword), 300);
         };
         // ═══════════════════════════════════════════════════════════════════════
         //  Header click (dispatches to correct flow)
@@ -290,7 +286,6 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
                 if (autoCity) {
                     log("delivery promise standard flow autoCity found", autoCity);
                     this.selectedCity = autoCity;
-                    this.modalSearchQuery = getCityDisplayName(autoCity);
                 }
                 await this.loadDeliveryMessage(cityId, 'city');
             }
@@ -329,14 +324,29 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         if (!this.cityModalRef)
             return;
         this.cityPendingSelection = null;
-        this.isCityPopoverOpen = false;
+        this.modalCities = [...this.cities];
         await this.cityModalRef.setTitle(this.labels.changeCityTitle);
         await this.cityModalRef.open();
     }
-    handleModalSelectCity(city) {
-        this.cityPendingSelection = city;
-        this.modalSearchQuery = getCityDisplayName(city);
-        this.isCityPopoverOpen = false;
+    async searchCitiesRemote(keyword) {
+        const requestId = ++this.citySearchCounter;
+        this.isSearchingCities = true;
+        try {
+            const { cities } = await fetchCities(this.productId, keyword);
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = cities;
+        }
+        catch {
+            if (requestId !== this.citySearchCounter)
+                return;
+            this.modalCities = [];
+        }
+        finally {
+            if (requestId === this.citySearchCounter) {
+                this.isSearchingCities = false;
+            }
+        }
     }
     async handleConfirmCityModal() {
         if (!this.cityPendingSelection) {
@@ -364,14 +374,11 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         return h("div", { class: "s-delivery-promise-message" }, this.deliveryMessage);
     }
     renderCityModalBody() {
-        const filtered = filterCitiesForModal(this.cities, this.modalSearchQuery);
-        return (h("div", { class: "s-delivery-promise-modal-body" }, h("label", { class: "s-delivery-promise-modal-field-label", htmlFor: "s-delivery-promise-modal-search" }, this.labels.cityFieldLabel, h("span", { class: "s-delivery-promise-required", "aria-hidden": "true" }, " *")), h("div", { class: "s-delivery-promise-modal-combobox" }, h("div", { class: "s-delivery-promise-modal-search", onClick: this.handleModalComboboxActivate }, h("i", { class: "sicon-search", "aria-hidden": "true" }), h("input", { id: "s-delivery-promise-modal-search", type: "text", class: "form-input", placeholder: this.labels.modalSearchPlaceholder, value: this.modalSearchQuery, onInput: this.handleModalSearchInput, autocomplete: "off", "aria-autocomplete": "list", "aria-expanded": this.isCityPopoverOpen ? 'true' : 'false', "aria-controls": "s-delivery-promise-modal-listbox" })), h("div", { id: "s-delivery-promise-modal-listbox", class: "s-delivery-promise-modal-popover", role: "listbox", hidden: !this.isCityPopoverOpen }, h("div", { class: "s-delivery-promise-modal-list s-scrollbar" }, filtered.length === 0 ? (h("div", { class: "s-delivery-promise-modal-empty" }, this.labels.noResults)) : (filtered.map(city => (h("button", { key: city.id, type: "button", role: "option", class: {
-                's-delivery-promise-modal-item': true,
-                's-delivery-promise-modal-item--selected': this.cityPendingSelection?.id === city.id,
-            }, "aria-selected": this.cityPendingSelection?.id === city.id ? 'true' : 'false', onClick: e => {
-                e.stopPropagation();
-                this.handleModalSelectCity(city);
-            } }, h("span", { class: "s-delivery-promise-modal-item-name" }, city.name), this.cityPendingSelection?.id === city.id ? h("i", { class: "sicon-check", "aria-hidden": "true" }) : null)))))))));
+        return (h("div", { class: "s-delivery-promise-modal-body" }, h("salla-searchable-dropdown", { label: this.labels.cityFieldLabel, placeholder: this.labels.modalSearchPlaceholder, items: this.modalCities, selectedItem: this.cityPendingSelection, searching: this.isSearchingCities, required: true, noResultsText: this.labels.noResults, inputId: "s-delivery-promise-modal-search", onItemSelected: (e) => {
+                this.cityPendingSelection = e.detail;
+            }, onSearchInput: (e) => {
+                this.handleCitySearch(e.detail);
+            } })));
     }
     renderCityChangeModal() {
         if (this.isLoginCycleEnabled)
@@ -406,15 +413,15 @@ const SallaDeliveryPromise$1 = /*@__PURE__*/ proxyCustomElement(class SallaDeliv
         "cities": [32],
         "selectedCity": [32],
         "isLoadingCities": [32],
-        "modalSearchQuery": [32],
         "cityPendingSelection": [32],
-        "isCityPopoverOpen": [32]
+        "modalCities": [32],
+        "isSearchingCities": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-skeleton"];
+    const components = ["salla-delivery-promise", "salla-button", "salla-loading", "salla-modal", "salla-searchable-dropdown", "salla-skeleton"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-delivery-promise":
             if (!customElements.get(tagName)) {
@@ -423,15 +430,20 @@ function defineCustomElement$1() {
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-searchable-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

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')))))));
     }