@salla.sa/twilight-components 2.14.471 → 2.14.473

package/dist/esm/salla-add-product-button_5.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, e as axios } from './index-Cly9a4nm.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, e as axios } from './index-BvYTcqJt.js';
 import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
 import { H as Helper } from './Helper-BXj4f_Qj.js';
 import { B as BellRing } from './bell-ring-D3mWkc-3.js';
@@ -17,6 +17,140 @@ var WalletIcon = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
+/**
+ * Order-options gate for the fast-checkout widget — keeps <salla-add-product-button> thin.
+ * Intercepts the widget click → runs the order-options modal → injects the result → re-fires the click.
+ */
+const PRODUCT_FORM_SELECTOR = 'form.product-form';
+class OrderOptionsGate {
+    constructor(host, productId) {
+        this.host = host;
+        this.productId = productId;
+        /** True on the re-fired click so it passes through instead of re-gating. */
+        this.collected = false;
+        /** Live PDP price (one onPriceUpdated subscription per widget). */
+        this.livePrice = 0;
+    }
+    /** Attach once to the widget. Returns false when there's no widget (e.g. product cards) so the caller retries. */
+    static attach(host, productId) {
+        const widget = host.querySelector('salla-mini-checkout-widget');
+        if (!widget)
+            return false;
+        const gate = new OrderOptionsGate(host, String(productId));
+        // One subscription per widget (PDP only) — no per-card leak.
+        salla.product?.event?.onPriceUpdated?.((response) => {
+            gate.livePrice = Number(response?.data?.price) || gate.livePrice;
+        });
+        widget.addEventListener('click', (event) => gate.handleWidgetClick(event, widget), true);
+        return true;
+    }
+    /** Quantity from the same form the widget submits (PRODUCT_FORM_SELECTOR), not the button's nearest form. */
+    getSelectedQuantity() {
+        try {
+            const form = document.querySelector(PRODUCT_FORM_SELECTOR);
+            const data = form?.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            if (Number.isFinite(qty) && qty > 0)
+                return qty;
+        }
+        catch {
+            // fall through to the attribute
+        }
+        return Number(this.host.getAttribute('quantity')) || 1;
+    }
+    async handleWidgetClick(event, widget) {
+        if (this.collected) {
+            this.collected = false;
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        if (!await this.validatePdpOptions())
+            return;
+        if (salla.config.isGuest()) {
+            salla.api.auth.requireLoginThen('salla-add-product-button::oo.after-login', () => this.handleWidgetClick(event, widget));
+            return;
+        }
+        widget.classList.add('s-add-product-button-busy');
+        let resp;
+        try {
+            resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: this.productId, quantity: this.getSelectedQuantity() }]));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            widget.classList.remove('s-add-product-button-busy');
+            this.resumeWidget(widget);
+            return;
+        }
+        widget.classList.remove('s-add-product-button-busy');
+        const items = resp?.data?.order_options || [];
+        if (!items.length) {
+            this.resumeWidget(widget);
+            return;
+        }
+        const basePrice = this.livePrice > 0
+            ? this.livePrice
+            : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+        const modal = this.ensureModal();
+        try {
+            const result = await modal.open({ orderOptions: items, basePrice });
+            this.injectIntoMini(result?.orderOptions || []);
+            this.resumeWidget(widget);
+        }
+        catch {
+            // user dismissed — widget stays blocked, they re-click to retry.
+        }
+    }
+    async validatePdpOptions() {
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (!optionsEl)
+            return true;
+        if (typeof optionsEl.validateAndScroll === 'function') {
+            return await optionsEl.validateAndScroll();
+        }
+        if (typeof optionsEl.reportValidity === 'function') {
+            return await optionsEl.reportValidity();
+        }
+        return true;
+    }
+    /** Inject order_options into the next cart-add payload via `cart::before.add.item` (one-shot, scoped to productId). */
+    injectIntoMini(orderOptions) {
+        if (!orderOptions.length)
+            return;
+        const productId = this.productId;
+        const onceHandler = (eventData) => {
+            if (String(eventData?.id) !== String(productId))
+                return;
+            try {
+                eventData?.payload?.set?.('order_options', orderOptions);
+            }
+            finally {
+                salla.event.off('cart::before.add.item', onceHandler);
+            }
+        };
+        salla.event.on('cart::before.add.item', onceHandler);
+    }
+    ensureModal() {
+        let modal = document.querySelector('salla-order-options-modal');
+        if (!modal) {
+            modal = document.createElement('salla-order-options-modal');
+            document.body.appendChild(modal);
+        }
+        return modal;
+    }
+    resumeWidget(widget) {
+        this.collected = true;
+        // Real click target lives in the widget's shadow DOM.
+        const innerBtn = widget.shadowRoot?.querySelector?.('.s-fast-checkout-button');
+        if (innerBtn) {
+            innerBtn.click();
+        }
+        else if (typeof widget.click === 'function') {
+            widget.click();
+        }
+    }
+}
+
 const sallaAddProductButtonCss = ":host{display:block}salla-add-product-button[width=wide]{width:100%}";
 
 const SallaAddProductButton = class {
@@ -42,6 +176,8 @@ const SallaAddProductButton = class {
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
         this.viewportMediaQuery = null;
+        /** Guards one-time attachment of the order-options gate to the mini-checkout widget. */
+        this.orderOptionsGateAttached = false;
         this.onViewportChange = (e) => {
             this.isDesktopViewport = e.matches;
             this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
@@ -229,6 +365,13 @@ const SallaAddProductButton = class {
         });
     }
     componentDidRender() {
+        // Wire the order-options gate to the fast-checkout widget once it renders (logic lives in OrderOptionsGate).
+        // Only when the merchant enabled order options; otherwise the widget runs the normal fast-checkout flow.
+        if (!this.orderOptionsGateAttached && this.productId
+            && salla.config.get('store.settings.order_options.mandatory', false)
+            && OrderOptionsGate.attach(this.host, this.productId)) {
+            this.orderOptionsGateAttached = true;
+        }
         //if label not passed, get label
         if (!!this.passedLabel && (!this.supportStickyBar || this.isDesktopViewport)) {
             // if passed label, set it
@@ -574,7 +717,7 @@ const SallaProductAvailability = class {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '144b0687a0e527fa493aa701c334db76a7b42164', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '0779c3aef2637bfcd30ecf110d0cd31d819a82a5', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? 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.isSubscribedToProduct ? '' : this.renderModal()));
@@ -691,6 +834,11 @@ const SallaProductOptions = class {
          * The id of the product to which the options are going to be fetched for.
          */
         this.productId = salla.config.get('page.id');
+        /**
+         * Strip the wrapper's padding (keeps the background, rounded corners, margin).
+         * Used by callers that need the options to sit flush inside their own surface.
+         */
+        this.noPadding = false;
         this.handleDonationOptions = (event, detail, type, _option) => {
             // Donating-amount input only: onInput updates price and dispatches native change for form price watcher.
             if (detail === 'custom' && type === 'input') {
@@ -1170,7 +1318,7 @@ const SallaProductOptions = class {
         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' ?
+        return (h(Host, { class: { 's-product-options-wrapper': true, 's-product-options-no-padding': this.noPadding } }, 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.generateInputId(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))))))));
     }
@@ -1225,7 +1373,9 @@ const SallaProductOptions = class {
     }
     fillSelectedOptions() {
         this.selectedOptions = this.optionsData.reduce((acc, opt) => {
-            const selectedDetails = opt.details.filter(detail => detail.is_selected);
+            // `details` is optional on the Option interface — input-type options
+            // (text/number/date/file) carry no choice list, so guard before filtering.
+            const selectedDetails = (opt.details ?? []).filter(detail => detail.is_selected);
             const mappedDetails = selectedDetails.map(detail => ({
                 ...detail,
                 option_id: opt.id
@@ -1233,6 +1383,25 @@ const SallaProductOptions = class {
             return acc.concat(mappedDetails);
         }, []);
     }
+    /**
+     * Seed `selectedOptions` from API defaults (`is_selected: true`).
+     * componentWillLoad does this only on the cart page; non-cart callers
+     * (e.g. order-options modal) call this after mount to avoid the first
+     * multi-select toggle wiping the pre-selected defaults.
+     * */
+    async seedSelectedOptions() {
+        this.fillSelectedOptions();
+        // A required multi-select renders every checkbox `required`; handleRequiredMultipleOptions
+        // clears that once one is checked, but it only fires on user `change`. After seeding a
+        // pre-selected default we run it for the initial DOM so a defaulted-but-untouched required
+        // multi-select doesn't fail validation and block checkout. Defer to rAF so the seeded
+        // `checked` state is painted before we count it (matches the change-handler pattern above).
+        requestAnimationFrame(() => {
+            this.optionsData
+                ?.filter(o => o.type === DisplayType.MULTIPLE_OPTIONS && o.required)
+                .forEach(o => this.handleRequiredMultipleOptions(o));
+        });
+    }
     async componentDidLoad() {
         if (!this.optionsData?.length) {
             return;
@@ -2059,7 +2228,15 @@ window.SallaApplePay = {
         SallaApplePay.session.oncouponcodechanged = SallaApplePay.onCouponCodeChanged;
         SallaApplePay.session.onpaymentmethodselected = SallaApplePay.onPaymentMethodSelected;
 
-        SallaApplePay.session.begin();
+        // Hook between session creation and begin(). Return truthy to skip
+        // begin() (caller handles it later, e.g. after async work).
+        let skipBegin;
+        if (typeof SallaApplePay.detail.onStartedSession === 'function') {
+            skipBegin = SallaApplePay.detail.onStartedSession(SallaApplePay.session);
+        }
+        if (!skipBegin) {
+            SallaApplePay.session.begin();
+        }
     },
     onPaymentMethodSelected: async (event) => {
         salla.logger.log('🍏 Pay: onPaymentMethodSelected', event);
@@ -2477,6 +2654,88 @@ if (window.ApplePaySession?.canMakePayments()) {
     document.querySelectorAll('data-show-if-apple-pay-supported').forEach(element => element.style.display = 'none');
 }
 
+/**
+ * Order-options helpers for the Apple Pay quick-buy flow — keeps <salla-quick-buy> to thin AP wiring.
+ * Apple Pay resolves options inside the session-started hook (single gesture), so the caller owns
+ * the ApplePaySession and drives it via callbacks.
+ */
+/** Get-or-create the singleton order-options modal on <body>. */
+function ensureOrderOptionsModal() {
+    let modal = document.querySelector('salla-order-options-modal');
+    if (!modal) {
+        modal = document.createElement('salla-order-options-modal');
+        document.body.appendChild(modal);
+    }
+    return modal;
+}
+/** Sync PDP-option validity (an `await` would consume the Apple Pay gesture). Skips hidden/disabled inputs. */
+function reportProductOptionsValiditySync(productId) {
+    const optionsElement = document.querySelector(`salla-product-options[product-id="${productId}"]`);
+    if (!optionsElement)
+        return true;
+    const requiredInputs = optionsElement.querySelectorAll('[required]');
+    let pass = true;
+    requiredInputs.forEach((input) => {
+        if (input.disabled || input.closest('.hidden'))
+            return;
+        if ('reportValidity' in input && !input.reportValidity())
+            pass = false;
+    });
+    return pass;
+}
+/** Merge collected order-options into the quick-purchase payload (FormData or plain object). */
+function appendOrderOptionsToPayload(data, orderOptions) {
+    if (!orderOptions.length)
+        return;
+    if (data && typeof data.append === 'function') {
+        orderOptions.forEach((entry, i) => {
+            data.append(`order_options[${i}][id]`, String(entry.id));
+            data.append(`order_options[${i}][value]`, String(entry.value));
+        });
+        return;
+    }
+    if (data && typeof data === 'object') {
+        data.order_options = orderOptions;
+    }
+}
+/**
+ * Fetch order options and, if any, collect them via the modal (apple-pay mode). Callbacks drive the
+ * caller's pre-created session: `beginPendingSession` (no options), `discardPendingSession` (options
+ * found — the modal's AP button starts a fresh one), `onSubmit` (submitted).
+ */
+async function resolveApplePayOrderOptions(opts) {
+    let resp;
+    try {
+        resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: opts.productId, quantity: opts.quantity }]));
+    }
+    catch (error) {
+        salla?.logger?.warn?.('order-options: fetch failed', error);
+        opts.beginPendingSession();
+        return;
+    }
+    const items = resp?.data?.order_options || [];
+    if (!items.length) {
+        opts.beginPendingSession(); // begin() doesn't need a fresh gesture
+        return;
+    }
+    opts.discardPendingSession(); // drop the unused session; the modal builds a fresh one
+    const basePrice = Number(opts.amount) > 0
+        ? Number(opts.amount)
+        : Number(resp?.data?.products?.[0]?.price?.amount) || 0;
+    const modal = ensureOrderOptionsModal();
+    try {
+        await modal.open({
+            orderOptions: items,
+            basePrice,
+            paymentMode: 'apple-pay',
+            onSubmit: opts.onSubmit,
+        });
+    }
+    catch {
+        // dismissed — no live session
+    }
+}
+
 const sallaQuickBuyCss = ".s-quick-buy-button .s-button-text{display:flex}apple-pay-button{--apple-pay-button-width:100%;--apple-pay-button-height:40px;--apple-pay-button-border-radius:.75rem;--apple-pay-button-box-sizing:content-box}";
 
 const SallaQuickBuy = class {
@@ -2504,32 +2763,82 @@ const SallaQuickBuy = class {
          * @default {}
          */
         this.options = {};
+        /** Modal selections, merged into the quick-purchase payload. */
+        this.collectedOrderOptions = [];
+        /** Flips true after the first onStartedSession so the second dispatch begins. */
+        this.optionsResolved = false;
+        /** PDP price + selected order-option prices (from the modal). */
+        this.applePayAmount = 0;
+        /** Session from the initial gesture; begun later when there are no order options. */
+        this.pendingApplePaySession = null;
         this.quickBuy = salla.lang.get('pages.products.buy_now');
+        /** Apple Pay onStartedSession: first call defers begin() to run the OO check; second (resolved) begins. */
+        this.handleApplePaySessionStarted = (session) => {
+            // Order options disabled → let Apple Pay begin normally, as if the feature didn't exist.
+            if (!salla.config.get('store.settings.order_options.mandatory', false))
+                return false;
+            if (this.optionsResolved)
+                return false;
+            this.optionsResolved = true;
+            this.pendingApplePaySession = session;
+            resolveApplePayOrderOptions({
+                productId: this.productId,
+                amount: Number(this.amount),
+                quantity: this.getSelectedQuantity(),
+                beginPendingSession: () => {
+                    this.pendingApplePaySession?.begin();
+                    this.pendingApplePaySession = null;
+                },
+                discardPendingSession: () => { this.pendingApplePaySession = null; },
+                onSubmit: (selections, total) => {
+                    this.collectedOrderOptions = selections;
+                    this.applePayAmount = total;
+                    this.settlePayment();
+                },
+            });
+            return true;
+        };
         salla.lang.onLoaded(() => {
             this.quickBuy = salla.lang.get('pages.products.buy_now');
         });
     }
-    async quickBuyHandler() {
-        // user guest and guest-checkout not enabled
+    quickBuyHandler() {
         if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });
-            // todo (low) :: find a way to re-fire the method after success
-            let afterLoginEvent = "salla-quick-buy::user.logged-in";
-            salla.event.on(afterLoginEvent, () => this.settlePayment());
-            salla.api.auth.setAfterLoginEvent(afterLoginEvent);
-            return salla.auth.event.dispatch('login::open', { withoutReload: true });
+            salla.api.auth.requireLoginThen('salla-quick-buy::user.logged-in', () => this.quickBuyHandler());
+            return;
+        }
+        // Sync validate — AP needs the gesture preserved for new ApplePaySession().
+        if (!this.validatePdpOptionsSync())
+            return;
+        this.optionsResolved = false;
+        this.collectedOrderOptions = [];
+        this.applePayAmount = 0;
+        this.settlePayment();
+    }
+    /** Sync PDP-option validity (preserves the AP gesture); emits + notifies on failure. */
+    validatePdpOptionsSync() {
+        if (reportProductOptionsValiditySync(this.productId))
+            return true;
+        this.validationFailed.emit({ productId: this.productId });
+        salla.error(salla.lang.get('common.messages.required_fields'));
+        return false;
+    }
+    /** Read the live PDP quantity from the form so order-options match the real cart line. */
+    getSelectedQuantity() {
+        try {
+            const data = this.host.getElementSallaData?.();
+            const qty = Number(data instanceof FormData ? data.get('quantity') : data?.quantity);
+            return Number.isFinite(qty) && qty > 0 ? qty : 1;
+        }
+        catch {
+            return 1;
         }
-        await this.settlePayment();
     }
     async settlePayment() {
-        let optionsElement = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
-        //make sure all the required options are selected
-        if (optionsElement && !await optionsElement.reportValidity()) {
-            this.validationFailed.emit({ productId: this.productId });
-            return salla.error(salla.lang.get('common.messages.required_fields'));
-        }
         //use this way to get quantity too
         let data = this.host.getElementSallaData();
+        appendOrderOptionsToPayload(data, this.collectedOrderOptions);
         // if the store doesn't have Apple Pay , just create a cart and then redirect to check out page
         if (!this.isApplePayActive) {
             // return salla.product.buyNow(this.productId, data);
@@ -2547,13 +2856,16 @@ const SallaQuickBuy = class {
         }
         // noinspection TypeScriptValidateJSTypes
         salla.event.dispatch('payments::apple-pay.start-transaction', {
-            amount: this.amount, // 1000
+            // Prefer the modal's collected total (PDP price + selected OO additional_prices).
+            // Falls back to PDP live amount when no OO modal ran.
+            amount: this.applePayAmount > 0 ? this.applePayAmount : this.amount,
             currency: this.currency || 'SAR', // SAR
             requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
             supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
             supportedCountries: salla.config.get('store.settings.buy_now.countries'),
             countryCode: salla.config.get('store.store_country') || 'SA',
+            onStartedSession: this.handleApplePaySessionStarted,
             validateMerchant: {
                 url: this.validateHost ? `${this.validateHost}/checkout/applepay/validate` : salla.url.get('checkout/applepay/validate'),
                 onSuccess: (response) => {
@@ -2684,7 +2996,7 @@ const SallaQuickBuy = class {
         });
     }
     render() {
-        return h(Host, { key: '078fa17510403612cf8204899fee395f057b88bd' }, this.quickBuyButton());
+        return h(Host, { key: 'fb1bdf862d9b9cea58df14862f7ec9c4be388585' }, this.quickBuyButton());
     }
     quickBuyButton() {
         return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, a as getElement } from './index-Cly9a4nm.js';
+import { r as registerInstance, h, a as getElement } from './index-BvYTcqJt.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 
 const sallaAdvertisementCss = ":host{display:block}";

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Cly9a4nm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BvYTcqJt.js';
 import { P as PendingOrdersIcon } from './cart-DY4LZmNP.js';
 import { I as ImageIcon } from './image-C-tzSDxw.js';
 
@@ -34,7 +34,7 @@ const SallaAlert = class {
         }
     }
     render() {
-        return (h(Host, { key: '3b5dd808399eeda5d930454542cd41cca26b0cc3', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: '4f58234774d1afc790fb83bff983ca9366faa349', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: '10eb3f87e6e77dcc5406a24f866feee1cc1f46ef', class: "s-alert-text" }, this.message, h("slot", { key: '3656e15aeb25fb7285e88f694c090bad3b32dfbd' }))));
+        return (h(Host, { key: 'e26a52cc275ac4c2e4090c113cb7e7d4d578fc11', class: `s-alert-wrapper s-alert-${this.variant}` }, h("span", { key: 'bdb1c6693b226a4e136e89640fcc19fbefc6e29e', class: "s-alert-icon" }, this.renderIcon()), h("span", { key: 'de8997f9617e74fc082ae9603bf16eac4c0a4b17', class: "s-alert-text" }, this.message, h("slot", { key: '37fb1adba1fa7f0226143250632cf20b514ee06b' }))));
     }
 };
 SallaAlert.style = sallaAlertCss;
@@ -184,9 +184,9 @@ const SallaBottomAlert = class {
     }
     render() {
         const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
-        return (h(Host, { key: 'b9eaef26dfe11005441af53a6413ec0ff0568cc6', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: 'd47d95804f5146f8b692b200bf285a8547e758fa', class: "s-bottom-alert-logo-section" }, h("img", { key: 'cf20a9f6b77b11e27c2c282ee40c490fc9d31525', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: 'd13eeaa4cc8918cf7a38925526f659e1041c1e8a', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: 'beac912a924cb879ca4b0fbc270febdd61c8822c', class: "s-bottom-alert-content" }, h("div", { key: '75ef41821088475f1715adcf3a54d8705a8bf2cc', class: "flex items-center gap-2" }, h("div", { key: '97c4f14fefc046d0f12249c7fc4ea25e436dfd98', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '0e4f8dc0c15ea1ff3390ef5b494e9f4216eeb5db', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
+        return (h(Host, { key: '1e598df3c91be1e357fc5d771061ec386573f968', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '20a0173dfa6a01b793f8e1e9416d295ee4e61783', class: "s-bottom-alert-logo-section" }, h("img", { key: '2c9042f0ce022aeb9b2879496ec2837ed14dfe9f', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: '69c2bc09acca8a535d2f982131ccc09d65ea44e6', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '553122bac6f1f11c2bcc41a92ac798b3701ebfb9', class: "s-bottom-alert-content" }, h("div", { key: 'e0df96405998b70c15a8320c8400fa75db77d041', class: "flex items-center gap-2" }, h("div", { key: '26f241c725c763dfc25f58cdcd0f2979571a2061', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '5e6ba42a2924aec3b99050e8f53634716023a535', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
                 's-bottom-alert-message-highlight': true,
-            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: 'dd6807a1bd8d78fe440e7d37371ed6bf31b3ac65', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
+            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: '44c4d9499736d84da97b640b8ab063a6b9dd6d3c', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/salla-app-install-alert.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Cly9a4nm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BvYTcqJt.js';
 
 const sallaAppInstallAlertCss = ":host{display:block}";
 

package/dist/esm/salla-apps-icons.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-Cly9a4nm.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-BvYTcqJt.js';
 
 const sallaAppsIconsCss = ":host{display:block}";
 

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-Cly9a4nm.js';
+import { r as registerInstance, h } from './index-BvYTcqJt.js';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -85,7 +85,7 @@ const SallaBadge = class {
         this.bg = 'light';
     }
     render() {
-        return (h("div", { key: '9d81a7c592a57a533e2b8a48f015e2f9e796be51', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '999e75ec14a8346d84dbfc5122c448999d4fc481' })));
+        return (h("div", { key: '54d35eb76a59251edb581786e5e89a83b6f8fbf0', class: badge({ size: this.size, bg: this.bg, color: this.color }) }, h("slot", { key: '4641cb434a2c0a6d7c004e3384848a200cb79dff' })));
     }
 };
 SallaBadge.style = sallaBadgeCss;