@salla.sa/twilight-components 2.14.271 → 2.14.273

package/dist/components/salla-accordion-head2.js

@@ -34,13 +34,13 @@ const SallaAccordionHead = /*@__PURE__*/ proxyCustomElement(class SallaAccordion
         this.emitCollapsePanel();
     }
     render() {
-        return (h(Host, { key: '9bb7ad4ad615f5316968b48839b2433619bd3850', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: '6826492e1c552440d6407435dfe4e0ca3915cdf4', class: "s-accordion-head-wrapper-start" }, h("slot", { key: '2c19c500b57444ac8f69c2f64616904a819f54da', name: "title" }), h("slot", { key: 'a6ed0daccd969ec94128f5f749ccddfa9f62e5d3', name: "subtitle" }), h("slot", { key: 'adc2122dce76eee34653bc3f47324188c89d80f1', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (h("div", { key: 'f61363b6836fb857a0e832de99175936ec4bce29', class: "s-accordion-head-wrapper-end" }, h("slot", { key: '15ee81e943714b30bfbaf718364f5d34b14617eb', name: "note" }), this.collapsible && (h("button", { key: 'c5f8d32af544ddfba7b2fc2f273ae5b2e8cb7ae5', class: {
+        return (h(Host, { key: '9d88d243306cdf451c20d7068fbb9f48807b22e9', "data-collapsed": this.collapsed.toString(), onClick: () => this.toggleCollapse(), class: "s-accordion-head-wrapper" }, h("div", { key: 'bad4c5a913ce1c4581b09c0b6d96fcbdb4236638', class: "s-accordion-head-wrapper-start" }, h("slot", { key: 'acb83cec8cbca5771a9f84e81c0b955c3edad731', name: "title" }), h("slot", { key: 'a4ad42ea6fad4f452c4c218a9ee02dca0adb4a67', name: "progress" }), h("slot", { key: '96ab95d413dc906ac299079f4008816f01881990', name: "html" })), (this.collapsible || this.host.querySelector('[slot="note"]')) && (h("div", { key: '8f9666a5038cd7b1ac6e357c6920ea26d31c5f03', class: "s-accordion-head-wrapper-end" }, h("slot", { key: '14895e8c1385e91c14f046c9ae38ce5e4a4c9a60', name: "note" }), this.collapsible && (h("button", { key: '97dc7fabbb207fcc8b68ebf0a86f6c8a980dca13', class: {
                 's-accordion-head-wrapper-toggle': true,
                 active: !this.collapsed,
             }, onClick: e => {
                 e.stopPropagation();
                 this.toggleCollapse();
-            } }, h("span", { key: '4c4e3fa6ddeda1a59f65ba47665a9203356037a6', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? Add : Minus })))))));
+            } }, h("span", { key: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? Add : Minus })))))));
     }
     get host() { return this; }
     static get style() { return sallaAccordionHeadCss; }

package/dist/components/salla-comments.js

@@ -221,7 +221,8 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
                 resp = await salla.api.request('reviews', { params }, 'get');
             }
             else {
-                resp = await salla.api.comment.getComments(this.type, this.itemId);
+                // Ensure sort is passed for regular comments as well
+                resp = await salla.api.comment.getComments(this.type, this.itemId, 1, 5, this.sort);
             }
             if (!resp.data || !resp.data.length) {
                 this.showPlaceholder = false;
@@ -235,6 +236,24 @@ const SallaComments$1 = /*@__PURE__*/ proxyCustomElement(class SallaComments ext
             this.pagination = resp.pagination;
             this.total = resp.pagination.total;
             this.nextPage = typeof resp.pagination.links === 'object' && !!resp.pagination.links.next ? resp.pagination.links.next : null;
+            // Preserve sort param in next page URL for infinite scroll
+            if (this.nextPage && this.sort) {
+                try {
+                    const url = new URL(this.nextPage, window.location.origin);
+                    if (!url.searchParams.get('sort')) {
+                        url.searchParams.set('sort', this.sort);
+                        this.nextPage = url.toString();
+                    }
+                }
+                catch (_e) {
+                    // fallback for relative next links
+                    const hasQuery = this.nextPage.includes('?');
+                    const hasSort = /[?&]sort=/.test(this.nextPage);
+                    if (!hasSort) {
+                        this.nextPage = this.nextPage + (hasQuery ? '&' : '?') + `sort=${this.sort}`;
+                    }
+                }
+            }
             setTimeout(() => {
                 for (const card of this.handleResponse(resp)) {
                     this.wrapper.append(card);

package/dist/components/salla-conditional-fields2.js

@@ -30,14 +30,32 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaCondi
     }
     changeHandler(event) {
         salla.event.emit('salla-onditional-fields::change', event);
-        salla.log('Received the change event: ', event);
-        if (!event.target || !['SELECT'].includes(event.target.tagName) && !['checkbox', 'radio'].includes(event.target.getAttribute('type'))) {
-            salla.log('Ignore the change because is not a supported input: ' + (event?.target?.tagName || 'N/A'));
+        salla.log('Received the change/input event: ', event);
+        if (!event.target ||
+            (!['SELECT', 'INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+                !['checkbox', 'radio', 'text'].includes(event.target.getAttribute('type')))) {
+            salla.log('Ignore the event because is not a supported input: ' + (event?.target?.tagName || 'N/A'));
             return;
         }
+        // For text inputs, debounce the handling to improve performance on mobile
+        const isTextInput = ['INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+            (!event.target.getAttribute('type') || event.target.getAttribute('type') === 'text');
+        if (isTextInput && event.type === 'input') {
+            clearTimeout(this.debounceTimeout);
+            this.debounceTimeout = setTimeout(() => {
+                this.processConditionalFields(event);
+            }, 300); // 300ms debounce for text inputs
+            return;
+        }
+        // Process immediately for change events and non-text inputs
+        this.processConditionalFields(event);
+    }
+    processConditionalFields(event) {
         let optionId = event.target.name.replace('[]', '');
         let isMultiple = event.target.getAttribute('type') === 'checkbox';
         let isRadio = event.target.getAttribute('type') === 'radio';
+        let isTextInput = ['INPUT', 'TEXTAREA'].includes(event.target.tagName) &&
+            (!event.target.getAttribute('type') || event.target.getAttribute('type') === 'text');
         salla.log('Trying to find all elements with condition:', `[data-show-when^="${optionId}"]`);
         this.host.querySelectorAll(`[data-show-when^="${optionId}"]`)
             .forEach((field) => {
@@ -52,10 +70,14 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaCondi
                 // Handle radio inputs.
                 isSelected = event.target.checked && event.target.value === value;
             }
+            else if (isTextInput) {
+                // Handle text inputs and textareas - check if value matches or is not empty for boolean conditions
+                isSelected = value === event.target.value || (value.toLowerCase() === 'true' && event.target.value.trim() !== '');
+            }
             else {
                 isSelected = value === event.target.value;
             }
-            salla.log('The input is ', isMultiple ? 'Multiple' : isRadio ? 'Radio' : 'Single', ' value:', isSelected);
+            salla.log('The input is ', isMultiple ? 'Multiple' : isRadio ? 'Radio' : isTextInput ? 'Text' : 'Single', ' value:', isSelected);
             let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
             if (showTheInput) {
                 field.classList.remove('hidden');
@@ -96,10 +118,10 @@ const SallaConditionalFields = /*@__PURE__*/ proxyCustomElement(class SallaCondi
         });
     }
     render() {
-        return (h(Host, { key: '405156ba83b8731039c2dd0ff800f617150cc722' }, h("slot", { key: '2bff17ce7b49fef9b028d673992d256b00e9481b' })));
+        return (h(Host, { key: 'b29d3a3e7e7af01540efbd2868cd302e91bba8a4' }, h("slot", { key: 'b6d6544834ea082ffcd20deef2da1206a47e98ba' })));
     }
     get host() { return this; }
-}, [4, "salla-conditional-fields", undefined, [[0, "change", "changeHandler"]]]);
+}, [4, "salla-conditional-fields", undefined, [[0, "change", "changeHandler"], [0, "input", "changeHandler"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/salla-login-modal.js

@@ -230,7 +230,6 @@ const SallaLoginModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoginModal
             catch (error) {
                 Salla.log('Error on assign');
             }
-            await Salla.cart.api.assign();
             withCartReset && Salla.cart.reset();
             !Salla.auth.api.isSessionless() && await Salla.auth.api.request('auth/jwt');
             setTimeout(() => window.location.reload(), 100);

package/dist/components/salla-multiple-bundle-product-cart.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaMultipleBundleProductCart extends Components.SallaMultipleBundleProductCart, HTMLElement {}
+export const SallaMultipleBundleProductCart: {
+    prototype: SallaMultipleBundleProductCart;
+    new (): SallaMultipleBundleProductCart;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaMultipleBundleProductCart$1, d as defineCustomElement$1 } from './salla-multiple-bundle-product-cart2.js';
+
+const SallaMultipleBundleProductCart = SallaMultipleBundleProductCart$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMultipleBundleProductCart, defineCustomElement };

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

@@ -0,0 +1,153 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$e } from './salla-accordion2.js';
+import { d as defineCustomElement$d } from './salla-accordion-body2.js';
+import { d as defineCustomElement$c } from './salla-accordion-head2.js';
+import { d as defineCustomElement$b } from './salla-booking-field2.js';
+import { d as defineCustomElement$a } from './salla-button2.js';
+import { d as defineCustomElement$9 } from './salla-color-picker2.js';
+import { d as defineCustomElement$8 } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$7 } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$6 } from './salla-file-upload2.js';
+import { d as defineCustomElement$5 } from './salla-loading2.js';
+import { d as defineCustomElement$4 } from './salla-map2.js';
+import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$2 } from './salla-product-options2.js';
+import { d as defineCustomElement$1 } from './salla-progress-bar2.js';
+
+const sallaMultipleBundleProductCartCss = "";
+
+const SallaMultipleBundleProductCart = /*@__PURE__*/ proxyCustomElement(class SallaMultipleBundleProductCart extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sections = [];
+        this.itemNumber = '';
+    }
+    deleteItem(sectionId, product) {
+        const form = this.host.closest('form');
+        if (form) {
+            const formId = form.getAttribute('id');
+            if (formId && typeof formId === 'string') {
+                const itemNumber = formId.match(/item-(\d+)/)?.[1];
+                this.itemNumber = itemNumber || '';
+                const selectedAccordion = this.host.querySelector(`#accordion-${product.id}`);
+                salla.cart
+                    .deleteItem(`${this.itemNumber}?product_id=${product.id}&section_id=${sectionId}`)
+                    .then(() => selectedAccordion?.remove());
+            }
+        }
+    }
+    renderRemoveButton(sectionId, product, isText = false) {
+        return (h("salla-button", { type: "button", shape: isText ? 'btn' : 'icon', fill: isText ? 'outline' : 'solid', size: "small", color: "danger", "aria-label": "Remove from the cart", onClick: () => this.deleteItem(sectionId, product) }, isText ? salla.lang.get('common.elements.delete') : h("i", { class: "sicon-cancel" })));
+    }
+    renderAccordionHeader(sectionId, product) {
+        const hasOptions = product?.options && product?.options?.length > 0; // undefined or empty array
+        return (h("div", { slot: "html", class: "s-multiple-bundle-product-cart-header-wrapper" }, h("div", { class: `s-multiple-bundle-product-cart-header ${hasOptions ? '' : 's-multiple-bundle-product-cart-header-no-options'}` }, h("div", { class: "s-multiple-bundle-product-cart-header-content" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-image-wrapper" }, h("img", { src: product?.image?.url, alt: product?.image?.alt || product?.name, class: "s-multiple-bundle-product-cart-header-image" })), h("div", { class: "s-multiple-bundle-product-cart-header-content-details" }, h("h2", { class: "s-multiple-bundle-product-cart-header-content-details-title" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-content-details-title-link" }, product?.name)), h("div", { class: "s-multiple-bundle-product-cart-header-content-details-price" }, h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-regular" }, h("span", { innerHTML: product?.price ? salla.money(product?.price) : '' })), product?.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-sale" }, h("span", { innerHTML: salla.money(product?.sale_price) })))), product?.quantity_in_group > 0 && product?.quantity !== 0 && (h("p", { class: "s-multiple-bundle-product-cart-header-content-details-quantity" }, h("span", null, salla.lang.get('pages.products.number_of_pieces')), h("span", null, product?.quantity_in_group))))), !hasOptions && (h("div", { class: "s-multiple-bundle-product-cart-header-remove-button" }, this.renderRemoveButton(sectionId, product, false))))));
+    }
+    render() {
+        return (h(Host, { key: 'b9542b8e0cc7705e6bbd9dc17db8284c11d27846', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '44bfe630604e8d45aa1218eebcdf026b47f9fd99', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, sectionIndex) => {
+            return section.products.map(product => {
+                const bundleContext = {
+                    sectionId: section.id,
+                    sectionIndex: sectionIndex,
+                    productId: product.id,
+                };
+                return (h("salla-accordion", { key: product.id, collapsed: false, bordered: true, collapsible: product.options && product.options.length > 0 ? true : false, size: "sm", id: `accordion-${product.id}` }, h("salla-accordion-head", null, this.renderAccordionHeader(String(section.id), product)), product.options && product.options.length > 0 && (h("salla-accordion-body", null, h("salla-product-options", { options: JSON.stringify(product.options), key: `${product.id}-persistent`, "product-id": product.id, "bundle-context": JSON.stringify(bundleContext) }), h("div", { class: "s-multiple-bundle-product-cart-body-remove-button" }, this.renderRemoveButton(String(section.id), product, true))))));
+            });
+        }))));
+    }
+    get host() { return this; }
+    static get style() { return sallaMultipleBundleProductCartCss; }
+}, [0, "salla-multiple-bundle-product-cart", {
+        "sections": [16],
+        "itemNumber": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-multiple-bundle-product-cart", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-product-options", "salla-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-multiple-bundle-product-cart":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMultipleBundleProductCart);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaMultipleBundleProductCart as S, defineCustomElement as d };

package/dist/components/salla-multiple-bundle-product-details.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaMultipleBundleProductDetails extends Components.SallaMultipleBundleProductDetails, HTMLElement {}
+export const SallaMultipleBundleProductDetails: {
+    prototype: SallaMultipleBundleProductDetails;
+    new (): SallaMultipleBundleProductDetails;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaMultipleBundleProductDetails$1, d as defineCustomElement$1 } from './salla-multiple-bundle-product-details2.js';
+
+const SallaMultipleBundleProductDetails = SallaMultipleBundleProductDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMultipleBundleProductDetails, defineCustomElement };

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

@@ -0,0 +1,283 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$i } from './salla-accordion2.js';
+import { d as defineCustomElement$h } from './salla-accordion-body2.js';
+import { d as defineCustomElement$g } from './salla-accordion-head2.js';
+import { d as defineCustomElement$f } from './salla-booking-field2.js';
+import { d as defineCustomElement$e } from './salla-button2.js';
+import { d as defineCustomElement$d } from './salla-color-picker2.js';
+import { d as defineCustomElement$c } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$b } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$a } from './salla-file-upload2.js';
+import { d as defineCustomElement$9 } from './salla-loading2.js';
+import { d as defineCustomElement$8 } from './salla-map2.js';
+import { d as defineCustomElement$7 } from './salla-modal2.js';
+import { d as defineCustomElement$6 } from './salla-multiple-bundle-product-options-modal2.js';
+import { d as defineCustomElement$5 } from './salla-multiple-bundle-product-slider2.js';
+import { d as defineCustomElement$4 } from './salla-product-options2.js';
+import { d as defineCustomElement$3 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+import { d as defineCustomElement$1 } from './salla-slider2.js';
+
+const sallaMultipleBundleProductDetailsCss = "";
+
+const SallaMultipleBundleProductDetails = /*@__PURE__*/ proxyCustomElement(class SallaMultipleBundleProductDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.sections = [];
+        // store selected product IDs per section (can be string or number)
+        this.selectedProducts = {};
+        // Event handler reference for cleanup
+        this.productSelectedHandler = null;
+        // handle selecting a product (toggle)
+        this.onSelectProduct = (sectionId, product) => {
+            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);
+            }
+            else {
+                // Product is being selected
+                this.selectedProducts[sectionId].add(productId);
+            }
+            // force re-render
+            this.selectedProducts = { ...this.selectedProducts };
+            // still dispatch event
+            salla.event.dispatch('on-bundle-product-selected', {
+                id: product.id,
+                name: product.name,
+                options: product.options,
+                wasSelected: wasSelected,
+                isSelected: !wasSelected,
+            });
+        };
+        // ensure product is selected (only add if not already selected)
+        this.ensureProductSelected = (sectionId, product) => {
+            this.selectedProducts = {
+                ...this.selectedProducts,
+                [sectionId]: new Set(this.selectedProducts[sectionId] || []),
+            };
+            const productId = product.id;
+            // Only add if not already selected
+            if (!this.selectedProducts[sectionId].has(productId)) {
+                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,
+                });
+            }
+        };
+        // 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;
+            salla.event.dispatch('multiple-bundle-product-modal::open', {
+                product,
+                sectionId,
+                sectionIndex,
+                productIndex,
+            });
+        };
+        // Event handlers for bundle slider component
+        this.handleBundleSliderProductSelected = (event) => {
+            const { product, sectionId } = event.detail;
+            this.onSelectProduct(sectionId, product);
+        };
+        this.handleBundleSliderProductOptionsSelected = (event) => {
+            const { product, sectionId } = event.detail;
+            this.onSelectProductOptions(product, sectionId);
+        };
+    }
+    // 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());
+        }
+        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());
+        }
+    }
+    // Clear modal options state for a specific product
+    clearProductModalOptions(productId) {
+        // Emit event to notify modal to reset its state for this product
+        salla.event.dispatch('multiple-bundle-product-modal::clear-options', {
+            productId,
+        });
+    }
+    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)));
+    }
+    componentDidLoad() {
+        // Listen for product selected event from modal
+        const modal = this.host.querySelector('salla-multiple-bundle-product-options-modal');
+        if (modal) {
+            this.productSelectedHandler = (e) => {
+                const { productId, sectionId, product, fromModal } = e.detail;
+                if (fromModal) {
+                    // When called from modal, only add to selection if not already selected
+                    this.ensureProductSelected(sectionId, product || { id: productId });
+                }
+                else {
+                    // Normal toggle behavior
+                    this.onSelectProduct(sectionId, product || { id: productId });
+                }
+            };
+            modal.addEventListener('productSelected', this.productSelectedHandler);
+        }
+    }
+    disconnectedCallback() {
+        // Clean up event listener to prevent memory leaks
+        if (this.productSelectedHandler) {
+            const modal = this.host.querySelector('salla-multiple-bundle-product-options-modal');
+            if (modal) {
+                modal.removeEventListener('productSelected', this.productSelectedHandler);
+            }
+            this.productSelectedHandler = null;
+        }
+    }
+    render() {
+        return (h(Host, { key: '0a24e2c3ee4bdff3891334a49318a7cfeb668d54', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '713f1b101aed42cabacd17d662aad49520b89f4b', 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 === 1 ? true : false }, 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: '2d889aa72a36040f87cd791363f71600d86458e7' })));
+    }
+    get host() { return this; }
+    static get style() { return sallaMultipleBundleProductDetailsCss; }
+}, [0, "salla-multiple-bundle-product-details", {
+        "sections": [16],
+        "selectedProducts": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-multiple-bundle-product-details", "salla-accordion", "salla-accordion-body", "salla-accordion-head", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-multiple-bundle-product-options-modal", "salla-multiple-bundle-product-slider", "salla-product-options", "salla-progress-bar", "salla-skeleton", "salla-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-multiple-bundle-product-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaMultipleBundleProductDetails);
+            }
+            break;
+        case "salla-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-accordion-body":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-accordion-head":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-multiple-bundle-product-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-multiple-bundle-product-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaMultipleBundleProductDetails as S, defineCustomElement as d };

package/dist/components/salla-multiple-bundle-product-options-modal.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SallaMultipleBundleProductOptionsModal extends Components.SallaMultipleBundleProductOptionsModal, HTMLElement {}
+export const SallaMultipleBundleProductOptionsModal: {
+    prototype: SallaMultipleBundleProductOptionsModal;
+    new (): SallaMultipleBundleProductOptionsModal;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,9 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { S as SallaMultipleBundleProductOptionsModal$1, d as defineCustomElement$1 } from './salla-multiple-bundle-product-options-modal2.js';
+
+const SallaMultipleBundleProductOptionsModal = SallaMultipleBundleProductOptionsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaMultipleBundleProductOptionsModal, defineCustomElement };