@salla.sa/twilight-components 2.14.272 → 2.14.274

package/dist/esm/{salla-add-product-button_51.entry.js → salla-accordion_62.entry.js}

@@ -1,19 +1,126 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, a as getDefaultExportFromCjs, F as Fragment, i as axios } from './index-D5PGwR59.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, d as getDefaultExportFromCjs, F as Fragment, j as axios } from './index-Bdj1TBK9.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { A as ArrowDownIcon, S as SpecialDiscountIcon } from './special-discount-yRO-ZESF.js';
 import { I as IconVerified } from './check-uTyAzPSy.js';
 import { H as Helper } from './Helper-B51hb0bi.js';
 import { a as arrowLeft } from './arrow-left-BedNk7k1.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
-import { p as plusIcon, m as minusIcon } from './minus-DfeagqF1.js';
 import { M as MailIcon } from './mail-DmgxDvXL.js';
 import { w as whatsapp$1 } from './whatsapp2-DWksgowB.js';
 import { f as facebook, t as twitter } from './twitter-Dz7o69vX.js';
 import { G as GiftIcon } from './gift-C0JNGIpa.js';
-import { C as CameraIcon } from './camera-C6jIkM-X.js';
+
+const sallaAccordionCss = "";
+
+const SallaAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Should the accordion be collapsible or not. Default is true. */
+        this.collapsible = true;
+        this.bordered = false;
+        this.size = "md";
+        /** Detect if accordion collapsed or not. */
+        this.collapsed = true;
+        /** Represents the direction of the layout. */
+        this.dir = document.dir || 'rtl';
+    }
+    directionChangedHandler(event) {
+        this.dir = event.detail.dir;
+    }
+    handleCollapse(event) {
+        this.collapsed = event.detail.payload.collapsed;
+    }
+    setcollapsibleProp() {
+        const head = this.host.querySelector('salla-accordion-head');
+        if (this.collapsible && head) {
+            head.setAttribute('collapsible', 'true');
+            head.setAttribute('collapsed', this.collapsed.toString());
+        }
+    }
+    componentDidRender() {
+        this.setcollapsibleProp();
+        const body = this.host.querySelector('salla-accordion-body');
+        if (this.collapsible) {
+            this.host.setAttribute('data-collapsed', this.collapsed.toString());
+            body?.setAttribute('data-collapsed', this.collapsed.toString());
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ed8e4c0f24fa4462654e94fa46706e892c141351', class: `s-accordion-wrapper ${this.dir} ${this.bordered ? 's-accordion-wrapper-bordered' : ''} ${this.size ? `size-${this.size}` : ''}`, "data-collapsed": this.collapsed.toString() }, h("slot", { key: '1dbda01c073f3018a55ebcf5d8613a82a5dc6b27' })));
+    }
+    get host() { return getElement(this); }
+};
+SallaAccordion.style = sallaAccordionCss;
+
+const sallaAccordionBodyCss = "";
+
+const SallaAccordionBody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '298d42a5bf1bcefdb181ec35060220cf749b56ed', class: "s-accordion-body-wrapper" }, h("slot", { key: '6ab081e8b71b5dc69fb66fbdec82b4725ab53b0d' })));
+    }
+};
+SallaAccordionBody.style = sallaAccordionBodyCss;
+
+var Add = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>add</title>
+<path d="M26.667 14.667h-9.333v-9.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v9.333h-9.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h9.333v9.333c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-9.333h9.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+var Minus = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>minus</title>
+<path d="M26.667 14.667h-21.333c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h21.333c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaAccordionHeadCss = "";
+
+const SallaAccordionHead = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordionToggle = createEvent(this, "accordionToggle");
+        /** Should the accordion be collapsible or not. */
+        this.collapsible = false;
+        /** Current collapsed state */
+        this.collapsed = true;
+    }
+    emitCollapsePanel() {
+        this.accordionToggle.emit({
+            payload: {
+                collapsed: this.collapsed,
+            },
+        });
+    }
+    toggleCollapse() {
+        if (!this.collapsible)
+            return;
+        this.collapsed = !this.collapsed;
+        this.host.parentElement?.setAttribute('data-collapsed', this.collapsed.toString());
+        this.host.parentElement
+            ?.querySelector('salla-accordion-body')
+            ?.setAttribute('data-collapsed', this.collapsed.toString());
+        this.emitCollapsePanel();
+    }
+    render() {
+        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: '3b24faf71dcd332663a354310b2ce09f7879eddc', class: "s-accordion-head-wrapper-toggle-icon", innerHTML: this.collapsed ? Add : Minus })))))));
+    }
+    get host() { return getElement(this); }
+};
+SallaAccordionHead.style = sallaAccordionHeadCss;
 
 var PendingOrdersIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32">
@@ -274,6 +381,180 @@ const SallaAlert = class {
 };
 SallaAlert.style = sallaAlertCss;
 
+var BookingTime = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>calendar-time</title>
+<path d="M22.667 17.333c-0.737 0-1.333 0.596-1.333 1.333v2.667h-2.667c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h4c0.737 0 1.333-0.596 1.333-1.333v-4c0-0.737-0.596-1.333-1.333-1.333zM28 2.667h-2.667v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h5.363c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-5.363c-0.736 0-1.333-0.597-1.333-1.333v-21.333c0-0.736 0.597-1.333 1.333-1.333h2.667v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333v2.696c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.696c0-2.205-1.795-4-4-4zM22 12c-5.515 0-10 4.485-10 10s4.485 10 10 10 10-4.485 10-10-4.485-10-10-10zM22 29.333c-4.043 0-7.333-3.291-7.333-7.333s3.291-7.333 7.333-7.333 7.333 3.291 7.333 7.333-3.291 7.333-7.333 7.333z"></path>
+</svg>
+`;
+
+var Calendar = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>calendar</title>
+<path d="M28 2.667h-2.667v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-21.333c0-2.205-1.795-4-4-4zM29.333 28c0 0.736-0.599 1.333-1.333 1.333h-24c-0.736 0-1.333-0.599-1.333-1.333v-13.333h26.667zM29.333 12h-26.667v-5.333c0-0.736 0.599-1.333 1.333-1.333h2.667v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+var TimeIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>time</title>
+<path d="M16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333zM16 8c-0.736 0-1.333 0.596-1.333 1.333v6.667h-4c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h5.333c0.736 0 1.333-0.596 1.333-1.333v-8c0-0.737-0.597-1.333-1.333-1.333z"></path>
+</svg>
+`;
+
+const sallaBookingFieldCss = ":host{display:block}";
+
+const SallaBookingField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.invalidInput = createEvent(this, "invalidInput");
+        this.bookNowLabel = salla.lang.get('pages.cart.book_an_appointment', 'حجز موعد');
+        this.editLabel = salla.lang.get('pages.cart.edit_an_appointment', 'تعديل الموعد');
+        this.bookedLabel = salla.lang.get('pages.cart.booked_successfully', 'تمت اضافة الموعد بنجاح');
+        this.selectDate = salla.lang.get('pages.cart.select_appointment_date', 'حدد تاريخ الموعد');
+        this.bookingUrl = '';
+        this.iframeReady = false;
+        this.reservations = [];
+        // Load translations
+        salla.lang.onLoaded(() => this.setTranslations());
+        // Register event listeners
+        Salla.event.on('booking::open', (data) => this.handleBookingOpen(data));
+    }
+    async setTranslations() {
+        const setNestedAsync = (lang, key, value) => {
+            return new Promise((resolve) => {
+                salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                resolve(true);
+            });
+        };
+        await setNestedAsync('ar.trans', 'pages.cart.book_an_appointment', 'حجز موعد');
+        await setNestedAsync('en.trans', 'pages.cart.book_an_appointment', 'Book an Appointment');
+        await setNestedAsync('ar.trans', 'pages.cart.edit_an_appointment', 'تعديل الموعد');
+        await setNestedAsync('en.trans', 'pages.cart.edit_an_appointment', 'Edit an Appointment');
+        await setNestedAsync('ar.trans', 'pages.cart.booked_successfully', 'تمت اضافة الموعد بنجاح');
+        await setNestedAsync('en.trans', 'pages.cart.booked_successfully', 'Booked Successfully');
+        await setNestedAsync('ar.trans', 'pages.cart.select_appointment_date', 'حدد تاريخ الموعد');
+        await setNestedAsync('en.trans', 'pages.cart.select_appointment_date', 'Select appointment date');
+        this.bookNowLabel = salla.lang.get('pages.cart.book_an_appointment');
+        this.editLabel = salla.lang.get('pages.cart.edit_an_appointment');
+        this.bookedLabel = salla.lang.get('pages.cart.booked_successfully');
+        this.selectDate = salla.lang.get('pages.cart.select_appointment_date');
+    }
+    openBookingModal(event, afterReload = false) {
+        if (afterReload && (!event.detail || typeof event.detail !== 'number' || event.detail !== this.productId)) {
+            return;
+        }
+        if (salla.config.isGuest()) {
+            this.setAfterReloadEvent('booking::open-after-reload', this.productId);
+            salla.event.dispatch('login::open');
+            return;
+        }
+        salla.booking.add(this.productId, false)
+            .then((resp) => {
+            if (resp.data.redirect.to !== 'booking') {
+                throw new Error('Unexpected redirect!');
+            }
+            salla.event.dispatch('booking::open', { url: resp.data.redirect.url, id: this.productId });
+        })
+            .catch((error) => {
+            salla.error(salla.lang.get('common.errors.error_occurred'));
+            salla.logger.error(error.response || error);
+        });
+    }
+    handleBookingOpen(data) {
+        if (data.id !== this.productId)
+            return;
+        this.bookingUrl = salla.url.addParamToUrl('product_id', data.id, data.url);
+        this.iframeReady = true;
+        setTimeout(() => {
+            this.modal.setTitle(this.selectDate);
+            this.modal.open();
+        }, 100);
+    }
+    setAfterReloadEvent(event, payload) {
+        salla.storage.set('afterReloadEvent', { event, payload });
+    }
+    emitAfterReloadEvent() {
+        const eventDetails = salla.storage.get('afterReloadEvent');
+        if (eventDetails && eventDetails.event) {
+            const customEvent = new CustomEvent(eventDetails.event, {
+                detail: eventDetails.payload
+            });
+            window.dispatchEvent(customEvent);
+            salla.storage.remove('afterReloadEvent');
+        }
+    }
+    componentWillLoad() {
+        if (this.option && this.option.details.length) {
+            this.reservations = this.option.details;
+        }
+    }
+    componentDidLoad() {
+        window.addEventListener('booking::open-after-reload', (event) => this.openBookingModal(event, true));
+        this.emitAfterReloadEvent();
+        window.addEventListener('message', this.handleMessageEvent.bind(this));
+        this.reservationsInput.addEventListener('invalid', e => this.invalidInput.emit(e));
+        this.reservationsInput.addEventListener('input', () => {
+            this.reservationsInput.setCustomValidity('');
+            this.reservationsInput.reportValidity();
+        });
+    }
+    handleMessageEvent(event) {
+        if (event.data.source !== 'booking')
+            return;
+        const action = event.data.type;
+        const value = event.data.message;
+        if (localStorage.getItem('debug'))
+            console.log(`Received an action:${action}`, event.data);
+        if (action === 'error') {
+            if (value.fields?.reservation) {
+                salla.notify.error(value.fields.reservation[0]);
+                return;
+            }
+            const errorList = Object.values(value.fields || [value.message]).flat().map(error => `<li>${error}</li>`).join('');
+            salla.notify.error(`<ul>${errorList}</ul>`);
+        }
+        if (action === 'success') {
+            if (Number(value.productId) !== Number(this.productId))
+                return;
+            this.reservations = value.data.reservations.map(schedule => {
+                if (schedule.time && schedule.time.length > 0) {
+                    const timeSlot = schedule.time[0];
+                    return {
+                        date: schedule.date,
+                        day: schedule.day,
+                        from_timestamp: timeSlot.from,
+                        to_timestamp: timeSlot.to,
+                    };
+                }
+                return null;
+            }).filter(item => item !== null);
+            salla.notify.success(this.bookedLabel);
+            this.modal?.close();
+            setTimeout(() => window.location.reload());
+        }
+        if (action === 'height') {
+            this.iframe.height = value?.height + 'px';
+        }
+    }
+    bookingModal() {
+        return (h("salla-modal", { class: "s-booking-field-modal", ref: modal => (this.modal = modal), width: "md", position: "middle", noPadding: true }, h("iframe", { ref: iframe => (this.iframe = iframe), src: this.bookingUrl, frameborder: "0" })));
+    }
+    renderReservationDate(reservation) {
+        return (h("span", { class: reservation.from_timestamp ? 's-booking-field-reservations-has-time' : '' }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: Calendar }), reservation.date));
+    }
+    renderReservationTime(reservation) {
+        if (!reservation.from_timestamp)
+            return '';
+        return (h("span", { class: "s-booking-field-reservations-time" }, h("i", { class: "s-booking-field-reservations-icon", innerHTML: TimeIcon }), h("span", null, reservation.from_timestamp, " - ", reservation.to_timestamp)));
+    }
+    render() {
+        return (h(Host, { key: '04c9e3dc3dc825bd6905221d858c260f7ca34748' }, h("div", { key: '07ec38cec1bd1798640dd7ea9592bb3b17d945c6', class: "s-booking-field-main" }, this.option.required || this.reservations.length > 0 ? h("div", { class: "s-booking-field-price" }, h("span", { innerHTML: salla.money(this.option.price) })) : '', h("salla-button", { key: '6b71889cfc0429d15c466a6f194df31549f09786', class: "s-booking-field-book-now", size: "small", loaderPosition: "center", fill: "outline", onClick: event => this.openBookingModal(event, false) }, h("span", { key: 'a16f8db6f52c7751ea605efcae04057ca0dc5b61', class: "s-booking-field-book-now-content" }, h("span", { key: '95f6086a599bcc620c87ece6c6ae9620dba15581', innerHTML: BookingTime }), this.reservations.length ? this.editLabel : this.bookNowLabel))), this.reservations.length > 0 && (h("div", { key: 'b3615100bbfff3d98d0ac99145aaf53449790c94', class: "s-booking-field-reservations" }, this.reservations.map((reservation, index) => (h("div", { key: index, class: "s-booking-field-reservations-item" }, this.renderReservationDate(reservation), this.renderReservationTime(reservation)))))), h("input", { key: '126f14f2e520b8696bc7450e209bad30b267878b', class: "s-hidden", name: this.option.name, required: this.option.required, value: JSON.stringify(this.reservations) === '[]' ? '' : JSON.stringify(this.reservations), ref: reservations => this.reservationsInput = reservations }), this.iframeReady && this.bookingModal()));
+    }
+    get host() { return getElement(this); }
+};
+SallaBookingField.style = sallaBookingFieldCss;
+
 var infoIcon = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>info</title>
@@ -2398,7 +2679,8 @@ const SallaComments = class {
                 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;
@@ -2412,6 +2694,24 @@ const SallaComments = class {
             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);
@@ -2453,6 +2753,125 @@ const SallaComments = class {
 };
 SallaComments.style = sallaCommentsCss;
 
+const SallaConditionalFields = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    hideAllOptions(optionId) {
+        this.host.querySelectorAll(`[data-show-when^="options[${optionId}"]`).forEach((field) => {
+            field.classList.add('hidden');
+            this.hideAllOptions(field.dataset.optionId);
+            this.disableInputs(field);
+        });
+    }
+    disableInputs(field) {
+        field.querySelectorAll('[name]').forEach((input) => {
+            input.setAttribute('disabled', '');
+            input.removeAttribute('required');
+            if (input?.tagName?.toLowerCase() === 'select') {
+                input.value = '';
+            }
+            if (['checkbox'].includes(input.getAttribute('type')) && input.hasOwnProperty('checked')) {
+                // @ts-ignore
+                input.checked = false;
+            }
+        });
+    }
+    changeHandler(event) {
+        salla.event.emit('salla-onditional-fields::change', event);
+        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) => {
+            let isEqual = !field?.dataset.showWhen.includes('!=');
+            let value = field?.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$3').trim();
+            let isSelected;
+            if (isMultiple) {
+                let selectedValues = Array.from(this.host.querySelectorAll(`input[name="${event.target.name}"]:checked`), e => e?.value);
+                isSelected = selectedValues.includes(value.toString());
+            }
+            else if (isRadio) {
+                // 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' : isTextInput ? 'Text' : 'Single', ' value:', isSelected);
+            let showTheInput = (isEqual && isSelected) || (!isEqual && !isSelected);
+            if (showTheInput) {
+                field.classList.remove('hidden');
+                field.querySelectorAll('[name]').forEach((input) => {
+                    input.removeAttribute('disabled');
+                    const closestProductOption = input.closest('.s-product-options-option');
+                    if (closestProductOption.dataset.optionRequired === 'true') {
+                        input.setAttribute('required', '');
+                    }
+                    if (input.getAttribute('type') === 'checkbox') {
+                        const checkboxes = Array.from(document.querySelectorAll(`input[type="checkbox"][name="${input.getAttribute('name')}"]`));
+                        const isAnyChecked = checkboxes.some((checkbox) => checkbox.checked);
+                        if (isAnyChecked) {
+                            checkboxes.forEach((checkbox) => {
+                                checkbox.removeAttribute('required');
+                            });
+                        }
+                    }
+                });
+            }
+            else {
+                this.hideAllOptions(field.dataset.optionId);
+                field.classList.add('hidden');
+                this.disableInputs(field);
+            }
+        });
+    }
+    componentDidRender() {
+        this.host.querySelectorAll(`[data-show-when]`).forEach((field) => {
+            // @ts-ignore
+            let optionName = field?.dataset?.showWhen.replace(/(.*)(=|!=)(.*)/gm, '$1').trim();
+            if (!optionName) {
+                return;
+            }
+            this.changeHandler({
+                target: this.host.querySelector('[name^="' + optionName + '"]')
+            });
+        });
+    }
+    render() {
+        return (h(Host, { key: 'b29d3a3e7e7af01540efbd2868cd302e91bba8a4' }, h("slot", { key: 'b6d6544834ea082ffcd20deef2da1206a47e98ba' })));
+    }
+    get host() { return getElement(this); }
+};
+
 const sallaCountDownCss = "";
 
 const SallaCountDown = class {
@@ -3075,13 +3494,13 @@ const SallaFileUpload = class {
             return;
         try {
             const [FilePondModule, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginImageEdit, FilePondPluginFileValidateType, FilePondPluginFilePoster] = await Promise.all([
-                import('./filepond-DbR8YXoW.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-validate-size-DYnIp5yF.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-exif-orientation-BtsMS4U-.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-preview-DQ0c3hIt.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-image-edit-BwmXRkmP.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-validate-type-Cx_PD8SU.js').then(function (n) { return n.f; }),
-                import('./filepond-plugin-file-poster-DEj3O3wZ.js').then(function (n) { return n.f; })
+                import('./filepond-JStnJXdo.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-validate-size-DGYz9wX6.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-exif-orientation-BvYJ1LVk.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-preview-P4HnGsSt.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-image-edit-C5N0Q0IF.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-validate-type-7M_EeTPs.js').then(function (n) { return n.f; }),
+                import('./filepond-plugin-file-poster-13kSl6pa.js').then(function (n) { return n.f; })
             ]);
             this.FilePond = FilePondModule;
             // Register plugins
@@ -5840,88 +6259,866 @@ const SallaModal = class {
 };
 SallaModal.style = sallaModalCss;
 
-var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>tag</title>
-<path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
-</svg>
-`;
+const sallaMultipleBundleProductCss = ":host{display:block}";
 
-var Cart2 = `<!-- Generated by IcoMoon.io -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-<title>cart2</title>
-<path d="M6.845 5.333l-1.905-5.333h-3.607c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333v0h1.727l5.72 16.012c0.569 1.56 2.039 2.654 3.765 2.655h12.133c0.001 0 0.002 0 0.003 0 1.825 0 3.364-1.222 3.845-2.892l0.007-0.028 3.161-13.080zM25.96 17.716c-0.167 0.554-0.672 0.951-1.27 0.951-0.002 0-0.005 0-0.007-0h-12.133c-0.575-0-1.065-0.364-1.252-0.875l-0.003-0.009-3.497-9.783h20.508zM13.333 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM13.333 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0zM24 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM24 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0z"></path>
-</svg>
-`;
+const SallaMultipleBundleProduct = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.parsedSections = [];
+    }
+    parseProducts(newValue) {
+        let sections = [];
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                sections = this.extractSections(parsed);
+            }
+            catch (e) {
+                console.error('Invalid JSON passed to bundleSections prop:', newValue);
+                sections = [];
+            }
+        }
+        else if (newValue) {
+            sections = this.extractSections(newValue);
+        }
+        this.parsedSections = sections;
+    }
+    extractSections(data) {
+        // Handle new nested structure: data.bundle.sections
+        if (data.bundle && data.bundle.sections && Array.isArray(data.bundle.sections)) {
+            return data.bundle.sections;
+        }
+        // Handle old flat structure: data is directly an array of sections
+        if (Array.isArray(data)) {
+            return data;
+        }
+        // Handle case where data.sections exists at root level
+        if (data.sections && Array.isArray(data.sections)) {
+            return data.sections;
+        }
+        console.warn('No valid sections found in data:', data);
+        return [];
+    }
+    isCartPage() {
+        return salla.url.is_page('cart');
+    }
+    renderCartPage() {
+        return h("salla-multiple-bundle-product-cart", { sections: this.parsedSections });
+    }
+    renderDetailsPage() {
+        return h("salla-multiple-bundle-product-details", { sections: this.parsedSections });
+    }
+    componentWillLoad() {
+        this.parseProducts(this.bundleSections);
+    }
+    render() {
+        return (h(Host, { key: '6f9e20c6db0c7d79f84ba197f015f43c1b0a79fc', class: "s-multiple-bundle-product-wrapper" }, this.isCartPage() ? this.renderCartPage() : this.renderDetailsPage()));
+    }
+    static get watchers() { return {
+        "bundleSections": ["parseProducts"]
+    }; }
+};
+SallaMultipleBundleProduct.style = sallaMultipleBundleProductCss;
 
-const sallaOfferModalCss = ".s-offer-modal-type-products .s-modal-body{min-height:690px;position:relative}";
+const sallaMultipleBundleProductCartCss = "";
 
-const SallaOfferModal = class {
+const SallaMultipleBundleProductCart = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.offer = null;
-        this.hasError = false;
-        this.translationLoaded = false;
-        this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
-        salla.event.on('offer-modal::open', product_id => this.open(product_id));
-        salla.lang.onLoaded(() => {
-            this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
-            this.translationLoaded = true;
-        });
-        this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
-        // this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.defaultProductSlot();
-        salla.event.on('offer-modal::open', product_id => this.open(product_id));
-        salla.product.event.onOfferExisted(offer => {
-            if (salla.storage.get('remember-offer-' + offer.id)) {
-                salla.log('User selected to don\'t show this offer again.');
-                return;
+        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());
             }
-            this.open(offer.product_id);
-        });
+        }
     }
-    /**
- * Emits a promotion viewed event for analytics tracking
- * @param offer - The offer being viewed in the modal
- */
-    emitPromotionViewed(offer) {
-        if (!offer)
-            return;
-        salla.event.emit('promotion::viewed', [{
-                id: offer.id?.toString(),
-                creative: offer.message,
-                name: offer.name,
-                position: `${this.offer_type}_offer_modal`
-            }]);
+    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" })));
     }
-    /**
-     * Emits a promotion clicked event for analytics tracking
-     * @param offer - The offer being clicked in the modal
-     */
-    emitPromotionClicked(offer) {
-        if (!offer)
-            return;
-        salla.event.emit('promotion::clicked', [{
-                id: offer.id?.toString(),
-                creative: offer.message,
-                name: offer.name,
-                position: `${this.offer_type}_offer_modal`
-            }]);
+    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))))));
     }
-    /**
-     * Show the available offers for the product
-     * @param product_id
-     */
-    async open(product_id) {
-        this.productID = product_id;
-        //TODO:: make sure there is only one offer
-        this.hasError = false;
-        this.modal.open();
-        return await salla.api.withoutNotifier(() => salla.product.offers(product_id))
-            .then(response => this.showOffer(response.data[0]))
-            .catch(e => {
-            this.hasError = true;
-            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
-        })
-            .finally(() => setTimeout(() => this.modal.stopLoading(), 1000));
+    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 getElement(this); }
+};
+SallaMultipleBundleProductCart.style = sallaMultipleBundleProductCartCss;
+
+const sallaMultipleBundleProductDetailsCss = "";
+
+const SallaMultipleBundleProductDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+};
+SallaMultipleBundleProductDetails.style = sallaMultipleBundleProductDetailsCss;
+
+const sallaMultipleBundleProductOptionsModalCss = ":host{display:block}";
+
+const SallaMultipleBundleProductOptionsModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionsSaved = createEvent(this, "optionsSaved");
+        this.productSelected = createEvent(this, "productSelected");
+        this.product = null;
+        this.sectionId = null;
+        this.sectionIndex = 0;
+        this.productIndex = 0;
+        this.selectedOptions = {};
+        this.isLoading = false;
+        this.hasUnsavedChanges = false;
+        this.validationErrors = [];
+    }
+    /**
+     * Generate a unique cache key for selected options using section ID, product index, and product ID
+     */
+    generateCacheKey(sectionId, productIndex, productId) {
+        return `${sectionId || 'unknown'}-${productIndex || 0}-${productId || 'unknown'}`;
+    }
+    handleProductChange(newValue) {
+        // Use setTimeout to ensure modal is ready
+        setTimeout(() => {
+            if (this.modal && newValue) {
+                const title = newValue.name || '';
+                this.modal.setTitle(title);
+            }
+        }, 100);
+        // Reset validation errors when product changes
+        this.validationErrors = [];
+        this.hasUnsavedChanges = false;
+    }
+    async open() {
+        if (!this.modal) {
+            requestAnimationFrame(() => this.open());
+            return;
+        }
+        this.isLoading = true;
+        // Set the title before opening
+        if (this.product?.name) {
+            this.modal.setTitle(this.product.name);
+        }
+        this.modal.open();
+        // Initialize selectedOptions with current selections from the component
+        setTimeout(async () => {
+            if (this.product?.id) {
+                await this.initializeSelectedOptions();
+            }
+            // Set title again after modal is fully loaded
+            if (this.product?.name) {
+                this.modal.setTitle(this.product.name);
+            }
+            this.modal.stopLoading();
+            this.isLoading = false;
+        }, 300);
+    }
+    async close() {
+        if (this.modal) {
+            this.modal.close();
+        }
+    }
+    async refreshOptionsState() {
+        // Force re-render by updating the component state
+        this.selectedOptions = { ...this.selectedOptions };
+    }
+    componentDidLoad() {
+        salla.event.on('multiple-bundle-product-modal::open', (data) => {
+            this.product = data.product;
+            this.sectionId = data.sectionId || null;
+            this.sectionIndex = data.sectionIndex || 0;
+            this.productIndex = data.productIndex || 0;
+            this.open();
+        });
+        // Listen for clear-options event when a product is deselected
+        salla.event.on('multiple-bundle-product-modal::clear-options', (data) => {
+            this.clearProductOptions(data.productId);
+        });
+        // Create and store the option change listener for proper cleanup
+        this.optionChangeListener = (e) => {
+            const { productId, option, detail } = e.detail;
+            // Convert productId to the same type as our product ID
+            const normalizedProductId = this.product?.id ? String(this.product.id) : null;
+            const normalizedEventProductId = productId ? String(productId) : null;
+            // Only handle events for the current product
+            if (normalizedProductId &&
+                normalizedEventProductId &&
+                normalizedProductId === normalizedEventProductId &&
+                option &&
+                detail) {
+                this.handleOptionChange(Number(normalizedProductId), option, detail);
+            }
+        };
+        salla.event.on('product-options::change', this.optionChangeListener);
+        // Create and store the checkbox change listener for proper cleanup
+        this.checkboxChangeListener = (e) => {
+            const target = e.target;
+            // Check if this is a product selection checkbox
+            if (target && target.type === 'checkbox' && target.name && target.name.includes('bundle[') && target.name.includes('][id]')) {
+                // Extract section info from the checkbox name: bundle[sectionId][productIndex][id]
+                const nameMatch = target.name.match(/^bundle\[([^\]]+)\]\[([^\]]+)\]\[id\]$/);
+                if (nameMatch && !target.checked) {
+                    // Product was deselected, clear its cached options
+                    const [, sectionId, productIndex] = nameMatch;
+                    const productId = target.value;
+                    // Prevent the immediate event to ensure cleanup happens first
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Ensure the checkbox is actually unchecked
+                    target.checked = false;
+                    // Generate the same cache key used by the modal
+                    const cacheKey = this.generateCacheKey(sectionId, parseInt(productIndex), productId);
+                    // Clear the cached options for this product
+                    const updatedSelectedOptions = { ...this.selectedOptions };
+                    delete updatedSelectedOptions[cacheKey];
+                    this.selectedOptions = updatedSelectedOptions;
+                    // Force re-render of the modal if it's currently open for this product
+                    if (this.product && this.product.id == productId) {
+                        this.selectedOptions = { ...this.selectedOptions };
+                    }
+                    const form = this.host.closest('form');
+                    if (form) {
+                        const productInputPattern = `bundle[${sectionId}][${productIndex}]`;
+                        // Get all form inputs and filter manually
+                        const allInputs = Array.from(form.querySelectorAll('input'));
+                        const matchingInputs = allInputs.filter(input => input.name && input.name.startsWith(productInputPattern));
+                        // Process matching inputs for removal
+                        matchingInputs.forEach(el => {
+                            // Don't remove the visible checkbox that was just unchecked
+                            if (el !== target && (el.type === 'hidden' || el.hasAttribute('data-product-id'))) {
+                                el.remove();
+                            }
+                        });
+                        // Method 2: Find inputs by data-product-id BUT only within the same section/productIndex
+                        const dataProductInputs = allInputs.filter(input => {
+                            // Must have data-product-id matching the productId
+                            if (input.getAttribute('data-product-id') !== String(productId)) {
+                                return false;
+                            }
+                            // Must also be within the same section/productIndex pattern
+                            return input.name && input.name.startsWith(productInputPattern);
+                        });
+                        // Process inputs with matching section/productIndex and productId for removal
+                        dataProductInputs.forEach(el => {
+                            if (el !== target) {
+                                el.remove();
+                            }
+                        });
+                        // Method 3: Removed broader search to prevent removing inputs from other products
+                        // The cleanup is now more precise and only removes inputs for the specific product
+                        // Trigger form change event after cleanup is complete
+                        setTimeout(() => {
+                            const changeEvent = new window.Event('change', { bubbles: true });
+                            form.dispatchEvent(changeEvent);
+                        }, 50); // Small delay to ensure cleanup is complete
+                    }
+                }
+            }
+        };
+        // Listen for product checkbox changes to reset options when product is deselected
+        document.addEventListener('change', this.checkboxChangeListener);
+    }
+    disconnectedCallback() {
+        // Clean up event listeners to prevent memory leaks
+        if (this.checkboxChangeListener) {
+            document.removeEventListener('change', this.checkboxChangeListener);
+        }
+    }
+    generateFormInputName(sectionId, productIndex, optionParentId) {
+        return `bundle[${sectionId}][${productIndex}][options][${optionParentId}]`;
+    }
+    async initializeSelectedOptions() {
+        if (!this.product?.id)
+            return;
+        const productId = this.product.id;
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+        if (optionsEl) {
+            try {
+                const selectedOptions = await optionsEl.getSelectedOptions();
+                if (selectedOptions && selectedOptions.length > 0) {
+                    this.selectedOptions = {
+                        ...this.selectedOptions,
+                        [cacheKey]: selectedOptions,
+                    };
+                }
+            }
+            catch (e) {
+                console.warn('Could not initialize selected options:', e);
+            }
+        }
+    }
+    // Clear options state for a specific product
+    clearProductOptions(productId) {
+        // Generate cache key for this specific product in current section context
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        // Remove the product from selectedOptions using the cache key
+        const updatedSelectedOptions = { ...this.selectedOptions };
+        delete updatedSelectedOptions[cacheKey];
+        this.selectedOptions = updatedSelectedOptions;
+        // Reset validation errors and unsaved changes
+        this.validationErrors = [];
+        this.hasUnsavedChanges = false;
+    }
+    async handleOptionChange(productId, option, detail) {
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        // Get the current state from the component to ensure we have the latest selections
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+        let currentComponentSelections = [];
+        if (optionsEl) {
+            try {
+                currentComponentSelections = (await optionsEl.getSelectedOptions()) || [];
+            }
+            catch (e) {
+                console.warn('Could not get current selections from component:', e);
+            }
+        }
+        // If component returns data, use it; otherwise, fall back to manual tracking
+        if (currentComponentSelections.length > 0) {
+            // Component returned data, use it
+            this.selectedOptions = {
+                ...this.selectedOptions,
+                [cacheKey]: currentComponentSelections,
+            };
+        }
+        else {
+            // If we have existing selections in internal state and component returns empty,
+            // it might be a deselection, so we should use manual tracking
+            if (this.selectedOptions[cacheKey] && this.selectedOptions[cacheKey].length > 0) {
+                // Component didn't return data, use manual tracking
+                const currentSelected = this.selectedOptions[cacheKey] || [];
+                const updatedSelected = [...currentSelected];
+                // Find existing selection for this specific option (by option_id)
+                const existingIndex = updatedSelected.findIndex(opt => opt.option_id === option.id);
+                if (existingIndex > -1) {
+                    // Check if this is a deselection (detail might be null or undefined)
+                    if (!detail || detail.id === null || detail.id === undefined) {
+                        // Remove the option (deselection)
+                        updatedSelected.splice(existingIndex, 1);
+                    }
+                    else {
+                        // Replace existing selection for this option
+                        updatedSelected[existingIndex] = { ...detail, option_id: option.id };
+                    }
+                }
+                else {
+                    // Only add if detail exists (not a deselection)
+                    if (detail && detail.id !== null && detail.id !== undefined) {
+                        updatedSelected.push({ ...detail, option_id: option.id });
+                    }
+                }
+                this.selectedOptions = {
+                    ...this.selectedOptions,
+                    [cacheKey]: updatedSelected,
+                };
+            }
+            else {
+                // No existing selections, component returned empty, and we're trying to add
+                // This might be the first selection, so add it manually
+                if (detail && detail.id !== null && detail.id !== undefined) {
+                    this.selectedOptions = {
+                        ...this.selectedOptions,
+                        [cacheKey]: [{ ...detail, option_id: option.id }],
+                    };
+                }
+            }
+        }
+        this.hasUnsavedChanges = true;
+        this.validationErrors = []; // Clear validation errors when user makes changes
+    }
+    async validateOptions() {
+        if (!this.product?.options)
+            return true;
+        const errors = [];
+        const productId = this.product.id;
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        // Get the actual selected options from the component
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+        let currentSelected = [];
+        if (optionsEl) {
+            try {
+                currentSelected = (await optionsEl.getSelectedOptions()) || [];
+                // Also check our internal state as fallback
+                const internalSelected = this.selectedOptions[cacheKey] || [];
+                // Use whichever has more selections, or if component returns empty but internal has data, use internal
+                if (internalSelected.length > currentSelected.length ||
+                    (currentSelected.length === 0 && internalSelected.length > 0)) {
+                    currentSelected = internalSelected;
+                }
+            }
+            catch (e) {
+                // Fallback to internal state
+                currentSelected = this.selectedOptions[cacheKey] || [];
+            }
+        }
+        else {
+            // Fallback to internal state
+            currentSelected = this.selectedOptions[cacheKey] || [];
+        }
+        // Check if any options are selected at all
+        if (currentSelected.length === 0) {
+            errors.push(salla.lang.get('pages.products.no_options_selected'));
+        }
+        // Check required options
+        this.product.options.forEach(option => {
+            if (option.required) {
+                const hasSelection = currentSelected.some(selected => {
+                    return selected.option_id == option.id; // Use == instead of === for type flexibility
+                });
+                if (!hasSelection) {
+                    errors.push(salla.lang.get('pages.products.required_option_missing', {
+                        option: option.name,
+                    }));
+                }
+            }
+        });
+        this.validationErrors = errors;
+        return errors.length === 0;
+    }
+    async onSave(e) {
+        e.preventDefault();
+        const productId = this.product?.id;
+        if (!productId)
+            return;
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
+        // Small delay to ensure component state is updated
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // Validate options before saving
+        const isValid = await this.validateOptions();
+        if (!isValid) {
+            salla.notify.error(this.validationErrors.join(', '));
+            return;
+        }
+        this.isLoading = true;
+        try {
+            // please don't change this with this.host.querySelector it will return null
+            const optionsEl = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+            let selectedOptions = await optionsEl?.getSelectedOptions();
+            // If component returns empty but we have internal state, use internal state
+            if ((!selectedOptions || selectedOptions.length === 0) &&
+                this.selectedOptions[cacheKey]?.length > 0) {
+                selectedOptions = this.selectedOptions[cacheKey];
+            }
+            if (!selectedOptions || selectedOptions.length === 0) {
+                this.isLoading = false;
+                return;
+            }
+            // Store the selected options for this product using cache key
+            this.selectedOptions = {
+                ...this.selectedOptions,
+                [cacheKey]: selectedOptions,
+            };
+            const form = this.host.closest('form');
+            if (!form) {
+                this.isLoading = false;
+                return;
+            }
+            // remove old inputs for this specific product in this specific section/index only
+            const productInputPattern = `bundle[${this.sectionId}][${this.productIndex}]`;
+            // Remove only hidden inputs and inputs with data-product-id, but preserve visible checkboxes
+            Array.from(form.querySelectorAll(`input[name^="${productInputPattern}"][type="hidden"]`)).forEach(el => el.remove());
+            // Also remove any inputs with data-product-id that match this specific pattern
+            Array.from(form.querySelectorAll(`[data-product-id="${productId}"][name^="${productInputPattern}"]`)).forEach(el => el.remove());
+            // Ensure the actual checkbox in the UI is checked to reflect the selection visually
+            const checkboxId = `bundle[${this.sectionId}][${this.productIndex}][id]`;
+            const checkbox = document.getElementById(checkboxId);
+            if (checkbox) {
+                checkbox.checked = true;
+                // Don't dispatch change event here to avoid double API calls
+            }
+            else {
+                // If checkbox doesn't exist, create a hidden input as fallback
+                const productSelectionInput = document.createElement('input');
+                productSelectionInput.type = 'hidden';
+                productSelectionInput.name = `bundle[${this.sectionId}][${this.productIndex}][id]`;
+                productSelectionInput.value = String(productId);
+                productSelectionInput.dataset.productId = String(productId);
+                form.appendChild(productSelectionInput);
+            }
+            // append new hidden inputs for options
+            selectedOptions.forEach((option) => {
+                // how to get option parent id?
+                const optionParentId = option.option_id;
+                const hidden = document.createElement('input');
+                hidden.type = 'hidden';
+                // Use productIndex for the form input name
+                hidden.name = this.generateFormInputName(this.sectionId, this.productIndex ?? 0, optionParentId);
+                hidden.value = String(option.id);
+                hidden.dataset.productId = String(productId);
+                form.appendChild(hidden);
+            });
+            // Trigger single form change event with all updates (product selection + options)
+            const changeEvent = new window.Event('change', { bubbles: true });
+            form.dispatchEvent(changeEvent);
+            // Emit custom event
+            this.optionsSaved.emit({
+                productId: Number(productId),
+                selectedOptions,
+            });
+            // Emit product selected event to check the card
+            if (this.sectionId) {
+                this.productSelected.emit({
+                    productId: Number(productId),
+                    sectionId: this.sectionId,
+                    product: this.product,
+                    fromModal: true,
+                });
+            }
+            // Show success message
+            salla.notify.success(salla.lang.get('pages.products.options_saved'));
+            this.hasUnsavedChanges = false;
+            this.validationErrors = [];
+            // close modal
+            this.modal.close();
+        }
+        catch (error) {
+            salla.notify.error(salla.lang.get('pages.products.options_save_error'));
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    // Method to get options with selected state preserved
+    getOptionsWithSelectedState() {
+        if (!this.product?.options)
+            return [];
+        const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, this.product.id);
+        const savedOptions = this.selectedOptions[cacheKey] || [];
+        return this.product.options.map(option => ({
+            ...option,
+            details: option.details.map(detail => {
+                const isSelected = savedOptions.some(saved => {
+                    return saved.id === detail.id;
+                });
+                return {
+                    ...detail,
+                    is_selected: isSelected,
+                };
+            }),
+        }));
+    }
+    render() {
+        const productId = this.product?.id;
+        const optionsWithSelectedState = this.getOptionsWithSelectedState();
+        return (h(Host, { key: '52efc988e52036a0be8c5dfe7d9375aed2072b55' }, h("salla-modal", { key: 'e07dd856effc65a718528c6836884cd82520e94e', 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: '5365b7d796d48759a8cd0e7bb7e6cd755382afc8', slot: "loading" }, h("salla-skeleton", { key: 'deb66b5f95587584ade5581da3c891a95d3750af', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'e79b63e49ba9c29ef9d625ca99ffd17bbf282f79', 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)),
+                watchOverflow: true,
+                watchSlidesVisibility: true,
+                watchSlidesProgress: true,
+                direction: 'vertical',
+                spaceBetween: 10,
+            } }, h("div", { key: '3c3f3d2a1de4869a0d2d15583630d04a400097d7', 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: '5d0f67677595c442d76f0fb3a42dacb1996e58db', 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: `${this.sectionId}-${this.sectionIndex}-${productId}-persistent`, "product-id": productId }), h("div", { key: '1f166bdaf78a78b99aeecc141e6f99b9fa1e50b1', slot: "footer" }, h("div", { key: 'e4ea869eaf9690ee3aba7319f976a82f8187767e', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '17e4f97284528019b25bd640ff3843dbbefb5dae', onClick: e => this.onSave(e), loading: this.isLoading, disabled: this.isLoading }, this.isLoading
+            ? salla.lang.get('common.elements.saving')
+            : salla.lang.get('common.elements.save')))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "product": ["handleProductChange"]
+    }; }
+};
+SallaMultipleBundleProductOptionsModal.style = sallaMultipleBundleProductOptionsModalCss;
+
+const sallaMultipleBundleProductSliderCss = "";
+
+const SallaMultipleBundleProductSlider = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.productSelected = createEvent(this, "productSelected");
+        this.productOptionsSelected = createEvent(this, "productOptionsSelected");
+        this.selectedProducts = {};
+        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) {
+                // Toggle the checkbox state
+                checkbox.checked = !checkbox.checked;
+                // Dispatch a change event to trigger form validation/submission
+                const changeEvent = new window.Event('change', { bubbles: true });
+                checkbox.dispatchEvent(changeEvent);
+            }
+            this.productSelected.emit({
+                product,
+                sectionId: this.section.id,
+            });
+        };
+        this.handleOptionsClick = (product) => {
+            this.productOptionsSelected.emit({
+                product,
+                sectionId: this.section.id,
+            });
+        };
+    }
+    generateEventName(sectionId, productIndex) {
+        return `bundle[${sectionId}][${productIndex}][id]`;
+    }
+    render() {
+        return (h(Host, { key: '8c1d316ceeb7a0833d689695f00569a0da1d642e' }, h("salla-slider", { key: 'ca86cee09dc4f8c48edf14bfb4a26b86982fd84d', type: "carousel", controlsOuter: false, showControls: false, id: "accordion-multiple-bundle-product", pagination: true, class: "s-multiple-bundle-product-wrapper-slider", sliderConfig: {
+                spaceBetween: 0,
+            } }, h("div", { key: 'b59ac0393f6e826658dcca7eef8c2c21019664d4', slot: "items" }, this?.section?.products?.map((product, productIndex) => {
+            const isChecked = this.selectedProducts[this.section.id]?.has(product.id) || false;
+            return (h("div", { class: `swiper-slide 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" }, 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.sale_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" }, salla.lang.get('pages.products.choose_from_options'), h("i", { class: "sicon-keyboard_arrow_left s-multiple-bundle-product-button-icon" })))))));
+        })))));
+    }
+    get host() { return getElement(this); }
+};
+SallaMultipleBundleProductSlider.style = sallaMultipleBundleProductSliderCss;
+
+var Tag = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>tag</title>
+<path d="M28 0h-9.344c-1.059 0-2.056 0.411-2.809 1.153l-14.673 14.456c-1.56 1.56-1.561 4.097-0.001 5.657l9.56 9.56c0.755 0.755 1.76 1.172 2.828 1.173h0.003c1.068 0 2.072-0.416 2.833-1.179l14.451-14.668c0.743-0.753 1.153-1.751 1.153-2.809v-9.344c0-2.205-1.795-4-4-4zM29.333 13.344c0 0.353-0.137 0.685-0.385 0.937l-14.444 14.661c-0.252 0.252-0.587 0.391-0.941 0.391-0.001 0-0.001 0-0.001 0-0.356-0.001-0.691-0.139-0.943-0.392l-9.561-9.56c-0.52-0.52-0.52-1.365-0.005-1.88l14.667-14.449c0.253-0.248 0.585-0.385 0.937-0.385h9.344c0.736 0 1.333 0.597 1.333 1.333zM24 6.673c-0.737 0-1.333 0.604-1.333 1.341s0.596 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.015c0-0.737-0.596-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
+var Cart2 = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>cart2</title>
+<path d="M6.845 5.333l-1.905-5.333h-3.607c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333v0h1.727l5.72 16.012c0.569 1.56 2.039 2.654 3.765 2.655h12.133c0.001 0 0.002 0 0.003 0 1.825 0 3.364-1.222 3.845-2.892l0.007-0.028 3.161-13.080zM25.96 17.716c-0.167 0.554-0.672 0.951-1.27 0.951-0.002 0-0.005 0-0.007-0h-12.133c-0.575-0-1.065-0.364-1.252-0.875l-0.003-0.009-3.497-9.783h20.508zM13.333 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM13.333 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0zM24 24c-2.209 0-4 1.791-4 4s1.791 4 4 4c2.209 0 4-1.791 4-4v0c0-2.209-1.791-4-4-4v0zM24 29.333c-0.736 0-1.333-0.597-1.333-1.333s0.597-1.333 1.333-1.333c0.736 0 1.333 0.597 1.333 1.333v0c0 0.736-0.597 1.333-1.333 1.333v0z"></path>
+</svg>
+`;
+
+const sallaOfferModalCss = ".s-offer-modal-type-products .s-modal-body{min-height:690px;position:relative}";
+
+const SallaOfferModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.offer = null;
+        this.hasError = false;
+        this.translationLoaded = false;
+        this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
+        salla.event.on('offer-modal::open', product_id => this.open(product_id));
+        salla.lang.onLoaded(() => {
+            this.addToCartLabel = salla.lang.get("pages.cart.add_to_cart");
+            this.translationLoaded = true;
+        });
+        this.categorySlot = this.host.querySelector('[slot="category"]')?.innerHTML || `<span class="s-offer-modal-badge-icon">{tagIcon}</span><span class="s-offer-modal-badge-text">{name}</span>`;
+        // this.productSlot = this.host.querySelector('[slot="product"]')?.innerHTML || this.defaultProductSlot();
+        salla.event.on('offer-modal::open', product_id => this.open(product_id));
+        salla.product.event.onOfferExisted(offer => {
+            if (salla.storage.get('remember-offer-' + offer.id)) {
+                salla.log('User selected to don\'t show this offer again.');
+                return;
+            }
+            this.open(offer.product_id);
+        });
+    }
+    /**
+ * Emits a promotion viewed event for analytics tracking
+ * @param offer - The offer being viewed in the modal
+ */
+    emitPromotionViewed(offer) {
+        if (!offer)
+            return;
+        salla.event.emit('promotion::viewed', [{
+                id: offer.id?.toString(),
+                creative: offer.message,
+                name: offer.name,
+                position: `${this.offer_type}_offer_modal`
+            }]);
+    }
+    /**
+     * Emits a promotion clicked event for analytics tracking
+     * @param offer - The offer being clicked in the modal
+     */
+    emitPromotionClicked(offer) {
+        if (!offer)
+            return;
+        salla.event.emit('promotion::clicked', [{
+                id: offer.id?.toString(),
+                creative: offer.message,
+                name: offer.name,
+                position: `${this.offer_type}_offer_modal`
+            }]);
+    }
+    /**
+     * Show the available offers for the product
+     * @param product_id
+     */
+    async open(product_id) {
+        this.productID = product_id;
+        //TODO:: make sure there is only one offer
+        this.hasError = false;
+        this.modal.open();
+        return await salla.api.withoutNotifier(() => salla.product.offers(product_id))
+            .then(response => this.showOffer(response.data[0]))
+            .catch(e => {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => setTimeout(() => this.modal.stopLoading(), 1000));
     }
     /**
      * Show offer details
@@ -6011,7 +7208,7 @@ const SallaOfferModal = class {
     //       '</div>';
     //   }
     render() {
-        return h("salla-modal", { key: '149806ab834f3595edaba08fa4ac7534559c86a0', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '0b04b126cab3b3f2c96a18da4e99fde448ae3a7b', slot: 'loading' }, h("div", { key: '2bc798a2e279e732752a61870d2bbdb239156af1', class: "s-offer-modal-skeleton" }, h("div", { key: 'f25d33fa444b1b200b8ad1d1671485bc402ac32f', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '3e9099101da88a0b0e7c1961dd191d9df92f6508', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '913b23a9a46ca5c69a42672a09a922662c1587a8', height: '15px', width: '50%' }), h("salla-skeleton", { key: '8e8e1392609be37bb8a85e5d79f5f6a5511c5af8', height: '10px', width: '30%' })), h("div", { key: '994cd22730b3b8feefd9e8f6597875aa7954e6f7', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '361299e616622895d48377f3d138d115d05a9fbc', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '28cc38415de9bed705b5d2ca683031c50de47d94', height: '15px', width: '50%' }), h("salla-skeleton", { key: 'ef1935d0e8fccfbce3b9cf3a652c7c521539cf13', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
+        return h("salla-modal", { key: '6dce27c3f20b031aa33b7e15980c55af84d1c9f6', "has-skeleton": true, "sub-title": this.offer_message, ref: modal => this.modal = modal, isLoading: true, class: `s-offer-modal-type-${this.offer_type ? this.offer_type : ''}` }, h("div", { key: '1f63aa0fd3a95ba54e8ed5168f1439f4cafce036', slot: 'loading' }, h("div", { key: '748de710f2ad5c6c60a9e324d1e1b44672dee28f', class: "s-offer-modal-skeleton" }, h("div", { key: '96d6d1d8edc3e511c87eaa44539617d529e8a3e0', class: "s-offer-modal-skeleton-header" }, h("salla-skeleton", { key: '1abe6ddf5096af877c9ce59dfbcdecb08a263e4b', type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { key: '7010a9056b168f4df7168a55dbfde1da2726c913', height: '15px', width: '50%' }), h("salla-skeleton", { key: '4168b53b7a4358240f8f6d4d3b9f9a999992ddcb', height: '10px', width: '30%' })), h("div", { key: 'd019372cebf6d3e4d80842fa48e3ce1433457f06', class: "s-offer-modal-skeleton-items" }, [...Array(3)].map(() => h("div", { class: "s-offer-modal-skeleton-item" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-offer-modal-skeleton-item-title" }, h("salla-skeleton", { height: '15px', width: '100%' })), h("div", { class: "s-offer-modal-skeleton-item-subtitle" }, h("salla-skeleton", { height: '9px', width: '50%' }), h("div", { innerHTML: Cart2 }))))), h("div", { key: '4cbc9f99a98ccc9ea27f41e50fa037ea44d85048', class: "s-offer-modal-skeleton-footer" }, h("salla-skeleton", { key: '467546d4ded93cd95a7be78e6dd39935a20867c8', height: '15px', width: '50%' }), h("salla-skeleton", { key: '399a4a4ebedcc54def70ff428f3c5f24fd98a775', height: '15px', width: '30%' })))), !this.hasError && this.offer !== null
             ? [h("span", { slot: 'icon', class: "s-offer-modal-header-icon", innerHTML: SpecialDiscountIcon }), this.getOfferContent(), h("div", { class: "s-offer-modal-footer", slot: "footer" }, this.offer.formatted_date ?
                     h("p", { class: "s-offer-modal-expiry" }, salla.lang.get('pages.products.offer_expires_in'), " ", this.offer.formatted_date)
                     : '', h("label", { class: "s-offer-modal-remember-label" }, h("input", { type: "checkbox", onChange: e => this.rememberMe(e), class: "s-offer-modal-remember-input" }), "\u00A0 ", salla.lang.get('common.elements.remember_my_choice'))),
@@ -6060,7 +7257,7 @@ const SallaPlaceholder = class {
         };
     }
     render() {
-        return (h(Host, { key: 'fe8c3b4958319a69bedc23c4edd7e5e9db820301', class: this.alignmentClass() }, h("div", { key: '727c7f934c9dbc5fb5cdfba7f563855162fa3a23', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '6c61798f5af682c078f4536fd88af14c241bc009', class: "s-placeholder-title" }, h("slot", { key: '6bd403b5402ff34b69615ad94fce85516b0fe79d', name: 'title' }, h("span", { key: 'beef08e2f61e1328f15afa9b895302c235022f91' }, salla.lang.get('common.elements.no_options')))), h("div", { key: '50fea21d9fcc09a3478beb31e9e876ed7726b704', class: "s-placeholder-description" }, h("slot", { key: 'de0f6916c65c2a2c97ea3ee3fa16d6fdbeebe90a', name: 'description' }, h("span", { key: '3f6621dc6d2f19b1c5e8f55f9f2cc4b0b622bbcc' }, salla.lang.get('common.errors.empty_results'))))));
+        return (h(Host, { key: '9bf5c9b70ee7dddc65bdb550f98681aa6eb4a2b1', class: this.alignmentClass() }, h("div", { key: '05bf79dd66fb30d76ffe05ea50b66d1bab976bb0', class: `s-placeholder-icon s-placeholder-icon-${this.iconSize}`, innerHTML: this.icon }), h("div", { key: '1373cfaad7e993e6cc888047346348083ee8bf7e', class: "s-placeholder-title" }, h("slot", { key: '5a6d70c7fee74334cf46143511bf2465e32025be', name: 'title' }, h("span", { key: '5b531362a3dea0a8a59960a28925c03bdfc64f82' }, salla.lang.get('common.elements.no_options')))), h("div", { key: 'd9d0c28b47f7c2972817630a9011e17116fa66c8', class: "s-placeholder-description" }, h("slot", { key: '0b67052476e584464107d56b4c8f263cfebaac87', name: 'description' }, h("span", { key: '61b16c16799ce96a53eca32936c8d49b2e81ff03' }, salla.lang.get('common.errors.empty_results'))))));
     }
 };
 SallaPlaceholder.style = sallaPlaceholderCss;
@@ -6202,7 +7399,7 @@ const SallaProductAvailability = class {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '0dc32b09e3916993a31ce6e27d9cefd81dd56289', class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
+        return (h(Host, { key: '631de4fa7186561daed53943f2ece491a8dbe934', class: "s-product-availability-wrap" }, this.isSubscribed || this.isVisitorSubscribed
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRing, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribed || this.isVisitorSubscribed ? '' : this.renderModal()));
@@ -6318,14 +7515,14 @@ const SallaProductCard = class {
             's-product-card-out-of-stock': this.productData?.is_out_of_stock,
         };
         const hrefProp = this.productData?.url ? { href: this.productData.url, title: `Learn more about ${this.productData?.name}` } : {};
-        return (h(Host, { key: '80743147fd154496018ff530e3c84b2f66cf2985', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: 'ecf4f7838db5d38bc355d8730c3eb10dd04aedc4', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: 'db0198934b449152c88d23f8adc71ec212761e2a', ...hrefProp }, h("img", { key: 'f80856aacb8861e68ef0dfbe43aeb22d422920f9', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
+        return (h(Host, { key: 'e46cba8a24104176d7a95c02ead575a6fa360783', id: `product-${this.productData?.id}`, class: classes }, h("div", { key: '6370f6a5ca0a63ab4f4d97492ef1f8911ef82bda', class: !this.fullImage ? 's-product-card-image' : 's-product-card-image-full' }, h("a", { key: '37f2f82fa1c500e9cdb4a0aabe570429b9b9daaa', ...hrefProp }, h("img", { key: '4ce43329b5a44b4d5ef174469c510ef28d547440', class: `s-product-card-image-${salla.url.is_placeholder(this.productData?.image?.url)
                 ? 'contain'
                 : this.fitImageHeight
                     ? this.fitImageHeight
-                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '7ce28a0b764367d51c8b351793509490cfd1e658', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
-            h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: 'b4f68d13d035d7de2fab28e6f2c0d026d46d8901', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
+                    : 'cover'} lazy`, src: this.placeholder, alt: this.productData?.image?.alt || this.productData?.name, "data-src": this.productData?.image?.url || this.productData?.thumbnail }), !this.fullImage && !this.minimal ? this.getProductBadge() : ''), this.fullImage && h("a", { key: '87a4e4caafb0edba3c634ff5760ae0556a510d3c', ...hrefProp, class: "s-product-card-overlay" }), !this.horizontal && !this.fullImage ?
+            h("salla-button", { shape: "icon", fill: "none", color: "light", "aria-label": "Add or remove to wishlist", ref: el => this.wishlistBtn = el, class: "s-product-card-wishlist-btn animated", onClick: () => salla.wishlist.toggle(this.productData.id) }, h("span", { innerHTML: Heart })) : ''), h("div", { key: '7cb392ea3fe61d41d5ba5a36650725545ddd3cf8', class: "s-product-card-content" }, this.isSpecial && this.productData?.quantity ?
             h("div", { class: "s-product-card-content-pie", ref: pie => this.pie = pie }, h("span", null, h("b", null, salla.helpers.number(this.productData?.quantity)), this.remained), h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-2 -1 36 34", class: "s-product-card-content-pie-svg" }, h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-base" }), h("circle", { cx: "16", cy: "16", r: "15.9155", class: "s-product-card-content-pie-svg-bar" })))
-            : '', h("div", { key: '2259cecd4157e62a382d95cb6facde5b73eca1af', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: '5b5ec545eb44fefdde1d4e2632b4e55baa86260c', class: "s-product-card-content-title" }, h("a", { key: '9afa68bf465f9c18e304ee462037df0999426696', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
+            : '', h("div", { key: '28322ef080ae243b55ed4c982f59226159b81d6b', class: { 's-product-card-content-main': true, 's-product-card-content-extra-padding': this.isSpecial } }, h("h3", { key: 'dc378461ca91f1af0c29b35271e8f6b76321f133', class: "s-product-card-content-title" }, h("a", { key: '1bf4c4cf4d04ebb4990053d9721581b276083f30', ...hrefProp }, this.productData?.name)), this.productData?.subtitle && !this.minimal ?
             h("p", { class: "s-product-card-content-subtitle" }, this.productData?.subtitle)
             : ''), this.productData?.donation && !this.minimal && !this.fullImage ?
             [h("salla-progress-bar", { donation: this.productData?.donation }), h("div", { class: "s-product-card-donation-input" }, this.productData?.donation?.can_donate ?
@@ -6334,7 +7531,7 @@ const SallaProductCard = class {
                                 this.addBtn.donatingAmount = e.target.value;
                             }, id: "donation-amount", name: "donating_amount", class: "s-form-control", placeholder: this.donationAmount })]
                     : '')]
-            : '', h("div", { key: '7dc9364b456583bbb0a063038eadb971d68d33a1', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
+            : '', h("div", { key: '86474ac2519b7589053b39dc36ae316ad64c8e29', class: { 's-product-card-content-sub': true, 's-product-card-content-extra-padding': this.isSpecial } }, this.getProductPrice(), this.productData?.rating?.stars && !this.minimal ?
             h("div", { class: "s-product-card-rating" }, h("span", { innerHTML: Rate }), h("span", null, this.productData.rating.stars))
             : ''), this.isSpecial && this.productData.discount_ends
             ? h("salla-count-down", { date: this.formatDate(this.productData.discount_ends), "end-of-day": true, boxed: true, labeled: true })
@@ -6358,6 +7555,782 @@ const SallaProductCard = class {
 };
 SallaProductCard.style = sallaProductCardCss;
 
+var DisplayType;
+(function (DisplayType) {
+    DisplayType["COLOR"] = "color";
+    DisplayType["DATE"] = "date";
+    DisplayType["DATETIME"] = "datetime";
+    DisplayType["DONATION"] = "donation";
+    DisplayType["IMAGE"] = "image";
+    DisplayType["MULTIPLE_OPTIONS"] = "multiple-options";
+    DisplayType["NUMBER"] = "number";
+    DisplayType["SINGLE_OPTION"] = "single-option";
+    DisplayType["DIGITAL_CARD_VALUE"] = "digital-code-value";
+    DisplayType["COUNTRY"] = "country";
+    DisplayType["SPLITTER"] = "splitter";
+    DisplayType["TEXT"] = "text";
+    DisplayType["TEXTAREA"] = "textarea";
+    DisplayType["THUMBNAIL"] = "thumbnail";
+    DisplayType["TIME"] = "time";
+    DisplayType["RADIO"] = "radio";
+    DisplayType["CHECKBOX"] = "checkbox";
+    DisplayType["MAP"] = "map";
+    DisplayType["FILE"] = "file";
+    DisplayType["COLOR_PICKER"] = "color_picker";
+    DisplayType["BOOKING"] = "booking";
+})(DisplayType || (DisplayType = {}));
+var Currency;
+(function (Currency) {
+    Currency["Sar"] = "SAR";
+})(Currency || (Currency = {}));
+
+var CameraIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>camera</title>
+<path d="M16 10.667c-4.044 0-7.333 3.289-7.333 7.333s3.289 7.333 7.333 7.333 7.333-3.289 7.333-7.333-3.289-7.333-7.333-7.333zM16 22.667c-2.573 0-4.667-2.093-4.667-4.667s2.093-4.667 4.667-4.667 4.667 2.093 4.667 4.667-2.093 4.667-4.667 4.667zM28 5.333h-3.287l-2.271-3.407c-0.248-0.371-0.664-0.593-1.109-0.593h-10.667c-0.445 0-0.861 0.223-1.109 0.593l-2.271 3.407h-3.287c-2.205 0-4 1.795-4 4v17.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-17.333c0-2.205-1.795-4-4-4zM29.333 26.667c0 0.735-0.599 1.333-1.333 1.333h-24c-0.735 0-1.333-0.599-1.333-1.333v-17.333c0-0.735 0.599-1.333 1.333-1.333h4c0.445 0 0.861-0.223 1.109-0.593l2.272-3.407h9.239l2.271 3.407c0.248 0.371 0.664 0.593 1.109 0.593h4c0.735 0 1.333 0.599 1.333 1.333zM25.333 10.66c-0.736 0-1.333 0.604-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.597 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327z"></path>
+</svg>
+`;
+
+var FileIcon = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>file-upload</title>
+<path d="M21.333 24c0.341 0 0.683-0.131 0.943-0.391 0.521-0.521 0.521-1.364 0-1.885l-5.333-5.333c-0.123-0.123-0.271-0.22-0.433-0.288-0.327-0.135-0.693-0.135-1.019 0-0.163 0.068-0.311 0.165-0.433 0.288l-5.333 5.333c-0.521 0.521-0.521 1.364 0 1.885s1.364 0.521 1.885 0l3.057-3.057v10.115c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-10.115l3.057 3.057c0.26 0.26 0.601 0.391 0.943 0.391zM28.943 9.724l-9.333-9.333c-0.249-0.251-0.589-0.391-0.943-0.391h-12c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h4c0.736 0 1.333-0.597 1.333-1.333s-0.597-1.333-1.333-1.333h-4c-0.735 0-1.333-0.599-1.333-1.333v-24c0-0.735 0.599-1.333 1.333-1.333h11.448l8.552 8.552v16.781c0 0.735-0.599 1.333-1.333 1.333h-4c-0.736 0-1.333 0.597-1.333 1.333s0.597 1.333 1.333 1.333h4c2.205 0 4-1.795 4-4v-17.333c0-0.353-0.14-0.693-0.391-0.943z"></path>
+</svg>
+`;
+
+const sallaProductOptionsCss = "";
+
+const SallaProductOptions = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changed = createEvent(this, "changed");
+        this.fileTypes = {
+            pdf: 'application/pdf',
+            png: 'image/png',
+            jpg: 'image/jpeg',
+            word: 'application/doc,application/ms-doc,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+            exl: 'application/excel,application/vnd.ms-excel,application/x-excel,application/x-msexcel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            txt: 'text/plain',
+        };
+        this.outOfStockText = "";
+        this.donationAmount = salla.lang.get('pages.products.donation_amount');
+        this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+        this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        this.isCustomDonation = false;
+        this.selectedOptions = [];
+        this.disableCardValue = true;
+        this.availableDigitalCardValues = [];
+        this.userInitiatedValidation = false;
+        this.outSkus = [];
+        /**
+       * Avoid selection of previous default or selected card value option
+       * when switching between digital card country options for the 1st time
+       */
+        this.ignoreDefaultCardValue = false;
+        /**
+         * The id of the product to which the options are going to be fetched for.
+         */
+        this.productId = salla.config.get('page.id');
+        this.handleDonationOptions = (event, detail, type) => {
+            if (detail === 'custom' && type === 'input') {
+                salla.helpers.inputDigitsOnly(event.target);
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: event.target.value
+                });
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.isCustomDonation = event.target.value === 'custom';
+            if (this.donationInput) {
+                if (event.target.value === 'custom') {
+                    this.donationInput.value = '';
+                    this.donationInput.focus();
+                }
+                else {
+                    this.donationInput.value = event.target.value;
+                }
+                if (detail === 'custom') {
+                    return;
+                }
+                salla.event.emit('product-options::donation-changed', {
+                    id: this.productId,
+                    price: event.target.value
+                });
+            }
+        };
+        this.hideLabel = (option) => {
+            if (option.type === DisplayType.DONATION && (option.donation && !option.donation.can_donate)) {
+                return true;
+            }
+            return false;
+        };
+        this.getExpireDonationMessage = (option) => {
+            if (!option.donation) {
+                return;
+            }
+            const completed = option.donation.target_amount <= option.donation.collected_amount;
+            return h("div", { class: { "s-product-options-donation-message": true, "s-product-options-donation-completed": completed, "s-product-options-donation-expired": !completed } }, h("p", null, option.donation.target_message), h("span", { innerHTML: completed ? salla.money(option.donation.target_amount) : '' }));
+        };
+        this.canDisabled = !salla.config.get('store.settings.product.notify_options_availability') || salla.url.is_page('cart');
+        salla.lang.onLoaded(() => {
+            this.outOfStockText = salla.lang.get("pages.products.out_of_stock");
+            this.donationAmount = salla.lang.get('pages.products.donation_amount');
+            this.selectDonationAmount = salla.lang.getWithDefault('pages.products.select_donation_amount', 'تحديد مبلغ التبرع');
+            this.selectAmount = salla.lang.getWithDefault('pages.products.select_amount', 'اختر المبلغ');
+        });
+        if (this.options) {
+            try {
+                this.setOptionsData(Array.isArray(this.options) ? this.options : JSON.parse(this.options));
+                return;
+            }
+            catch (e) {
+                salla.log('Bad json passed via options prop');
+            }
+        }
+        if (!Array.isArray(this.optionsData)) {
+            salla.log('Options is not an array[] ---> ', this.optionsData);
+            this.setOptionsData([]);
+        }
+        if (this.productId && !salla.url.is_page('cart')) {
+            salla.api.product.getDetails(this.productId, ['options']).then(resp => this.setOptionsData(resp.data.options));
+        }
+    }
+    /**
+     * Sets the options data for the product
+     * @param optionsData - Array of product options
+     */
+    async setOptionsData(optionsData) {
+        this.optionsData = optionsData;
+        const that = this;
+        this.optionsData[0]?.details?.forEach(function (detail) {
+            Object.entries(detail.skus_availability || {})
+                .filter(sku => !sku[1])
+                .map(sku => that.outSkus.push(Number(sku[0])));
+        });
+    }
+    /**
+     * Get the id's of the selected options.
+     * */
+    async getSelectedOptionsData() {
+        const selectedOptions = {};
+        const formData = this.host.getElementSallaData();
+        // Check if bundleContext is defined as a prop on the component before accessing it
+        const contextData = (typeof this.bundleContext !== 'undefined') ? this.bundleContext : null;
+        formData.forEach((value, key) => {
+            if (contextData) {
+                // Handle bundle naming convention: bundle[sectionId][index][options][optionId]
+                if (key.startsWith('bundle[') && key.includes('[options][')) {
+                    const optionId = key.split('[options][')[1].replace(']', '');
+                    selectedOptions[optionId] = value;
+                }
+            }
+            else {
+                // Handle standard naming convention: options[optionId]
+                if (key.startsWith('options[')) {
+                    selectedOptions[key.replace('options[', '').replace(']', '')] = value;
+                }
+            }
+        });
+        return selectedOptions;
+    }
+    /**
+     * Report options form validity.
+     * */
+    async reportValidity() {
+        const requiredElements = this.host.querySelectorAll('[required]');
+        let pass = true;
+        for (let i = 0; i < requiredElements.length; i++) {
+            //if there is only one invalid option, return false
+            if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {
+                pass = false;
+            }
+        }
+        return pass;
+    }
+    /**
+     * Return true if there is any out of stock options are selected and vise versa.
+     * */
+    async hasOutOfStockOption() {
+        return this.selectedOptions.some(option => option.is_out) || (this.selectedSkus?.length && this.selectedSkus?.every(sku => this.outSkus.includes(sku)));
+    }
+    /**
+     * Get selected options.
+     * */
+    async getSelectedOptions() {
+        return this.selectedOptions;
+    }
+    /**
+     * Get a specific option by its id.
+     * */
+    async getOption(option_id) {
+        return this.optionsData.find(option => option.id === option_id);
+    }
+    // @ts-ignore
+    invalidHandler(event, option) {
+        const closestProductOption = event.target.closest('.s-product-options-option');
+        if (!closestProductOption.classList.contains('s-product-options-option-error')) {
+            closestProductOption.classList.add('s-product-options-option-error');
+        }
+        if (this.userInitiatedValidation && !salla.url.is_page('cart')) {
+            const firstInvalidElement = this.host.querySelector('.s-product-options-option-error');
+            if (firstInvalidElement === closestProductOption) {
+                this.scrollToElement(closestProductOption);
+            }
+        }
+    }
+    scrollToElement(element) {
+        if (element) {
+            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+    changedHandler(event, option, fireChangeEvent = true) {
+        const data = {
+            event: event,
+            option: option,
+            detail: null,
+            productId: this.productId
+        };
+        if (option.details) {
+            const detail = option.details.find((detail) => {
+                return Number(detail.id) === Number(event.target.value);
+            });
+            data.detail = detail;
+        }
+        if (option.type === 'country') {
+            this.handleCountryOptionChange(event, data.detail);
+        }
+        const optionElement = event.target.closest('.s-product-options-option');
+        if (event.target.value ||
+            ((option.type === DisplayType.FILE || option.type === DisplayType.IMAGE) && event.type === 'added') ||
+            (option.type === DisplayType.MAP && event.type === 'selected' && (event.target.lat && event.target.lng))) {
+            setTimeout(() => {
+                optionElement.classList.remove('s-product-options-option-error');
+            }, 200);
+        }
+        if (option.type === DisplayType.DONATION) {
+            salla.event.emit('product-options::donation-changed', {
+                id: this.productId,
+                price: event.target.value
+            });
+        }
+        this.setSelectedSkus();
+        this.handleRequiredMultipleOptions(option);
+        const index = this.selectedOptions.findIndex(opt => opt.option_id === data.option.id);
+        if (data.option.type === DisplayType.MULTIPLE_OPTIONS) {
+            // Handle multiple selections
+            const detailIndex = this.selectedOptions.findIndex(opt => opt.option_id === data.option.id && opt?.id === data.detail?.id);
+            if (detailIndex > -1) {
+                // If the option is already selected, remove it (unselect)
+                this.selectedOptions.splice(detailIndex, 1);
+            }
+            else {
+                // If the option is not selected, add it to the selectedOptions array
+                this.selectedOptions.push({ ...data.detail, option_id: data.option.id });
+            }
+        }
+        else {
+            // Handle single selection
+            if (!data.detail || Object.keys(data.detail).length === 0) {
+                // If there is no value for the single-select, remove it from the selectedOptions array
+                if (index > -1) {
+                    this.selectedOptions.splice(index, 1);
+                }
+            }
+            else {
+                // If a value exists, update or add the selection
+                if (index > -1) {
+                    // Replace the existing selection with the new one
+                    this.selectedOptions[index] = { ...data.detail, option_id: data.option.id };
+                }
+                else {
+                    // If no selection exists for this input, add the new selection
+                    this.selectedOptions.push({ ...data.detail, option_id: data.option.id });
+                }
+            }
+        }
+        // Update optionsData directly
+        this.optionsData = this.optionsData.map(opt => {
+            if (opt.id === data.option.id) {
+                return {
+                    ...opt,
+                    details: opt.details.map(detail => ({
+                        ...detail,
+                        is_selected: data.option.type === DisplayType.MULTIPLE_OPTIONS
+                            ? this.selectedOptions.some(selected => selected.id === detail.id)
+                            : Number(detail.id) === Number(data.detail?.id),
+                        value: data.detail?.value
+                    }))
+                };
+            }
+            return opt;
+        });
+        // Emit the event only if fireChangeEvent is true
+        if (fireChangeEvent) {
+            this.changed.emit(data);
+            salla.event.emit('product-options::change', data);
+        }
+    }
+    /**
+     * loop throw all selected details, then get common sku, if it's only one, means we selected all of them;
+     */
+    setSelectedSkus() {
+        this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
+            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .map(sku => Number(sku));
+    }
+    handleRequiredMultipleOptions(option) {
+        if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
+            return;
+        }
+        const optionContainer = this.host.querySelector(`[data-option-id="${option.id}"]`);
+        const hasChecked = optionContainer.querySelectorAll('input:checked').length;
+        optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));
+    }
+    getLatLng(value, type) {
+        return value
+            ? value.split(',')[type === 'lat' ? 0 : 1]
+            : '';
+    }
+    getDisplayForType(option) {
+        if (this[`${option.type}Option`]) {
+            return this[`${option.type}Option`](option);
+        }
+        if (option.type === DisplayType.COLOR_PICKER) {
+            return this.colorPickerOption(option);
+        }
+        if (option.type === DisplayType.MULTIPLE_OPTIONS) {
+            return this.multipleOptions(option);
+        }
+        if (option.type === DisplayType.SINGLE_OPTION) {
+            return this.singleOption(option);
+        }
+        // Handle radio type as single option for bundle products
+        if (option.type === DisplayType.RADIO) {
+            return this.radioOption(option);
+        }
+        if (option.type === DisplayType.DIGITAL_CARD_VALUE) {
+            return this.digitalCardValuesOption(option);
+        }
+        if (option.type === DisplayType.COUNTRY) {
+            return this.countryOption(option);
+        }
+        if (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) {
+            return h("salla-booking-field", { onInvalidInput: (e) => this.invalidHandler(e, option), option: option, productId: option.value });
+        }
+        salla.log(`Couldn't find options type(${option.type})😢`);
+        return '';
+    }
+    getOptionShownWhen(option) {
+        return option.visibility_condition
+            ? { "data-show-when": `options[${option.visibility_condition.option}] ${option.visibility_condition.operator} ${option.visibility_condition.value}` }
+            : {};
+    }
+    getAvailableDigitalCardSKUs(detail) {
+        const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+        if (!digitalCardOption)
+            throw new Error('product-options:: No digital card options found');
+        const outofStockSKUs = Object.keys(detail.skus_availability).filter(key => detail.skus_availability[key] === false);
+        this.availableDigitalCardValues = digitalCardOption.details.filter((op) => {
+            return !Object.keys(op.skus_availability).filter(SKU_key => outofStockSKUs.includes(SKU_key)).length;
+        });
+    }
+    handleCountryOptionChange(event, detail) {
+        event.stopImmediatePropagation();
+        this.ignoreDefaultCardValue = true;
+        const currentCardValue = this.host.querySelector("input[data-code-value]:checked");
+        if (currentCardValue)
+            currentCardValue.checked = false;
+        const digitalCardOption = this.optionsData.find(({ type }) => type === 'digital-code-value');
+        if (!digitalCardOption)
+            throw new Error('product-options:: No digital card options found');
+        this.getAvailableDigitalCardSKUs(detail);
+    }
+    getSelectedDigitalCardOptions(option) {
+        const selectedOption = option.details.find(detail => detail.is_selected);
+        const defaultOption = option.details.find(detail => !!detail.is_default) || option.details[0]; /*option.details[0] only applys for counrty options*/
+        if (!['digital-code-value', 'country'].includes(option.type))
+            return;
+        return selectedOption || defaultOption;
+    }
+    //we need the cart Id for productOption Image
+    async componentWillLoad() {
+        if (salla.url.is_page("cart")) {
+            this.disableCardValue = false;
+            this.fillSelectedOptions();
+        }
+        if (this.config) {
+            try {
+                this.optionConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+            }
+            catch (error) {
+                console.error('Failed to parse JSON in config prop:', error);
+            }
+        }
+        const shouldSelectDefaultOption = this.optionsData.filter(({ type }) => ["country", "digital-card-value"].includes(type)).length > 0 && salla.url.is_page('cart');
+        if (shouldSelectDefaultOption) {
+            const countryOption = this.optionsData.find(option => option.type === 'country');
+            const defaultSelection = countryOption && this.getSelectedDigitalCardOptions(countryOption);
+            if (defaultSelection) {
+                this.getAvailableDigitalCardSKUs(defaultSelection);
+            }
+        }
+        this.outOfStockText = salla.lang.get('pages.products.out_of_stock');
+        await salla.onReady();
+        document.addEventListener("paste", this.handlePaste.bind(this));
+        const needsCartId = (!salla.storage.get('cart.id') && this.optionsData.some(option => ['file', 'image'].includes(option.type)));
+        return needsCartId ? salla.api.cart.getCurrentCartId(false, "salla-product-options") : null;
+    }
+    /**
+     * This is a workaround for a bug in iOS 26 Safari, when pasting English text to RTL inputs, it adds extra text!!
+     * To avoid any break changes, we will make it only work on these conditions:
+     *  - content_copyright is on
+     *  - Apple Pay is enabled (means it's iOS/safari)
+     *  - Input is an input or textarea
+     *  - Salla form control
+     *  - Options array
+     */
+    handlePaste(event) {
+        const target = event.target;
+        if (!Salla.config.get('store.settings.content_copyright')
+            || !Salla.helpers.hasApplePay()
+            || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
+            || !target.classList.contains('s-form-control')
+            || !target.name.startsWith('options[')) {
+            return;
+        }
+        // Prevent default paste (to avoid Safari inserting extra content)
+        event.preventDefault();
+        // Read only the clipboard data
+        const text = event.clipboardData?.getData("text") || "";
+        // Insert it manually at cursor if you want
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        const newValue = target.value.slice(0, start) + text + target.value.slice(end);
+        target.value = newValue;
+        // Reset cursor position
+        target.setSelectionRange(start + text.length, start + text.length);
+    }
+    hideDigitalCardsOptions(option) {
+        return (this.disableCardValue && option.type === DisplayType.DIGITAL_CARD_VALUE && !salla.url.is_page("cart"));
+    }
+    render() {
+        if (this.optionsData?.length === 0) {
+            return;
+        }
+        return (h(Host, { class: "s-product-options-wrapper" }, h("salla-conditional-fields", null, this.optionsData.map((option) => h("div", { key: option.id, class: `s-product-options-option-container${option.visibility_condition || this.hideDigitalCardsOptions(option) ? ' hidden' : ''}`, "data-option-id": option.id, ...this.getOptionShownWhen(option) }, option.name === 'splitter' ?
+            this.splitterOption()
+            : h("div", { class: { "s-product-options-option": true, "s-product-options-option-booking": option.type === DisplayType.BOOKING && salla.url.is_page("cart") }, "data-option-type": option.type, "data-option-required": `${option.required}` }, h("label", { htmlFor: this.generateInputName(option.id), class: `s-product-options-option-label ${this.hideLabel(option) ? 's-product-options-option-label-hidden' : ''}` }, h("b", null, option.name, option.required && h("span", null, " * "), " "), h("small", null, option.placeholder)), h("div", { class: `s-product-options-option-content ${this.hideLabel(option) || (option.type === DisplayType.BOOKING && salla.url.is_page("cart")) ? 's-product-options-option-content-full-width' : ''}` }, this.getDisplayForType(option))))))));
+    }
+    generateUniqueKey(defaultValue) {
+        const contextData = this.bundleContext;
+        let baseKey = this.uniqueKey ? `${defaultValue}-${this.uniqueKey}` : defaultValue;
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                baseKey = `${baseKey}-bundle-${sectionId}-${productId}`;
+            }
+            catch (e) {
+                // If parsing fails, just use the base key
+            }
+        }
+        return baseKey;
+    }
+    /**
+     * Generate the correct input name based on bundle context
+     * @param optionId - The option ID
+     * @returns The formatted input name
+     */
+    generateInputName(optionId) {
+        const contextData = this.bundleContext;
+        if (contextData) {
+            try {
+                // Handle both string and object types
+                const context = typeof contextData === 'string'
+                    ? JSON.parse(contextData)
+                    : contextData;
+                const { sectionId, productId } = context;
+                return `bundle[${sectionId}][${productId}][options][${optionId}]`;
+            }
+            catch (e) {
+                return `options[${optionId}]`;
+            }
+        }
+        return `options[${optionId}]`;
+    }
+    fillSelectedOptions() {
+        this.selectedOptions = this.optionsData.reduce((acc, opt) => {
+            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            const mappedDetails = selectedDetails.map(detail => ({
+                ...detail,
+                option_id: opt.id
+            }));
+            return acc.concat(mappedDetails);
+        }, []);
+    }
+    componentDidLoad() {
+        if (this.optionsData?.length === 0 && !this.optionsData.some(option => option.type === DisplayType.DONATION)) {
+            return;
+        }
+        const selectedDonationOption = this.optionsData.find(option => option.type === DisplayType.DONATION)?.details.find(detail => detail.is_selected);
+        if (!selectedDonationOption) {
+            return;
+        }
+        setTimeout(() => {
+            salla.event.emit('product-options::donation-changed', {
+                id: this.productId,
+                price: selectedDonationOption.additional_price
+            });
+        }, 1000);
+    }
+    /**
+     * Enable user-initiated validation mode so invalid fields will scroll into view
+     */
+    async enableUserInitiatedValidation() {
+        this.userInitiatedValidation = true;
+    }
+    /**
+     * Validate options and trigger scrolling to the first invalid option if any
+     */
+    async validateAndScroll() {
+        await this.enableUserInitiatedValidation();
+        return this.reportValidity();
+    }
+    //@ts-ignore
+    donationOption(option, product) {
+        return h("div", { class: "s-product-options-donation-wrapper" }, option.donation?.can_donate ? [
+            option.donation ?
+                h("div", { key: option.id, class: "s-product-options-donation-progress" }, h("salla-progress-bar", { donation: option.donation }))
+                : '',
+            option.details.length ?
+                [h("h4", { key: option.id }, this.selectAmount), h("div", { key: option.id, class: "s-product-options-donation-options" }, option.details.map((detail, i) => h("div", { key: option.id, class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey(`donation-option-${i}`), type: "radio", name: "donating_option", checked: detail.is_selected, value: detail.additional_price, onChange: e => this.handleDonationOptions(e, detail, 'option') }), h("label", { htmlFor: this.generateUniqueKey(`donation-option-${i}`) }, h("span", { innerHTML: salla.money(detail.name) })))), option.donation?.custom_amount_enabled ?
+                        h("div", { class: "s-product-options-donation-options-item" }, h("input", { id: this.generateUniqueKey("donation-option-custom"), type: "radio", name: "donating_option", value: "custom", onChange: e => this.handleDonationOptions(e, 'custom', 'option') }), h("label", { htmlFor: this.generateUniqueKey("donation-option-custom") }, h("span", null, " ", this.selectDonationAmount, " ")))
+                        : '')] : '',
+            h("div", { key: option.id, class: { "s-product-options-donation-input-group": true, "shown": !option.details.length || (option.details.length && this.isCustomDonation) } }, h("input", { type: "text", id: "donating-amount", name: "donation_amount", class: "s-form-control", ref: el => { this.donationInput = el; }, value: option.details.length
+                    && option.details.some(detail => detail.is_selected)
+                    ? option.details.find(detail => detail.is_selected).additional_price
+                    : option.value,
+                // required
+                placeholder: option.placeholder, onInput: e => this.handleDonationOptions(e, 'custom', 'input'), onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option) }), h("span", { class: "s-product-options-donation-amount-currency" }, salla.config.currency(salla.config.get('user.currency_code')).symbol))
+        ] :
+            this.getExpireDonationMessage(option));
+    }
+    fileUploader(option, additions = null) {
+        return h("salla-file-upload", { ...(additions || {}), "payload-name": "file", value: option.value, "instant-upload": true, name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, height: "120px", onAdded: (e) => this.changedHandler(e, option), url: salla.cart.api.getUploadImageEndpoint(), "form-data": { cart_item_id: this.productId, product_id: this.productId }, onInvalidInput: (e) => this.invalidHandler(e, option), class: { "s-product-options-image-input": true, required: option.required } }, h("div", { class: "s-product-options-filepond-placeholder" }, h("span", { class: "s-product-options-filepond-placeholder-icon", innerHTML: additions.accept?.split(',').every(type => type.includes('image'))
+                ? CameraIcon
+                : FileIcon }), h("p", { class: "s-product-options-filepond-placeholder-text" }, salla.lang.get('common.uploader.drag_and_drop')), h("span", { class: "filepond--label-action" }, salla.lang.get('common.uploader.browse'))));
+    }
+    //@ts-ignore
+    imageOption(option) {
+        return this.fileUploader(option, { accept: 'image/png,image/jpeg,image/jpg,image/gif' });
+    }
+    //@ts-ignore
+    fileOption(option) {
+        const types = option.details.map(detail => this.fileTypes[detail.name]).filter(Boolean);
+        return types?.length
+            ? this.fileUploader(option, { accept: types.join(',') })
+            : 'File types not selected.';
+    }
+    // TODO: (ONLY FOR TESTING!) find a better way to make it testable, e.g. wrap it with a unique class like textOption
+    //@ts-ignore
+    numberOption(option) {
+        return h("input", { type: "text", value: option.value, class: "s-form-control", required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), placeholder: option.placeholder, onBlur: e => this.changedHandler(e, option), onInvalid: (e) => this.invalidHandler(e, option), onInput: e => salla.helpers.inputDigitsOnly(e.target) });
+    }
+    //@ts-ignore
+    splitterOption() {
+        return h("div", { class: "s-product-options-splitter" });
+    }
+    //@ts-ignore
+    textOption(option) {
+        return h("div", { class: "s-product-options-text" }, h("input", { type: "text", value: option.value, maxLength: option?.length, class: 's-form-control', required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onInput: e => this.changedHandler(e, option) }));
+    }
+    //@ts-ignore
+    textareaOption(option) {
+        //todo::remove mt-1 class, and if it's okay to remove the tag itself will be great
+        return h("div", { class: "s-product-options-textarea" }, h("div", { class: "mt-1" }, h("textarea", { rows: 4, value: option.value, maxLength: option?.length, class: "s-form-control", required: !option.visibility_condition && option.required, id: this.generateUniqueKey(option.id.toString()), name: this.generateInputName(option.id), placeholder: option.placeholder, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), onInput: (e) => this.changedHandler(e, option) })));
+    }
+    //@ts-ignore
+    mapOption(option) {
+        return h("salla-map", { zoom: 15, lat: this.getLatLng(option.value, 'lat'), lng: this.getLatLng(option.value, 'lng'), name: this.generateInputName(option.id), searchable: true, required: option.required, onInvalidInput: (e) => this.invalidHandler(e, option), onSelected: e => this.changedHandler(e, option) });
+    }
+    colorPickerOption(option) {
+        return h("salla-color-picker", { onSubmitted: e => this.changedHandler(e, option), name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, onInvalidInput: (e) => this.invalidHandler(e, option), color: option.value });
+    }
+    /**
+     * ============= Date Time options =============
+     */
+    //@ts-ignore
+    timeOption(option) {
+        return h("salla-datetime-picker", { noCalendar: true, enableTime: true, dateFormat: "h:i K", value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), class: "s-product-options-time-element", onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) });
+    }
+    //@ts-ignore
+    dateOption(option) {
+        //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+        return h("div", { class: "s-product-options-date-element" }, h("salla-datetime-picker", { value: option.value, placeholder: option.name, required: !option.visibility_condition && option.required, minDate: new Date(), name: this.generateInputName(option.id), onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    }
+    //@ts-ignore
+    datetimeOption(option) {
+        //todo:: consider date-range @see https://github.com/SallaApp/theme-raed/blob/master/src/assets/js/partials/product-options.js#L8-L23
+        return h("div", { class: "s-product-options-datetime-element" }, h("salla-datetime-picker", { enableTime: true, value: option.value, dateFormat: "Y-m-d G:i:K", placeholder: option.name, required: !option.visibility_condition && option.required, name: this.generateInputName(option.id), maxDate: option.to_date_time, minDate: option.from_date_time, onInvalidInput: (e) => this.invalidHandler(e, option), onPicked: e => this.changedHandler(e, option) }));
+    }
+    /**
+     * ============= Advanced options =============
+     */
+    getOptionDetailName(detail, outOfStock = true, optionType) {
+        let detailName;
+        if (optionType && optionType === DisplayType.COLOR) {
+            detailName = detail.name
+                + ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` <br/> <p> ${this.outOfStockText} </p>` : '')
+                + (detail.additional_price ? ` <p> (${salla.money(detail.additional_price, false)}) </p>` : '');
+        }
+        if (!detailName) {
+            detailName = detail.name
+                + ((outOfStock && this.isOptionDetailOut(detail) && !salla.url.is_page("cart")) && !this.hideOutLabel ? ` - ${this.outOfStockText}` : '')
+                + (detail.additional_price ? ` (${salla.money(detail.additional_price, false)})` : '');
+        }
+        //Some merchants adding price to the names of the options,
+        //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
+        return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
+    }
+    isOptionDetailOut(detail) {
+        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
+            return detail.is_out;
+        }
+        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
+        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
+        if (isDetailSelected && this.selectedOptions.length === 1) {
+            return false;
+        }
+        //if current details has sku in the possible outSkus it's out for sure
+        if (isDetailSelected) {
+            //here we will get the possible outSkus for current selected options
+            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
+            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
+        }
+        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+    }
+    /**
+     * Renders a single input element (radio or checkbox) for an option detail.
+     * @param type - The type of input element ('radio' or 'checkbox').
+     * @param detail - The detail object representing an option detail.
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the input is required based on the option's rules.
+     * @param name - The name attribute for the input element.
+     * @returns HTMLElement - A labeled input element.
+     */
+    renderInput(type, detail, option, isRequired, name, buttonStyle) {
+        const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
+        const isDisabled = this.isOptionDetailOut(detail);
+        return (h("label", { class: {
+                "s-product-options-disabled": isDisabled,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+    }
+    /**
+     * Renders a collection of input elements for all details of an option.
+     * @param type - The type of input elements ('radio' or 'checkbox').
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the inputs are required based on the option's rules.
+     * @returns HTMLElement[] - An array of labeled input elements.
+     */
+    renderOptionDetails(type, option, isRequired, buttonStyle = false) {
+        const baseName = this.generateInputName(option.id);
+        const name = type === 'radio' ? baseName : `${baseName}[]`;
+        return option?.details.map((detail) => this.renderInput(type, detail, option, isRequired, name, buttonStyle));
+    }
+    /**
+     * Renders a dropdown (select) element for a single-option selection.
+     * @param option - The parent option object.
+     * @returns HTMLElement - A select dropdown element with all option details.
+     */
+    renderSelect(option) {
+        return (h("div", null, h("select", { name: this.generateInputName(option.id), required: !option.visibility_condition && option.required, class: "s-form-control", onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }, h("option", { value: "" }, option.placeholder), option?.details.map((detail) => (h("option", { key: detail.id, value: detail.id, disabled: this.canDisabled && this.isOptionDetailOut(detail), selected: detail.is_selected }, this.getOptionDetailName(detail)))))));
+    }
+    /**
+     * Renders a grid-based layout for option inputs (radio or checkbox).
+     * @param type - The type of input elements ('radio' or 'checkbox').
+     * @param option - The parent option object containing the details.
+     * @param isRequired - Indicates if the inputs are required based on the option's rules.
+     * @returns HTMLElement - A grid-based container with input elements.
+     */
+    renderButtonStyle(type, option, isRequired) {
+        return (h("div", { class: "s-product-options-grid-mode" }, this.renderOptionDetails(type, option, isRequired, true)));
+    }
+    /**
+     * Renders a single-option selection, either as a grid or dropdown, based on configuration.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered single-option element.
+     */
+    singleOption(option) {
+        const buttonStyle = this.optionConfig?.['single-option']?.type === 'button';
+        const isRequired = !option.visibility_condition && option.required;
+        return buttonStyle
+            ? this.renderButtonStyle('radio', option, isRequired)
+            : this.renderSelect(option);
+    }
+    /**
+     * Renders a multiple-option selection, either as a grid or list, based on configuration.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered multiple-option element.
+     */
+    multipleOptions(option) {
+        const buttonStyle = this.optionConfig?.['multiple-option']?.type === 'button';
+        const isRequired = option.required &&
+            !option.details.some((detail) => detail.is_selected) &&
+            !option.visibility_condition;
+        return buttonStyle
+            ? this.renderButtonStyle('checkbox', option, isRequired)
+            : (h("div", { class: {
+                    's-product-options-multiple-options-wrapper': true,
+                    required: option.required,
+                } }, this.renderOptionDetails('checkbox', option, isRequired)));
+    }
+    /**
+     * Renders a radio option selection (used for bundle products).
+     * This is essentially the same as single option but with explicit radio handling.
+     * @param option - The parent option object.
+     * @returns HTMLElement - The rendered radio option element.
+     */
+    radioOption(option) {
+        // Radio options behave the same as single options
+        return this.singleOption(option);
+    }
+    //@ts-ignore
+    colorOption(option) {
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`) }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+    }
+    //@ts-ignore
+    thumbnailOption(option) {
+        return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
+            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: IconVerified, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+                [
+                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                ]
+                : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
+        }));
+    }
+    // Digital card options
+    digitalCardValuesOption(option) {
+        return h("div", { class: "s-product-options-digital-card-wrapper" }, this.availableDigitalCardValues.length > 0 ? this.availableDigitalCardValues.map((detail) => {
+            const id = String(detail.id);
+            return h("label", { htmlFor: this.generateUniqueKey(id.toString()), key: id, class: "s-product-options-digital-card-option" }, h("input", { type: "radio", "data-code-value": true, class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), id: this.generateUniqueKey(id.toString()), required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), ...(!this.ignoreDefaultCardValue ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("span", null, detail.name, " ", salla.config?.currency()?.symbol));
+        })
+            : h("div", { class: "s-product-options-digital-card-out-of-stock" }));
+    }
+    countryOption(option) {
+        return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: 'lazy', alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg` }), h("span", null, detail.name));
+        }));
+    }
+    get host() { return getElement(this); }
+};
+SallaProductOptions.style = sallaProductOptionsCss;
+
 var PencilRuler = `<!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>pencil-ruler</title>
@@ -6406,11 +8379,11 @@ const SallaProductSizeGuide = class {
         return h("salla-placeholder", { alignment: "center", iconSize: "xl" }, h("div", { slot: "title" }, this.placeholder_title), h("div", { slot: "description" }, this.placeholder_description));
     }
     render() {
-        return (h("salla-modal", { key: 'e92e648a22d686acde12a13c08335ed3a601e5d0', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '6131b840918392e03dc9011b7c23e81cb4b9ff36', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '7d7a998886ae6db08057825eae7b2835f73a8ae4', slot: "loading" }, h("div", { key: '518a9e510085c13c9361f656eb26dcec8ae8455d', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '65a92119d1b5f9462dd826a838ee6042075d406a', height: '15px', width: '25%' }), h("div", { key: '3cb1034e05756d34d0e9e41a2d4e8f4bd6d925bd', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: 'c66e517e8186c83c5bc847a4df87fab31c7f7dbb', height: '40px' }), h("salla-skeleton", { key: '263ae7fde377e75a56d8aa37e814882ac0e9e772', height: '40px' }), h("salla-skeleton", { key: '9f226f26ab6eb1b36cde6cbaedb669d4c034f0a9', height: '40px' }), h("salla-skeleton", { key: 'b5ade5bbaa60f330944c2e868bb9032ef3697bed', height: '40px' })), h("div", { key: 'c0f1d73376efcce4b32fc268c297755c2fc4124e', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: 'd3bc5ffef7ca7b2b46b3a320706fa9f82caf9eed', height: '15px', width: '25%' }), h("salla-skeleton", { key: 'f4a9872abfd909796239032757ee0f24f17fb079', height: '10px', width: '75%' }), h("salla-skeleton", { key: '92f22b9609c9a828c88035edf4b5e765fb5040de', height: '10px', width: '50%' }), h("salla-skeleton", { key: '58c7dc5c2f70ed6454b0f41c21bdf245fe412be3', height: '10px', width: '75%' }), h("salla-skeleton", { key: 'b6a6d2585848f125533614c7bbd741bf30121cc3', height: '10px', width: '100%' }), h("salla-skeleton", { key: '271c7052e3b23d4876c65fa5427ace8b47fd26d9', height: '10px', width: '25%' }), h("salla-skeleton", { key: 'b0618e943218f639eb0be368098f8903fecd939f', height: '10px', width: '60%' }), h("salla-skeleton", { key: 'b4e86e51443897ba56a594be2e92c2dbb53f9a9b', height: '10px', width: '45%' }), h("salla-skeleton", { key: '79e8eb1ed011e9fa22b569eda7be7e50135bef7e', height: '10px', width: '30%' })))), h("slot", { key: '62425e2436d2fee89c66e4b3ea66752bbc407616', name: "header" }), !this.hasError && !!this.guides ?
+        return (h("salla-modal", { key: 'f80606d8b6e1e950c87209ca4e195c92f70dc341', class: "s-product-size-guide-wrapper", id: 'salla-product-size-guide-modal', isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("span", { key: '245688c24b70279566b0f7c51c7bf924ca5196c0', slot: 'icon', class: "s-product-size-guide-header-icon", innerHTML: PencilRuler }), h("div", { key: '9dc9b4aa8dea0599dbc78f5821e36bc4c600c6aa', slot: "loading" }, h("div", { key: 'fca84d9c2c5fa20ac446270c1c68c4ccda16dd77', class: "s-product-size-guide-skeleton" }, h("salla-skeleton", { key: '0f036371c9b42314beb4e2c1f308a99e2b068ab8', height: '15px', width: '25%' }), h("div", { key: 'a9059b864fddf26b6e15869cab013e793966907e', class: "s-product-size-guide-skeleton-header" }, h("salla-skeleton", { key: '34e188b1ff7e0b5e24df84d1b14df2b2255fc9eb', height: '40px' }), h("salla-skeleton", { key: '38653491fd73cf4d66cb87658b8121f88130e52e', height: '40px' }), h("salla-skeleton", { key: 'a8c3b3cc039fbbb8796c611f4485d889c94e632a', height: '40px' }), h("salla-skeleton", { key: '2de2d63a1a56a58f7f1bef92c46843683528ee1a', height: '40px' })), h("div", { key: 'cf0b08cb85830fcec4dd82140c89b6d009e1bc74', class: "s-product-size-guide-skeleton-content" }, h("salla-skeleton", { key: '402ed4292bb79e839316440ed985b1caed102602', height: '15px', width: '25%' }), h("salla-skeleton", { key: '88f0019d79ea72ef7748a5c04b7a8364c1160b92', height: '10px', width: '75%' }), h("salla-skeleton", { key: '10d7879c306d7185092c9e9aa0d407d2bb57519e', height: '10px', width: '50%' }), h("salla-skeleton", { key: '7b2d00c4c8000083b79d93466ed07828d61b6fbd', height: '10px', width: '75%' }), h("salla-skeleton", { key: '5d33b9848d9bccf34bb5f4a93ad99889fe1ee69f', height: '10px', width: '100%' }), h("salla-skeleton", { key: '6e49c074a8611a819814d17829466b983a419196', height: '10px', width: '25%' }), h("salla-skeleton", { key: '0fb70ed844efeda0d3c2ba348e14d1469a7b279b', height: '10px', width: '60%' }), h("salla-skeleton", { key: '5e55cb90aba76662377efccfef4a84fe0f64c341', height: '10px', width: '45%' }), h("salla-skeleton", { key: '058b96e3db12454ddfced543d6ecbdf0c38ac3dd', height: '10px', width: '30%' })))), h("slot", { key: 'e9eef25bce60cbb1dd48b3d8bc1ebda2305acda0', name: "header" }), !this.hasError && !!this.guides ?
             [
                 h("salla-tabs", null, this.guides.map((guide) => h("salla-tab-header", { slot: "header", name: guide.name }, h("span", null, guide.name))), this.guides.map((guide) => h("salla-tab-content", { slot: "content", name: guide.name }, h("div", { innerHTML: guide.description }))))
             ]
-            : this.showPlaceholder(), h("slot", { key: '6c939d70100e2353436e962d9bd5a9c5f59788e5', name: "footer" })));
+            : this.showPlaceholder(), h("slot", { key: '6b8bebc72d4a7baea765b1e5a6d4a81862206f94', name: "footer" })));
     }
     get host() { return getElement(this); }
 };
@@ -7403,7 +9376,7 @@ const SallaQuantityInput = class {
         return this.host;
     }
     render() {
-        return (h(Host, { key: '3d641a0813512c3ff22e32275dfd709df934e1f1', class: "s-quantity-input" }, h("div", { key: '2682491a551bcff31f07904566f3a2331d3c0240', class: "s-quantity-input-container" }, h("button", { key: '3b5b2551624628dfb98a41a4a1984749290b9c3c', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: plusIcon }) : '', h("slot", { key: 'a1263ebcd7fa9fdb5b347e6eef3fe339bae6581a', name: "increment-button" })), h("input", { key: '7e91e2e4d26ee97bca0435351d68f4f456245429', class: "s-quantity-input-input", ...this.getInputAttributes(), ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity }), h("button", { key: '247d8b99d613ef6117f40685f5f0b899cde19102', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: minusIcon }) : '', h("slot", { key: 'f59b44ec67c071f36a4885728d5095a2a8e01d85', name: "decrement-button" })))));
+        return (h(Host, { key: '5627ef48310739dc0a112c9c214f78bae9b71bca', class: "s-quantity-input" }, h("div", { key: '50040d9cd5bbf38d06d6a13f17a1b4d756f5285d', class: "s-quantity-input-container" }, h("button", { key: '334c465e2ac46c3b88e3f89ae3b0754dc3741f69', onClick: () => this.increase(), class: "s-quantity-input-increase-button s-quantity-input-button", type: "button" }, !this.hasIncrementSlot ? h("span", { innerHTML: Add }) : '', h("slot", { key: '9f41e975e7c47f4cbc3e97dd3f8591b633d9da29', name: "increment-button" })), h("input", { key: '6f5bfdeb1804cf98a13f12b966e5fa6582e39557', class: "s-quantity-input-input", ...this.getInputAttributes(), ref: (el) => this.textInput = el, onInput: (event) => this.setValue(event.target.value), min: "1", value: this.quantity }), h("button", { key: '583f5edb96bc5a368851eadb5940d79b7afed3be', class: "s-quantity-input-decrease-button s-quantity-input-button", onClick: () => this.decrease(), type: "button" }, !this.hasDecrementSlot ? h("span", { innerHTML: Minus }) : '', h("slot", { key: '8726d4d616dd6f4fd1348312d3a9c24bf9268146', name: "decrement-button" })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -8303,7 +10276,7 @@ const SallaQuickBuy = class {
         });
     }
     render() {
-        return h(Host, { key: 'd414f6376a893152dd956ab05e8d6149dfa02923' }, this.quickBuyButton());
+        return h(Host, { key: '46c3a8b699f4390166d027a0eb2d34451a1dd6f1' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla.config.get('user.language_code'), onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });
@@ -9351,7 +11324,7 @@ const SallaScopees = class {
         return salla.onReady();
     }
     render() {
-        return (h(Host, { key: '23748ef5243efc8a5ff9070043ddc507fe817fad' }, h("salla-modal", { key: '3ccb5b554df266e49d4f774e26dd7306dce9b249', ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: this.loading, "has-skeleton": true }, this.loading ?
+        return (h(Host, { key: '42ac0a93262d5a6bdd602b97fa636b70c2269635' }, h("salla-modal", { key: '632eca8b8faa74fd990bc5c024befa11d461568f', ref: modal => this.modal = modal, isClosable: !!(this.isOpenedBefore || (this.selection == 'optional')), class: "s-scopes-modal", isLoading: this.loading, "has-skeleton": true }, this.loading ?
             h("div", { slot: "loading" }, h("div", { class: "s-scopes-skeleton" }, h("salla-list-tile", { class: "s-scopes-header" }, h("div", { slot: "icon", class: "s-scopes-header-icon" }, h("salla-skeleton", { type: "circle" })), h("div", { slot: "title", class: "s-scopes-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-scopes-skeleton-search" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '30px', width: '100%' })), h("div", { class: "s-scopes-skeleton-scopes" }, h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-scopes-skeleton-btn" }, h("salla-skeleton", { height: '40px', width: '100%' }))))
             :
                 [h("salla-list-tile", { class: this.originalScopesList?.length ? "s-scopes-header block" : "s-hidden" }, h("div", { slot: "icon", class: "s-scopes-header-icon", innerHTML: StoreAlt }), h("div", { slot: "title", class: "s-scopes-header-title" }, salla.lang.get('blocks.scope.you_are_browse_store_from')), h("div", { slot: "subtitle", class: "s-scopes-header-subtitle" }, !!this.selected_scope ? this.selected_scope.name : "")), h("div", { class: "s-scopes-wrap" }, !!this.originalScopesList?.length && h("h4", { class: "s-scopes-title" }, this.getFormTitle()), this.originalScopesList?.length > this.searchDisplayLimit ?
@@ -9485,12 +11458,12 @@ const SallaSearch = class {
         this.inputValue.length < 3 ? this.container.classList.remove('s-search-no-results') : '';
     }
     render() {
-        const searchContent = h("div", { key: 'ed22d66e43268e8024639db4b3bdfdc78663c162', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("div", { key: '3e6ed06c2a056d6fa6e5f18d03225a2a6eb3bd91', class: "s-search-input-wrapper" }, h("span", { key: '50fe2fd917b7f53d97c4178de03a9b460de53e50', class: "s-search-icon-wrap" }, h("span", { key: 'df7ed0c94180ee796f1634608f0e6984ccbac15c', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: '73f564326eec5d12631b7855d853dd229fa00797', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), this.showAction ?
-            h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search })) : null), h("div", { key: 'c8cdfa1f5d102392144389f81639d6c92f8caea5', class: "s-search-results" }, this.results?.data.map((product) => h("a", { href: product.url + '?from=search-bar', class: { "s-search-product": true, 's-search-product-not-available': !product.is_available }, innerHTML: this.productSlot
+        const searchContent = h("div", { key: 'fe1ad73a7d7cdc9bfacb43e5c8f1b2d2c5983f9e', class: { 's-search-container': true, 's-search-inline': this.inline }, ref: container => this.container = container }, h("div", { key: 'df9c5af32950d9fc1ec30f46054630244fd2e2c1', class: "s-search-input-wrapper" }, h("span", { key: 'f4c1788bcd50992364e52388e425cc19c0906ec5', class: "s-search-icon-wrap" }, h("span", { key: 'a46da8c6f02e4970c903dc73d3d4a4e107a543f4', class: "s-search-icon", innerHTML: this.loading ? '<i class="s-search-spinner-loader"/>' : Search })), h("input", { key: 'af5fff2641e6416f06c51c01e19e007c6ff43e32', type: "search", enterkeyhint: "search", autocomplete: "off", class: "s-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder'), onInput: (e) => this.limitWordsAndSearch(e), onKeyDown: e => this.handleKeyDown(e), ref: input => this.searchInput = input, style: { height: this.height + 'px', borderRadius: this.oval ? this.height / 2 + 'px' : '' } }), this.showAction ?
+            h("salla-button", { loading: this.loading, class: { 's-search-action': true, 's-search-action-oval': this.oval }, onClick: () => this.handleActionClick() }, !this.loading && h("span", { innerHTML: Search })) : null), h("div", { key: 'e742cf41fdf23b37a46324df3bac24abc2c9bf03', class: "s-search-results" }, this.results?.data.map((product) => h("a", { href: product.url + '?from=search-bar', class: { "s-search-product": true, 's-search-product-not-available': !product.is_available }, innerHTML: this.productSlot
                 .replace(/\{name\}/g, product.name)
                 .replace(/\{price\}/g, product.price ? salla.money(product.price) : '')
                 .replace(/\{regular_price\}/g, product.is_on_sale && product.regular_price ? salla.money(product.regular_price) : '')
-                .replace(/\{image\}/g, product.image.url) })), h("p", { key: '7daf87c934b2fce3555755b1d326e3486e6a2bc2', ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options'))));
+                .replace(/\{image\}/g, product.image.url) })), h("p", { key: 'bea643f12fa014f6df1dee41a1a8ee8c41022458', ref: el => this.noResults = el, class: "s-search-no-results-placeholder" }, salla.lang.get('common.elements.no_options'))));
         return (this.inline ?
             h("div", { class: "s-search-modal" }, searchContent)
             :
@@ -9533,7 +11506,7 @@ const SallaSkeleton = class {
             's-skeleton-item': true,
             's-skeleton-item-circular': this.type == 'circle',
         };
-        return (h(Host, { key: 'f57ae59c20db39c4c9c47f777d229768071e2553', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: '0214a933f54acfd816f3cf1c510374c918469c5e', class: classes }, "\u00A0")));
+        return (h(Host, { key: 'df1344797b9cbe42331625a2a1f432e07d6bd9ef', class: "s-skeleton-wrapper", style: { width: this.width, height: this.height } }, h("div", { key: 'b56611551bb2b2bcb02b46240e30f88e2ea7aea5', class: classes }, "\u00A0")));
     }
 };
 SallaSkeleton.style = sallaSkeletonCss;
@@ -10056,7 +12029,7 @@ const SallaSlider = class {
         classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
         classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
         classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
-        return (h(Host, { key: '4a67b5352343cab0fbb561dcca27099788f77a84', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
+        return (h(Host, { key: '85e91dde02b7f32655d0ac10e5abb7f9e49d7157', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
             h("div", { class: "s-slider-block__title" }, this.blockTitle ?
                 h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
                 : '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
@@ -10064,7 +12037,7 @@ const SallaSlider = class {
                 : '', this.showControls ?
                 h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
                 : ''))
-            : '', h("div", { key: '11b3fa33b29dea07b0247e5b7766456cbf117d05', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: 'c68c8acdbe1d303646ccc073d5b91e462d74e26c' }), h("div", { key: '54af02e80b0bfc4a79b0ab73ae8a9958c7b86aad', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '1accf846e01f53d5e75de3c826439694ada42654', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
+            : '', h("div", { key: '8842ac56011138fd8456257bff568919c9ce8867', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '17fb40e69031d4c329df9d00fb75443d0ff9ba0c' }), h("div", { key: 'b8f42b180a271b4a873d99024251705e9d76adde', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '82ef4871810000d0b65a24518c6613a6484a2ee9', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
             h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowRightIcon : ArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? ArrowLeftIcon : ArrowRightIcon })))
             : null))
             : null));
@@ -10227,7 +12200,7 @@ const SallaSocialShare = class {
         window.a2a?.init('page');
     }
     render() {
-        return (h("div", { key: 'f703a0c531e8f32ebe62eeb256e02aec9786af47', class: "s-social-share-wrapper" }, h("slot", { key: '436168a40db719e5420b4b8bf031b41e1e91cebd', name: 'widget' }, h("salla-button", { key: '989e61a4921dc71c5d53a67bad18dc97861033cb', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: '43b7e5a81fba6d333cc2eed13c3b33b43c368ede', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: 'cfc2002270e46848897820493e8968296b4d5c73', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
+        return (h("div", { key: 'e104cbf1051f36e7d1055a96b8d42e0f38b70f21', class: "s-social-share-wrapper" }, h("slot", { key: '8519676943448a6b87b1b3df8dd74b78de72aeb9', name: 'widget' }, h("salla-button", { key: '0be8b0bf52f046f6818b530430ce1e636fcd36c2', "aria-label": "Share", onClick: () => this.open(), class: "s-social-share-btn", shape: "icon", fill: "outline", color: "light" }, h("span", { key: 'e637247fec7fd1a0235a410ca3e28fb4e7eff7f3', innerHTML: this.opened ? Cancel : ShareAlt }))), h("ul", { key: '8a378bac1865b26744ad31e6bf7218174b24bdd6', ref: el => this.shareMenu = el, class: "s-social-share-list a2a_kit share", "data-a2a-url": this.url ? this.url : window.location.href, "data-a2a-title": this.urlName ? this.urlName : document.title }, this.platforms.split(',').map(platform => {
             return (h("li", null, h("a", { class: `a2a_button_${platform}`, "aria-label": `Share Via ${platform}` }, this.platformIcons.map((icon) => {
                 if (icon.name === platform) {
                     return h("span", { class: "s-social-share-icon", innerHTML: icon.icon });
@@ -10266,7 +12239,7 @@ const SallaTabContent = class {
             's-tabs-content': true,
             's-tabs-content-selected': this.isSelected
         };
-        return (h("div", { key: '3ee7e5310346f97ec784201a91b361e5a3e4859e', class: classes }, h("slot", { key: '17cc2a1a57a1f810a0e79f20b54219794261531d' })));
+        return (h("div", { key: '571a30d15d890516a1382ed25239df46de519a12', class: classes }, h("slot", { key: '4ceb77d0d6fb15f28e1bb51ec842b7a658ccc160' })));
     }
 };
 SallaTabContent.style = sallaTabContentCss;
@@ -10325,7 +12298,7 @@ const SallaTabHeader = class {
             's-tabs-active': this.isSelected,
         };
         return [
-            h("div", { key: 'bbb66a75e32a9c74faadc608312e71dc6a4cf883', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '1ad07528ca5cfe1d884f6d66b998f03d604b58be' })),
+            h("div", { key: '01eec3d799fd24f75ee29e65447e166057aed846', class: classes, onClick: this.onClick.bind(this) }, h("slot", { key: '200d5e89d7bf9cf232c997fa14c0384be65001c1' })),
         ];
     }
 };
@@ -10378,7 +12351,7 @@ const SallaTabs = class {
     }
     render() {
         return [
-            h("div", { key: '8dc8b3cb7504674924893dee116762971c7d5067', class: "s-tabs" }, h("div", { key: 'd0fd3fcb154190f5312a0c9bad2c35ac29a43e68', class: "s-tabs-header" }, h("slot", { key: '3dc2441bfa5e6e28aa75aeafd2adf8715e1a365b', name: "header" })), h("div", { key: '4ca8ed7f4a79067ca93ca007c7a186af81895df4', class: "s-tabs-content-wrapper" }, h("slot", { key: '4420b1d34b518aec52081d7548f0f08a771723ae', name: "content" })))
+            h("div", { key: '11dca6efd64c797274f2b71aa10426fbdf08d351', class: "s-tabs" }, h("div", { key: '9afd9c6a09728218cddc084c77f417d0249bdfd9', class: "s-tabs-header" }, h("slot", { key: 'eef1f2faed6b440c592e51f6d1205e140584b070', name: "header" })), h("div", { key: 'adb5bd9c1af2ba78c173eb3fbd5c73c0513ccca5', class: "s-tabs-content-wrapper" }, h("slot", { key: 'db9eaa79d095ef71fb1df1ab96ddbb925ec59b40', name: "content" })))
         ];
     }
     get host() { return getElement(this); }
@@ -10396,7 +12369,7 @@ const SallaTelInput = class {
         if (this.TelInput)
             return;
         try {
-            const telInputModule = await import('./index-xiIpq8fU.js').then(function (n) { return n.i; });
+            const telInputModule = await import('./index-CqLymITv.js').then(function (n) { return n.i; });
             this.TelInput = telInputModule.default;
         }
         catch (error) {
@@ -10510,7 +12483,7 @@ const SallaTelInput = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c8a5c0fd6702fe7968d26f04b3beb7c1a70fdcc9', class: "s-tel-input" }, h("input", { key: 'f6b7999ae89730a279b4633b2d58b0233c334529', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '2b11eea555721ef80f221e1cdb515a39f375e85d', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '34e00270110cc7d3119f3804ee1251204ebebf76', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
+        return (h(Host, { key: '8dae2336c70ca8da12846544c99eff5150ee3197', class: "s-tel-input" }, h("input", { key: '6512ba297a7f1e85f3e6b1a6ba7634c16e57116c', type: "tel", disabled: this.disabled, name: this.name, value: this.phone, onChange: (event) => this.handleCountryInput(event), ref: el => this.phoneInput = el, enterkeyhint: "next", autocomplete: "tel", class: "s-tel-input-control tel-input s-ltr" }), h("span", { key: '92def9152e10e06c390e8333048095dcc7613867', class: "s-tel-input-error-msg", ref: el => this.errorMsg = el }), h("input", { key: '0a77d8be70d5f9a1e8ac75e444537f0f45fa76d0', type: "hidden", name: "country_code", value: this.countryCode, ref: el => this.countryCodeInput = el, class: "country_code" })));
     }
     componentDidLoad() {
         this.initTelInput();
@@ -11031,9 +13004,9 @@ const SallaUserSettings = class {
         await salla.profile.delete().finally(() => this.confirmationModal.close());
     }
     render() {
-        return (h(Host, { key: 'e2a43eab43c09743d9a09150d7a64c482efd67db', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: '45465d04e01b989d6f41b9685024049f11d2fd8a', class: "s-user-settings-section" }, h("salla-list-tile", { key: '2d83d6a6596ca9762e03a4dd2ca828f1da7f9cfe' }, h("div", { key: 'ca2d8bad47b2cf27db0dba50f634f87374e9c4d0', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '64287554ed3f04a33f4723559bd16e23356062b2', innerHTML: UserCancel })), h("div", { key: '27011d331cd1193ffc395f61cafacf7afe6cbb37', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: 'b2b2e1742fb28936f5d43ef2159fd53379979416', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: 'd507501fa28045aa1c7f1b45f1e8492ab11eac41', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '489444d6e9b8000786d652a653924d5487c70354', class: "s-toggle" }, h("input", { key: '6d975b0f59ef4bfce0387ab4bbeaac1d9199df2b', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: '99565e81c6b0110b0285758ff965dadb1343141d', class: "s-toggle-switcher" }))))), h("div", { key: '95c0375df02bfcf7e06cd8c82d9726c183f3cef2', class: "s-user-settings-section" }, h("salla-list-tile", { key: 'cdf765d2e4e5f435dc686ac41d3298f5f5d3f094' }, h("div", { key: '2c9350a1133f1ceb2e4798dc76a2600fc57b51a2', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: 'ac1a7244eebcf93b288cd8956c404e7e8206917a', innerHTML: Bullhorn })), h("div", { key: '033ad646a6c029932c9379e48aa03c11c4cc8ea7', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '6d6a1ae66fe36fd2e61b2b5710c1c1a5d785ed7a', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: 'bcf12b68bd7496987e49e84d1463a1f4989c36f4', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'ab49963ae12febd07aafbc5fa33c9cc60200401c', class: "s-toggle" }, h("input", { key: '609ab1d90393a3a6a373b839b04872fd19d9af13', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: 'fc1f9253bb35bd381cb679b61455f114082a66dc', class: "s-toggle-switcher" }))))), h("div", { key: '61874f78bca3a4f54b4ae800542d9ee8a1afb4df', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '9f3b044f7774f214352eca4785d45eb84a6ee925' }, h("div", { key: '07e1e08c91bad01e8bd1e5b3d8ed5bbf27a6e536', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '918cf7358bc7c0d557b2d2d122335c67c0e7184f', innerHTML: UserOff })), h("div", { key: '0bf7e274d07bec1362f2d1a7ed238d15a6df64da', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: 'c044d814f1eab0b9bfe6afd1d9da7e672ad174e9', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: '3ba1645cd3cf24055ff300caaa028c03cdbbf014', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'e4af99b286ba09b9ad7a9e65109dd5ebc72cd5ec', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: 'bb3617bb5fffb7496e4b065ff7d9e3ecf081d39a', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '8c4a70b37dd3f98247a05a6fa2e12bbbda4208f5', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: '58e944af7537c91682b17f8dfa6e698ed8b4d21b', class: "s-user-settings-confirmation" }, h("div", { key: 'f1cb7420866f3c38c6484313636d71f2207942d0', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '8e712ea0c6211cba24a6a32c4e9871b37ddfa30e', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '319bb44f97b4ad48a82a94973e470819624985cf', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'bc127d4956ab62b24b0c79e672375a2c2274f351', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
+        return (h(Host, { key: '85b2fe2739f6ac3c55939d3cb9c87fc404413e7f', class: "s-user-settings-wrapper" }, this.canHideName && h("div", { key: 'e46be8b9cb4898c9b676ee67f0750bb654bda953', class: "s-user-settings-section" }, h("salla-list-tile", { key: '48f81d5a9b511c2a8baabab2aab6ad3dcfb98370' }, h("div", { key: '9009c4d612aea7e7a6834b90f38d03d8c95bcc84', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '03f209e6e1e1adbdb130f9b80aed30f0618dd58c', innerHTML: UserCancel })), h("div", { key: 'fb02ca2387806135ac3f074f0a9f30ce4bb325ca', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.hideMyName)), h("div", { key: '1ddbd1144a59745bf26f4650eb5d050a34d42e8f', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.hideMyNameDesc)), h("div", { key: '0ff6163a407a53ff100c8d3235212c167dbb006a', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: '03b817a0bea880c9a2e056d4d8f0fb737dc0e5da', class: "s-toggle" }, h("input", { key: 'fcb56427c6d1ae503abdc768358e9ecfa9139dac', class: "s-toggle-input", checked: this.isHiddenName, onChange: (e) => this.toggleSetting('is_hidden_name', e), type: "checkbox" }), h("div", { key: 'ff312279ede50b86446d1305217053942d05a603', class: "s-toggle-switcher" }))))), h("div", { key: '08cf0045a6f96ae7046d9a7c640e53a5b2cec7dc', class: "s-user-settings-section" }, h("salla-list-tile", { key: '1ccbcd93cf4cef91693603b5b05dbc4f3b85dc65' }, h("div", { key: 'bf5270f2d2cae798463ab9516c11321e96c461ff', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '3bc3927296faa253a8b91710049eca3372fb24aa', innerHTML: Bullhorn })), h("div", { key: '60ddca373590545a7fd03498e4ff7306a23b05a9', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.promotionalMsgs)), h("div", { key: '874e81d5e4727160a85bb3381fdfadcd65e774c0', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.promotionalMsgsDesc)), h("div", { key: '6d2aacf7a72c4d25163913eccbb0a3e94595ec75', slot: 'action', class: "s-user-settings-section-action" }, h("label", { key: 'cf58459624592b34083afe61a0afc29dea03864e', class: "s-toggle" }, h("input", { key: 'b854ce4ca8224c8200623aad0dea4c659d89dee1', class: "s-toggle-input", checked: this.isNotifiable, onChange: (e) => this.toggleSetting('is_notifiable', e), type: "checkbox" }), h("div", { key: '785a5765e36056629a23ca53e48715f91c14ee1f', class: "s-toggle-switcher" }))))), h("div", { key: '9f58724a8d748809b39874efaa861643a78076eb', class: "s-user-settings-section s-user-settings-section-deactivate-user" }, h("salla-list-tile", { key: '12a69027f2822b6fa1e8fb641278932fc2206335' }, h("div", { key: '679eec74598612167c77443e5f6977991b333fd7', slot: "icon", class: "s-user-settings-section-icon" }, h("span", { key: '0263f8f31ad3e4ca60f2bb4bae910c143f2d36a8', innerHTML: UserOff })), h("div", { key: '6c0c17dfbcbb48ae3882b07b58fb0d1245a28cdb', slot: "title", class: "s-user-settings-section-title" }, this.capitalizeText(this.deactivateAccount)), h("div", { key: '07389c3b86b3d8e821b8b9c33cf43de1ee6527db', slot: "subtitle", class: "s-user-settings-section-subtitle" }, this.capitalizeText(this.deactivateDesc)), h("div", { key: 'e98736162d465c0717550eb8231b120acfafc4f6', slot: 'action', class: "s-user-settings-section-action" }, h("salla-button", { key: 'd29c5023b3a35f95c94a06dc87f0e2504b3a6390', fill: "outline", color: "danger", shape: "btn", size: "medium", width: "normal", onClick: () => this.openDeactivateModal() }, this.capitalizeText(this.deactivateAccount))))), h("salla-modal", { key: '6f23ca61fe62de261e7d2f616a4d5bf13fba1577', width: "sm", subTitle: this.capitalizeText(this.sorryForLeavingText), ref: modal => this.confirmationModal = modal }, h("span", { key: '89073dfc15d4a1349618180c776968012e843556', slot: 'icon', class: "s-user-settings-confirmation-icon", innerHTML: UserOff }), h("div", { key: 'f464a56ab783c4ddd51cc40e4d4dbf2f4ae21be2', class: "s-user-settings-confirmation" }, h("div", { key: 'e9921faaf8718ba51937006360b11d409bde4e05', class: "s-user-settings-confirmation-warning" }, this.capitalizeText(this.warningText)), h("div", { key: '4a71df323e6fa2b86cb85e77af438a51e9c1c5a9', class: "s-user-settings-confirmation-actions" }, h("salla-button", { key: '156249d17bdcc25b7c586af416001ec60e8b0f5b', width: "wide", onClick: () => this.confirmationModal.close() }, this.capitalizeText(this.keepAccount)), h("salla-button", { key: 'acbe44c04f77f8ccdcaeb90bfb731de399f88fc7', fill: 'outline', loading: this.buttonLoading, width: "wide", onClick: () => this.deleteAccount() }, this.capitalizeText(this.deactivateAccount)))))));
     }
 };
 SallaUserSettings.style = sallaUserSettingsCss;
 
-export { SallaAddProductButton as salla_add_product_button, SallaAlert as salla_alert, SallaBottomAlert as salla_bottom_alert, SallaBreadcrumb as salla_breadcrumb, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaCommentItem as salla_comment_item, SallaComments as salla_comments, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaDrawer as salla_drawer, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaMenu as salla_menu, SallaModal as salla_modal, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductSizeGuide as salla_product_size_guide, SallaProductsList as salla_products_list, SallaProductsSlider as salla_products_slider, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaReviewsSummary as salla_reviews_summary, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSlider as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserProfile as salla_user_profile, SallaUserSettings as salla_user_settings };
+export { SallaAccordion as salla_accordion, SallaAccordionBody as salla_accordion_body, SallaAccordionHead as salla_accordion_head, SallaAddProductButton as salla_add_product_button, SallaAlert as salla_alert, SallaBookingField as salla_booking_field, SallaBottomAlert as salla_bottom_alert, SallaBreadcrumb as salla_breadcrumb, SallaButton as salla_button, SallaCartSummary as salla_cart_summary, SallaColorPicker as salla_color_picker, SallaCommentForm as salla_comment_form, SallaCommentItem as salla_comment_item, SallaComments as salla_comments, SallaConditionalFields as salla_conditional_fields, SallaCountDown as salla_count_down, SallaDatetimePicker as salla_datetime_picker, SallaDrawer as salla_drawer, SallaFileUpload as salla_file_upload, SallaGifting as salla_gifting, SallaInfiniteScroll as salla_infinite_scroll, SallaListTile as salla_list_tile, SallaLoading as salla_loading, SallaLocalizationModal as salla_localization_modal, SallaLoginModal as salla_login_modal, SallaLoyalty as salla_loyalty, SallaMaintenanceAlert as salla_maintenance_alert, SallaMap as salla_map, SallaMenu as salla_menu, SallaModal as salla_modal, SallaMultipleBundleProduct as salla_multiple_bundle_product, SallaMultipleBundleProductCart as salla_multiple_bundle_product_cart, SallaMultipleBundleProductDetails as salla_multiple_bundle_product_details, SallaMultipleBundleProductOptionsModal as salla_multiple_bundle_product_options_modal, SallaMultipleBundleProductSlider as salla_multiple_bundle_product_slider, SallaOfferModal as salla_offer_modal, SallaPlaceholder as salla_placeholder, SallaProductAvailability as salla_product_availability, SallaProductCard as salla_product_card, SallaProductOptions as salla_product_options, SallaProductSizeGuide as salla_product_size_guide, SallaProductsList as salla_products_list, SallaProductsSlider as salla_products_slider, SallaProgressBar as salla_progress_bar, SallaQuantityInput as salla_quantity_input, SallaQuickBuy as salla_quick_buy, SallaQuickOrder as salla_quick_order, SallaRatingModal as salla_rating_modal, SallaRatingStars as salla_rating_stars, SallaReviewsSummary as salla_reviews_summary, SallaScopees as salla_scopes, SallaSearch as salla_search, SallaSkeleton as salla_skeleton, SallaSlider as salla_slider, SallaSocialShare as salla_social_share, SallaTabContent as salla_tab_content, SallaTabHeader as salla_tab_header, SallaTabs as salla_tabs, SallaTelInput as salla_tel_input, SallaUserMenu as salla_user_menu, SallaUserProfile as salla_user_profile, SallaUserSettings as salla_user_settings };