@salla.sa/twilight-components 2.14.353 → 2.14.354

package/dist/esm/salla-loyalty.entry.js

@@ -0,0 +1,209 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h } from './index-B74h9G6a.js';
+import { S as Star } from './star2-D4oPi1Ov.js';
+import { C as Cancel } from './cancel-BsLF_HK7.js';
+
+var Star3 = `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80">
+<title>star3</title>
+  <defs>
+    <style>
+      .a {
+        fill: none !important;
+      }
+
+      .b {
+        fill: #ff9e01;
+      }
+
+      .c {
+        fill: #fff;
+        opacity: 0.1;
+      }
+
+    </style>
+  </defs>
+  <g transform="translate(-683 -269)">
+    <rect class="a" width="80" height="80" transform="translate(683 269)" />
+    <g transform="translate(684.539 261.216)">
+      <path class="b"
+        d="M110.117,37.062,90.024,35.2,82.043,16.665a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l17.351-10.3,17.351,10.3a1.61,1.61,0,0,0,2.393-1.739L95.871,53.192l15.16-13.318A1.61,1.61,0,0,0,110.117,37.062Z"
+        transform="translate(-42.104 -4.011)" />
+      <g transform="translate(0 10.971)">
+        <path class="b"
+          d="M93.54,12.016c1.024,1.423,3.915,7.533,5.568,11.094a.559.559,0,0,1-.891.641c-2.853-2.7-7.73-7.377-8.754-8.8a2.512,2.512,0,0,1,4.077-2.935Z"
+          transform="translate(-75.621 -10.971)" />
+        <path class="b"
+          d="M360.909,12.016c-1.024,1.423-3.915,7.533-5.568,11.094a.559.559,0,0,0,.891.641c2.853-2.7,7.73-7.377,8.754-8.8a2.512,2.512,0,0,0-4.077-2.935Z"
+          transform="translate(-301.908 -10.971)" />
+        <path class="b"
+          d="M427.538,284.659c-1.667-.543-8.366-1.441-12.261-1.934a.559.559,0,0,0-.34,1.044c3.436,1.9,9.377,5.123,11.044,5.666a2.512,2.512,0,0,0,1.558-4.776Z"
+          transform="translate(-352.351 -241.894)" />
+        <path class="b"
+          d="M1.734,284.659c1.667-.543,8.366-1.441,12.261-1.934a.559.559,0,0,1,.34,1.044c-3.436,1.9-9.377,5.123-11.044,5.666a2.512,2.512,0,0,1-1.558-4.776Z"
+          transform="translate(0 -241.894)" />
+        <path class="b"
+          d="M239.794,412.414c0-1.753,1.224-8.4,1.963-12.257a.559.559,0,0,1,1.1,0c.739,3.855,1.963,10.5,1.963,12.257a2.512,2.512,0,0,1-5.023,0Z"
+          transform="translate(-203.768 -341.301)" />
+      </g>
+      <path class="c"
+        d="M84.945,23.4l-2.9-6.74a1.61,1.61,0,0,0-2.958,0L71.1,35.2,51.011,37.062a1.61,1.61,0,0,0-.914,2.813l15.16,13.318L60.821,72.878a1.61,1.61,0,0,0,2.393,1.739l2.309-1.371A125,125,0,0,1,84.945,23.4Z"
+        transform="translate(-42.104 -4.011)" />
+    </g>
+  </g>
+</svg>
+`;
+
+var GiftImg = `<svg xmlns="http://www.w3.org/2000/svg" width="54.079" height="53.191" viewBox="0 0 54.079 53.191"><defs><style>.a{fill:#ee9d0d;}.b{fill:#c7830b;}.c{fill:#ea2b2d;}.d{fill:#cb2527;}.e{fill:#6699ce;}.f{fill:#faa6b2;}.g{fill:#a6deff;}.h{fill:#eeb436;}.i{fill:#f72d2f;}</style></defs><path class="a" d="M40,248H77.3v25.88a2.1,2.1,0,0,1-2.1,2.1H42.1a2.1,2.1,0,0,1-2.1-2.1Z" transform="translate(-38.135 -222.787)"/><path class="b" d="M250.632,248.711v12.755L236.2,248h13.67Z" transform="translate(-211.463 -222.787)"/><path class="b" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="c" d="M226.194,32.048l-.5.185a5.035,5.035,0,0,0-3.072,3.292l-.468,1.585-.759.414a5.035,5.035,0,0,0-2.422,3l8.865,8.271,5.09-5.456.262-6.205a5.191,5.191,0,0,0-7-5.083Z" transform="translate(-196.246 -31.722)"/><path class="c" d="M358.628,175.48l-.15.509a5.034,5.034,0,0,1-3.072,3.292l-1.55.577-.359.785a5.034,5.034,0,0,1-2.822,2.624L341.81,175l5.09-5.455,6.172-.69a5.191,5.191,0,0,1,5.555,6.629Z" transform="translate(-304.761 -152.837)"/><path class="d" d="M168,248h7.461v27.978H168Z" transform="translate(-151.213 -222.787)"/><path class="c" d="M40,336H77.3v7.461H40Z" transform="translate(-38.135 -300.528)"/><path class="d" d="M333.957,336v3.207L330.52,336Z" transform="translate(-294.787 -300.528)"/><path class="a" d="M2.1,0H40.8a2.1,2.1,0,0,1,2.1,2.1V9.326H0V2.1A2.1,2.1,0,0,1,2.1,0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 18.641, 4.976)"/><path class="d" d="M0,0H9.326V9.326H0Z" transform="matrix(0.731, 0.682, -0.682, 0.731, 30.912, 16.424)"/><path class="d" d="M286.857,79.389a.931.931,0,0,1-.74-.365l-.615-.8a12.516,12.516,0,0,1-2.528-9,.933.933,0,0,1,1.855.2,10.66,10.66,0,0,0,2.153,7.667l.615.8a.933.933,0,0,1-.739,1.5Z" transform="translate(-252.718 -64.113)"/><path class="c" d="M185.485,178.151l-.039.014a30.78,30.78,0,0,1-12.034,1.906l-2.381-.1,4.092,3.817-1.181,4,3.728-1.206a30.775,30.775,0,0,0,9.833-5.315l.71-.572Z" transform="translate(-153.891 -161.081)"/><path class="d" d="M363.834,194.779a12.51,12.51,0,0,1-6.93-2.1l-.843-.559a.933.933,0,1,1,1.031-1.554l.842.558a10.659,10.659,0,0,0,7.8,1.618.933.933,0,1,1,.328,1.836A12.663,12.663,0,0,1,363.834,194.779Z" transform="translate(-316.982 -171.914)"/><path class="c" d="M275,202.524l-.012.04a30.776,30.776,0,0,0-1.069,12.137l.265,2.369-4.092-3.817-3.909,1.455.945-3.8a30.776,30.776,0,0,1,4.622-10.177l.521-.748Z" transform="translate(-237.949 -180.364)"/><circle class="e" cx="1.865" cy="1.865" r="1.865" transform="translate(10.259 0.032)"/><circle class="f" cx="1.865" cy="1.865" r="1.865" transform="translate(0 21.482)"/><path class="g" d="M36.663,36.663a.933.933,0,0,1-.885-.638l-.048-.143a2.946,2.946,0,0,0-2.8-2.017.933.933,0,1,1,0-1.865A4.808,4.808,0,0,1,37.5,35.292l.048.143a.933.933,0,0,1-.885,1.228Z" transform="translate(-31.067 -31.968)"/><path class="g" d="M79.493,194.438a.929.929,0,0,1-.506-.15l-.185-.12a2.074,2.074,0,0,0-2.192-.047.933.933,0,0,1-.947-1.607,3.929,3.929,0,0,1,4.153.088l.185.12a.933.933,0,0,1-.508,1.716Z" transform="translate(-69.235 -173.283)"/><path class="h" d="M27.751,85.141l2.88,2.644,3.811-.874-1.624,3.556,2.008,3.354-3.884-.446-2.569,2.946L27.6,92.49,24,90.957l3.4-1.922Z" transform="translate(-24 -78.914)"/><path class="h" d="M82.174,227.375l-.959,3.772,2.564,2.928-3.884.254L77.9,237.673l-1.442-3.615-3.8-.862,2.993-2.488-.353-3.876,3.291,2.078Z" transform="translate(-66.992 -204.086)"/><path class="i" d="M300.471,141.9l-5.455-5.09,5.09-5.456a8.342,8.342,0,0,1,5.455,5.09Z" transform="translate(-263.422 -119.737)"/></svg>`;
+
+const sallaLoyaltyCss = "";
+
+const SallaLoyalty = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedItem = undefined;
+        /**
+         * Does the merchant allow to login using email
+         */
+        this.allowEmail = true;
+        /**
+         * Does the merchant/current location for visitor allow to login using mobile, By default outside KSA is `false`
+         */
+        this.allowMobile = true;
+        /**
+         * Does the merchant require registration with email & mobile
+         */
+        this.requireEmail = false;
+        salla.event.on('loyalty::open', () => this.open());
+        salla.auth.event.onLoggedIn(() => {
+            this.is_loggedin = true;
+        });
+        salla.onReady(() => {
+            this.is_loggedin = salla.config.isUser();
+        });
+        salla.lang.onLoaded(() => {
+            this.guestMessage = salla.lang.get('pages.loyalty_program.guest_message');
+            this.translationLoaded = true;
+        });
+        salla.cart.event.onUpdated(cart => {
+            this.prizePoints = cart.loyalty.prize?.points;
+            this.prizeTitle = cart.loyalty.prize?.title;
+            this.customerPoints = cart.loyalty.customer_points || this.customerPoints;
+        });
+    }
+    setSelectedPrizeItem(item) {
+        if (!this.selectedItem || this.selectedItem?.id != item.id) {
+            this.selectedItem = item;
+        }
+        else {
+            this.selectedItem = undefined;
+        }
+    }
+    handleLongText(text) {
+        if (text.length > 150) {
+            return text.substring(0, 150) + '...';
+        }
+        return text;
+    }
+    prizeItem(item) {
+        let klass = {
+            's-loyalty-prize-item-selected': !!this.selectedItem && this.selectedItem?.id == item.id,
+            "s-loyalty-prize-item": true
+        };
+        return h("div", { onClick: () => this.setSelectedPrizeItem(item), class: klass }, h("img", { class: "s-loyalty-prize-item-image", src: item.image, alt: item.name }), h("div", { class: "s-loyalty-prize-item-title" }, item.name), h("div", { class: "s-loyalty-prize-item-subtitle" }, this.handleLongText(item.description)), h("div", { class: "s-loyalty-prize-item-points" }, item.cost_points, " ", salla.lang.get('pages.loyalty_program.point'), h("div", { class: "s-loyalty-prize-item-check" }, h("div", null))));
+    }
+    getConfirmationModal() {
+        return [
+            h("salla-placeholder", { alignment: "center", icon: Star3, class: "s-loyalty-confirmation-modal-content" }, h("div", { slot: "title", class: "s-loyalty-confirmation-title" }, salla.lang.get('pages.loyalty_program.exchange_points')), h("div", { slot: "description" }, salla.lang.get('pages.loyalty_program.are_you_sure_to_exchange'), " ( ", h("strong", null, this.selectedItem?.cost_points), " ", salla.lang.get('pages.loyalty_program.point'), " ) ", salla.lang.get('pages.loyalty_program.for'), " ( ", h("strong", null, this.selectedItem?.name), " )")),
+            h("div", { class: "s-loyalty-confirmation-actions" }, h("salla-button", { fill: 'outline', width: "wide", onClick: () => this.cancelProcess() }, salla.lang.get('pages.loyalty_program.cancellation')), h("salla-button", { loading: this.buttonLoading, width: "wide", onClick: () => this.exchangeLoyaltyPoint() }, salla.lang.get('pages.loyalty_program.confirm')))
+        ];
+    }
+    getAfterExchangeUI() {
+        return h("slot", { name: 'points-applied-widget' }, h("salla-list-tile", { class: "s-loyalty-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: 'action', class: "s-loyalty-after-exchange-action" }, h("salla-button", { class: "s-loyalty-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => this.resetExchange() }, h("span", { innerHTML: Cancel })))));
+    }
+    /**
+     * Show loyalty modal
+     */
+    async open() {
+        if (!this.is_loggedin)
+            return salla.event.dispatch('login::open');
+        this.modal?.open();
+        return await salla.loyalty.getProgram()
+            .then(response => {
+            this.loyaltyProgram = response.data;
+        })
+            .catch(e => {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        })
+            .finally(() => this.modal?.stopLoading());
+    }
+    /**
+     *
+     * Hide loyalty modal
+     */
+    async close() {
+        return this.modal.close();
+    }
+    /**
+     *
+     * Cancel Exchanged prizes
+     */
+    async resetExchange() {
+        return await salla.loyalty.reset();
+    }
+    /**
+     * Open Confirmation modal
+     */
+    async openConfirmation() {
+        return await this.modal.close()
+            .then(() => this.confirmationModal?.open())
+            .catch(e => console.log(e));
+    }
+    /**
+     * Cancel process
+     */
+    async cancelProcess() {
+        return await this.confirmationModal.close()
+            .then(() => this.selectedItem = null)
+            .catch(e => console.log(e));
+    }
+    /**
+     * Exchange loyalty points with the selected prize item
+     * @param {number} loyalty_prize_id
+     *
+     */
+    async exchangeLoyaltyPoint() {
+        this.buttonLoading = true;
+        return await salla.loyalty.exchange(this.selectedItem?.id)
+            .then(() => this.selectedItem.key == "FREE_PRODUCT" && salla.url.is_page('cart') && window.location.reload())
+            .finally(() => {
+            this.buttonLoading = false;
+            this.cancelProcess();
+        });
+    }
+    render() {
+        // A. when the exchange is done, and we have the final prize points to show it in cart page
+        if (this.prizePoints) {
+            return this.getAfterExchangeUI();
+        }
+        //todo:: change all translations to states
+        return [
+            h("slot", { name: 'widget' }, this.customerPoints ?
+                h("salla-list-tile", { class: 's-loyalty-widget' }, h("div", { slot: "icon", class: "s-loyalty-widget-icon", innerHTML: Star }), h("div", { slot: "subtitle" }, this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": this.customerPoints }) : this.guestMessage, h("salla-button", { shape: "link", color: "primary", onClick: () => salla.event.dispatch("loyalty::open") }, this.customerPoints ? salla.lang.get('pages.loyalty_program.cart_point_exchange_now') : salla.lang.get('blocks.header.login')))) :
+                ''),
+            h("salla-modal", { noPadding: true, width: "sm", ref: modal => this.confirmationModal = modal }, this.getConfirmationModal()),
+            h("salla-modal", { isLoading: true, "has-skeleton": true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: "loading" }, h("div", { class: "s-loyalty-skeleton" }, h("salla-list-tile", { class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon" }, h("salla-skeleton", { type: "circle", height: '6rem', width: '6rem' })), h("div", { slot: "title", class: "s-loyalty-header-title mb-5" }, h("salla-skeleton", { height: '15px', width: '50%' })), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, h("salla-skeleton", { height: '10px' }), h("salla-skeleton", { height: '10px', width: '75%' }))), h("div", { class: "s-loyalty-skeleton-cards" }, [...Array(3)].map(() => h("div", { class: "s-loyalty-prize-item swiper-slide" }, h("salla-skeleton", { height: '9rem' }), h("div", { class: "s-loyalty-prize-item-title" }, h("salla-skeleton", { height: '15px', width: '75%' })), h("div", { class: "s-loyalty-prize-item-subtitle" }, h("salla-skeleton", { height: '10px', width: '50%' }), h("salla-skeleton", { height: '10px', width: '25%' })), h("div", { class: "s-loyalty-prize-item-points" }, h("salla-skeleton", { height: '15px', width: '100px' }), h("div", { class: "s-loyalty-prize-item-check" }, h("salla-skeleton", { height: '1rem', width: '1rem', type: 'circle' })))))))), !this.hasError && !!this.loyaltyProgram ?
+                [
+                    h("salla-list-tile", { id: 's-loyalty-header', class: "s-loyalty-header" }, h("div", { slot: "icon", class: "s-loyalty-header-icon", innerHTML: GiftImg }), h("div", { slot: "title", class: "s-loyalty-header-title" }, this.loyaltyProgram.prize_promotion_title), h("div", { slot: "subtitle", class: "s-loyalty-header-subtitle" }, this.loyaltyProgram.prize_promotion_description)),
+                    h("salla-tabs", null, this.loyaltyProgram.prizes.map((prize) => h("salla-tab-header", { slot: "header", name: prize.title }, h("span", null, prize.title))), this.loyaltyProgram.prizes.map((prize, index) => h("salla-tab-content", { slot: "content", name: prize.title }, h("salla-slider", { class: "s-loyalty-slider", loop: false, "controls-outer": true, id: 'loyalty-popup-slider-' + index, type: "carousel" }, h("div", { slot: 'items' }, prize.items.map((item) => this.prizeItem(item))))))),
+                    h("salla-button", { disabled: !this.selectedItem, width: "wide", class: "s-loyalty-program-redeem-btn", onClick: () => this.openConfirmation() }, salla.lang.get('pages.loyalty_program.exchange_points')),
+                ]
+                : h("salla-placeholder", { class: "s-loyalty-placeholder", alignment: "center" }, !!this.errorMessage ? h("span", { slot: "description" }, this.errorMessage) : '')),
+        ];
+    }
+};
+SallaLoyalty.style = sallaLoyaltyCss;
+
+export { SallaLoyalty as salla_loyalty };

package/dist/esm/salla-maintenance-alert.entry.js

@@ -0,0 +1,38 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
+import { C as Cancel } from './cancel-BsLF_HK7.js';
+
+const sallaMaintenanceAlertCss = ".s-maintenance-alert-wrapper{display:flex;min-height:40px;width:100%;flex-direction:row;align-items:center;justify-content:center;--tw-bg-opacity:1;background-color:rgba(26, 38, 61, var(--tw-bg-opacity));padding:0.25rem 0.5rem;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-wrapper a{transition:0.35s cubic-bezier(0.2, 1, 0.3, 1)}.s-maintenance-alert-wrapper *{color:inherit}@media (min-width: 640px){.s-maintenance-alert-wrapper{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-content{margin-top:1rem;margin-bottom:1rem;display:flex;width:100%;align-items:center;justify-content:space-between}@media (min-width: 640px){.s-maintenance-alert-content{padding-left:2rem;padding-right:2rem}}.s-maintenance-alert-container{display:flex;align-items:center}.s-maintenance-alert-icon{margin-right:1.25rem;display:none}@media (min-width: 640px){.s-maintenance-alert-icon{display:block}}.s-maintenance-alert-text h2{margin-bottom:0.5rem;font-size:0.875rem;font-weight:700;line-height:1.4}@media (min-width: 640px){.s-maintenance-alert-text h2{font-size:1.5rem;line-height:2rem}}.s-maintenance-alert-text p{margin:0px;text-align:right;font-size:10px;line-height:1.2}@media (min-width: 640px){.s-maintenance-alert-text p{text-align:center;font-size:0.75rem;line-height:1}}.s-maintenance-alert-btn{position:relative;margin-left:4px;margin-right:4px;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;border-radius:0.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgba(93, 213, 196, var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(93, 213, 196, var(--tw-bg-opacity));padding:0.5rem;text-align:center;vertical-align:middle;font-size:0.875rem;font-weight:400;line-height:1.4;--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.s-maintenance-alert-btn:hover{--tw-bg-opacity:1;background-color:rgba(53, 203, 181, var(--tw-bg-opacity))}.s-maintenance-alert-btn *{pointer-events:none}[dir=rtl] .s-maintenance-alert-btn{margin-left:1.25rem;margin-right:0}@media (min-width: 640px){.s-maintenance-alert-btn{padding:0.5rem 1rem}}";
+
+const SallaMaintenanceAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    componentWillLoad() {
+        this.title = salla.config.get('maintenance_details.title');
+        this.message = salla.config.get('maintenance_details.message');
+        // Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed)
+        const isMobile = typeof window !== 'undefined' && !window.matchMedia('(min-width: 768px)').matches;
+        this.buttonTitle = isMobile ? salla.config.get('maintenance_details.button_title') : salla.config.get('maintenance_details.button_full_title');
+    }
+    closeAlert() {
+        salla.storage.set('hide_salla-maintenance-alert_at', Date.now());
+        this.host.style.display = 'none';
+    }
+    render() {
+        return (h(Host, { key: '109e687d7d6ba48ddf89cd3631f5a852d50688fd', class: "s-maintenance-alert-wrapper" }, h("button", { key: 'd70e7e53acc699336e1611589ca3bdfc704504c2', class: "s-maintenance-alert-close", innerHTML: Cancel, onClick: () => this.closeAlert() }), h("div", { key: 'b816c1a9635828c206c792d68203ccfbe8e8235b', class: "s-maintenance-alert-content" }, h("div", { key: '61e91088a5613d943b6f662f5ed44093ecf99237', class: "s-maintenance-alert-container" }, h("div", { key: '1ca223334f52bc5097677dd23433107080567894', class: "s-maintenance-alert-icon" }, h("img", { key: '22e07c7a104267cda2bed74929307d039018698d', src: salla.url.cdn('images/alert.png'), alt: "Alert" })), h("div", { key: '64d37700bc1454f5afadb55b49512bbd5b412d9c', class: "s-maintenance-alert-text" }, h("h2", { key: '7651dcd09a0ba07f14ed744758598015d4b45ecd' }, this.title), h("p", { key: '1f8d057af072466f34d0f3a13396de5144bc967f' }, this.message))), h("div", { key: '34f8471b855011b499c2038b1ac9dd24cc5e2e8b' }, h("a", { key: 'd9c4f4a9fb80ab90c13dc1dde69adcb7c4cd7e9f', class: "s-maintenance-alert-btn", href: salla.config.get('maintenance_details.button_url') }, this.buttonTitle)))));
+    }
+    componentDidLoad() {
+        //auto-hide the alert if close button is clicked before one hour
+        let hidden_at = salla.storage.get('hide_salla-maintenance-alert_at');
+        if (hidden_at && ((Date.now() - hidden_at) / 1000 / 60) < 60) {
+            this.closeAlert();
+        }
+    }
+    get host() { return getElement(this); }
+};
+SallaMaintenanceAlert.style = sallaMaintenanceAlertCss;
+
+export { SallaMaintenanceAlert as salla_maintenance_alert };

package/dist/esm/salla-menu.entry.js

@@ -0,0 +1,137 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, F as Fragment } from './index-B74h9G6a.js';
+
+const sallaMenuCss = ":host{display:block}";
+
+const SallaMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * The source of the menu, specifying whether it is a header or footer menu.
+         */
+        this.source = "header";
+        /**
+         * Boolean indicating whether to use React Link elements for menu links.
+         */
+        this.useReactLink = false;
+        this.menus = [];
+    }
+    async componentWillLoad() {
+        return salla.onReady(() => {
+            this.displayAllText = salla.lang.get('blocks.home.display_all');
+            if (this.sourceValue && this.source === 'json') {
+                this.menus = typeof this.sourceValue === 'string' ? JSON.parse(this.sourceValue) : this.sourceValue || [];
+            }
+            else {
+                return this.getMenuItems();
+            }
+        });
+    }
+    getMenuItems() {
+        /**
+          * Avoid saving the menu to localStorage (default) when in the development environment
+          * or when modifying the theme in the dashboard
+          */
+        // const isPreview = salla.config.isDebug() || salla.helpers.isPreview()
+        // const cacheKey = `${this.source}_menus_${salla.lang.locale}`
+        // const cachedMenus = salla.storage.getWithTTL(cacheKey, [])
+        // if (cachedMenus.length > 0 && !isPreview) {
+        //   this.menus = cachedMenus
+        //   return;
+        // }
+        return salla.api.component.getMenus(this.source).then(({ data }) => {
+            this.menus = data;
+            // !isPreview && salla.storage.setWithTTL(cacheKey, this.menus)
+        }).catch((error) => {
+            salla.logger.error('salla-menu::Error fetching menus', error);
+        });
+    }
+    hasChildren(menu) {
+        return menu?.children?.length > 0;
+    }
+    hasProducts(menu) {
+        return menu?.products?.length > 0;
+    }
+    /**
+    * Get the classes for desktop menu
+    * @param {Object} menu
+    * @param {Boolean} isRootMenu
+    * @returns {String}
+    */
+    getDesktopClasses(menu, isRootMenu) {
+        return `!hidden lg:!block ${isRootMenu ? 'root-level lg:!inline-block' : 'relative'} ${menu.products ? ' mega-menu' : ''}
+    ${this.hasChildren(menu) ? 'has-children' : ''}`;
+    }
+    getAttributes(attrs) {
+        return attrs.trim().split(' ').reduce((result, attr) => {
+            let [key, value] = attr.split('=');
+            result[key] = value.replace(/"/g, '');
+            return result;
+        }, {});
+    }
+    /**
+       * Get the mobile menu
+       * @param {Object} menu
+       * @param {String} displayAllText
+       * @returns {String}
+       */
+    getMobileMenu(menu, displayAllText) {
+        const menuImage = menu.image ? h("img", { src: menu.image, class: "rounded-full", width: "48", height: "48", alt: menu.title }) : null;
+        return (h("li", { class: "lg:hidden text-sm font-bold", ...this.getAttributes(menu.attrs) }, !this.hasChildren(menu) ?
+            h("a", { href: menu.url, "aria-label": menu.title || 'category', class: `text-gray-500 ${menu.image ? '!py-3' : ''}`, ...this.getAttributes(menu.link_attrs) }, menuImage, h("span", null, menu.title || ''))
+            :
+                h(Fragment, null, h("span", { class: menu.image ? '!py-3' : '' }, menuImage, menu.title), h("ul", null, h("li", { class: "text-sm font-bold" }, h("a", { href: menu.url, class: "text-gray-500" }, displayAllText)), menu.children.map((subMenu) => this.getMobileMenu(subMenu, displayAllText))))));
+    }
+    /**
+       * Get the desktop menu
+       * @param {Object} menu
+       * @param {Boolean} isRootMenu
+       * @returns {String}
+       */
+    getDesktopMenu(menu, isRootMenu) {
+        return h("li", { class: this.getDesktopClasses(menu, isRootMenu), ...this.getAttributes(menu.attrs) }, h("a", { href: menu.url, "aria-label": menu.title || 'category', ...this.getAttributes(menu.link_attrs) }, h("span", null, menu.title)), this.hasChildren(menu) ?
+            h("div", { class: `sub-menu shadow-default ${this.hasProducts(menu) ? 'w-full left-0 flex' : 'w-56'}` }, h("ul", { class: this.hasProducts(menu) ? 'w-56 shrink-0 m-8 rtl:ml-0 ltr:mr-0' : '' }, menu.children.map((subMenu) => this.getDesktopMenu(subMenu, false))), this.hasProducts(menu) ?
+                h("salla-products-list", { source: "selected", "shadow-on-hover": true, "source-value": `[${menu.products}]` }) : null) : null);
+    }
+    /**
+       * Get the footer menu
+       * @param {Array} menus
+       */
+    getFooterMenu(menus) {
+        const Menuitems = (this.topnav || this.limit) ? menus.slice(0, this.limit || 3) : menus;
+        return h("div", null, h("div", { class: {
+                "s-menu-footer-list": !this.topnav,
+                "s-menu-topnav-list": this.topnav
+            } }, Menuitems.map((menu) => {
+            return h("a", { key: menu.id, href: menu.url, target: menu.target, class: {
+                    "s-menu-footer-item": !this.topnav,
+                    "s-menu-topnav-item topnav-link-item right-side": this.topnav
+                } }, menu.title);
+        })));
+    }
+    /**
+  * Get the menus
+  * @param {Array} menus
+  * @returns {String}
+  */
+    getHeaderMenu(menus) {
+        return menus.map((menu) => [
+            this.getMobileMenu(menu, this.displayAllText),
+            this.getDesktopMenu(menu, true)
+        ]);
+    }
+    render() {
+        return this.source === "footer" ?
+            this.getFooterMenu(this.menus)
+            :
+                [
+                    h("nav", { key: "main-nav", id: "mobile-menu", class: "mobile-menu" }, h("ul", { class: "main-menu" }, this.getHeaderMenu(this.menus)), h("button", { class: "btn--close close-mobile-menu sicon-cancel lg:hidden" })),
+                    h("button", { key: "close-btn", class: "btn--close-sm close-mobile-menu sicon-cancel hidden" })
+                ];
+    }
+};
+SallaMenu.style = sallaMenuCss;
+
+export { SallaMenu as salla_menu };

package/dist/esm/salla-metadata.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-6mr785rH.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-B74h9G6a.js';
 
 const sallaMetadataCss = "";
 

package/dist/esm/salla-multiple-bundle-product-cart_2.entry.js

@@ -0,0 +1,217 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { r as registerInstance, h, H as Host, a as getElement, F as Fragment } from './index-B74h9G6a.js';
+
+const sallaMultipleBundleProductCartCss = "";
+
+const SallaMultipleBundleProductCart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sections = [];
+        this.itemNumber = '';
+    }
+    deleteItem(sectionId, product) {
+        const form = this.host.closest('form');
+        if (form) {
+            const formId = form.getAttribute('id');
+            if (formId && typeof formId === 'string') {
+                const itemNumber = formId.match(/item-(\d+)/)?.[1];
+                this.itemNumber = itemNumber || '';
+                const selectedAccordion = this.host.querySelector(`#accordion-${product.id}`);
+                salla.cart
+                    .deleteItem(`${this.itemNumber}?product_id=${product.id}&section_id=${sectionId}`)
+                    .then(() => selectedAccordion?.remove());
+            }
+        }
+    }
+    renderRemoveButton(sectionId, product, isText = false) {
+        return (h("salla-button", { type: "button", shape: isText ? 'btn' : 'icon', fill: isText ? 'outline' : 'solid', size: "small", color: "danger", "aria-label": "Remove from the cart", onClick: () => this.deleteItem(sectionId, product) }, isText ? salla.lang.get('common.elements.delete') : h("i", { class: "sicon-cancel" })));
+    }
+    renderAccordionHeader(sectionId, product) {
+        const hasOptions = product?.options && product?.options?.length > 0; // undefined or empty array
+        return (h("div", { slot: "html", class: "s-multiple-bundle-product-cart-header-wrapper" }, h("div", { class: `s-multiple-bundle-product-cart-header ${hasOptions ? '' : 's-multiple-bundle-product-cart-header-no-options'}` }, h("div", { class: "s-multiple-bundle-product-cart-header-content" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-image-wrapper" }, h("img", { src: product?.image?.url, alt: product?.image?.alt || product?.name, class: "s-multiple-bundle-product-cart-header-image" })), h("div", { class: "s-multiple-bundle-product-cart-header-content-details" }, h("h2", { class: "s-multiple-bundle-product-cart-header-content-details-title" }, h("a", { href: product?.url, class: "s-multiple-bundle-product-cart-header-content-details-title-link" }, product?.name)), h("div", { class: "s-multiple-bundle-product-cart-header-content-details-price" }, h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-regular" }, h("span", { innerHTML: product?.price ? salla.money(product?.price) : '' })), product?.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-cart-header-content-details-price-sale" }, h("span", { innerHTML: salla.money(product?.sale_price) })))), product?.quantity_in_group > 0 && product?.quantity !== 0 && (h("p", { class: "s-multiple-bundle-product-cart-header-content-details-quantity" }, h("span", null, salla.lang.get('pages.products.number_of_pieces')), h("span", null, product?.quantity_in_group))))), !hasOptions && (h("div", { class: "s-multiple-bundle-product-cart-header-remove-button" }, this.renderRemoveButton(sectionId, product, false))))));
+    }
+    render() {
+        return (h(Host, { key: '34b9ae8c08eccee16d15f5ebff73b1d27f636e79', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: '2f8d0bf68e67aa3bc21206d7282113fbfa67560b', 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, sectionId);
+            }
+            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, sectionId) {
+        let sectionIndex = null;
+        let productIndex = null;
+        if (sectionId != null) {
+            sectionIndex = this.sections.findIndex(section => section.id == sectionId);
+            if (sectionIndex > -1) {
+                const section = this.sections[sectionIndex];
+                if (section) {
+                    const foundIndex = section.products?.findIndex(product => product.id == productId);
+                    productIndex = typeof foundIndex === 'number' && foundIndex > -1 ? foundIndex : null;
+                }
+            }
+        }
+        // Emit event to notify modal to reset its state for this product
+        salla.event.dispatch('multiple-bundle-product-modal::clear-options', {
+            productId,
+            sectionId,
+            sectionIndex,
+            productIndex,
+        });
+    }
+    renderAccordionHeader(section, selectedCount) {
+        return (h(Fragment, null, h("h2", { slot: "title" }, section?.name), section?.obligatory_products ? (h("span", { slot: "note" }, salla.lang.get('pages.products.obligatory_products', {
+            count: section?.obligatory_products || 0,
+        }))) : '', h("span", { slot: "progress" }, selectedCount, "/", section?.products?.length || 0)));
+    }
+    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: '2a7a27e8bfc7325575fec782139828333590eb9f', class: "s-multiple-bundle-product-wrapper" }, h("div", { key: 'affcb43ee67e329a9a87d6234bb91b5494a69a35', class: "s-multiple-bundle-product-wrapper-sections" }, this.sections.map((section, index) => {
+            const selectedCount = this.selectedProducts[section.id]?.size || 0;
+            return (h("salla-accordion", { key: section.id, collapsed: index === 0 ? false : true }, h("salla-accordion-head", null, this.renderAccordionHeader(section, selectedCount)), h("salla-accordion-body", null, h("salla-multiple-bundle-product-slider", { section: section, sectionIndex: index, selectedProducts: this.selectedProducts, onProductSelected: this.handleBundleSliderProductSelected, onProductOptionsSelected: this.handleBundleSliderProductOptionsSelected }))));
+        })), h("salla-multiple-bundle-product-options-modal", { key: '6b9065e8f7872da72166979fc9ce61efaad21c0a' })));
+    }
+    get host() { return getElement(this); }
+};
+SallaMultipleBundleProductDetails.style = sallaMultipleBundleProductDetailsCss;
+
+export { SallaMultipleBundleProductCart as salla_multiple_bundle_product_cart, SallaMultipleBundleProductDetails as salla_multiple_bundle_product_details };