@salla.sa/twilight-components 2.14.484 → 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).
@@ -573,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) {
@@ -708,6 +720,7 @@ 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';
@@ -822,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));
         }));
     }
     /**
@@ -925,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;
             }
@@ -959,9 +971,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             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');
@@ -979,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-BOBokEx5.js → filepond-DHzuRfQN.js}

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-k6XsozPW.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-B1BkZh58.js → filepond-plugin-file-validate-size-C-0L9g1L.js}

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-k6XsozPW.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-CT0ni0hb.js → filepond-plugin-file-validate-type-OyHjZUCW.js}

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { d as getDefaultExportFromCjs } from './index-k6XsozPW.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-Cu1zifQ6.js → filepond-plugin-image-exif-orientation-DJlKxr63.js}

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

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

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

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

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { h } from './index-k6XsozPW.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-CiFCAiRL.js → index-D449pxDB.js}

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