@salla.sa/twilight-components 2.14.499 → 2.14.500

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

@@ -10,22 +10,46 @@ export class SallaCartCoupons {
         this.couponInputValue = '';
         this.couponError = '';
         this.isApplying = false;
+        // Applied coupon codes rendered as removable chips below the input.
+        // - Single-coupon (default): holds at most the one cart coupon.
+        // - 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 = [];
+        // 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.
+        this.multiCoupon = false;
         this.isHandlingInternalError = false;
         // Store cart event listener references for cleanup
         this.cartUpdatedHandler = (cartData) => {
-            this.cartTotal = cartData.sub_total ?? cartData.total ?? 0;
-            // Update current coupon state
-            const couponCode = cartData.coupon || '';
-            // Only overwrite the user's typed value when the cart-level coupon itself changes
-            if (couponCode !== this.currentCoupon) {
-                this.currentCoupon = couponCode;
-                this.couponInputValue = couponCode;
+            // cart::updated carries the server-side cart. The multi-coupon flag comes from store
+            // config (set once in componentWillLoad), so only refresh total + chips here.
+            this.cartTotal = cartData?.summary?.sub_total ?? cartData?.sub_total ?? cartData?.total ?? this.cartTotal;
+            // Re-sync applied coupon state from the payload — mirroring refreshFromServer's guard:
+            //   - Multi-coupon: only a real `coupons` array re-seeds the chips, so a summary-only
+            //     cart::updated can't shrink them (add/remove refreshes the chips from the server).
+            //   - Single-coupon (flag off): any payload carrying `coupon` re-syncs the input, so a
+            //     server-side invalidation (e.g. cart drops below the coupon minimum) that emits
+            //     `coupon: ''` clears the stale code instead of leaving it stuck until a reload.
+            const carriesCoupons = this.multiCoupon
+                ? Array.isArray(cartData?.coupons)
+                : (cartData && 'coupon' in cartData);
+            if (carriesCoupons) {
+                this.syncAppliedFromCart(cartData);
             }
             // Clear error when cart updates
             this.couponError = '';
         };
         this.couponAddedHandler = () => {
-            // Coupon was successfully added - state is managed by cartUpdatedHandler
+            // Skip while an internal apply/remove is in flight — handleApplyClick/removeCoupon already
+            // refresh from the server, so this handler only needs to cover EXTERNAL coupon changes
+            // (e.g. the checkout page). Prevents a duplicate salla.cart.details() call per action.
+            if (this.isApplying || this.isHandlingInternalError) {
+                return;
+            }
+            // Re-read the applied set + flag from the SERVER (not storage), so the chips reflect
+            // the real cart — a stale storage cache (e.g. after a checkout-page removal) never shows.
+            this.refreshFromServer();
         };
         this.couponAdditionFailedHandler = (error) => {
             // Only handle external coupon failures when no internal operation is handling errors
@@ -35,7 +59,12 @@ export class SallaCartCoupons {
             // Internal operations handle their own errors to prevent double display
         };
         this.couponDeletedHandler = () => {
-            // Coupon was removed - state is managed by cartUpdatedHandler
+            // Same guard as couponAddedHandler: internal removeCoupon already refreshes; only cover
+            // EXTERNAL deletions here, so an internal remove doesn't fire two salla.cart.details() calls.
+            if (this.isApplying || this.isHandlingInternalError) {
+                return;
+            }
+            this.refreshFromServer();
         };
         // Arrow functions to maintain context for event listeners
         this.onKeyUp = (event) => {
@@ -51,15 +80,20 @@ export class SallaCartCoupons {
     async componentWillLoad() {
         await Salla.onReady();
         await Salla.lang.onLoaded();
+        // Multi-coupon is a store-level setting — read it ONCE from config here (like
+        // apply_coupon_enabled), so it never depends on the per-cart payload or localStorage.
+        this.multiCoupon = !!salla.config.get('store.settings.cart.multi_coupon');
         //then set your logic here to avoid any race condition
         this.loadCouponsData(); // Load async without blocking render - shows empty until loaded
+        // Synchronous first-paint seed from the storage cart so an applied coupon shows on the very
+        // first render instead of flashing empty → applied while the async server fetch is in flight
+        // (the old loadCartTotal read storage synchronously). loadCartTotal() then reconciles with the
+        // authoritative server payload, which also corrects a storage coupon that was stale.
+        this.seedFromStorage();
         this.loadCartTotal();
         this.setupCartEventListeners();
         // Note: No store feature gate needed - coupon availability controlled by backend API response
     }
-    componentDidLoad() {
-        this.setupCouponInputEvents();
-    }
     setupCartEventListeners() {
         // Listen for cart updates to refresh cart total
         salla.event.on('cart::updated', this.cartUpdatedHandler);
@@ -69,10 +103,8 @@ export class SallaCartCoupons {
         salla.event.on('cart::coupon.deleted', this.couponDeletedHandler);
     }
     disconnectedCallback() {
-        // Clean up DOM event listeners
-        this.couponInputRef?.removeEventListener('keyup', this.onKeyUp);
-        this.couponInputRef?.removeEventListener('input', this.onInput);
-        // Clean up cart event listeners using reliable global event system
+        // Input events are bound via JSX (onInput/onKeyUp) — Stencil cleans those up. Only the
+        // global cart event listeners need explicit teardown here.
         salla.event.off('cart::updated', this.cartUpdatedHandler);
         salla.event.off('cart::coupon.added', this.couponAddedHandler);
         salla.event.off('cart::coupon.addition.failed', this.couponAdditionFailedHandler);
@@ -118,21 +150,118 @@ export class SallaCartCoupons {
             this.availableCoupons = [];
         }
     }
-    loadCartTotal() {
-        // Get cart total and current coupon from Salla storage
-        const cart = salla.storage.get('cart');
-        // Check summary first (more accurate), then cart level, fallback to 0
-        this.cartTotal = cart?.summary?.sub_total ?? cart?.sub_total ?? 0;
+    async loadCartTotal() {
+        // Multi-coupon needs the SERVER-authoritative applied list (localStorage can be stale, e.g.
+        // coupons removed on the checkout page). Single-coupon (flag off — the default, and the hot
+        // path at billions req/day) is fully seeded synchronously by seedFromStorage() with NO network
+        // call, exactly as the original implementation read from storage — so skip the
+        // salla.cart.details() round-trip for it.
+        if (!this.multiCoupon) {
+            return;
+        }
+        await this.refreshFromServer();
+    }
+    /**
+     * Synchronous first-paint seed from the storage cart — SINGLE-COUPON (flag-off) ONLY.
+     *
+     * It restores the old synchronous first paint Greptile flagged for the default single-coupon
+     * stores (the input shows the applied code immediately instead of flashing empty).
+     *
+     * With multi-coupon ON the applied coupons are SERVER-authoritative: storage can still list a
+     * coupon that was invalidated or removed server-side (e.g. dropped below the cart minimum, or
+     * removed on another surface), so seeding the chips from it would render a STALE list — e.g.
+     * two chips when the server holds one — until the refresh lands. In that mode we skip the seed
+     * entirely and let refreshFromServer/cart::updated populate the chips from the server.
+     */
+    seedFromStorage() {
+        if (this.multiCoupon) {
+            return;
+        }
+        const stored = salla.storage.get('cart');
+        if (stored && typeof stored === 'object' && 'coupon' in stored) {
+            this.applyCart(stored);
+        }
+    }
+    /**
+     * Fetch the cart fresh from the server (salla.cart.details -> CartPresenter::forApi) and
+     * seed the applied codes + total from its authoritative payload (cart.coupons). Falls back
+     * to the storage cart ONLY if the request fails, and never wipes the chips on an odd shape.
+     */
+    async refreshFromServer() {
+        try {
+            const response = await salla.cart.details();
+            // cart-details nests the cart under data.cart (same shape addCoupon/deleteCoupon read).
+            const cart = response?.data?.cart ?? response?.data ?? response;
+            if (cart && typeof cart === 'object' &&
+                (Array.isArray(cart.coupons) || 'coupon' in cart)) {
+                this.applyCart(cart);
+                return;
+            }
+        }
+        catch (e) {
+            // ignore — fall back to storage below
+        }
+        const stored = salla.storage.get('cart');
+        if (stored) {
+            this.applyCart(stored);
+        }
+    }
+    /** Apply an authoritative cart object: total + applied chips (flag comes from store config). */
+    applyCart(cart) {
+        this.cartTotal = cart?.summary?.sub_total ?? cart?.sub_total ?? this.cartTotal;
+        this.syncAppliedFromCart(cart);
+    }
+    /**
+     * Seed the chip list and the active coupon from a cart object.
+     * Multi-coupon: use the cart's `coupons` array (survives refresh).
+     * Single-coupon (default): use the single `coupon` code.
+     */
+    syncAppliedFromCart(cart) {
         this.currentCoupon = cart?.coupon || '';
-        this.couponInputValue = cart?.coupon || '';
+        if (this.multiCoupon) {
+            this.appliedCoupons = Array.isArray(cart?.coupons)
+                ? cart.coupons.filter(Boolean)
+                : (this.currentCoupon ? [this.currentCoupon] : []);
+            return;
+        }
+        // Single-coupon (flag off): mirror the applied code into the (disabled) input, matching the
+        // original production UX. Only set at sync points (load / after apply-remove), never on a
+        // keystroke, so it won't clobber what the user is typing.
+        this.couponInputValue = this.currentCoupon;
+        this.appliedCoupons = this.currentCoupon ? [this.currentCoupon] : [];
     }
-    setupCouponInputEvents() {
-        if (!this.couponInputRef || !this.couponButtonRef) {
+    async handleApplyClick() {
+        if (this.isApplying) {
+            return;
+        }
+        const code = this.couponInputValue.trim();
+        if (!code) {
+            this.showCouponError(salla.lang.get('pages.cart.enter_coupon_code'));
             return;
         }
-        this.couponInputRef.addEventListener('keyup', this.onKeyUp);
-        this.couponInputRef.addEventListener('input', this.onInput);
+        this.isApplying = true;
+        this.isHandlingInternalError = true;
+        try {
+            // Apply the coupon. Multi-coupon: the backend appends it; single-coupon:
+            // it replaces the existing one. Re-read the applied set from the SERVER (not storage)
+            // for the chip list, and clear the input for the next code.
+            await salla.cart.addCoupon(code);
+            await this.refreshFromServer();
+            this.couponInputValue = '';
+        }
+        catch (error) {
+            this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
+        }
+        finally {
+            this.isApplying = false;
+            // Keep internal error flag active briefly to prevent race condition with SDK event
+            setTimeout(() => {
+                this.isHandlingInternalError = false;
+            }, 100);
+        }
     }
+    // Single-coupon (flag off) toggle button: apply the typed code, or remove the applied one.
+    // Mirrors the original production behavior; the SDK coupon.added/deleted events then refresh.
     async handleCouponButtonClick() {
         if (this.isApplying) {
             return;
@@ -146,13 +275,42 @@ export class SallaCartCoupons {
         this.isHandlingInternalError = true;
         try {
             if (hasCoupon) {
-                // Remove existing coupon
                 await salla.cart.deleteCoupon();
             }
             else {
-                // Apply new coupon
                 await salla.cart.addCoupon(this.couponInputValue.trim());
             }
+            // Refresh the UI directly for the single-coupon toggle. The coupon.added/deleted event
+            // handlers skip internal actions (isApplying guard), and cartUpdatedHandler doesn't
+            // re-seed from a summary-only payload — so without this refresh the input/button would
+            // stay stuck after a successful apply/remove on the default (flag-off) path.
+            await this.refreshFromServer();
+        }
+        catch (error) {
+            this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
+        }
+        finally {
+            this.isApplying = false;
+            setTimeout(() => {
+                this.isHandlingInternalError = false;
+            }, 100);
+        }
+    }
+    async removeCoupon(code) {
+        if (this.isApplying) {
+            return;
+        }
+        this.isApplying = true;
+        this.isHandlingInternalError = true;
+        try {
+            // Multi-coupon: remove just this code. Single-coupon: reset the cart coupon.
+            if (this.multiCoupon) {
+                await salla.cart.deleteCoupon(code);
+            }
+            else {
+                await salla.cart.deleteCoupon();
+            }
+            await this.refreshFromServer();
         }
         catch (error) {
             this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
@@ -191,6 +349,16 @@ export class SallaCartCoupons {
         try {
             // Apply the coupon directly without checking for existing coupon
             await salla.cart.addCoupon(couponCode.trim());
+            // Refresh the chips/input directly — the guarded coupon.added handler skips internal
+            // actions, so the coupon-card / selectCoupon path must refresh here or the chip list
+            // stays stale in multi-coupon mode until the next cart::updated with a coupons[] array.
+            await this.refreshFromServer();
+            // Multi-coupon: clear the input for the next code. Single-coupon: refreshFromServer
+            // already set the input to the applied code (shown disabled), so keep it — clearing
+            // here would blank the disabled field on the default flag-off path.
+            if (this.multiCoupon) {
+                this.couponInputValue = '';
+            }
         }
         catch (error) {
             this.showCouponError(error.response?.data?.error?.message || salla.lang.get('pages.cart.coupon_application_error'));
@@ -236,7 +404,18 @@ export class SallaCartCoupons {
             : `${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'))))));
     }
     render() {
-        return (h(Host, { key: '09c964ef1b706cd623f5b99b9606ecf93486e8b5' }, h("div", { key: 'a3b3313ecbc23821cca29115f1189ca2dfbcbb48', class: "s-cart-coupons-wrapper" }, h("div", { key: '27bc855b95d252a4feffc256fdef70b7d83aa4b3', class: "s-cart-coupons-input-section" }, h("label", { key: 'd17fff32352bc8e0535986519d5e22dda7879754', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '4e9acdb76110fffbd6984fa522fa91440d8c3bc6', class: "s-cart-coupons-coupon-input-container" }, h("input", { key: '2f0e3ee9a44db390caeeb4e85f40aab825c91182', 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, ref: el => this.couponInputRef = el, "aria-label": salla.lang.get('pages.cart.apply_coupon') }), h("salla-button", { key: 'a7356872f2eaae51bf77207c0fcfd10ea3c25313', 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() }, this.currentCoupon ? (h("i", { class: "sicon-cancel" })) : (h("span", null, salla.lang.get('pages.cart.save_coupon'))))), this.couponError && (h("span", { key: '4d0b025d425e2fbba8f313b92c1e257042c549b0', class: "s-cart-coupons-coupon-error" }, this.couponError))), this.availableCoupons && this.availableCoupons.length > 0 && (h("salla-slider", { key: 'ac6a96179ec2990f8fedfd3cbb63404e7fe60edf', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: '7c4f2641aa87a91d55d88d5fc0a375a5d3114a99', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
+        return (h(Host, { key: '30a1ee00e7ec27d12012823347cbcf3c477834e5' }, h("div", { key: '6f84298e9ebd6c50c84fb9a3736d734996e39c33', class: "s-cart-coupons-wrapper" }, h("div", { key: 'b95a1c2b29d2fed54fdf143eac8e37add062668b', class: "s-cart-coupons-input-section" }, h("label", { key: 'e6711fae70db31f8a5987cb58f0488e974394e1c', htmlFor: "coupon-input", class: "s-cart-coupons-coupon-label" }, salla.lang.get('pages.cart.have_coupon')), h("div", { key: '824b806c6aa40fb039f659fe81f6cb7686f46b10', 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" }),
+            h("salla-button", { ref: el => this.couponButtonRef = el, class: "s-cart-coupons-coupon-button s-cart-coupons-coupon-button-apply", color: "primary", loading: this.isApplying, "loader-position": "center", onClick: () => this.handleApplyClick(), key: "apply-button" }, h("span", null, salla.lang.get('pages.cart.save_coupon'))),
+        ] : [
+            // Single-coupon (flag off): the ORIGINAL production UX — the field is disabled and
+            // shows the applied code, and the button toggles to a red X (danger) to remove it;
+            // 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: '0f3b36e8192777fb7e7d0a065fe720c009065f9d', class: "s-cart-coupons-coupon-error" }, this.couponError)), this.multiCoupon && this.appliedCoupons.length > 0 && (h("div", { key: 'b680e30bd1ae49db5e304440431cdc89c6e5d051', 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: 'a2d312dbf6e997939f54c7867ef0d98091bbde4a', type: "carousel", showControls: false, class: "s-cart-coupons-slider" }, h("div", { key: 'b474dcbdeabc26bef5ecba94dd78ef72a60950df', slot: "items" }, this.availableCoupons.map(coupon => this.renderCouponCard(coupon))))))));
     }
     static get is() { return "salla-cart-coupons"; }
     static get originalStyleUrls() {
@@ -256,7 +435,9 @@ export class SallaCartCoupons {
             "currentCoupon": {},
             "couponInputValue": {},
             "couponError": {},
-            "isApplying": {}
+            "isApplying": {},
+            "appliedCoupons": {},
+            "multiCoupon": {}
         };
     }
     static get methods() {

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: '96a4c4fc3942df69e884ba44559adbec55743658' }, h("a", { key: 'e28c48fef8ade7f46c1dc1747baeeb16b70f8732', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: '4fed123336b4aa1892da9d83250321d837d684aa', id: "s-cart-icon" }, h("slot", { key: '365962ccc1d83f4437718f93ca15358fcce7113d', name: "icon" }, h("i", { key: '88870c2a2c4c21476d96e2253ea8b0c911bd493c', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '29a8d5436bd72355bc639cbd827a1c223bfe6f9b', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '630577903ec4a57177101cdc88b3f8e7d68ec676', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '5f61a936210a79ead537d6339a23dc73c7c91a88', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'b23c5f1cec4c520e2e789daa8e3af993ec1b5e49', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
+        return (h(Host, { key: '27e472fb912afff849c94a8a93a9a71778c6819d' }, h("a", { key: 'f9ef99f2a7205fcfdc0bdd799b1b751ab40bcb35', class: "s-cart-summary-wrapper", href: this.getCartLink(), onClick: this.handleCheckoutClick }, h("div", { key: '1b0d26d3e17b0fb5d6b2cbdc1cd14c079a5fb47b', id: "s-cart-icon" }, h("slot", { key: '3c64b2afa8782a4018dd086e657f16373a91f997', name: "icon" }, h("i", { key: '46f1cebfa346e20d27f8ffed1206c05828be004a', class: "s-cart-summary-icon", innerHTML: CartIcon }))), h("span", { key: '72bd9fc2d2949b74109b9e57e823c4c4cc99d287', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: 'd65efd069e4f5968c8f592bf341b35853b000bda', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: 'ecbd5350d56131aee746913bb7c6e662431f7001', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'aeebd5d52966dc183111e49289061c3649087a8f', 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: '4b648b7685b1d6601cb8b6e826d5eb716cbf4bba', class: "s-color-picker-main" }, h("slot", { key: '59afd795f1f5cce7d33b9e5c5e0e65be5db485f1', name: "widget" }, h("div", { key: '312878f910fc6c94b47bcd24319291f9db7e1d13', class: "s-color-picker-widget" }, h("div", { key: '1865cf384e4c6ecaef1ab2b35f8a6653304f6b9d', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'd92e8fbe87685abc27224d08e71f06ad216d6593', innerHTML: ArrowDown }))), h("input", { key: 'df66b2b623c71acba891a3c02e7a02905d78861b', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => (this.colorInput = color) })));
+        return (h(Host, { key: '516a09b2d219b7c12dd251c68e6e55a9a9f7624b', class: "s-color-picker-main" }, h("slot", { key: 'ce684e4b8a8a80710688e3f0c0e43271069fc920', name: "widget" }, h("div", { key: 'f95ff1d709d58e22a4a74ccc35f8db2e17be7e38', class: "s-color-picker-widget" }, h("div", { key: 'fd2347378990972269557593a7182f2bf4cd9f98', class: "s-color-picker-widget-canvas", ref: dv => (this.canvas = dv) }), h("span", { key: 'e22a7ed6738b5fcbc22453e5b091eeeb7720719a', innerHTML: ArrowDown }))), h("input", { key: 'b3f55c713a626808c6f36e4c1454abc26c97cb6e', 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: 'c3c4acb833a93d11b2c71eb77742319c8085968c' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
+        return (h(Host, { key: '0e3a24dcfe8922106b9479aa559cf0e126bc3fcf' }, !!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: '65ddceb3d0fc1eff329762b0c9d1784f223dc1ee' }, h("slot", { key: 'ee65b749c141f8288b288705ba7750676bb68408' })));
+        return (h(Host, { key: 'badbb24a38a68127a6880ab4dbe0b0ae4730b11d' }, h("slot", { key: 'a9bdc41d3ded750f0ac5b0e4b5dea3618e02286a' })));
     }
     static get is() { return "salla-conditional-fields"; }
     static get elementRef() { return "host"; }

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

@@ -228,7 +228,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '7055acd8fb89549ceff1f1b23f36c2dcf5f8dde0', 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: '966a6ce961c0cc07b937d9b8e328211377084d44', 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: '32645810d31bcc76582da3910ccaeac5b4490719', class: "s-datetime-picker" }, h("input", { key: 'ec579ffb806ff75829b6d0b5e6cb6da24a4b1bb3', 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: '10ac16506ca2b2b2a94227887a8d0b6593d7ac17', class: "s-datetime-picker" }, h("input", { key: 'fad4a5677edf21d9bd9a977392ebaf4ae2ad3b7b', 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

@@ -307,11 +307,11 @@ export class SallaFileUpload {
         }
     }
     render() {
-        return (h(Host, { key: 'af77cb11bf5ae4a857e9a099ce6438fb29aa8736', class: {
+        return (h(Host, { key: '518fef1a108d79f9aeb9efdbce74e4e721a145dc', class: {
                 "s-file-upload": true,
                 "s-file-upload-profile-image": this.profileImage,
                 "s-file-upload-multiple": this.allowMultiple,
-            } }, h("input", { key: 'da600278c346ef3554bfc6f8b22cb07dce1fc1ea', type: "file", name: this.name, value: this.value, 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.maxFilesCount)) : '', h("input", { key: '4c605d3d983a86fca5667641d38592daf30f20b2', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
+            } }, h("input", { key: '0c01117f1e59577833b106d5825a08dd2ca51bd0', type: "file", name: this.name, value: this.value, 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.maxFilesCount)) : '', h("input", { key: '69276b5e95c8bc35f42c3f1f307abea8c1761621', class: "s-hidden", name: 'hidden-' + this.name, required: this.required, value: this.value, ref: input => this.hiddenInput = input })));
     }
     async componentDidLoad() {
         await Salla.onReady();

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

@@ -275,7 +275,7 @@ export class SallaFilters {
     render() {
         const appliedFilters = this.getAppliedFilters();
         const removeText = salla.lang.getWithDefault('common.elements.delete', 'Remove');
-        return h(Host, { key: 'd6dacbf458eadefda7ec2b2c6845c54f553abea8' }, appliedFilters.length ? h("div", { class: "s-filters-applied s-filters-widget-container" }, h("h3", { class: "s-filters-widget-title", onClick: () => this.appliedOpen = !this.appliedOpen }, h("span", null, this.selectedTitle), h("span", { class: `s-filters-widget-plusminus ${this.appliedOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { class: `s-filters-widget-content ${this.appliedOpen ? 's-filters-widget-opened' : 's-filters-widget-closed'}` }, h("div", { class: "s-filters-widget-values" }, appliedFilters.map(chip => h("div", { class: "s-filters-label s-filters-applied-item" }, h("span", { class: "s-filters-option-name" }, chip.groupLabel, ": ", chip.optionLabel), h("button", { type: "button", class: "s-filters-applied-remove", "aria-label": `${removeText} ${chip.groupLabel}: ${chip.optionLabel}`, onClick: () => this.removeFilter(chip) }, h("i", { class: "sicon-cancel", "aria-hidden": "true" }))))), h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)))) : '', this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        return h(Host, { key: 'f0493d0e85ebb9e6612a1edc6cd7f45e7473017e' }, appliedFilters.length ? h("div", { class: "s-filters-applied s-filters-widget-container" }, h("h3", { class: "s-filters-widget-title", onClick: () => this.appliedOpen = !this.appliedOpen }, h("span", null, this.selectedTitle), h("span", { class: `s-filters-widget-plusminus ${this.appliedOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { class: `s-filters-widget-content ${this.appliedOpen ? 's-filters-widget-opened' : 's-filters-widget-closed'}` }, h("div", { class: "s-filters-widget-values" }, appliedFilters.map(chip => h("div", { class: "s-filters-label s-filters-applied-item" }, h("span", { class: "s-filters-option-name" }, chip.groupLabel, ": ", chip.optionLabel), h("button", { type: "button", class: "s-filters-applied-remove", "aria-label": `${removeText} ${chip.groupLabel}: ${chip.optionLabel}`, onClick: () => this.removeFilter(chip) }, h("i", { class: "sicon-cancel", "aria-hidden": "true" }))))), h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)))) : '', 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: '3ea32331738365fc422b500b3e70fa590d4dbdb5', class: "s-filters-widget-container" }, h("h3", { key: 'c5cb7a27841bf85e4c108e15d606c1c45059e5ca', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '641164d403dd4c9b79a540f4da5829f5238cded4' }, this.option.label), h("span", { key: '5cf687d80ff627f306f5876f69b799b6b7a3813d', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'd9b753223b4fb1c468ed6c4c3a269b861bc5b34b', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '0ca4f8c598e5965e23ef56610df7afc31799f168', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '7b43ec84dcbeb5b7f9cbe9335133e32c278c00fd', 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: '5bf79fc5f51389d087fed93acee51a097a46af65', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8dacd49ba003562d347a6c1b62e85ac447a62fcb' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '831f7655b903634e0eb3abc7338ea3296883cbbf', class: "s-filters-widget-container" }, h("h3", { key: '72a31fb2c9adab3df37550e930d5be981aafd8f6', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '7512914e8a7348d146384d67f117c8b06507def0' }, this.option.label), h("span", { key: '50d62723255618a2a51512722388ff686c92bdab', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '76792390d33c2051082541e18e9b354b2b63c644', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'b39462721ff4572b3572c0ed6171c07fa53b57a9', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '759b2ab6b80d0fd0bb03fcd3746414d9e4b80c7d', 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: 'db918c4a43bebc35c23810dc97736584504d0e47', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '92dc440b79ed0929a39db7a4a96a1981f3b49974' }), 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: '85ca188ff9f0db7c0a23b94e4705ae2ca5c38d55', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '885668e717441581cd1b92494ebc3927cd70daf1', 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

@@ -746,7 +746,7 @@ export class SallaGifting {
     }
     render() {
         return [
-            h("div", { key: '416981417bec78c8c3fda43e6f80745f4d735154' }, h("salla-list-tile", { key: '495255205e1c226669a14a94e50442aabd9818da', class: this.generateClass() }, h("div", { key: 'f2dbdc4ea0dc76d806f18563739a116e15cbbe08', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '9ed4f1d995eaf2341a9ec237ebfb486ed3db988e' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: 'b5d5512fcb2513177eaa1e25eacce9092f7d845f', slot: "subtitle" }, h("div", { key: '0a8223b41973b72d942ce91c5f478a3edaa5dfd3' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: 'a6d5a077131117c6854ffc2b39e506be7953051e', slot: "action" }, h("salla-button", { key: '99b14364789884b0010e50941c27cbcfe7445785', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '27f6be7b07084f48da83af6240933d619407307f', name: "widget-btn-content" }, h("div", { key: 'ee5d04e96dd1e3849a33813b3737b476b5470497', class: "s-gifting-widget-action-content" }, h("span", { key: 'd02bb1f6cd4dff335eeca1341da2c86d2976b4fc', innerHTML: GiftSharing }), " \u00A0", h("span", { key: '98a3594e6d01133c4f448d8e5df22ba2984cf09e' }, this.sectionBtnText)))))), h("salla-modal", { key: '0be87b9d369e92a71b68f570b9bf19a0ddb7dd6b', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '978995d399506ff82ac0f2385a1f85a808c7da3e', slot: "loading" }, h("div", { key: '7d1f141fd9131d35edb81326062e8f7cadfa2cab', class: "s-gifting-skeleton" }, h("div", { key: 'b33cfd58381c7c1b545ffedf6739e42fdb75c8de', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: 'e03a505ad3720c25077ca91c7eec2843cdaee225', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '6f630d2582c96fc71406ef4557143c6e9dbd4a88', class: "s-gifting-modal-title" }, h("div", { key: '8d1a3540993c9b40e705f2145bf0514754c36dab', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: 'd965c353f19cf785a13eba6332b715eed9748836', height: '15px', width: '150px' })))), h("div", { key: 'abacc03d1e30075d3d24dfd577dc9a60f7b52810', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '03db84cfccc546602a6f521b015d0c12b93caa6f', height: '10px', width: '150px' }), h("salla-skeleton", { key: 'e8e2d4e70d208055baaae44a8d7da8aa5c6a33da', height: '230px' }), h("salla-skeleton", { key: '2c90d91fb63551685b2041f2bc51fdb5219cbbb7', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8962bc17f43cb04563caa02db3df585189579f8f', height: '30px' }), h("salla-skeleton", { key: '73730453aa6f8d0ec2a653b4711b80b32a18b916', height: '40px' })))), h("slot", { key: '4bcf5a6d53485c461c35f53ce7e265bcf770989e', name: "header" }), !!this.hasError ?
+            h("div", { key: 'b4d479166a0a7a8b7bf4d66fd39399eef0bbe1d8' }, h("salla-list-tile", { key: 'a526748e500753bc4e132b6d8cc5fe56d276378c', class: this.generateClass() }, h("div", { key: '3756943a7292552172dfe5fe112a987f9dff2128', slot: "title" }, this.vertical ? h("span", { innerHTML: GiftSharing }) : '', h("h3", { key: '769df65a33828cdb51270438885bd7554a93b18b' }, !!this.widgetTitle ? this.widgetTitle : this.sectionTitle)), h("div", { key: '69c51851715c12002d0d70f936852bf6b6a064a4', slot: "subtitle" }, h("div", { key: 'ee7979030a5756a4ad74c87cebdb595decc12d48' }, !!this.widgetSubtitle ? this.widgetSubtitle : this.sectionSubtitle)), h("div", { key: '374d33078ca9e9f4d26bc801abcb50d8271887bf', slot: "action" }, h("salla-button", { key: 'f5c53ce21a6e058e484f941d356e1c74bf337b5f', color: "primary", fill: "outline", width: "wide", class: "s-gifting-widget-action", onClick: () => this.handleGiftButtonClick() }, h("slot", { key: '2b57632750b91dc720605c181e19a0329c8db3e9', name: "widget-btn-content" }, h("div", { key: '1d43f1351bc3323118c8eace681f382b753d009b', class: "s-gifting-widget-action-content" }, h("span", { key: 'f62808df38d07bf5db9d54f24a64c103dbcca3c2', innerHTML: GiftSharing }), " \u00A0", h("span", { key: 'd22429956200e68c8d588d0daddae201963ba47a' }, this.sectionBtnText)))))), h("salla-modal", { key: '0e1614ad210647ac77bbeb7e19104f5b9ce3b6b3', id: this.hostId, isLoading: true, class: "s-gifting-modal", width: "sm", ref: modal => this.modal = modal }, h("div", { key: '230c00dd750aa31d20e450086b26c11094305e0f', slot: "loading" }, h("div", { key: 'cb48aec5cf71db50ba003cb3607c27e7a629e9be', class: "s-gifting-skeleton" }, h("div", { key: 'e7aa596896cb841628bf35b4b5d8c9d22ed84dae', class: "s-gifting-modal-header" }, h("salla-skeleton", { key: '8e6dff5462dc1644bd89e56d51b3a353341b1741', type: 'circle', height: '5rem', width: '5rem' }), h("h2", { key: '5bdf4f1266938b319a5d4642773cb0e8fa772f88', class: "s-gifting-modal-title" }, h("div", { key: '2e3ea0e2589152059ec71f0e0a0b6537b0d32d8f', class: "s-gifting-modal-badge-wrapper" }, h("salla-skeleton", { key: '7cf08110d0535ec7b719251cf54f3a83d940772f', height: '15px', width: '150px' })))), h("div", { key: '3e341993dd31be4bfbcc272877c8167f50233dd0', class: "s-gifting-skeleton-content" }, h("salla-skeleton", { key: '74b584687ed715146e84a7107fb69f18ea78f31d', height: '10px', width: '150px' }), h("salla-skeleton", { key: '8acfdd240b397ea8e0d6c93c745786c68eb34f25', height: '230px' }), h("salla-skeleton", { key: 'c92cef763f9d2857429919434a56bbc9686d6a3a', height: '10px', width: '150px' }), h("salla-skeleton", { key: '22e6c56dbabf3f90fa608dcd42d11b463ae86a1c', height: '30px' }), h("salla-skeleton", { key: '8093fcbc09362879ac5afb38f1910bdddfd41390', height: '40px' })))), h("slot", { key: '10842023d5a5861fa1562784c77f718c8e257d80', 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" }, " "))
                 :
                     [
@@ -769,7 +769,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: 'a4d37b893e4a0867c044817434ade65b16fbe89a', name: "footer" })))
+                    ], h("slot", { key: 'ba5b5cc6e2b20d756ed5149757b23239455939f7', 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: '7438711b185e3159e7a4792ef86f795c25d857a1' });
+        return h(Host, { key: '1acc6e7c4e3e9695576a820cbc68c539e81fa36e' });
     }
     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: '2b73681383da172ed01bb199b117d2063228e01e' }, h("a", { key: 'af5913df51093694667751d16b5ec686103791a4', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: '49fdb468a67f0a015762a1539d2333ad694628ec', class: "s-list-tile-item-icon" }, h("slot", { key: '97417d4c9bf63e498510549d08dbf5df55050526', name: 'icon' })), h("div", { key: '53544687a14f2c992ad17d0194a10fba0ad40631', class: "s-list-tile-item-content" }, h("div", { key: 'a8803d707ccd88df74d425a004e5c180d0106c50', class: "s-list-tile-item-title" }, h("slot", { key: '27b091e8cf03dc9253baf135bdc6a8166eac566c', name: 'title' })), h("div", { key: 'c2ab48314fe243e6cea9dd7e8f0be4104a0b89e3', class: "s-list-tile-item-subtitle" }, h("slot", { key: '31c7e05be4026e990704926f6b29c8b1e570a548', name: "subtitle" }))), h("div", { key: '4fb89eaad3693b3b49e6d4ac72f09dca7c52eeeb', class: "s-list-tile-item-action" }, h("slot", { key: '7e587373e0282a22387028aaa6a801b9909f707a', name: 'action' })))));
+        return (h(Host, { key: 'b1b2a6bf65c40643d59f392e91cc76acaea5e89e' }, h("a", { key: '4b2026fd739b243a41bfc37fcb55bc07a1a54636', class: this.generateClass(), href: this.href || "#", target: this.target, "aria-label": "List Tile Link" }, h("div", { key: 'bbc7a7133da0e471ad92a5466e9ec0481d74cdd7', class: "s-list-tile-item-icon" }, h("slot", { key: 'e4e338854bfc7e6843c4b87f419c9aa59970c77b', name: 'icon' })), h("div", { key: '1b7b2e0a65193be521cdf6cccc314c83f853216d', class: "s-list-tile-item-content" }, h("div", { key: '4e6a178d219827b1feef394ea5564769bf11ded2', class: "s-list-tile-item-title" }, h("slot", { key: '75b036812aca3e00162fc8c40459b67d4db2cc6f', name: 'title' })), h("div", { key: 'ab0959a43214ae0eb4cf092ea3738c71ed987709', class: "s-list-tile-item-subtitle" }, h("slot", { key: 'e13f66fb2a0e1c5ab2a9081c808973c9f9ecca45', name: "subtitle" }))), h("div", { key: '78c7542367a41a1f8bc74bca73d2581f5c0b7bfd', class: "s-list-tile-item-action" }, h("slot", { key: '14c8c0f31d29855d743b52f82d52a3bed300b25f', 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: 'a3ab1e66f7b26628e7bfb1f5560127d042203cf3', class: "s-loading-container" }, h("svg", { key: 'e33089cee347160eaea4ded8ab8a5543a91f5ea1', "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: '8163f98231203552ea3f514ac3b8cd16a8d9426c', 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: '959ea259b039d16be8b9dc39a2fb2e409bfffe0e', 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: '0f3796a2a8f9610f40e20eb01e4d60fb56e11a03', class: "s-loading-container" }, h("svg", { key: 'd9d98cfa05e5c7d188237a0a4833c4cd13c2855c', "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: '75ea4d6f86456c86249dab53f3e18d21cc0380ef', 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: '8bfd0b7ea965749ed9456742f36d2ffa28cff9f3', 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: 'f8c4089089cc05dcc26628ca92dff99a1604d5ee', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '61d4450ea6277a3848512c4a91bbe823dd8d2813', slot: 'loading' }, h("div", { key: 'e2416822d2f660bb75284e17cb0d4408b25073b3', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '529ac08f5fdd3442e63d3272e43075d30dc67bb3', width: '25%', height: '15px' }), h("div", { key: '9b87c3ff232922c2bb27f9064afe6e203532e624', 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: 'ff35e7d5ccdb6fafc599bdaefb5390d3cba7a8a6', width: '25%', height: '15px' }), h("div", { key: 'abef2a071f3818fd980023522d118e64466d77e8', 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: '15611b13fb120fc02b79c4d341aa8ecd7a4265fc', height: '40px', width: '100%' }))), !!this.hasError ?
+            h("salla-modal", { key: 'ef56534e6aadef517af7e5af725cd3b27afe8827', isLoading: true, class: "s-hidden", ref: modal => this.modal = modal, width: "xs" }, h("div", { key: '47072c8447350fb18a5bd960335f9a907ffcdae5', slot: 'loading' }, h("div", { key: '96cf1ac3b2dc9f67ae831393285f20935d0312fd', class: "s-localization-modal-skeleton" }, h("salla-skeleton", { key: '7c2ca11ecb4d3fd62ad4c74e5187acfa313d7dbf', width: '25%', height: '15px' }), h("div", { key: '96e7d7eadf414867716fd513b1daa3417b1a02c4', 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: '3e02caddbc6de924dc902516f74e93f488556545', width: '25%', height: '15px' }), h("div", { key: 'fd93fce5cd7ce64dfd356ea9f105f53368d7faf6', 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: '0a8a92e3a2d99c2188767f5065e4efdae26d21c1', 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: '9b3837b35a38a39bde86ada09bbe7d1a43f669f4' }, h("div", { key: 'd3c4e77c5dea2060b2dc0f88dba36d08a3234779', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: '1219be8bbc9212da5b0392a6ac35c0c502cb1564', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '61ac2fcbcd5ae3038b3a09ee81555f31ebd4c073', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: 'aa504c58b738528d1545cccd2ca1c2a3f4af0f32', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '01763afbcbfd305186adabd75bd2798306a446f6', class: "s-loyalty-prize-item-points" }, this.item.cost_points, " ", salla.lang.get('pages.loyalty_program.point')))));
+        return (h(Host, { key: '1a3463c51bf3e3e250f62b65d3a81815ec465923' }, h("div", { key: '03bf4d3e35b10d17a325ca4ef280cb384f3a76f4', onClick: this.onPrizeItemClick.bind(this) }, h("img", { key: 'a4d319b2daec5cdfec1c85910edea10bc1d1ab6c', class: "s-loyalty-prize-item-image", src: this.item.image, alt: this.item.name }), h("div", { key: '52059fafc318c1f5a6b0289669083476650f8761', class: "s-loyalty-prize-item-title" }, this.item.name), h("div", { key: 'a3e14e2d1bd86dc3e7dbd2e6c5115e119af965e5', class: "s-loyalty-prize-item-subtitle" }, this.item.description), h("div", { key: '55df95c028748c0387dc75dc4ad35c7285c907af', 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: '598233120adaed6885eff5d25c2e3142ed25b4f1' }, h("div", { key: 'eefd51a5c81eb491252eff180c57f6cb172425f5' }, 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: '2d1ecb37f0cc74c3d6c3c29bc95d6043b373155f' }, h("div", { key: '2c1a3e6af83fde1f55f6d5b5bed246a3206673c4' }, 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',