@salla.sa/twilight-components 2.14.575 → 2.14.577

package/dist/collection/components/salla-cart-coupons/salla-cart-coupons.js

@@ -17,6 +17,20 @@ export class SallaCartCoupons {
         // - Multi-coupon (features::multi_coupon on): holds every applied code,
         //   sourced from the cart's `coupons` array so it survives a page refresh.
         this.appliedCoupons = [];
+        // CP-3695: the unified list actually rendered — applied coupons and checkout coupons joined
+        // on `code`, so a coupon that is both no longer appears twice (once as a chip, once as a card).
+        // Derived from appliedCoupons + availableCoupons by buildMergedCoupons(); never fetched.
+        this.mergedCoupons = [];
+        // CP-3695: card data for the APPLIED coupons, straight off the cart payload
+        // (`applied_coupons`). It covers the ones the checkout-coupons endpoint never returns — a
+        // manually typed code, or one with show_checkout_coupon = 0 — which would otherwise have no
+        // amount, expiry or minimum and could only be drawn as a bare code. Absent on an older
+        // backend, in which case those coupons keep falling back to the code-only card.
+        this.appliedCouponCards = [];
+        // False until the shopper acts on the list. While false, buildMergedCoupons() is free to sort
+        // applied-first — that is how the row settles on load and after a reload. Once true the order
+        // is held, so tapping a card never shifts its neighbours.
+        this.orderLocked = false;
         // Whether the store has multi-coupon enabled. Read ONCE from the store config
         // (Salla.config.get('store.settings.cart.multi_coupon')) — a stable store-level setting,
         // exactly like cart.apply_coupon_enabled — not from the per-cart payload or localStorage.
@@ -151,6 +165,8 @@ export class SallaCartCoupons {
             // No coupons available on error
             this.availableCoupons = [];
         }
+        // Half the unified list just arrived — rejoin it against whatever the cart already gave us.
+        this.buildMergedCoupons();
     }
     async loadCartTotal() {
         // seedFromStorage() already gave the first paint an instant (possibly stale) total, so a
@@ -239,6 +255,13 @@ export class SallaCartCoupons {
             this.appliedCoupons = Array.isArray(cart?.coupons)
                 ? cart.coupons.filter(Boolean)
                 : (this.currentCoupon ? [this.currentCoupon] : []);
+            // The payload sends `applied_coupons` keyed BY CODE, which is the useful shape for a
+            // lookup; a plain list is accepted too so neither side depends on the other's choice.
+            const cards = cart?.applied_coupons;
+            this.appliedCouponCards = Array.isArray(cards)
+                ? cards.filter(Boolean)
+                : (cards && typeof cards === 'object' ? Object.values(cards).filter(Boolean) : []);
+            this.buildMergedCoupons();
             return;
         }
         // Single-coupon (flag off): mirror the applied code into the (disabled) input, matching the
@@ -246,6 +269,75 @@ export class SallaCartCoupons {
         // keystroke, so it won't clobber what the user is typing.
         this.couponInputValue = this.currentCoupon;
         this.appliedCoupons = this.currentCoupon ? [this.currentCoupon] : [];
+        this.buildMergedCoupons();
+    }
+    /**
+     * CP-3695: rebuild the unified list from the two sources we already have in memory.
+     *
+     * Applied coupons come first, in the order the server sent them — `cart.coupons` is already
+     * sorted by source tier in `Cart::getCouponCodes()`, so we preserve it rather than re-sort.
+     * Unapplied checkout coupons follow in endpoint order.
+     *
+     * Pure and cheap: a Map build plus one pass over at most 15 coupons (the endpoint's LIMIT),
+     * with no network call of its own — both datasets are already loaded for the old two-list UI.
+     */
+    buildMergedCoupons() {
+        // Single-coupon (flag off) renders the original disabled-input + red-X UX from
+        // currentCoupon and never reads this list. Keep it empty so the flag-off path is untouched.
+        if (!this.multiCoupon) {
+            this.mergedCoupons = [];
+            return;
+        }
+        const applied = this.appliedCoupons.filter(Boolean);
+        const appliedSet = new Set(applied);
+        // OFFERED is the checkout-coupon list alone — what the shopper can still apply. Liveness
+        // and the "what else is there" tail both key off this, never off the metadata map below.
+        const offered = new Map(this.availableCoupons.map(coupon => [coupon.code, coupon]));
+        // Metadata for drawing a card: the offers, plus the payload's card data for applied coupons
+        // that are NOT offers. Deliberately kept separate from `offered` — folding these in would
+        // leave a removed coupon sitting in the row as something to apply, which it is not.
+        const byCode = new Map(offered);
+        this.appliedCouponCards.forEach(coupon => {
+            if (coupon?.code && !byCode.has(coupon.code)) {
+                byCode.set(coupon.code, coupon);
+            }
+        });
+        // Live codes: everything still worth a card. An applied code that is not an offer is live
+        // only while it IS applied — once removed there is nothing behind it, so its card goes away.
+        const isLive = (code) => appliedSet.has(code) || offered.has(code);
+        const order = this.orderLocked
+            ? this.mergeIntoLockedOrder(applied, offered, isLive)
+            : [
+                ...applied,
+                ...this.availableCoupons.map(coupon => coupon.code).filter(code => !appliedSet.has(code)),
+            ];
+        this.mergedCoupons = order.map(code => ({
+            code,
+            coupon: byCode.get(code) ?? null,
+            applied: appliedSet.has(code),
+        }));
+    }
+    /**
+     * Keep the positions the shopper is looking at, and fold in whatever changed:
+     * newly applied codes join at the FRONT (they were typed into the input, so no card the
+     * shopper could be reaching for moves), late-loading checkout coupons join at the BACK, and
+     * codes that went dead drop out.
+     */
+    mergeIntoLockedOrder(applied, byCode, isLive) {
+        const held = this.mergedCoupons.map(entry => entry.code).filter(isLive);
+        const seen = new Set(held);
+        const arrivedApplied = applied.filter(code => !seen.has(code));
+        arrivedApplied.forEach(code => seen.add(code));
+        const arrivedAvailable = [...byCode.keys()].filter(code => !seen.has(code));
+        return [...arrivedApplied, ...held, ...arrivedAvailable];
+    }
+    /**
+     * Freeze the current card order. Called the moment the shopper acts on the list, so applying
+     * or removing recolours a card in place instead of sliding the row out from under them.
+     * Reset on every mount, which is where applied-first ordering is (re)established.
+     */
+    lockOrder() {
+        this.orderLocked = true;
     }
     async handleApplyClick() {
         if (this.isApplying) {
@@ -256,6 +348,7 @@ export class SallaCartCoupons {
             this.showCouponError(salla.lang.get('pages.cart.enter_coupon_code'));
             return;
         }
+        this.lockOrder();
         this.isApplying = true;
         this.isHandlingInternalError = true;
         try {
@@ -317,6 +410,7 @@ export class SallaCartCoupons {
         if (this.isApplying) {
             return;
         }
+        this.lockOrder();
         this.isApplying = true;
         this.isHandlingInternalError = true;
         try {
@@ -357,6 +451,7 @@ export class SallaCartCoupons {
                 return; // Silent return for card clicks when operation is already in progress
             }
         }
+        this.lockOrder();
         // Update the input field with the coupon code
         this.couponInputValue = couponCode;
         // Clear any existing errors
@@ -416,15 +511,64 @@ export class SallaCartCoupons {
         }
         return this.cartTotal >= parseFloat(coupon.minimum_amount.amount);
     }
-    renderCouponCard(coupon) {
+    /**
+     * CP-3695: one card for one entry in the unified list — a checkout coupon, an applied coupon,
+     * or both. An applied card is not click-to-apply; only its إلغاء button acts on it.
+     */
+    renderCouponCard(entry) {
+        const { coupon, applied, code } = entry;
+        // An applied code the backend sent without card metadata has nothing to fill a card with.
+        if (!coupon) {
+            return this.renderMinimalCard(code);
+        }
         const isEligible = this.isEligible(coupon);
+        const isDisabled = !applied && (!isEligible || this.isApplying);
         // Note: Card notches (ticket-style pseudo-elements) match card background, not page background - this is intentional design
-        return (h("div", { class: "s-cart-coupons-slide-one-fourth swiper-slide" }, h("div", { class: `s-cart-coupons-card ${!isEligible || this.isApplying ? 's-cart-coupons-disabled' : ''}`, onClick: () => isEligible && !this.isApplying && this.handleCouponClick(coupon) }, h("div", { class: "s-cart-coupons-top-section" }, h("div", { class: "s-cart-coupons-discount-values" }, h("div", { class: "s-cart-coupons-main-amount" }, this.formatMainAmount(coupon)), coupon.free_shipping ? (h("div", { class: "s-cart-coupons-secondary-info" }, "+ ", salla.lang.get('pages.cart.free_shipping'))) : coupon.maximum_amount && (h("div", { class: "s-cart-coupons-secondary-info" }, salla.lang.get('pages.cart.up_to'), " ", h("span", { innerHTML: salla.money(coupon.maximum_amount.amount, coupon.maximum_amount.currency) })))), h("div", { class: "s-cart-coupons-code" }, coupon.code)), h("div", { class: "s-cart-coupons-divider" }), h("div", { class: "s-cart-coupons-bottom-section" }, h("div", { class: "s-cart-coupons-terms" }, coupon.remaining_days !== undefined && coupon.remaining_days !== null && (h("div", { class: `s-cart-coupons-expiry ${coupon.remaining_days <= 3 ? 's-cart-coupons-expiry-warning' : ''}` }, coupon.remaining_days === 0
+        return (h("div", { class: "s-cart-coupons-slide-one-fourth swiper-slide" }, h("div", { class: `s-cart-coupons-card ${applied ? 's-cart-coupons-card--applied' : ''} ${isDisabled ? 's-cart-coupons-disabled' : ''}`, onClick: () => !applied && isEligible && !this.isApplying && this.handleCouponClick(coupon) }, h("div", { class: "s-cart-coupons-top-section" }, h("div", { class: "s-cart-coupons-discount-values" }, h("div", { class: "s-cart-coupons-main-amount" }, this.formatMainAmount(coupon)), coupon.free_shipping ? (h("div", { class: "s-cart-coupons-secondary-info" }, "+ ", salla.lang.get('pages.cart.free_shipping'))) : coupon.maximum_amount && (h("div", { class: "s-cart-coupons-secondary-info" }, salla.lang.get('pages.cart.up_to'), " ", h("span", { innerHTML: salla.money(coupon.maximum_amount.amount, coupon.maximum_amount.currency) })))), h("div", { class: "s-cart-coupons-code" }, coupon.code)), h("div", { class: "s-cart-coupons-divider" }), h("div", { class: "s-cart-coupons-bottom-section" }, h("div", { class: "s-cart-coupons-terms" }, coupon.remaining_days !== undefined && coupon.remaining_days !== null && (h("div", { class: `s-cart-coupons-expiry ${coupon.remaining_days <= 3 ? 's-cart-coupons-expiry-warning' : ''}` }, coupon.remaining_days === 0
             ? salla.lang.get('pages.cart.expires_today')
-            : `${salla.lang.get('pages.cart.expires_after')} ${coupon.remaining_days} ${salla.lang.get('pages.cart.day')}`)), coupon.minimum_amount && parseFloat(coupon.minimum_amount.amount) > 0 && (h("div", { class: "s-cart-coupons-minimum" }, salla.lang.get('pages.cart.minimum'), " ", h("span", { innerHTML: salla.money(coupon.minimum_amount.amount, coupon.minimum_amount.currency) })))), h("div", { class: "s-cart-coupons-action" }, isEligible ? salla.lang.get('pages.cart.save_coupon') : salla.lang.get('pages.cart.coupon_not_compatible'))))));
+            : `${salla.lang.get('pages.cart.expires_after')} ${coupon.remaining_days} ${salla.lang.get('pages.cart.day')}`)), coupon.minimum_amount && parseFloat(coupon.minimum_amount.amount) > 0 && (h("div", { class: "s-cart-coupons-minimum" }, salla.lang.get('pages.cart.minimum'), " ", h("span", { innerHTML: salla.money(coupon.minimum_amount.amount, coupon.minimum_amount.currency) })))), h("div", { class: "s-cart-coupons-action" }, applied
+            ? this.renderAppliedAction(code)
+            : (isEligible ? salla.lang.get('pages.cart.save_coupon') : salla.lang.get('pages.cart.coupon_not_compatible')))))));
+    }
+    /**
+     * The applied footer: a "مُطبق" state label plus the إلغاء control that replaces the old
+     * chip's X. stopPropagation keeps the click off the card, which would otherwise re-apply.
+     */
+    renderAppliedAction(code) {
+        return [
+            h("span", { class: "s-cart-coupons-card-applied-label" }, salla.lang.get('pages.cart.coupon_applied')),
+            h("button", { type: "button", class: "s-cart-coupons-card-remove", "aria-label": `${salla.lang.get('pages.cart.delete_coupon')} ${code}`, disabled: this.isApplying, onClick: event => {
+                    event.stopPropagation();
+                    this.removeCoupon(code);
+                } }, salla.lang.get('pages.cart.cancel')),
+        ];
+    }
+    /**
+     * Card for an applied code with no metadata (typed by hand, or show_checkout_coupon = 0):
+     * the code and the remove control, nothing invented. Always applied — an unapplied code
+     * with no offer behind it has nothing to show, so buildMergedCoupons drops it.
+     */
+    renderMinimalCard(code) {
+        return (h("div", { class: "s-cart-coupons-slide-one-fourth swiper-slide" }, h("div", { class: "s-cart-coupons-card s-cart-coupons-card--applied s-cart-coupons-card--minimal" }, h("div", { class: "s-cart-coupons-top-section" }, h("div", { class: "s-cart-coupons-code s-cart-coupons-code--only" }, code)), h("div", { class: "s-cart-coupons-divider" }), h("div", { class: "s-cart-coupons-bottom-section" }, h("div", { class: "s-cart-coupons-action" }, this.renderAppliedAction(code))))));
+    }
+    /**
+     * What the card row renders. Multi-coupon reads the unified list; single-coupon keeps its
+     * original behaviour by wrapping the raw checkout coupons as never-applied entries, so that
+     * path renders exactly the markup it did before CP-3695.
+     */
+    couponRow() {
+        if (this.multiCoupon) {
+            return this.mergedCoupons;
+        }
+        return (this.availableCoupons || []).map(coupon => ({
+            code: coupon.code,
+            coupon,
+            applied: false,
+        }));
     }
     render() {
-        return (h(Host, { key: 'ae2c4c3ba1388a68e71bc726a0b7f10e388ebed1' }, h("div", { key: 'f61f0515559bcaed657b1ca8fc2a09ac626ab044', class: "s-cart-coupons-wrapper" }, h("div", { key: '63597fdac231194d008b0fb88387b7a1ed73f222', class: "s-cart-coupons-input-section" }, h("label", { key: '507be0d9124d78c147bffcf300effbda787fed14', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: 'e44dffa8477b85c407bb77930261be5a5282ddbc', class: "s-cart-coupons-coupon-input-container" }, this.multiCoupon ? [
+        const couponRow = this.couponRow();
+        return (h(Host, { key: 'e756434a2f77235e870891ce7e0b672a69429e49' }, h("div", { key: 'ca86866dc7275c98f72c2bc4c95684826e2a94d0', class: "s-cart-coupons-wrapper" }, h("div", { key: '8c37273ea0e40cad320ac148d82eeea2774ba18d', class: "s-cart-coupons-input-section" }, h("label", { key: '8495bff14cae70f530c648e49cac76bd57ec4429', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '5e6d10ab653561c33e73829f9259fe3037eab8e7', class: "s-cart-coupons-coupon-input-container" }, this.multiCoupon ? [
             // Multi-coupon: input stays active to append more codes; applied coupons render
             // as removable chips below.
             h("input", { type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: this.isApplying, onInput: this.onInput, onKeyUp: this.onKeyUp, "aria-label": salla.lang.get('pages.cart.apply_coupon'), key: "coupon-input" }),
@@ -435,7 +579,16 @@ export class SallaCartCoupons {
             // a new code can only be entered after removing. Reuses the existing master classes.
             h("input", { type: "text", id: "coupon-input", name: "coupon", class: `form-input ${this.couponError ? 's-coupon-input-error' : ''}`, placeholder: salla.lang.get('pages.cart.coupon_placeholder'), value: this.couponInputValue, disabled: !!this.currentCoupon || this.isApplying, onInput: this.onInput, onKeyUp: this.onKeyUp, "aria-label": salla.lang.get('pages.cart.apply_coupon'), key: "coupon-input" }),
             h("salla-button", { ref: el => this.couponButtonRef = el, class: `s-cart-coupons-coupon-button ${this.currentCoupon ? 's-cart-coupons-coupon-button-remove' : 's-cart-coupons-coupon-button-apply'}`, color: this.currentCoupon ? 'danger' : 'primary', loading: this.isApplying, "loader-position": "center", onClick: () => this.handleCouponButtonClick(), key: "apply-button" }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon')))),
-        ]), this.couponError && (h("span", { key: 'bed4fe6cce4f3d0c6b6aec663959bc83cf874b9d', class: "s-cart-coupons-coupon-error" }, this.couponError)), this.multiCoupon && this.appliedCoupons.length > 0 && (h("div", { key: 'c9c09a07c764c330063935126292d2c838fab650', class: "s-cart-coupons-applied-list" }, this.appliedCoupons.map(code => (h("div", { class: "s-cart-coupons-applied-item", key: code }, h("span", { class: "s-cart-coupons-applied-code" }, code), h("button", { type: "button", class: "s-cart-coupons-applied-remove", "aria-label": `${salla.lang.get('pages.cart.delete')} ${code}`, disabled: this.isApplying, onClick: () => this.removeCoupon(code) }, h("i", { class: "sicon-cancel" })))))))), this.availableCoupons && this.availableCoupons.length > 0 && (h("salla-slider", { key: '8dfed1f7f2df408f822d5d2795877a97bd64e1f1', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: 'c76e054a894042557482f06d0bed8c9166ad2eaa', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
+        ]), this.couponError && (h("span", { key: '5f7ff489d561f440e643c62c0d238a059f94ff2e', class: "s-cart-coupons-coupon-error" }, this.couponError))), couponRow.length > 0 && (h("salla-slider", { type: "carousel", showControls: false, class: "s-cart-coupons-slider",
+            /* salla-slider hands its slot children to Swiper, which MOVES them out of the
+               `slot="items"` div into its own .swiper-wrapper. Stencil then patches against a
+               tree that no longer exists where it expects, so a slide added to a list that
+               grew (e.g. applying a coupon the endpoint never returned) is appended to the
+               detached parent and never reaches the page — the component's own docs warn
+               against dynamic custom components inside it. Keying on the exact code list
+               makes Stencil discard and remount the slider whenever the set changes, so
+               Swiper re-initialises over the full, correct set of slides. */
+            key: couponRow.map(entry => entry.code).join('|') }, h("div", { key: '5b811515254595fcde9a364b113b60d38048e2c0', slot: "items" }, couponRow.map(entry => this.renderCouponCard(entry))))))));
     }
     static get is() { return "salla-cart-coupons"; }
     static get originalStyleUrls() {
@@ -458,6 +611,8 @@ export class SallaCartCoupons {
             "couponError": {},
             "isApplying": {},
             "appliedCoupons": {},
+            "mergedCoupons": {},
+            "appliedCouponCards": {},
             "multiCoupon": {}
         };
     }

package/dist/collection/components/salla-cart-summary/salla-cart-summary.js

@@ -118,7 +118,7 @@ export class SallaCartSummary {
         return cartUrl;
     }
     render() {
-        return (h(Host, { key: '46871f78da79e4ef5e80ab6b840972fedea6b032' }, h("a", { key: 'c3736429c17efab127aa1546eab87af22987ac1b', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: 'ee82c1ff2176f9d04574c63aaad2db6c59799f0d', id: "s-cart-icon" }, h("slot", { key: '483cfc04976a7ced4222bcaad065e370a72a8061', name: "icon" }, h("i", { key: '0fa8e99e5fea7e88056784e0e0472ff4e927d4ef', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '2091f2ef2aed4c1b34011890c7b0f1fe78813ce4', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: 'c2f6277c2742a9ca339ca39652a6a9119b260eee', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '7d2416455c34c1a4625d1131d99ab94e681f202a', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'e6546fda5426fbae3b7b7a96217cf15a45e662c9', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
+        return (h(Host, { key: '80544f74203447490842d9ef9519ba3013fe0d02' }, h("a", { key: 'd769586f49b37a079653587d990871cb3ffe6542', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: 'ad1833c7562138c211def82a365a89216157db20', id: "s-cart-icon" }, h("slot", { key: 'a5d60463eb9f023ffed29586a94d3b5feaf586c8', name: "icon" }, h("i", { key: '64a0c861706a05edc9057b1692d33945306958c0', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '6781086462fdb3e9910d9d32bd53014345c7148b', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '04dd5019a64ac99153b843ec2cff9103cf247c6a', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '2625556cc87729a72eb9ab455e3274a24c1738fa', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: '97a1a1911d6e18f9dde89437bd8749553ce8d35c', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
     }
     static get is() { return "salla-cart-summary"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -198,7 +198,7 @@ export class SallaColorPicker {
         });
     }
     render() {
-        return (h(Host, { key: 'acb6aaa4e5a53c81e4f603e2d6bf3000961bcb88', class: "s-color-picker-main" }, h("slot", { key: 'b924c02b25d3b306e4a162c029d41f94282f8313', name: "widget" }, h("div", { key: '0f525e98176b4ca0c0c54e0fe68bb86ac4ceae7c', class: "s-color-picker-widget" }, h("div", { key: '8860d1ea0a223b7839fd9629eaa5a7fb6a394fd3', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: '62c01df67c954a68a15f55b1f127cda50640958c', innerHTML: ArrowDown }))), h("input", { key: '257d51b2d8d635761b1a9ecb5545cd0f66de18af', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+        return (h(Host, { key: 'b0ddc9c457300b40e5e64a54aa13e38f46106dd8', class: "s-color-picker-main" }, h("slot", { key: '409622ef888a6fda18a44406b28bdb1a37abced7', name: "widget" }, h("div", { key: '53f2a7135429a3aea05efc69bb66b4dde470b8e0', class: "s-color-picker-widget" }, h("div", { key: '715cdf2d6a310f7d2add7f155a6db932a2e670c8', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: '95ea57b71b1352c1d3801efcf60475d17157056a', innerHTML: ArrowDown }))), h("input", { key: 'e25c80f98c10d9006d16c28af9d799896a1b5e07', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
     }
     componentDidLoad() {
         if (this.canvas)

package/dist/collection/components/salla-comment-form/salla-comment-form.js

@@ -38,7 +38,7 @@ export class SallaCommentForm {
             .finally(() => this.submitBtn.stop());
     }
     render() {
-        return (h(Host, { key: 'b3cb09ddf083b075a78981e40911913a5fb63d33' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
+        return (h(Host, { key: '16f5113a8345c31dce2f8302bcb5a5fba62e91c3' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
             h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
     }
     static get is() { return "salla-comment-form"; }

package/dist/collection/components/salla-conditional-fields/salla-conditional-fields.js

@@ -129,7 +129,7 @@ export class SallaConditionalFields {
         });
     }
     render() {
-        return (h(Host, { key: 'b26437717cccf1d61e1fa16541794c8e55817730' }, h("slot", { key: '898c850d6d7c5c081dc5a65a6f8f8a984547af9f' })));
+        return (h(Host, { key: '86fa0b22ebc38b3f214e6f9b95fdfca2138a52b6' }, h("slot", { key: '5f128ba45c9c8029ae9c8f6163f7afa277f4f185' })));
     }
     static get is() { return "salla-conditional-fields"; }
     static get elementRef() { return "host"; }

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -229,7 +229,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '7f3e240f25c715b3faaac4e85c48f017e54c7907', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
+        return (h(Host, { key: 'a16b6dc8c000eea39b990588995b07d6361231b2', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''} ${this.offerEnded ? 's-count-down-ended' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-datetime-picker/salla-datetime-picker.js

@@ -204,7 +204,7 @@ export class SallaDatetimePicker {
         }
     }
     render() {
-        return h("div", { key: '2e14070685e9a876e6d5d16baef06006a15c2a53', class: "s-datetime-picker" }, h("input", { key: '777a487061a0509de86df589bcdfa9b32cdd5572', type: "datetime", name: this.name, value: this.value, required: this.required, disabled: this.disabled, placeholder: this.placeholder, class: "s-datetime-picker-input", ref: (el) => this.dateInput = el }));
+        return h("div", { key: '64b648c87a1395cc19db863b2ce0cfbabf647561', class: "s-datetime-picker" }, h("input", { key: '87bfdfff27591a2ad83a4edad089420701f11452', type: "datetime", name: this.name, value: this.value, required: this.required, disabled: this.disabled, placeholder: this.placeholder, class: "s-datetime-picker-input", ref: (el) => this.dateInput = el }));
     }
     async componentDidLoad() {
         // Load flatpickr before initializing

package/dist/collection/components/salla-file-upload/salla-file-upload.js

@@ -879,12 +879,12 @@ export class SallaFileUpload {
         this.revokeAllPreviewObjectUrls();
     }
     render() {
-        return (h(Host, { key: '4e2eaa6ea15e69930a1caac393575a98da537505', class: {
+        return (h(Host, { key: '851d41cc6012f516488a99f56f9937c14f79bc85', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
                 "s-file-upload-has-gallery": this.usesGalleryPreview(),
-            } }, h("input", { key: 'a2e82319893d3cc05316b66d4cf8afdc62fed9ad', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '8fd655d5318ef96a32d5f5238677068a14f4bb2e', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
+            } }, h("input", { key: '05902420c0ea6863d8fc010c5a54f40aedeac77b', type: "file", name: this.name, ref: ele => this.fileUploader = ele, required: this.required, class: "s-file-upload-wrapper s-file-upload-input", accept: this.accept }), this.allowMultiple && this.showMaxCountHint ? h("div", { class: "s-file-upload-hint s-hidden" }, this.max_count_hint(this.getTotalMaxFiles())) : '', h("input", { key: '00b556281810005ea609a7d1cb7d514277453bee', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.getHiddenInputValue(), ref: input => this.hiddenInput = input }), this.renderPreviewGallery()));
     }
     async componentDidLoad() {
         await Salla.onReady();

package/dist/collection/components/salla-filters/salla-filters.js

@@ -211,7 +211,7 @@ export class SallaFilters {
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'd72b6ce577e47864d9095922f9c2d88068c2a2c4' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: 'ef7f2cf7241193cb8b2fe24fdb0713d8c92c04c9' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
             } })));
     }

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -170,12 +170,12 @@ export class SallaFiltersWidget {
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: 'af3f05601697115a001949d5c23d8925f6c68135', class: "s-filters-widget-container" }, h("h3", { key: '689046ac453166e29fdb4e3ad10568a989446bfb', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '00d65abda360e88e26a08016bb1bd23eceee9f4b' }, this.option.label), h("span", { key: '1915aaec2e1ea66235071f0b4f872bd6d9717a21', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'd94f99643aa914391f131acebfb71d4183263df5', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '0b67486012b38ce82a377b0f3cb6465892d718ae', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '00bf03c96c9fa7199872f1444c4484bf23049dd4', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '79b29b30854583559ee8b0082210ad2f34e31e1a', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '0e657a77d5e62ee04cf2d3bd30982bb6addf06ef' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: 'd3d9731c163a78609bb1a2f4b01ef6c3db4fc7dc', class: "s-filters-widget-container" }, h("h3", { key: 'bf1c5a033860416035ad7c74f4d9082f4c8de282', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '2a94d9a6500b3137900136fd052c731f63b0acae' }, this.option.label), h("span", { key: '69b28fcad8ebc564dbbe907a4eb4044a0ee9d6ad', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'fa20429b6b3399275eecbcac390d8895c3b01350', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '98c869541f0a1d61725048296af6296e603cfa2c', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: 'f5310cfdad6980e5d991bd03934d5c1a4a014f10', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '317bb4bcfae88596f8a8737b2454f5f2ecae5b0d', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8620064a3526e686b95a0c21e39f5b15a8ea3133' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '29a3578886c0c88b6af2dc529004f9f4ab663986', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '8c9c93c3579578f1da4fe676d4758c0bbb5b4e21', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-gifting/salla-gifting.js

@@ -852,7 +852,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: 'eb77c96ecc39291dc3def641cea481cc90b3e267' }, h("salla-list-tile", { key: 'a9e8e946a5a06c6fe380073a068612fadeb0fc20', class: this.generateClass() }, h("div", { key: 'eebf210be6fe5e1672e695d47c9bde11320883c8', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: 'f0e8320f7b29878ec7a96c201c47c5f60f4d9b21' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '446c7e990c11838a3356acce58730392822bec93', slot: "subtitle" }, h("div", { key: '9a70815ad3c56c0360f7f5df1863c5aba5bc896e' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '952b4ba1b1c864f7700ad907661b0d8962f04ab8', slot: "action" }, h("salla-button", { key: 'fb226574b5780e51da64cba8b664845f9fc9eb34', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '6d15b2311b8fa8971438fe413e195f0d8b45b14d', name: "widget-btn-content" }, h("div", { key: 'ac5118ea07ad9048f4302397f59620cc20707f2f', class: "s-gifting-widget-action-content" }, h("span", { key: 'ecd29618212e32d4c9a9630e1041757175050a7e', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'b0ea950ea255e38b8070adc258f6fe95257f4ee6' }, this.sectionBtnText)))))), h("salla-modal", { key: 'a5c2f373772e75fb2d4317a4870e9d164ee1c11c', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '23b4f5e5184ac45553c064b82534935b69f4971c', slot: "loading" }, h("div", { key: 'ba556012198ceec99b547b4bb81c498a684b582e', class: "s-gifting-skeleton" }, h("div", { key: '6440590d61dd8e0fc43228bbdc474aab6fe5cebc', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '4a7b1911383367aa4d8dec04f28ac82df21a5d73', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '22105ca62fcf60145e40bcf03eccafa562288cd9', class: "s-gifting-modal-title" }, h("div", { key: 'dd1b90825ebc0d7dbd676d3862fb50ee20455b89', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '6554734da468f07ebe5e8b78aff926c3b0235a07', height: '15px', width: '150px' })))), h("div", { key: '9bbad16d73fb651480312cc1920b7a08cca91fd2', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '18fa7ea81b582e3ae6f47efb56197b06ce66651e', height: '10px', width: '150px' }), h("salla-skeleton", { key: '2af61d925bb04c9713a7792b21ecd354f0516f67', height: '230px' }), h("salla-skeleton", { key: '8f7d2007c374b89ea252782d54e111fcd8e6f0c0', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'ad2241ce42187cab3d5e487577f984571191476f', height: '30px' }), h("salla-skeleton", { key: 'f5923597280a309f81edf21960c1a1a0ffcee30f', height: '40px' })))), h("slot", { key: '607f49b24ad953ace7a49aae0198150c29842350', name: "header" }), !!this.hasError ?
+            h("div", { key: '02f095cd71654941cc3d11f9c9be13e019247992' }, h("salla-list-tile", { key: '5dfefabc5e6fcb2f0193bf11dcd324c517b0e649', class: this.generateClass() }, h("div", { key: '35b5b8cbf54ccbf9368cdc95d2e0505ca317a555', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '2399e07a06a808b396cf57a5233be97938e7b9b5' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '12f460ce1df5e294e77b25e07d00d85370b2b939', slot: "subtitle" }, h("div", { key: '28fd4125c6f18fb976bc271ffc7c731683757bfb' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '2ccb5745341390a9aeb80c56b4d7bb171cc2940e', slot: "action" }, h("salla-button", { key: '4e74313bd4020ae32a1c2ba30b0133da0aaf410a', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '85ef811160f391d2fc456b13a89120407d6e4c36', name: "widget-btn-content" }, h("div", { key: '6d4d1162f7147488f8ce11d7da1bf7b82bc407b0', class: "s-gifting-widget-action-content" }, h("span", { key: 'e7aa877309bc7346fe56227365ad75c0d7c1a8dc', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '5c7f1a43fa84e8e5ba74a449063fc89576626db2' }, this.sectionBtnText)))))), h("salla-modal", { key: '1de82b1f9a7fc49321eb766b1451eacd2d210480', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: 'f3a97db3aa3a2591a1d391af61efa15ab76f1c8c', slot: "loading" }, h("div", { key: '67fb44c701b3f2771e041b91a2a438a0419ed4dd', class: "s-gifting-skeleton" }, h("div", { key: '70b2841fbafff80879cf2d68550cc9659da140a2', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8d337e1bfe29aea80e93ed2d1e172fa4fe23e1db', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: 'b8586d28a3dda5abbdbc341830560c157efb566c', class: "s-gifting-modal-title" }, h("div", { key: '956ec550fd7ddeb6b11f174b92d0133408f95165', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'f495e7ec761c8499efb7a6e7025bd205dca49f2c', height: '15px', width: '150px' })))), h("div", { key: '28e5ad1386cebcd93a5f9307bd812dca77a66188', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '951dbed5a03ab246d661dfd2a59ae099b468fa89', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'f200d5a5a4a258fb0755b6adb48e25606ab93bb7', height: '230px' }), h("salla-skeleton", { key: '1b4f69321a13d1ddea4ad038bfad22385b3b51ed', height: '10px', width: '150px' }), h("salla-skeleton", { key: '5d9219d3826de28b8e585bada604bff60dfc80f8', height: '30px' }), h("salla-skeleton", { key: 'a248552e288bea2e9839f381ec2d96bdb0e53cdf', height: '40px' })))), h("slot", { key: '3c8f9965766d7ce17fb20b4df72a3e46c273b23a', name: "header" }), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "title" }, this.errorMessage || salla.lang.get('common.errors.empty_results')), h("span", { slot: "description" }, " "))
                 :
                     [
@@ -875,7 +875,7 @@ export class SallaGifting {
                             h("div", { class: this.step2ItemClass(this.errors?.['receiver.city_id'] ? 's-form-group s-form-has-error' : 's-form-group') }, h("label", { class: "s-form-label", htmlFor: `${this.hostId}-city` }, this.receiverCityFieldLabel), h("salla-searchable-dropdown", { placeholder: this.selectCity, items: this.displayedCities, selectedItem: this.selectedCity, loading: this.loadingCities, searching: this.searchingCities, disabled: this.loadingCities || (this.isKSA && !this.selectedRegionId), required: true, inputId: `${this.hostId}-city`, searchQuery: this.citySearchQuery, clientSearch: !this.enableCityAjaxSearch, dropUp: true, keepParentScroll: true, onItemSelected: (e) => this.handleCitySelected(e.detail), onSearchInput: (e) => this.handleCitySearch(e.detail), onDropdownClosed: () => this.handleCityDropdownClosed() }), this.errors && this.errors['receiver.city_id'] ?
                                 h("span", { class: "s-gifting-error" }, this.errors['receiver.city_id']) : ''), this.isPhysical() && this.cityNoticeText() &&
                             h("div", { class: this.step2ItemClass('s-gifting-info') }, h("span", { innerHTML: Alert }), h("span", null, this.cityNoticeText())), !this.isPhysical() && h("div", { class: this.step2ItemClass() }, h("label", { class: "s-gifting-schedule s-gifting-clickable", htmlFor: `schedule-${this.hostId}` }, h("input", { type: "checkbox", name: 'schedule', id: `schedule-${this.hostId}`, onChange: () => this.toggleCalendar(), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", this.sendLater, " "))), h("div", { class: this.getCalendarClasses(), ref: (el) => this.calendarFormGroup = el }, h("label", { class: "s-form-label" }, this.selectSendDateAndTime), h("salla-datetime-picker", { value: this.deliveryDate, placeholder: this.selectSendDateAndTime, "enable-time": true, "date-format": "Y-m-d h:i K", onPicked: (event) => this.handleDateTimePicker(event) }), h("span", { class: "s-gifting-calendar-hint" }, this.canNotEditOrderAfterSelectDate)), h("div", { class: this.step2ItemClass('s-gifting-step-two-footer') }, !this.skipStep1() && h("a", { href: "#!", innerHTML: LeftArrow, onClick: (e) => this.goToStep1(e) }), h("salla-button", { onClick: () => this.submitForm(), color: "primary", width: 'wide' }, h("span", null, this.sendGift)))))
-                    ], h("slot", { key: 'c83487720cc77c14ccc08e8b2872b5f4fbd0bfa3', name: "footer" })))
+                    ], h("slot", { key: '688de0af2e48acc0d91d128a321856197861eb16', name: "footer" })))
         ];
     }
     static get is() { return "salla-gifting"; }

package/dist/collection/components/salla-hook/salla-hook.js

@@ -11,7 +11,7 @@ export class SallaHook {
         this.host.before(element);
     }
     render() {
-        return h(Host, { key: 'e9402928843fe4612c514c4a0f6374b2d1f02736' });
+        return h(Host, { key: '579b0abf0784c9396f636da50b1fed156e5a0600' });
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger

package/dist/collection/components/salla-list-tile/salla-list-tile.js

@@ -26,7 +26,7 @@ export class SallaListTile {
         };
     }
     render() {
-        return (h(Host, { key: '9706d1824aad1128cbdc3f46af1494fa6e66dae2' }, h("a", { key: '85a7f3aacb7c35ea954408a66018b8b0037b01be', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: '82bb422660690dd5fd1c677c979b7a80bcdf5bb1', class: "s-list-tile-item-icon" }, h("slot", { key: '6d823058b55ece833dda9aea3d62c4f8912da6d6', name: 'icon' })), h("div", { key: '3795a83ecbe93fbe3e9209ae36667dfeb06e5a3f', class: "s-list-tile-item-content" }, h("div", { key: '292a6ef5c02b74d2a72ed870025527045585b578', class: "s-list-tile-item-title" }, h("slot", { key: '9312aab9b50837ad23065979c40a57deb03eb738', name: 'title' })), h("div", { key: 'b23b96fd91e159edad15daeb4eb6d680854a327b', class: "s-list-tile-item-subtitle" }, h("slot", { key: '4932dcb47f174c750680aef2da36a42dd0a4e742', name: "subtitle" }))), h("div", { key: '1613517864d14b909ab9fad0f93f3ffa47392794', class: "s-list-tile-item-action" }, h("slot", { key: 'e61f359a00a60c28aa0d48b95afdb0c52efdd3e9', name: 'action' })))));
+        return (h(Host, { key: '859bfbc8049ae8391ac35db575f9eac29651d45d' }, h("a", { key: '94cfc3500071ef1b45d5120cc0b3f2234978d089', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'dcf0437211174d449ef381f96103e3661a0373ae', class: "s-list-tile-item-icon" }, h("slot", { key: 'e446499ef938c4c6017c57ebf6df800d0324aee0', name: 'icon' })), h("div", { key: '87403147cde0cab458181c36d797f85ee9390d8a', class: "s-list-tile-item-content" }, h("div", { key: 'b585f7f0f23d83cb8b128d7a225d6561430bf81e', class: "s-list-tile-item-title" }, h("slot", { key: '756b1d8edbc9272a4aae4fa1e63c8531ca8851f5', name: 'title' })), h("div", { key: '1ce5eae34219802f67eea914efb1d2300ea7e896', class: "s-list-tile-item-subtitle" }, h("slot", { key: '8bac18580d009d7d910f4e92b798ff3338ce6632', name: "subtitle" }))), h("div", { key: '2477624cd43d6c0292d40395e38a0a4fe6d07be4', class: "s-list-tile-item-action" }, h("slot", { key: 'b51e25e3f127e39289dd4d8949fc72d1b9cbd044', name: 'action' })))));
     }
     static get is() { return "salla-list-tile"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-loading/salla-loading.js

@@ -22,7 +22,7 @@ export class SallaLoading {
         this.bgColor = "#e5e7eb";
     }
     render() {
-        return (h(Host, { key: '253ecd20b6ff9beff53db9372c679da63b9394f9', class: "s-loading-container" }, h("svg", { key: 'fb47f4c89cc2084f32b6bfb1e585bfe360961401', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '7420a3e8bce0cbc79b060b5fb512d970429cdfac', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: 'd51ce4b5442429ca6874d1ef850a775437c4f0d5', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
+        return (h(Host, { key: '3bc71183fdd705edff5c1f9cb25a7633898e8146', class: "s-loading-container" }, h("svg", { key: '1af3b702b1e5882c125f1d889337e7636973df68', "aria-hidden": "true", style: { width: `${this.size}px`, height: `${this.size}px`, fill: this.color, color: this.bgColor }, class: "s-loading", viewBox: "0 0 100 101", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'b34b2b5ddb7760c52ccaaba9995a73f2aa28522c', d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z", fill: "currentColor" }), h("path", { key: '27cf21f3dd2b33e9dbbd73711e9be825a8ec6575', d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z", fill: "currentFill" }))));
     }
     static get is() { return "salla-loading"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-localization-modal/salla-localization-modal.js

@@ -244,7 +244,7 @@ export class SallaLocalizationModal {
             this.showTrigger
                 ? h("button", { type: "button", onClick: () => this.open(), class: "s-localization-modal-trigger-btn" }, h("span", null, this.getLanguageName()), h("span", { class: "s-localization-modal-trigger-separator" }, "|"), " ", h("span", { innerHTML: this.getCurrencySymbol() }))
                 : '',
-            h("salla-modal", { key: 'a0918db3935959e8317651b254ff85435bf0fea5', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'd1a35e23c564ea2caee46c386188d7ef64ff54c8', slot: 'loading' }, h("div", { key: '9ca0533b73f1cd11f9101232b6faee1971f9f741', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '03ee2d71e09d2f5d8714932309c1af1788feda8e', width: '25%', height: '15px' }), h("div", { key: '0595dd8f7cb572d12a7a2e61ac806d2588810b37', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '56760a616f68588b2d9de3557e9c0c7085ba1956', width: '25%', height: '15px' }), h("div", { key: 'f6e6c362b14c4d3087a1675d50e3714fe40ce89e', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '8c563227cad9ce3bc28727fe5db4fda223c0abd3', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: '1400a13aa9490e0f5f96259bea6bfcf3f98ee829', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: 'b31041e8d245ce30f41d4221418856e886200848', slot: 'loading' }, h("div", { key: '5531d672f7c5e8fb8a6b06fa5ae5328f4efcf3fe', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '61b8fa69733a4e970e1f72ef5b09e773781e45ae', width: '25%', height: '15px' }), h("div", { key: '20dd0f3444f0a6e05730266bf964b74f307e9aab', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: '5b8b4b760f741e0cd56c07ff341205e9ec7fe4d3', width: '25%', height: '15px' }), h("div", { key: '0a3f5dbfca2d6cd81effef5d873e03c9aef57d0b', class: "s-localization-modal-skeleton-content" }, [...Array(4)].map(() => h("div", { class: "s-localization-modal-skeleton-item" }, h("div", { class: "s-localization-modal-skeleton-item-flex" }, h("salla-skeleton", { type: 'circle', height: '16px', width: '16px' }), h("salla-skeleton", { height: '10px', width: '100px' })), h("salla-skeleton", { height: '15px', width: '20px' })))), h("salla-skeleton", { key: 'b068f327b3335b3f9154ac20f7f6de95864dde9a', height: '40px', width: '100%' }))), !!this.hasError ?
                 h("salla-placeholder", { alignment: "center" }, h("span", { slot: "description" }, this.errorMessage)) :
                 h("div", { class: "s-localization-modal-inner" }, this.languages.length > 1 ?
                     h("div", { class: "s-localization-modal-section" }, h("label", { class: "s-localization-modal-title" }, Salla.lang.get('common.titles.language')), h("div", { class: "s-localization-modal-section-inner" }, this.languages.length < 6 ?

package/dist/collection/components/salla-loyalty/salla-loyalty-prize-item.js

@@ -7,7 +7,7 @@ export class SallaLoyaltyPrizeItem {
         this.prizeItemSelected.emit(this.item);
     }
     render() {
-        return (h(Host, { key: '724a0c9a5eb5ab0cbbb81d3b194c63a34b148b67' }, h("div", { key: '24b8d96839f0d7a1283c8ebc846e2f6e18c73392', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: '9ec616036357b854dea86d0c873c94911c3a334c', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '6f3cfa5be119aa228b4527de9e03ec53a82f23b1', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: '1ca0f8da846e6d4710f6854439df82c752775601', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '3a8ee66428e89e9a70f5a78f20811623e5f7018e', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " ", salla.lang.get('pages.loyalty_program.point')))));
+        return (h(Host, { key: 'b50a0407d3ddec72fef3b7f4ff325c14ee52edfa' }, h("div", { key: 'a6f180164b4bbed6b0a8c534dda70d7ce8a8d0d5', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: '3314cec7f2adf02d4d7b0623d95aaa87c8c5a4e0', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '6a33d5bfcd00e231f9b9a21d8d7b9e8cbb263e7c', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: '333c4b1548e13601edb9405460fde38fde274997', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: 'dbf09413ed15affa54dd0e5bbbb425bdf89d2a42', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " ", salla.lang.get('pages.loyalty_program.point')))));
     }
     static get is() { return "salla-loyalty-prize-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-loyalty-points-history/salla-loyalty-points-history.js

@@ -79,7 +79,7 @@ export class SallaLoyaltyPointsHistory {
         }
     }
     render() {
-        return (h(Host, { key: 'f926921f27cb795fcd46784ad5fa35fd32d2bdbf' }, h("div", { key: '474ecf2d8a7bc60d5ee18673e3b0689c146aa71d' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("tbody", null, h("tr", null, h("td", null, h("div", { class: "s-loyalty-points-history-balance-container" }, h("i", { class: "s-loyalty-points-history-balance-icon sicon-gift" }), h("div", null, h("div", { class: "s-loyalty-points-history-balance-value" }, this.balance, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { class: "s-loyalty-points-history-balance-label" }, salla.lang.get('pages.loyalty_program.your_points')))))))), this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("thead", { class: "s-loyalty-points-history-table-head" }, h("tr", null, h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", null, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-points-history-table-tbody-tr" }, h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.points'), ":"), h("span", null, point?.type === 'plus' ? '+' : '', point?.amount || '', " ", salla.lang.get('pages.loyalty_program.point')))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.date'), ":"), h("span", null, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.expiry_date'), ":"), h("span", null, formatDate(point?.expires_at ? Number(point.expires_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.note'), ":"), h("span", null, translateKey(point?.key)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.status'), ":"), h("div", { class: {
+        return (h(Host, { key: 'a27eb05e077b79c1865d80baa5960af783757b49' }, h("div", { key: '37cec3096c43766f679e7b7e35d3e99d248dbc70' }, this.isLoadingLoyalty ? (h("salla-loading", null)) : (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("tbody", null, h("tr", null, h("td", null, h("div", { class: "s-loyalty-points-history-balance-container" }, h("i", { class: "s-loyalty-points-history-balance-icon sicon-gift" }), h("div", null, h("div", { class: "s-loyalty-points-history-balance-value" }, this.balance, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { class: "s-loyalty-points-history-balance-label" }, salla.lang.get('pages.loyalty_program.your_points')))))))), this.loyaltyPointsArray.length > 0 ? (h("div", null, h("table", { class: "s-loyalty-points-history-table" }, h("thead", { class: "s-loyalty-points-history-table-head" }, h("tr", null, h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.points')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('pages.wallet.expiry_date')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.note')), h("th", { scope: "col", class: "s-loyalty-points-history-table-head-tr-th" }, salla.lang.get('common.elements.status')))), h("tbody", null, this.loyaltyPointsArray.map(point => (h("tr", { class: "s-loyalty-points-history-table-tbody-tr" }, h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.points'), ":"), h("span", null, point?.type === 'plus' ? '+' : '', point?.amount || '', " ", salla.lang.get('pages.loyalty_program.point')))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.date'), ":"), h("span", null, formatDate(point?.created_at ? Number(point.created_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('pages.wallet.expiry_date'), ":"), h("span", null, formatDate(point?.expires_at ? Number(point.expires_at) * 1000 : undefined)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.note'), ":"), h("span", null, translateKey(point?.key)))), h("td", { class: "s-loyalty-points-history-table-tbody-tr-td" }, h("div", { class: "s-loyalty-points-history-table-tbody-tr-td-content" }, h("span", { class: "s-loyalty-points-history-mobile-title" }, salla.lang.get('common.elements.status'), ":"), h("div", { class: {
                 's-loyalty-points-history-table-transaction-status': true,
                 's-loyalty-points-history-table-transaction-status-pending': point?.status_key === 'pending',
                 's-loyalty-points-history-table-transaction-status-revoked': point?.status_key === 'revoked',

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

@@ -8,9 +8,9 @@ export class SallaLoyaltyExchangeProductCard {
     }
     render() {
         const product = typeof this.product === 'string' ? JSON.parse(this.product) : this.product;
-        return (h("div", { key: '82c40d26f2d49dab0e7f34e28490f7726881f4fc', class: "s-loyalty-exchange-card" }, this.hasCustomCard
+        return (h("div", { key: '8523e4b67448013553d333dc999a6cf74bfaaabe', 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: '961cfd9e7e604fe202a2af0ae36368ac21171b69', class: "s-loyalty-exchange-card-btn" }, h("salla-button", { key: 'be81982e0cea2316df74070c6cf8712e6809947b', fill: "outline", width: "wide", onClick: () => this.loyaltyProductExchange.emit({ productId: product.id }) }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
+            : h("salla-product-card", { "hide-add-btn": true, product: product }), h("div", { key: '1a3ab033f84662a6e6c24dff0bda9f6994380207', class: "s-loyalty-exchange-card-btn" }, h("salla-button", { key: 'ba2645c3636b2c39a013c3e4df0f8dbbc2bff982', fill: "outline", width: "wide", onClick: () => this.loyaltyProductExchange.emit({ productId: product.id }) }, salla.lang.get('pages.loyalty_program.redeem_reward')))));
     }
     static get is() { return "salla-loyalty-exchange-product-card"; }
     static get originalStyleUrls() {

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

@@ -4,13 +4,13 @@
 import { Host, h } from "@stencil/core";
 export class SallaLoyaltyHero {
     render() {
-        return (h(Host, { key: '8f6344543cf371ebcca43af88ae2d79978168555' }, h("section", { key: '57bad9c2a755147cfe1f01f53111092b8df891b5', class: "s-loyalty-program-hero-container" }, h("div", { key: '32f92f987b8d8ad13300fb877772b0793f0fc411', class: "s-loyalty-program-hero-background", style: {
+        return (h(Host, { key: '3e4a7654b7bf26354b520f2cd776294747d8a360' }, h("section", { key: 'e9e696da574b93690a5602ef8af7199f7066beae', class: "s-loyalty-program-hero-container" }, h("div", { key: '86ef6bf3c5baf8f2ed4e1f4bbda031ce76d0b8ff', class: "s-loyalty-program-hero-background", style: {
                 backgroundImage: `url(${this.image})`,
-            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: 'b05742b463426bca3ce8b60587d9b9af57efe86f', class: {
+            } }, this.image ? h("div", { class: "s-loyalty-program-hero-overlay" }) : '', h("div", { key: '8e1770b8dfb7d4e243a792ca9591acfc3de95800', class: {
                 's-loyalty-program-hero-content': true,
                 's-loyalty-program-hero-white': !!this.image,
                 's-loyalty-program-hero-gray': !this.image,
-            } }, h("div", { key: 'e06544e9ea8176cb99bf28ef97e4949b81172236' }, h("h1", { key: 'c598a4918c042535cf8064f83846ddd8d0b537bb', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: 'd9becc3ea9dc57cd172a694fa6c255b2bd58dee0', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: '83ccb14d430582b64092ced19546d2f938a3b21a', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: 'cb56bce19e0c5592cc4eab6523c300163c5519cd', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: 'bcbb41afae86d318d5cbbbd3294db80f7277edad', name: "action" }))), h("div", { key: '97a9e7f6a0f10bfeeee73c13d16e0522479eec64', class: "s-loyalty-program-hero-footer" }, h("div", { key: '363d6b94f2ae2795d956ccea62f41bdeebdce227', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: '599d85e8b59b0c4e96d26b0bac9ed58e8212756a', name: "crosspoint" }))))));
+            } }, h("div", { key: '569ef54a6c67d9cf17b1b98bc22d17b8c30b9a56' }, h("h1", { key: '225c7c594cb1942a56a6966ab8289a4dfb7f0d71', class: "s-loyalty-program-hero-title" }, this.name || h("span", { key: 'b5879e2ffbdceece5b74cf49195e243fa12ad7ce', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "name")), h("p", { key: '4f93ddbab54a688899d7a125a15e925e79604247', class: "s-loyalty-program-hero-description" }, this.description || h("span", { key: 'fcf66d6a7e2ff1b5e19bd82e183f23a87c8d9a8e', style: { color: 'transparent', backgroundColor: '#666', borderRadius: '12px' } }, "description"))), h("slot", { key: '072a07637ed4d10d16298ac39ad5868e2f1285bc', name: "action" }))), h("div", { key: '52afdf232182caab2bd18e8498ab7688cc5b8356', class: "s-loyalty-program-hero-footer" }, h("div", { key: '57bf7ce60ee179abb33eed320f5911e62b468581', class: "s-loyalty-program-hero-slot-container" }, h("slot", { key: 'e78a53828eb424afef9502c66625d35c9b844af7', name: "crosspoint" }))))));
     }
     static get is() { return "salla-loyalty-hero"; }
     static get originalStyleUrls() {