@salla.sa/twilight-components 2.14.483 → 2.14.485

package/dist/components/salla-products-list2.js

@@ -100,6 +100,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 this.emitSelection();
             }
         };
+        this.onWishlistStorageSynced = () => Helper.syncWishlistIcons(this.wrapper, `${this.productCardComponent}, salla-product-card`);
         //TODO:: check why `this.includes` not working!!
         this.includes = Helper.parseJson(this.includes || this.host.getAttribute('includes'));
         if (!Array.isArray(this.includes)) {
@@ -121,11 +122,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         window.addEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         salla.event.on('salla-filters::changed', filters => this.setFilters(filters));
         salla.event.on('wishlist::removed', this.onWishlistItemRemoved);
+        salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     disconnectedCallback() {
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
         salla.event.off('wishlist::removed', this.onWishlistItemRemoved);
+        salla.event.off('wishlist::storage.synced', this.onWishlistStorageSynced);
     }
     /**
      * Set parsed filters data from URI
@@ -369,6 +372,17 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         this.selectionChanged.emit(detail);
         salla.event.emit('salla-products-list::selection.changed', detail);
     }
+    appendProductCards(cards) {
+        if (!this.wrapper) {
+            return;
+        }
+        const list = Array.isArray(cards) ? cards : [cards];
+        list.forEach(card => this.wrapper.append(card));
+        this.onWishlistStorageSynced();
+    }
+    refreshWishlistIconsAfterHydration() {
+        return salla.wishlist.api.syncStorageFromServer();
+    }
     /**
      * Re-render the list when selection mode is toggled at runtime (e.g. enabled
      * by the wishlist actions panel after the list already loaded).
@@ -413,13 +427,18 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     waitForLayoutStable(element) {
         let timeout = null;
+        let maxWait = null;
         return new Promise(resolve => {
-            const observer = new MutationObserver(() => {
+            let observer;
+            const settle = () => {
                 clearTimeout(timeout);
-                timeout = setTimeout(() => {
-                    observer.disconnect();
-                    resolve(null);
-                }, 160); // Adjust delay as needed for your layout
+                clearTimeout(maxWait);
+                observer.disconnect();
+                resolve(null);
+            };
+            observer = new MutationObserver(() => {
+                clearTimeout(timeout);
+                timeout = setTimeout(settle, 160); // Adjust delay as needed for your layout
             });
             // Observe changes to the entire body, including child nodes and attributes.
             observer.observe(element, {
@@ -427,6 +446,8 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 subtree: true,
                 attributes: true,
             });
+            // hard cap so a quiescent DOM still resolves and disconnects the observer
+            maxWait = setTimeout(settle, 1000);
         });
     }
     async waitForStableLayout(element) {
@@ -566,9 +587,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 this.page = pageIndex;
                 this.nextPage = nextPage;
                 // more performant on larger set of data
-                for (let i = 0; i < currentPageData.length; i++) {
-                    this.wrapper.append(this.getItemHTML(currentPageData?.[i]));
-                }
+                this.appendProductCards(currentPageData.map((product) => this.getItemHTML(product)));
                 return true;
             }
             catch (error) {
@@ -701,11 +720,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 }
                 const items = await this.handleResponse(response);
                 this.infiniteScroll.appendItems(items);
+                this.onWishlistStorageSynced();
                 if (this.infiniteScroll.pageIndex === 2) {
                     if (!this.autoload && this.nextPage) {
                         this.loadMoreWrapper.style.display = 'block';
                     }
                     this.animateItems();
+                    this.refreshInfiniteScrollMeasurements();
                 }
             }
             catch (error) {
@@ -757,6 +778,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             this.infiniteScroll.loadNextPage();
         }
     }
+    // re-measure scroll trigger after layout settles; stale `top` breaks autoload
+    refreshInfiniteScrollMeasurements() {
+        if (!this.autoload || !this.infiniteScroll?.updateMeasurements) {
+            return;
+        }
+        this.waitForStableLayout(document.body).then(() => this.infiniteScroll?.updateMeasurements?.());
+    }
     async applyBeforeBuildListUrl(url) {
         try {
             const ctx = { component: this, url };
@@ -807,7 +835,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 this.nextPage = await this.resolveNextPageFromCursor(response);
                 return;
             }
-            (await this.handleResponse(response)).forEach(card => this.wrapper.append(card));
+            this.appendProductCards(await this.handleResponse(response));
         }));
     }
     /**
@@ -910,8 +938,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 }
                 //todo:: avoid using timeout, just assigne the data to the this.firstPageResponse and it should work fine, because it will be rendered in componentDidLoad
                 setTimeout(() => {
-                    let productsList = this.getSourceValue();
-                    productsList.map(product => this.wrapper.append(this.getItemHTML(product)));
+                    this.appendProductCards(this.getSourceValue().map((product) => this.getItemHTML(product)));
                 });
                 return;
             }
@@ -938,14 +965,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'block');
             }
             this.scrollToLastViewedProduct();
+            this.refreshInfiniteScrollMeasurements();
         }
         else if (!this.firstPageResponse && this.switchToNormalBehavior) {
             this.getInitialData()
                 .then(async () => {
                 if (this.firstPageResponse) {
-                    (await this.handleResponse(this.firstPageResponse, false)).forEach(card => {
-                        this.wrapper.append(card);
-                    });
+                    this.appendProductCards(await this.handleResponse(this.firstPageResponse, false));
                     setTimeout(() => {
                         if (!this.autoload && this.nextPage && this.infiniteScroll.pageIndex == 1) {
                             const loadMoreWrapper = this.host.querySelector('.s-infinite-scroll-wrapper');
@@ -963,8 +989,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         }
         else {
             this.firstPageResponse &&
-                (await this.handleResponse(this.firstPageResponse, false)).forEach(card => this.wrapper.append(card));
+                this.appendProductCards(await this.handleResponse(this.firstPageResponse, false));
         }
+        await this.refreshWishlistIconsAfterHydration();
     }
     canRender() {
         return this.sourceValueIsValid && this.isReady;

package/dist/components/salla-products-slider2.js

@@ -40,6 +40,7 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
          */
         this.productCardComponent = 'custom-salla-product-card';
         this.apiUrl = '';
+        this.onWishlistStorageSynced = () => Helper.syncWishlistIcons(this.host, `${this.productCardComponent}, salla-product-card`);
     }
     componentWillLoad() {
         return salla.onReady()
@@ -90,9 +91,20 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
             }
         }, 1000);
     }
+    connectedCallback() {
+        salla.event.on('wishlist::storage.synced', this.onWishlistStorageSynced);
+    }
+    disconnectedCallback() {
+        salla.event.off('wishlist::storage.synced', this.onWishlistStorageSynced);
+    }
     async componentDidLoad() {
         await Salla.hooks.registerComponent('salla-products-slider', this);
     }
+    onReadyChanged(isReady) {
+        if (!isReady)
+            return;
+        void salla.wishlist.api.syncStorageFromServer();
+    }
     isSourceWithoutValue() {
         return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
     }
@@ -132,6 +144,9 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
         return (h(Host, { class: "s-products-slider-wrapper" }, h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
     }
     get host() { return this; }
+    static get watchers() { return {
+        "isReady": ["onReadyChanged"]
+    }; }
     static get style() { return sallaProductsSliderCss; }
 }, [0, "salla-products-slider", {
         "blockTitle": [1, "block-title"],
@@ -152,6 +167,8 @@ const SallaProductsSlider = /*@__PURE__*/ proxyCustomElement(class SallaProducts
         "hasCustomComponent": [32],
         "apiUrl": [32],
         "parsedSourceValue": [32]
+    }, undefined, {
+        "isReady": ["onReadyChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/esm/{Helper-BXj4f_Qj.js → Helper-CD8d-Brd.js}

@@ -441,6 +441,19 @@ class Helper {
         (config.sms || config.mobile || config.whatsapp) && channels.push('sms');
         return channels.join(',');
     }
+    syncWishlistIcons(root, cardSelector) {
+        root?.querySelectorAll(cardSelector).forEach((card) => {
+            const rawId = card.product?.id;
+            const id = typeof rawId === 'number' ? rawId : Number(rawId);
+            if (Number.isNaN(id))
+                return;
+            const added = salla.wishlist.api.has(id);
+            card.querySelectorAll('.s-product-card-wishlist-btn, .btn--wishlist').forEach((btn) => {
+                btn.classList.toggle('s-product-card-wishlist-added', added);
+                btn.classList.toggle('wishlist-added', added);
+            });
+        });
+    }
 }
 var Helper$1 = new Helper;
 

package/dist/esm/{filepond-DwduE1q7.js → filepond-DHzuRfQN.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-poster-Cg5uryRV.js → filepond-plugin-file-poster-BxdBxR7d.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-size-CI1Sj8kr.js → filepond-plugin-file-validate-size-C-0L9g1L.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-file-validate-type-JUm4bC13.js → filepond-plugin-file-validate-type-OyHjZUCW.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-edit-BrJ55gLP.js → filepond-plugin-image-edit-BIfGCYQ5.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-exif-orientation-BkQECx1u.js → filepond-plugin-image-exif-orientation-DJlKxr63.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{filepond-plugin-image-preview-nIxzaSJG.js → filepond-plugin-image-preview-B2DpOs_r.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/esm/{functions-BzIvfM0W.js → functions-DT-OwuY-.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-CPL9CY3o.js';
+import { h } from './index-DJPd6DKq.js';
 
 function nearestLowerMultiple(number, multipleOf = window.matchMedia('(min-width: 768px)').matches ? 3 : 2) {
     return number < multipleOf ? number : number - (number % multipleOf);

package/dist/esm/{index-CFOfZPpP.js → index-D449pxDB.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-CPL9CY3o.js';
+import { d as getDefaultExportFromCjs } from './index-DJPd6DKq.js';
 
 function _mergeNamespaces(n, m) {
     m.forEach(function (e) {