@salla.sa/twilight-components 2.14.492 → 2.14.494

package/dist/components/salla-loyalty-banner.js

@@ -4,11 +4,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as loyaltyProgramIcon } from './gift.js';
 import { T as TrackedPromise } from './tracked-promise.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
 import { d as defineCustomElement$4 } from './salla-loading2.js';
 import { d as defineCustomElement$3 } from './salla-modal2.js';
 import { d as defineCustomElement$2 } from './salla-reward-exchange2.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -69,13 +70,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-loyalty-banner", "salla-loading", "salla-modal", "salla-reward-exchange"];
+    const components = ["salla-loyalty-banner", "salla-button", "salla-loading", "salla-modal", "salla-reward-exchange"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-loyalty-banner":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, SallaLoyaltyBanner$1);
             }
             break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "salla-loading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();

package/dist/components/salla-loyalty-exchange-product-card.d.ts

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

package/dist/components/salla-loyalty-exchange-product-card.js

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

package/dist/components/salla-loyalty-exchange-product-card2.js

@@ -0,0 +1,151 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$i } from './salla-add-product-button2.js';
+import { d as defineCustomElement$h } from './salla-booking-field2.js';
+import { d as defineCustomElement$g } from './salla-button2.js';
+import { d as defineCustomElement$f } from './salla-color-picker2.js';
+import { d as defineCustomElement$e } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$d } from './salla-count-down2.js';
+import { d as defineCustomElement$c } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$b } from './salla-file-upload2.js';
+import { d as defineCustomElement$a } from './salla-loading2.js';
+import { d as defineCustomElement$9 } from './salla-map2.js';
+import { d as defineCustomElement$8 } from './salla-modal2.js';
+import { d as defineCustomElement$7 } from './salla-order-options-modal2.js';
+import { d as defineCustomElement$6 } from './salla-product-availability2.js';
+import { d as defineCustomElement$5 } from './salla-product-card2.js';
+import { d as defineCustomElement$4 } from './salla-product-options2.js';
+import { d as defineCustomElement$3 } from './salla-progress-bar2.js';
+import { d as defineCustomElement$2 } from './salla-quick-buy2.js';
+import { d as defineCustomElement$1 } from './salla-tel-input2.js';
+
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
+
+const SallaLoyaltyExchangeProductCard = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyExchangeProductCard extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.loyaltyProductExchange = createEvent(this, "loyaltyProductExchange", 7);
+    }
+    componentWillLoad() {
+        this.hasCustomCard = !!customElements.get('custom-salla-product-card');
+    }
+    render() {
+        const product = typeof this.product === 'string' ? JSON.parse(this.product) : this.product;
+        return (h("div", { key: 'a60d337ebcf226318d449a4319906a71a9ab1e92', class: "s-loyalty-exchange-card" }, this.hasCustomCard
+            ? h("custom-salla-product-card", { product: product, hideAddBtn: true })
+            : h("salla-product-card", { "hide-add-btn": true, product: product }), h("div", { key: '77a0cff2bf5fce5c017493a0769e266eeeaaa01c', class: "s-loyalty-exchange-card-btn" }, h("salla-button", { key: '941c82bb35bfd116a13292ddf5425645c3d61ad7', fill: "outline", width: "wide", onClick: () => this.loyaltyProductExchange.emit({ productId: product.id }) }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
+    }
+    static get style() { return sallaLoyaltyProgramCss; }
+}, [0, "salla-loyalty-exchange-product-card", {
+        "product": [8],
+        "hasCustomCard": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-loyalty-exchange-product-card", "salla-add-product-button", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-progress-bar", "salla-quick-buy", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-loyalty-exchange-product-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaLoyaltyExchangeProductCard);
+            }
+            break;
+        case "salla-add-product-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "salla-booking-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "salla-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "salla-conditional-fields":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "salla-count-down":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "salla-datetime-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "salla-map":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-order-options-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-product-availability":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-product-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-product-options":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-quick-buy":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { SallaLoyaltyExchangeProductCard as S, defineCustomElement as d };

package/dist/components/salla-loyalty-hero2.js

@@ -3,7 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaLoyaltyHero = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyHero extends HTMLElement {
     constructor() {
@@ -11,13 +11,13 @@ const SallaLoyaltyHero = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyHero
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'c0060bac9958abfd0fe8e60a9b24c48d3a44f808' }, h("section", { key: '23529c848e4b44e10aef943457926d7fb4053e42', class: "s-loyalty-program-hero-container" }, h("div", { key: 'd2a7042e02f8a6a7a40f34f445fac4bed07c26e7', class: "s-loyalty-program-hero-background", style: {
+        return (h(Host, { key: '881c4dca4b0088ac6be4f0ffd619b3fd3850a151' }, h("section", { key: '9351457856d5830f7ec46f74583bbcbb2f4f4a9e', class: "s-loyalty-program-hero-container" }, h("div", { key: 'b2a7dd45788cb928d176ce3ed6376afcb0dc7830', class: "s-loyalty-program-hero-background", style: {
                 backgroundImage: `url(${this.image})`,
-            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: 'd8b5459d499161ee6c79e5c67dc7c50f4be241ff', class: {
+            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: '2a9ee6e7475009d075e4296c5de86fc4d0449cdb', class: {
                 's-loyalty-program-hero-content': true,
                 's-loyalty-program-hero-white': !!this.image,
                 's-loyalty-program-hero-gray': !this.image,
-            } }, h("div", { key: '26ef4c09f27d93b96c0e12f7998484fa73837b6c' }, h("h1", { key: '2930af83fa736285c220fca7c241e08f7f67267a', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: 'c6a170b91e43f8321a350c95c85c4f0bf24e0d2d', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: '2558c1947c3cb1e78ddd396b596d72a9e62f408d', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: '363b97050db887cd8c05db1feec3fb834d7f48bb', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: '27ca29dfcd2cd5d176f22a7cf43ef26343ccf2e8', name: "action" }))), h("div", { key: 'a39534b8f093ff4e2373367a1e10bf2d9a986f37', class: "s-loyalty-program-hero-footer" }, h("div", { key: '10ccbf09e4e643255df236cc0d2ad55894a420ea', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: '33973737797d6f5303f0e1435768816eea7450c5', name: "crosspoint" }))))));
+            } }, h("div", { key: 'a33e4bbd22ebdb76a714035addd04b64193dcd61' }, h("h1", { key: 'baa0b1a7dc2a76bd69015bfc71a58fef85ee8b5d', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: '29ef7f98496e8a7d6fb25ca03f377c6f67ee305c', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: '3f5756fade604d55a2fad9670a2814e02cfd9521', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: 'e2cd101bf83e7704b05767db16757ebffddfff2f', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: '9372dc3a963bd08f3808ab3587c0d1140dfc16b7', name: "action" }))), h("div", { key: 'b1d4d0134aa73cd95d0283e0efd96e112c212aed', class: "s-loyalty-program-hero-footer" }, h("div", { key: '27061a96319400b58d13a79691b7b47588e27544', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: '87dad7cf9262a2e56f5a9f918bf3d9353ffb8c45', name: "crosspoint" }))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [4, "salla-loyalty-hero", {

package/dist/components/salla-loyalty-panel.js

@@ -9,17 +9,18 @@ import { S as SIPercentage, a as SILayoutGrid } from './percentage.js';
 import { S as SIShipping } from './shipping.js';
 import { C as Cart2 } from './cart2.js';
 import { T as TrackedPromise } from './tracked-promise.js';
-import { d as defineCustomElement$u } from './salla-add-product-button2.js';
-import { d as defineCustomElement$t } from './salla-badge2.js';
-import { d as defineCustomElement$s } from './salla-booking-field2.js';
-import { d as defineCustomElement$r } from './salla-button2.js';
-import { d as defineCustomElement$q } from './salla-color-picker2.js';
-import { d as defineCustomElement$p } from './salla-conditional-fields2.js';
-import { d as defineCustomElement$o } from './salla-count-down2.js';
-import { d as defineCustomElement$n } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$m } from './salla-file-upload2.js';
-import { d as defineCustomElement$l } from './salla-list-tile2.js';
-import { d as defineCustomElement$k } from './salla-loading2.js';
+import { d as defineCustomElement$v } from './salla-add-product-button2.js';
+import { d as defineCustomElement$u } from './salla-badge2.js';
+import { d as defineCustomElement$t } from './salla-booking-field2.js';
+import { d as defineCustomElement$s } from './salla-button2.js';
+import { d as defineCustomElement$r } from './salla-color-picker2.js';
+import { d as defineCustomElement$q } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$p } from './salla-count-down2.js';
+import { d as defineCustomElement$o } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$n } from './salla-file-upload2.js';
+import { d as defineCustomElement$m } from './salla-list-tile2.js';
+import { d as defineCustomElement$l } from './salla-loading2.js';
+import { d as defineCustomElement$k } from './salla-loyalty-exchange-product-card2.js';
 import { d as defineCustomElement$j } from './salla-map2.js';
 import { d as defineCustomElement$i } from './salla-modal2.js';
 import { d as defineCustomElement$h } from './salla-order-options-modal2.js';
@@ -41,7 +42,7 @@ import { d as defineCustomElement$2 } from './salla-tel-input2.js';
 
 var PrizeImage = `<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" fill="none" viewBox="0 0 57 57"><rect width="56.3" height="55.9" x=".4" y=".2" fill="#FFF5E5" rx="27.9"/><g clip-path="url(#a)"><path fill="#EE9D0D" d="M16.7 27.5h17.5v12.2a1 1 0 0 1-1 1H17.7a1 1 0 0 1-1-1V27.5Z"/><path fill="#C7830B" d="M34.2 27.8v6l-6.8-6.3H34l.3.3Z"/><path fill="#C7830B" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EA2B2D" d="m29.9 15.8-.3.1a2.4 2.4 0 0 0-1.4 1.5l-.2.8-.4.2a2.4 2.4 0 0 0-1.1 1.4l4.2 3.9L33 21l.2-2.9a2.4 2.4 0 0 0-3.3-2.4ZM41.1 26.3v.2a2.4 2.4 0 0 1-1.5 1.6l-.7.3-.2.3a2.4 2.4 0 0 1-1.3 1.3l-4.2-4 2.4-2.5 2.9-.3a2.4 2.4 0 0 1 2.6 3.1Z"/><path fill="#CB2527" d="M23.7 27.5h3.5v13.1h-3.5V27.5Z"/><path fill="#EA2B2D" d="M16.7 32.3h17.5v3.5H16.7v-3.5Z"/><path fill="#CB2527" d="M34.2 32.3v1.5l-1.6-1.5h1.6Z"/><path fill="#EE9D0D" d="M25.3 18.7 38.6 31a1 1 0 0 1 0 1.4l-2.3 2.4-14.7-13.7 2.3-2.5a1 1 0 0 1 1.4 0Z"/><path fill="#CB2527" d="m30.3 23.4 3.2 3-3 3.2-3.2-3 3-3.2ZM31.8 22.8a.4.4 0 0 1-.3-.1l-.3-.4A5.9 5.9 0 0 1 30 18a.4.4 0 0 1 .9 0 5 5 0 0 0 1 3.7l.3.3a.4.4 0 0 1-.4.7Z"/><path fill="#EA2B2D" d="M30.7 23.7c-1.9.7-3.8 1-5.7.9h-1.1l1.9 1.7-.6 1.9 1.8-.6c1.7-.5 3.2-1.4 4.6-2.5l.3-.2-1.2-1.2Z"/><path fill="#CB2527" d="M37.8 26.4c-1.1 0-2.3-.3-3.2-1l-.4-.2a.4.4 0 0 1 0-.8.4.4 0 0 1 .5 0l.3.3a5 5 0 0 0 3.7.7.4.4 0 1 1 .2 1 6 6 0 0 1-1 0Z"/><path fill="#EA2B2D" d="M33.2 26c-.5 2-.7 3.9-.5 5.8l.1 1.1-1.9-1.8-1.8.7.4-1.8c.4-1.7 1.2-3.3 2.2-4.8l.2-.3 1.3 1.2Z"/><path fill="#6699CE" d="M21.5 17.4a.9.9 0 1 0 0-1.7.9.9 0 0 0 0 1.7Z"/><path fill="#FAA6B2" d="M16.7 27.5a.9.9 0 1 0 0-1.8.9.9 0 0 0 0 1.8Z"/><path fill="#A6DEFF" d="M18.4 17.9a.4.4 0 0 1-.4-.3v-.1a1.4 1.4 0 0 0-1.3-1 .4.4 0 0 1-.2-.8h.2a2.3 2.3 0 0 1 2.1 1.5.4.4 0 0 1-.4.7ZM20.6 25.6h-.2v-.1a1 1 0 0 0-1.1 0 .4.4 0 0 1-.5-.8 1.8 1.8 0 0 1 2 0 .4.4 0 0 1-.2.9Z"/><path fill="#EEB436" d="m17.6 18.6 1.3 1.2 1.8-.4-.7 1.7.9 1.6-1.8-.2-1.2 1.3-.4-1.8-1.7-.7 1.6-.9.2-1.8ZM23 26.6l-.5 1.8 1.2 1.3-1.8.2-1 1.5-.6-1.7-1.8-.4 1.4-1.1-.2-1.9 1.6 1 1.6-.7Z"/><path fill="#F72D2F" d="m33.2 26-2.5-2.3L33 21a4 4 0 0 1 2.6 2.4l-2.4 2.6Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M15.8 15.7h25.4v25H15.8z"/></clipPath></defs></svg>`;
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -67,6 +68,7 @@ const SallaLoyaltyPanel$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyP
          * prize to show in details or exchange modals
          */
         this.currentPrize = null;
+        this.currentProductId = null;
         this.handleExchangeSucceeded = () => window.location.reload();
         this.handleResetSucceeded = () => window.location.reload();
     }
@@ -111,14 +113,15 @@ const SallaLoyaltyPanel$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyP
             }, onActionClick: () => {
                 this.currentPrize = prize;
                 closeModals(() => this.detailsModal.open());
-            } })))))))))) : ''), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))));
+            } })))))))))) : ''), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => { this.currentProductId = null; closeModals(() => this.exchangeModal.open()); }, onProductActionClick: (e) => { this.currentProductId = e.detail.productId; closeModals(() => this.exchangeModal.open()); }, prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize, productId: this.currentProductId }))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-loyalty-panel", {
         "prizePoints": [1537, "prize-points"],
         "customerPoints": [1538, "customer-points"],
         "prizeTitle": [1537, "prize-title"],
-        "currentPrize": [32]
+        "currentPrize": [32],
+        "currentProductId": [32]
     }]);
 __decorate([
     TrackedPromise(async () => {
@@ -136,7 +139,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-loyalty-panel", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
+    const components = ["salla-loyalty-panel", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-list-tile", "salla-loading", "salla-loyalty-exchange-product-card", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-loyalty-panel":
             if (!customElements.get(tagName)) {
@@ -145,55 +148,60 @@ function defineCustomElement$1() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "salla-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "salla-booking-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "salla-color-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "salla-conditional-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "salla-list-tile":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "salla-loyalty-exchange-product-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }

package/dist/components/salla-loyalty-point2.js

@@ -59,7 +59,7 @@ var SIMapLocation = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 /**
  * Dashboard sicons:
@@ -216,7 +216,7 @@ const SallaLoyaltyPoint = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyPoi
         }
     }
     render() {
-        return (h("div", { key: 'ddfb0e0ffb4c23f7cab43dd994e25ba7c599a931' }, h("div", { key: 'a2fe514f59b0e01fc6e22011b6734d7ba97e951e', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: '486b61a56b739a881de4ff0581a19ef91fbfc2e8', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '15f77554d8af1f65a66bf788cae341fe9f8f0fa3', class: this.point.icon })), h("div", { key: '2921be35f4d122e1a4580ed625832e4f33d69276', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: 'c809f65f9c93553e595fc995b76070a6a065e9d8', size: "xs", bg: "transparent" }, h("span", { key: 'd76ddeb873ac19f91b3cfe8af5837feb096cd7ca', innerHTML: loyaltyProgramIcon }), formattedPointsJsx(this.point))), h("div", { key: '18674b523984b6ca91afcee873e219571f867fcf', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: '7ebbee57d2858f1ba372fd4b0b42771e394e330f', size: "sm", bg: "transparent" }, h("span", { key: '41a93def0e2e54b4e6e036222e212703fe9ef88f', innerHTML: loyaltyProgramIcon }), formattedPointsJsx(this.point))), h("p", { key: 'acfa0ed98f398b591cb22e828ca677d37007e4e6', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
+        return (h("div", { key: '4f7a191b41435d2ea0c603e4454af4307362f5bf' }, h("div", { key: 'ef68b5b9f8606e2aa54ed97eddaecd5f9c191d1c', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: 'b14f2d1f94daf0674b076db69af9427b23d35e08', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '4d7ee556fde10c0039f035b1310711f2ddb6b6ab', class: this.point.icon })), h("div", { key: '5bf70bb463de4c340a71286d7b9b1a1412842762', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: '53a1ac2b950144b78104ffbc9824642865d2b03e', size: "xs", bg: "transparent" }, h("span", { key: 'bb45f6133544718e5296ca5635f5d72c4ff6e86b', innerHTML: loyaltyProgramIcon }), formattedPointsJsx(this.point))), h("div", { key: '92f4eed2567bcad8e4e8d65e5d36cd12829862ef', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: 'ee188fec0149cb900af5e7a3467defd8302c66b0', size: "sm", bg: "transparent" }, h("span", { key: 'b196131e3c3f4d78e11384ee9663373dcfc6f76d', innerHTML: loyaltyProgramIcon }), formattedPointsJsx(this.point))), h("p", { key: 'b759840a68a867310bf0be0ebe6bbef038c48284', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
             h("a", { class: {
                     's-loyalty-program-points-action': true,
                     's-loyalty-program-points-action-completed': this.point.is_completed,
@@ -226,12 +226,12 @@ const SallaLoyaltyPoint = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyPoi
                     's-loyalty-program-points-action': true,
                     's-loyalty-program-points-action-completed': this.point.is_completed,
                     's-loyalty-program-points-action-incomplete': !this.point.is_completed,
-                } }, this.point.description)), h("salla-modal", { key: '7c9f4dce935ba3e1f841aab57de04013e2fb983f', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: '5e1dbd60526ae8450ce6453c04ea244ef1a96697', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: 'b43153fe19ffa308d5bd4126c9bd0fd43f1379ea', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '5d8f1cad86fd916f984f5baa07ff7fb18afeda68', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '69c4e3f2d513ec6c52caaa31ab3e7c886c0827a0', class: "s-loyalty-program-points-modal-main" }, h("div", { key: '539a7713a22f64e9e4157dcd288ceca49910a449', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: '5249f670969022167be8b11bff3ec8c75b4f0a5b', class: this.point.icon })), h("salla-badge", { key: 'e19decc72866ca36e3cc52c9822fc4677816bbda', size: "sm", bg: "light" }, h("span", { key: 'f2ed0ef699b63ce091c2b7dc5d30341bb0dcf713', innerHTML: loyaltyProgramIcon }), h("span", { key: '54275a2ec227c9415e77f88051bbf4e36d10489e', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), !!this.point.steps && Object.keys(this.point.steps).length > 0 &&
-            h("div", { key: '7b8d4168a96586efa2855f169536a0577750cabe', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '102274da4418a7119e65c6a5c44630315e348c98', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '9a87e3fcb31ab6a0b984fe3fd43b9b57678b4600', class: "s-loyalty-program-points-chain-list" }, Object.values(this.point.steps).map((step, idx) => {
+                } }, this.point.description)), h("salla-modal", { key: '90d851469e4f1ce77c4f509bfecd96abb2425dda', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: '795d0984a4b7bca115500a9c3850cce6c6e6a7f0', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '0124a924ddde8516b6d27e9d9b36f44b14d5f13a', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '3ff4ec01ffe1e16ac53a170e04c8ca7b4c065d36', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: 'a56d5201a53a4e56bd5d04b51d1ce9a3151f0375', class: "s-loyalty-program-points-modal-main" }, h("div", { key: '5b1b1ed27359d2f6b31a86a58ca8a7388f61b6e3', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'c73db6477ad88cc4b8467623fbf4a2d623b2f66f', class: this.point.icon })), h("salla-badge", { key: '432dde709ab1ea8d346104cee2e2d230fe9e5060', size: "sm", bg: "light" }, h("span", { key: '53134910bad559f02782092d47bfe56d4a56decb', innerHTML: loyaltyProgramIcon }), h("span", { key: 'e374ac7a30fc529b4a32833dfa7af90f76ae4c34', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), !!this.point.steps && Object.keys(this.point.steps).length > 0 &&
+            h("div", { key: '885c021210ceb4c6410deb811515b58489db76fa', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '9d4a907cf6ab0fd59f85cbcfe111fd2dd1031cee', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '8653fe18c6fe5f4708d91159db40c54bc44deeda', class: "s-loyalty-program-points-chain-list" }, Object.values(this.point.steps).map((step, idx) => {
                 const stepsArray = Object.values(this.point.steps);
                 const isLastItem = idx === stepsArray.length - 1;
                 return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[step.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", null, salla.lang.get(`pages.loyalty_program.step_${idx + 1}`))), h("p", { class: "s-loyalty-program-points-chain-description" }, step.title || step.name))));
-            })))), this.getDetails(this.point), h("div", { key: '7c96d9b4014f2b531cf85f0f4dd9c797f6b4e352', class: "s-loyalty-program-points-modal-details" }, this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: loyaltyProgramIcon }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: '79a6d37b6af82a40b5b88f1a7e03034c3ac9fe90', class: "s-loyalty-program-points-modal-action" }, h("a", { key: '6498d88e64af28621281b8c12b28c1a22473001d', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
+            })))), this.getDetails(this.point), h("div", { key: 'fed15aa3a7c7ecfe9818a87264e660c045d2658a', class: "s-loyalty-program-points-modal-details" }, this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: loyaltyProgramIcon }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: 'c4b5a24d78cf70dad65ea9b4d606c338bba7912e', class: "s-loyalty-program-points-modal-action" }, h("a", { key: 'f9718774e2fc3a1def69b8fa8d7ebfdfb9086197', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
                 's-loyalty-program-points-action': true,
                 's-loyalty-program-points-action-completed': this.point.is_completed,
                 's-loyalty-program-points-action-incomplete': !this.point.is_completed,

package/dist/components/salla-loyalty-program.js

@@ -10,16 +10,17 @@ import { a as SIUserAdd, d as defineCustomElement$k } from './salla-loyalty-poin
 import { S as SIGiftSharing } from './gift-sharing.js';
 import { T as TrackedPromise } from './tracked-promise.js';
 import { a as anime } from './anime.es.js';
-import { d as defineCustomElement$v } from './salla-add-product-button2.js';
-import { d as defineCustomElement$u } from './salla-badge2.js';
-import { d as defineCustomElement$t } from './salla-booking-field2.js';
-import { d as defineCustomElement$s } from './salla-button2.js';
-import { d as defineCustomElement$r } from './salla-color-picker2.js';
-import { d as defineCustomElement$q } from './salla-conditional-fields2.js';
-import { d as defineCustomElement$p } from './salla-count-down2.js';
-import { d as defineCustomElement$o } from './salla-datetime-picker2.js';
-import { d as defineCustomElement$n } from './salla-file-upload2.js';
-import { d as defineCustomElement$m } from './salla-loading2.js';
+import { d as defineCustomElement$w } from './salla-add-product-button2.js';
+import { d as defineCustomElement$v } from './salla-badge2.js';
+import { d as defineCustomElement$u } from './salla-booking-field2.js';
+import { d as defineCustomElement$t } from './salla-button2.js';
+import { d as defineCustomElement$s } from './salla-color-picker2.js';
+import { d as defineCustomElement$r } from './salla-conditional-fields2.js';
+import { d as defineCustomElement$q } from './salla-count-down2.js';
+import { d as defineCustomElement$p } from './salla-datetime-picker2.js';
+import { d as defineCustomElement$o } from './salla-file-upload2.js';
+import { d as defineCustomElement$n } from './salla-loading2.js';
+import { d as defineCustomElement$m } from './salla-loyalty-exchange-product-card2.js';
 import { d as defineCustomElement$l } from './salla-loyalty-hero2.js';
 import { d as defineCustomElement$j } from './salla-map2.js';
 import { d as defineCustomElement$i } from './salla-modal2.js';
@@ -47,7 +48,7 @@ var SICartUpload = `<!-- Generated by IcoMoon.io -->
 </svg>
 `;
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -73,6 +74,7 @@ const SallaLoyaltyProgram$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalt
          * prize to show in details or exchange modals
          */
         this.currentPrize = null;
+        this.currentProductId = null;
         /**
          * collapsed state of points list
          */
@@ -131,11 +133,12 @@ const SallaLoyaltyProgram$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalt
             }, onActionClick: () => {
                 this.currentPrize = prize;
                 closeModals(() => this.detailsModal.open());
-            } })))))))), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))))));
+            } })))))))), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => { this.currentProductId = null; closeModals(() => this.exchangeModal.open()); }, onProductActionClick: (e) => { this.currentProductId = e.detail.productId; closeModals(() => this.exchangeModal.open()); }, prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize, productId: this.currentProductId }))))));
     }
     static get style() { return sallaLoyaltyProgramCss; }
 }, [0, "salla-loyalty-program", {
         "currentPrize": [32],
+        "currentProductId": [32],
         "collapsed": [32],
         "animatedPoints": [32]
     }]);
@@ -165,7 +168,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["salla-loyalty-program", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-loyalty-hero", "salla-loyalty-point", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
+    const components = ["salla-loyalty-program", "salla-add-product-button", "salla-badge", "salla-booking-field", "salla-button", "salla-color-picker", "salla-conditional-fields", "salla-count-down", "salla-datetime-picker", "salla-file-upload", "salla-loading", "salla-loyalty-exchange-product-card", "salla-loyalty-hero", "salla-loyalty-point", "salla-map", "salla-modal", "salla-order-options-modal", "salla-product-availability", "salla-product-card", "salla-product-options", "salla-products-slider", "salla-progress-bar", "salla-quick-buy", "salla-reward-action", "salla-reward-card", "salla-reward-details", "salla-reward-exchange", "salla-slider", "salla-tab-content", "salla-tab-header", "salla-tabs", "salla-tel-input"];
     components.forEach(tagName => { switch (tagName) {
         case "salla-loyalty-program":
             if (!customElements.get(tagName)) {
@@ -174,50 +177,55 @@ function defineCustomElement$1() {
             break;
         case "salla-add-product-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "salla-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "salla-booking-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "salla-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "salla-color-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "salla-conditional-fields":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "salla-count-down":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "salla-datetime-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "salla-file-upload":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "salla-loyalty-exchange-product-card":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }

package/dist/components/salla-loyalty-reward.js

@@ -6,7 +6,7 @@ import { c as closeModals } from './functions.js';
 import { l as loyaltyProgramIcon } from './gift.js';
 import { d as defineCustomElement$2 } from './salla-badge2.js';
 
-const sallaLoyaltyProgramCss = "";
+const sallaLoyaltyProgramCss = "@media (max-width: 639px){.s-loyalty-program-modal .s-modal-body{position:relative !important;left:unset !important;bottom:unset !important;max-height:100dvh;overflow-y:auto !important}}.s-loyalty-exchange-card salla-product-card .s-product-card-image,.s-loyalty-exchange-card custom-salla-product-card .s-product-card-image{flex:none;aspect-ratio:1;overflow:hidden}.s-loyalty-exchange-card-btn{padding:0 1.25rem 1.25rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid{display:flex;flex-wrap:wrap;gap:1rem;margin-top:0.75rem}.s-loyalty-program-reward-details-products-grid>*{flex:1 1 100%;min-width:0;touch-action:pan-y}@media (min-width: 640px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 1rem) / 2)}}@media (min-width: 768px){.s-loyalty-program-reward-details-products-grid>*{flex-basis:calc((100% - 2rem) / 3)}}.s-loyalty-program-reward-details-products-grid>*:only-child{max-width:320px;margin-inline:auto}.s-loyalty-program-reward-details-products-grid:has(>*:nth-child(3))>*{flex-grow:0}";
 
 const SallaLoyaltyReward$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyaltyReward extends HTMLElement {
     constructor() {
@@ -39,10 +39,10 @@ const SallaLoyaltyReward$1 = /*@__PURE__*/ proxyCustomElement(class SallaLoyalty
         };
     }
     render() {
-        return (h("div", { key: '46da4cdcfee8e04307722a89c94ab7c3d867aec4', class: {
+        return (h("div", { key: '0e3735d77de3b13948ba8cf473986185c52b9b1f', class: {
                 's-loyalty-program-reward-container': true,
                 's-loyalty-program-reward-xs': this.size === 'xs',
-            } }, h("div", { key: '3d4d1b1adada717d2c248e1a2287b80b370accc8', onClick: this.handleActionArea, role: "button" }, h("div", { key: '2f699dcc9098adbbdec2ab1522bdb49977440663', class: "s-loyalty-program-reward-img" }, h("img", { key: '9fcc993f9f010ebd5663d02849714db897321357', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'd66d0be909c1f1c239a4aeb2152cd6f3850f25d4', class: "s-loyalty-program-reward-content" }, h("div", { key: '10968623d1fe8815a547e7b404f58b8401eed98b', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: 'd677e3be9ed036091f523b51d06d64635e1426d9', size: "xs" }, h("span", { key: '8b67c0112a61c5a9f224f308193dd933db6811df', innerHTML: loyaltyProgramIcon }), h("span", { key: '0b53d61ca1b07318a19d00c5948045385be2c877', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '5c88b91c602ddb8d81bd2537ebe32afaa13dabd7', class: "s-loyalty-program-reward-title" }, h("span", { key: '9f070612c7b381cdfc11cb794a29dd3d4fad78e3' }, this.group)), h("div", { key: 'd2ed88971fb88f4c857970a15b08b87681225ad4', class: "s-loyalty-program-reward-name" }, h("div", { key: '0818181909194a5a9d7bd8b0b0f421ee1c33cac9', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '61a792efce0cb44e5d676a2d10fbf466fdc9926a', class: "p-4" }, h("button", { key: 'b2f469e2206892914e14e542fc9acf6ccc289f59', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
+            } }, h("div", { key: '3988af25528bed3ff027405a1b84a4ded0b4fce8', onClick: this.handleActionArea, role: "button" }, h("div", { key: '3b6c3b7a35aa41a792f5ac05ff58f904ff850194', class: "s-loyalty-program-reward-img" }, h("img", { key: '2c8b14fcfd5b8db52c82033cdc797cc819e117eb', src: this.prize.image, class: "s-loyalty-program-rewards-img", alt: "" })), h("div", { key: 'a0c7699c3a84adac9040ed2132e631795b041784', class: "s-loyalty-program-reward-content" }, h("div", { key: '5072ad6dae99ea1dec7bb4eef97a7c4fcca4f554', class: "s-loyalty-program-reward-points" }, h("salla-badge", { key: '8e75004f0ac06e6ff29f5f5dc0fa0915392078bc', size: "xs" }, h("span", { key: 'eda3bd13b60467b5c3b6342ea1688e880913aaf4', innerHTML: loyaltyProgramIcon }), h("span", { key: '3be615346ec1d55f312fd22d6a324366a181abdf', class: "s-loyalty-program-rewards-points", innerHTML: salla.lang.choice('pages.loyalty_program.points', this.prize.cost_points) }))), h("div", { key: '611821580eb3216ad71b22634bdb40eec78adabf', class: "s-loyalty-program-reward-title" }, h("span", { key: 'dfa2d90b84aad0fd83e7add9bfdf72e26b14751b' }, this.group)), h("div", { key: '0401936cd2f3fd7d534ebe8ffe69ccb4149f38a4', class: "s-loyalty-program-reward-name" }, h("div", { key: '3275b7e29eec246fb9b7983c4160338613e31c13', class: "s-loyalty-program-rewards-name", id: `prize-${this.prize.id}` }, this.prize.name)))), h("div", { key: '4051723d3c48dd0c967b28d231f8a4dc09530a8f', class: "p-4" }, h("button", { key: 'e74ea5eb83e50f3be56e75904c5a961b63b2445d', onClick: this.handleAction, disabled: !this.isActionClickable(this.prize), class: {
                 's-loyalty-program-rewards-action-base': true,
                 's-loyalty-program-rewards-action-on': this.isActionClickable(this.prize),
                 's-loyalty-program-rewards-action-off': !this.isActionClickable(this.prize),