@salla.sa/twilight-components 2.14.467 → 2.14.468

package/dist/esm/salla-products-list.entry.js

@@ -1,17 +1,18 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-a4x9urdK.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-D2yBy7Jh.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 import { S as ShoppingBag } from './shopping-bag-DiKTtDW5.js';
 import { H as Helper } from './Helper-BXj4f_Qj.js';
 
-const sallaProductsListCss = "";
+const sallaProductsListCss = ".s-products-list-selectable-item{position:relative;border-radius:0.5rem;transition:box-shadow 0.15s ease-in-out}.s-products-list-item-selected{box-shadow:0 0 0 2px var(--color-primary)}.s-products-list-select-control{position:absolute;top:10px;inset-inline-start:10px;z-index:5;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.s-products-list-select-checkbox{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:22px;height:22px;margin:0;cursor:pointer;color:var(--color-primary);border:1px solid rgba(0, 0, 0, 0.15);border-radius:6px;background-color:#fff;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:background-color 0.15s ease-in-out, border-color 0.15s ease-in-out}.s-products-list-select-checkbox:hover{border-color:var(--color-primary)}.s-products-list-select-checkbox:focus,.s-products-list-select-checkbox:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent)}.s-products-list-select-checkbox:checked,.s-products-list-select-checkbox:checked:hover,.s-products-list-select-checkbox:checked:focus{background-color:var(--color-primary);border-color:var(--color-primary)}.s-products-list-select-checkbox:checked::after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%, -60%) rotate(45deg)}.s-products-list-row-cards .s-products-list-select-control{top:50%;inset-inline-start:14px;transform:translateY(-50%)}.s-products-list-row-cards .s-products-list-selectable-item>:not(.s-products-list-select-control){padding-inline-start:2.75rem}";
 
 const SallaProductsList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.productsFetched = createEvent(this, "productsFetched");
+        this.selectionChanged = createEvent(this, "selectionChanged");
         /**
          * Autoload next page when scroll
          */
@@ -26,6 +27,18 @@ const SallaProductsList = class {
          * <salla-products-list product-card-component="my-custom-card-style2" ...
          */
         this.productCardComponent = 'custom-salla-product-card';
+        /**
+         * Enables multi-selection of products. When enabled, a checkbox overlay is
+         * rendered on top of each product card and the selected products are exposed
+         * via the `selectionChanged` event, the `salla-products-list::selection.changed`
+         * global event and the `getSelected()` method.
+         *
+         * This is source-agnostic (works for any `source`) and defaults to `false`.
+         * On the wishlist page the `salla-wishlist-actions` panel turns it on at
+         * runtime (when the customer chooses "share specific items"), so no theme
+         * markup changes are required.
+         */
+        this.selectable = false;
         // State
         this.page = 1;
         this.placeholderText = salla.lang.get('pages.categories.no_products');
@@ -33,10 +46,12 @@ const SallaProductsList = class {
         this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
         this.currentPage = salla.config.get('page');
         this.filtersSnapshot = [];
-        this.lastViewedProductKey = "lastViewedProductId";
-        this.filtersKey = "filters";
-        this.infiniteScrollStateKey = "infiniteScrollState";
-        this.prevCategoryIdKey = "prevCategoryId";
+        /** Map of selected products keyed by product id (preserves selection across pagination). */
+        this.selectedProducts = new Map();
+        this.lastViewedProductKey = 'lastViewedProductId';
+        this.filtersKey = 'filters';
+        this.infiniteScrollStateKey = 'infiniteScrollState';
+        this.prevCategoryIdKey = 'prevCategoryId';
         this.isProcessing = false; // Tracks if we are processing data
         this.scrollTimeout = null;
         this.boundScrollToLastViewedProduct = () => this.scrollToLastViewedProduct();
@@ -45,7 +60,44 @@ const SallaProductsList = class {
             'product.index.latest': 'latest',
             'product.index.offers': 'offers',
             'product.index.search': 'search',
-            'product.index.sales': 'sales'
+            'product.index.sales': 'sales',
+        };
+        this.onWishlistItemRemoved = (_response, productId) => {
+            if (this.getSource() !== 'wishlist' || !this.wrapper) {
+                return;
+            }
+            const normalizedId = String(productId);
+            const cardTag = this.hasCustomComponent ? this.productCardComponent : 'salla-product-card';
+            for (const child of Array.from(this.wrapper.children)) {
+                const listItem = child;
+                const card = child.querySelector(cardTag);
+                const id = listItem.product?.id ?? card?.product?.id;
+                if (id != null && String(id) === normalizedId) {
+                    child.remove();
+                    break;
+                }
+            }
+            // Theme may remove the card first and leave an empty selectable shell.
+            for (const child of Array.from(this.wrapper.children)) {
+                if (!child.classList.contains('s-products-list-selectable-item')) {
+                    continue;
+                }
+                const listItem = child;
+                if (listItem.product?.id != null &&
+                    String(listItem.product.id) === normalizedId &&
+                    !child.querySelector(cardTag)) {
+                    child.remove();
+                    break;
+                }
+            }
+            if (this.selectable) {
+                for (const id of Array.from(this.selectedProducts.keys())) {
+                    if (String(id) === normalizedId) {
+                        this.selectedProducts.delete(id);
+                    }
+                }
+                this.emitSelection();
+            }
         };
         //TODO:: check why `this.includes` not working!!
         this.includes = Helper.parseJson(this.includes || this.host.getAttribute('includes'));
@@ -62,15 +114,17 @@ const SallaProductsList = class {
     }
     connectedCallback() {
         //Override browser scroll restoration default behaviour
-        if ("scrollRestoration" in history)
-            history.scrollRestoration = "manual";
+        if ('scrollRestoration' in history)
+            history.scrollRestoration = 'manual';
         // required for scroll restoration case when the component loads before DOM content is completed (slow internet bandwidth /low device specs)
         window.addEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         salla.event.on('salla-filters::changed', filters => this.setFilters(filters));
+        salla.event.on('wishlist::removed', this.onWishlistItemRemoved);
     }
     disconnectedCallback() {
         window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
         window.removeEventListener('scroll', this.boundHandleScroll);
+        salla.event.off('wishlist::removed', this.onWishlistItemRemoved);
     }
     /**
      * Set parsed filters data from URI
@@ -83,7 +137,9 @@ const SallaProductsList = class {
         window.scrollTo({ top: 0, behavior: 'smooth' });
         // Create a deep copy of the filters object to avoid mutating the original object
         this.parsedFilters = JSON.parse(JSON.stringify(filters));
-        if (this.currentPage?.slug == "product.index" && this.parsedFilters && this.parsedFilters.category_id) {
+        if (this.currentPage?.slug == 'product.index' &&
+            this.parsedFilters &&
+            this.parsedFilters.category_id) {
             this.currentCategoryIdFilter = [this.parsedFilters.category_id];
         }
         return this.reload();
@@ -171,12 +227,12 @@ const SallaProductsList = class {
         }
         this.nextPage += '&filterable=1';
         for (const [key, value] of Object.entries(this.parsedFilters || {})) {
-            if (["string", "number"].includes(typeof value)) {
+            if (['string', 'number'].includes(typeof value)) {
                 // @ts-ignore
                 this.nextPage += `&filters[${encodeURIComponent(key)}]=${encodeURIComponent(value)}`;
             }
             else if (Array.isArray(value)) {
-                value.forEach(item => this.nextPage += `&filters[${encodeURIComponent(key)}][]=${encodeURIComponent(item)}`);
+                value.forEach(item => (this.nextPage += `&filters[${encodeURIComponent(key)}][]=${encodeURIComponent(item)}`));
             }
             else if (typeof value === 'object') {
                 for (const [k, v] of Object.entries(value)) {
@@ -230,7 +286,9 @@ const SallaProductsList = class {
         //as a request they don't want to let the user to open the product details
         //todo:: find a better way to handle this request
         this.getSource() === 'landing-page' && (product.url = '');
-        const customComponentTag = this.hasCustomComponent ? this.productCardComponent : 'salla-product-card';
+        const customComponentTag = this.hasCustomComponent
+            ? this.productCardComponent
+            : 'salla-product-card';
         const productCard = document.createElement(customComponentTag);
         productCard.product = product;
         // Apply compact layout if requested - set both property and attribute for compatibility
@@ -241,7 +299,7 @@ const SallaProductsList = class {
         this.applyLandingPageStyles(productCard);
         this.applyHorizontalCardStyles(productCard);
         // Attach click event listener to save the current products snapshot
-        productCard.addEventListener('click', (event) => {
+        productCard.addEventListener('click', event => {
             const target = event.target;
             // Check if the clicked element is an anchor or inside an anchor
             const anchor = target.closest('a');
@@ -253,8 +311,69 @@ const SallaProductsList = class {
                 }
             }
         });
+        if (this.selectable) {
+            return this.wrapSelectableItem(productCard, product);
+        }
         return productCard;
     }
+    /**
+     * Wrap a product card with a selection control. The wrapper mirrors `product`
+     * so the scroll-restoration snapshot logic (which reads `child.product`) keeps
+     * working, and the card keeps its id for `scrollToLastViewedProduct`.
+     */
+    wrapSelectableItem(productCard, product) {
+        const container = document.createElement('div');
+        container.className = 's-products-list-selectable-item';
+        container.product = product;
+        const isSelected = this.selectedProducts.has(product.id);
+        if (isSelected) {
+            container.classList.add('s-products-list-item-selected');
+        }
+        const control = document.createElement('label');
+        control.className = 's-products-list-select-control';
+        control.setAttribute('aria-label', salla.lang.get('common.elements.select', 'تحديد'));
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 's-products-list-select-checkbox';
+        checkbox.checked = isSelected;
+        checkbox.addEventListener('change', () => this.toggleSelection(product, container, checkbox.checked));
+        control.appendChild(checkbox);
+        container.appendChild(control);
+        container.appendChild(productCard);
+        return container;
+    }
+    toggleSelection(product, container, checked) {
+        if (checked) {
+            this.selectedProducts.set(product.id, product);
+            container?.classList.add('s-products-list-item-selected');
+        }
+        else {
+            this.selectedProducts.delete(product.id);
+            container?.classList.remove('s-products-list-item-selected');
+        }
+        this.emitSelection();
+    }
+    emitSelection() {
+        const products = Array.from(this.selectedProducts.values());
+        const ids = Array.from(this.selectedProducts.keys());
+        const detail = { ids, products, count: ids.length };
+        this.selectionChanged.emit(detail);
+        salla.event.emit('salla-products-list::selection.changed', detail);
+    }
+    /**
+     * Re-render the list when selection mode is toggled at runtime (e.g. enabled
+     * by the wishlist actions panel after the list already loaded).
+     */
+    onSelectableChanged(newValue, oldValue) {
+        if (newValue === oldValue || !this.isReady || !this.wrapper) {
+            return;
+        }
+        if (!newValue) {
+            this.selectedProducts.clear();
+            this.emitSelection();
+        }
+        this.reload();
+    }
     applyLandingPageStyles(productCard) {
         if (this.getSource() === 'landing-page' && !this.hasCustomComponent) {
             productCard.toggleAttribute('hide-add-btn', true);
@@ -272,7 +391,7 @@ const SallaProductsList = class {
     }
     waitForResizing(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const resizeObserver = new ResizeObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -285,7 +404,7 @@ const SallaProductsList = class {
     }
     waitForLayoutStable(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const observer = new MutationObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -305,15 +424,14 @@ const SallaProductsList = class {
         // Wait for DOM mutations and layout shifts to stabilize
         return await Promise.allSettled([
             this.waitForResizing(element),
-            this.waitForLayoutStable(element)
+            this.waitForLayoutStable(element),
         ]);
     }
     scrollToLastViewedProduct() {
         const lastViewedProductId = sessionStorage.getItem(this.lastViewedProductKey);
         if (!lastViewedProductId || salla.url.is_page('product.single'))
             return;
-        this.isElementLoaded(`[id*="${lastViewedProductId}"]`)
-            .then(() => {
+        this.isElementLoaded(`[id*="${lastViewedProductId}"]`).then(() => {
             const productCard = this.wrapper?.querySelector(`[id*="${lastViewedProductId}"]`);
             if (!productCard)
                 return;
@@ -321,8 +439,12 @@ const SallaProductsList = class {
                 const scrollToProductCard = () => {
                     // calculations is located here for last second changes in the ui (ie. sticky header height)
                     productCard.scrollIntoView({ block: 'start', behavior: 'instant' });
-                    const headerSelector = matchMedia('(max-width: 1024px)').matches ? "header .inner" : "ul.main-menu";
-                    const headerHeight = window?.header_is_sticky ? (document.querySelector(headerSelector)?.getBoundingClientRect()?.height ?? 56) : 0;
+                    const headerSelector = matchMedia('(max-width: 1024px)').matches
+                        ? 'header .inner'
+                        : 'ul.main-menu';
+                    const headerHeight = window?.header_is_sticky
+                        ? (document.querySelector(headerSelector)?.getBoundingClientRect()?.height ?? 56)
+                        : 0;
                     const cardsListRowGap = parseInt(getComputedStyle(this.wrapper).rowGap) ?? 16;
                     const productCardOffset = headerHeight + cardsListRowGap;
                     scrollBy({ top: productCardOffset * -1, behavior: 'instant' });
@@ -330,7 +452,7 @@ const SallaProductsList = class {
                 //start scrolling to the product card position
                 requestAnimationFrame(scrollToProductCard);
                 const productImages = productCard.querySelectorAll('img.lazy');
-                productImages.forEach((image) => {
+                productImages.forEach(image => {
                     const productImage = image;
                     const handleImageEvent = () => {
                         requestAnimationFrame(scrollToProductCard);
@@ -347,16 +469,15 @@ const SallaProductsList = class {
         });
     }
     isElementLoaded(selector) {
-        return new Promise((resolve => {
+        return new Promise(resolve => {
             const interval = setInterval(() => {
                 if (document.querySelector(selector)) {
                     clearInterval(interval);
                     return resolve(document.querySelector(selector));
                 }
             }, 50);
-        }));
+        });
     }
-    ;
     takeStateSnapshot() {
         const currentPageData = [];
         // Classic for-loop for performance
@@ -367,7 +488,7 @@ const SallaProductsList = class {
         const scrollState = {
             pageIndex: Math.max((this.infiniteScroll?.pageIndex ?? 1) - 1, 1),
             nextPage: this.nextPage,
-            currentPageData
+            currentPageData,
         };
         if (this.isFilterable()) {
             const existingFilters = sessionStorage.getItem(this.filtersKey);
@@ -414,9 +535,8 @@ const SallaProductsList = class {
         const isDifferentCategory = currentPageSlug
             ? prevCategory !== currentPageSlug // Compare slugs for special pages
             : prevCategory !== String(currentPageId); // Compare IDs otherwise
-        if ((prevCategory && isDifferentCategory && !isHomepage && !isProductPage)
-            ||
-                (isHomepage && !this.hasInfiniteScroll)) {
+        if ((prevCategory && isDifferentCategory && !isHomepage && !isProductPage) ||
+            (isHomepage && !this.hasInfiniteScroll)) {
             this.removeScrollRestorationSession();
             this.switchToNormalBehavior = true;
             return false;
@@ -460,7 +580,9 @@ const SallaProductsList = class {
         return ['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource());
     }
     getSourceValue() {
-        return this.currentCategoryIdFilter ? this.currentCategoryIdFilter : Helper.getProductsSourceValue(this.source, this.sourceValue);
+        return this.currentCategoryIdFilter
+            ? this.currentCategoryIdFilter
+            : Helper.getProductsSourceValue(this.source, this.sourceValue);
     }
     logFetchError(errorPhase, error, fetchPath, http, response) {
         try {
@@ -471,7 +593,9 @@ const SallaProductsList = class {
                 source: this.getSource(),
                 sourceValue: typeof sourceValue === 'string' && sourceValue.length > 200
                     ? `${sourceValue.slice(0, 200)}…`
-                    : Array.isArray(sourceValue) ? { length: sourceValue.length } : sourceValue,
+                    : Array.isArray(sourceValue)
+                        ? { length: sourceValue.length }
+                        : sourceValue,
                 pageIndex: this.infiniteScroll?.pageIndex,
                 fetchPath,
                 httpStatus: http?.status,
@@ -488,7 +612,9 @@ const SallaProductsList = class {
                     : {}),
             });
         }
-        catch { /* analytics */ }
+        catch {
+            /* analytics */
+        }
     }
     appendDataLayer(data) {
         if (typeof dataLayer !== 'object' || !Array.isArray(dataLayer)) {
@@ -496,29 +622,29 @@ const SallaProductsList = class {
             return;
         }
         dataLayer.push({
-            "event": "impressions",
-            "ecommerce": {
-                "currencyCode": salla.config.currency().code,
+            event: 'impressions',
+            ecommerce: {
+                currencyCode: salla.config.currency().code,
                 // "event_id":"", // todo
-                "impressions": data.map((product, index) => {
+                impressions: data.map((product, index) => {
                     return {
-                        "id": product.id,
-                        "name": product.name,
-                        "price": product.price,
-                        "brand": product.brand?.name || '',
-                        "quantity": product.quantity,
+                        id: product.id,
+                        name: product.name,
+                        price: product.price,
+                        brand: product.brand?.name || '',
+                        quantity: product.quantity,
                         // "variant": "",
-                        "categories": [
+                        categories: [
                             {
-                                "name": product.category?.name || salla.config.get('page.title'),
-                                "id": salla.config.get('page.id')
-                            }
+                                name: product.category?.name || salla.config.get('page.title'),
+                                id: salla.config.get('page.id'),
+                            },
                         ],
-                        "category": product.category?.name || salla.config.get('page.title'),
-                        'position': index + 1
+                        category: product.category?.name || salla.config.get('page.title'),
+                        position: index + 1,
                     };
-                })
-            }
+                }),
+            },
         });
     }
     initiateInfiniteScroll() {
@@ -531,7 +657,7 @@ const SallaProductsList = class {
             history: false,
             nextPage: this.nextPage,
             scrollThreshold: shouldApplyManualLoad ? false : this.autoload ? 100 : false,
-            loadOnScroll: shouldApplyManualLoad ? false : this.autoload
+            loadOnScroll: shouldApplyManualLoad ? false : this.autoload,
         }, true);
         this.infiniteScroll.pageIndex = this.page;
         this.infiniteScroll?.on('request', () => {
@@ -642,11 +768,13 @@ const SallaProductsList = class {
     }
     getInitialData() {
         this.loading();
-        return salla.api.withoutNotifier(() => salla.product.api.fetch({
+        return salla.api.withoutNotifier(() => salla.product.api
+            .fetch({
             source: Helper.getApiSource(this.getSource()),
             source_value: this.getSourceValue(),
-            limit: this.limit
-        }).then(async (response) => {
+            limit: this.limit,
+        })
+            .then(async (response) => {
             if (!response.data.length) {
                 this.showPlaceholder = true;
                 this.placeholderLoader && this.placeholderLoader.remove();
@@ -670,9 +798,65 @@ const SallaProductsList = class {
     async loadMore() {
         this.infiniteScroll?.loadNextPage();
     }
+    /**
+     * Get the currently selected products.
+     */
+    async getSelected() {
+        return {
+            ids: Array.from(this.selectedProducts.keys()),
+            products: Array.from(this.selectedProducts.values()),
+        };
+    }
+    /**
+     * Get all products currently rendered in the list (works whether selection
+     * is enabled or not). Useful to gather ids for "share all".
+     */
+    async getLoadedProducts() {
+        const products = [];
+        if (!this.wrapper) {
+            return products;
+        }
+        for (let i = 0; i < this.wrapper.children.length; i++) {
+            const item = this.wrapper.children[i];
+            item?.product && products.push(item.product);
+        }
+        return products;
+    }
+    /**
+     * Select all currently rendered products.
+     */
+    async selectAll() {
+        if (!this.selectable || !this.wrapper) {
+            return;
+        }
+        for (let i = 0; i < this.wrapper.children.length; i++) {
+            const item = this.wrapper.children[i];
+            if (item?.product) {
+                this.selectedProducts.set(item.product.id, item.product);
+                item.classList.add('s-products-list-item-selected');
+                const checkbox = item.querySelector('.s-products-list-select-checkbox');
+                checkbox && (checkbox.checked = true);
+            }
+        }
+        this.emitSelection();
+    }
+    /**
+     * Clear the current selection.
+     */
+    async clearSelection() {
+        this.selectedProducts.clear();
+        if (this.wrapper) {
+            this.wrapper
+                .querySelectorAll('.s-products-list-select-checkbox')
+                .forEach((checkbox) => (checkbox.checked = false));
+            this.wrapper
+                .querySelectorAll('.s-products-list-item-selected')
+                .forEach(item => item.classList.remove('s-products-list-item-selected'));
+        }
+        this.emitSelection();
+    }
     componentWillLoad() {
-        return salla.onReady()
-            .then(async () => {
+        return salla.onReady().then(async () => {
             this.hasCustomComponent = !!customElements.get(this.productCardComponent);
             this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
             this.hasInfiniteScroll = !this.isAuxiliaryProductsListSource() && !this.limit;
@@ -752,15 +936,16 @@ const SallaProductsList = class {
                     });
                 }
                 else {
-                    console.error("No response received after getInitialData.");
+                    console.error('No response received after getInitialData.');
                 }
             })
                 .catch(error => {
-                console.error("Error during initial data fetch:", error);
+                console.error('Error during initial data fetch:', error);
             });
         }
         else {
-            this.firstPageResponse && (await this.handleResponse(this.firstPageResponse, false)).forEach(card => this.wrapper.append(card));
+            this.firstPageResponse &&
+                (await this.handleResponse(this.firstPageResponse, false)).forEach(card => this.wrapper.append(card));
         }
     }
     canRender() {
@@ -771,16 +956,18 @@ const SallaProductsList = class {
             return '';
         }
         if (this.showPlaceholder) {
-            return h("div", { class: "s-products-list-placeholder" }, h("span", { innerHTML: ShoppingBag }), h("p", null, this.placeholderText));
+            return (h("div", { class: "s-products-list-placeholder" }, h("span", { innerHTML: ShoppingBag }), h("p", null, this.placeholderText)));
         }
         return (h(Host, { class: "s-products-list" }, h("div", { class: {
-                "s-products-list-wrapper": true,
+                's-products-list-wrapper': true,
                 's-products-list-horizontal-cards': this.horizontalCards && !this.filtersResults,
                 's-products-list-vertical-cards': !this.horizontalCards && !this.rowCards && !this.filtersResults,
                 's-products-list-row-cards': this.rowCards,
                 's-products-list-compact-cards': this.compactCards,
                 's-products-list-filters-results': this.filtersResults,
-            }, ref: wrapper => this.wrapper = wrapper }), h("div", { class: "s-infinite-scroll-status", ref: status => this.status = status }, h("p", { class: "s-infinite-scroll-last infinite-scroll-last s-hidden" }, this.endOfText), h("p", { class: "s-infinite-scroll-error infinite-scroll-error s-hidden" }, this.failedLoadMore)), this.autoload && h("div", { class: "s-products-list-loading-wrapper", style: { "display": "none" }, ref: loader => this.loader = loader }, h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" })), this.hasInfiniteScroll && this.nextPage && !this.autoload ? (h("div", { class: "s-infinite-scroll-wrapper", style: { "display": "none" }, ref: loadMoreWrapper => this.loadMoreWrapper = loadMoreWrapper }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText ? this.loadMoreText : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => this.btnLoader = btnLoader, style: { "display": "none" } })))) : ""));
+            }, ref: wrapper => (this.wrapper = wrapper) }), h("div", { class: "s-infinite-scroll-status", ref: status => (this.status = status) }, h("p", { class: "s-infinite-scroll-last infinite-scroll-last s-hidden" }, this.endOfText), h("p", { class: "s-infinite-scroll-error infinite-scroll-error s-hidden" }, this.failedLoadMore)), this.autoload && (h("div", { class: "s-products-list-loading-wrapper", style: { display: 'none' }, ref: loader => (this.loader = loader) }, h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" }))), this.hasInfiniteScroll && this.nextPage && !this.autoload ? (h("div", { class: "s-infinite-scroll-wrapper", style: { display: 'none' }, ref: loadMoreWrapper => (this.loadMoreWrapper = loadMoreWrapper) }, h("button", { onClick: () => this.loadMore(), class: "s-infinite-scroll-btn s-button-btn s-button-primary" }, h("span", { class: "s-button-text s-infinite-scroll-btn-text" }, this.loadMoreText
+            ? this.loadMoreText
+            : salla.lang.get('common.elements.load_more')), h("span", { class: "s-button-loader s-button-loader-center s-infinite-scroll-btn-loader", ref: btnLoader => (this.btnLoader = btnLoader), style: { display: 'none' } })))) : ('')));
     }
     init() {
         this.initiateInfiniteScroll();
@@ -797,14 +984,19 @@ const SallaProductsList = class {
                 let title = Helper.getPageTitleForSource(source);
                 try {
                     if (this.getSource() === 'search') {
-                        title = salla.lang.get('common.elements.search_about', { 'word': this.getSourceValue() });
+                        title = salla.lang.get('common.elements.search_about', { word: this.getSourceValue() });
                     }
                     else if (!title) {
                         let catId = this.parsedFilters.category_id || this.getSourceValue()[0];
                         // get the first filter that its key is category_id, then get the value when filter.value.*.key==catId
-                        title = response.filters?.find(filter => filter.key === 'category_id')?.values?.find(cat => cat.key === catId)?.value ?? '';
+                        title =
+                            response.filters
+                                ?.find(filter => filter.key === 'category_id')
+                                ?.values?.find(cat => cat.key === catId)?.value ?? '';
                     }
-                    title += (title ? ' - ' : '') + salla.lang.choice('blocks.header.products_count', response.data?.length);
+                    title +=
+                        (title ? ' - ' : '') +
+                            salla.lang.choice('blocks.header.products_count', response.data?.length);
                     if (response.data.length === 15) {
                         title = title.replace(response.data.length, salla.lang.get('common.elements.more_than') + ' ' + response.data.length);
                     }
@@ -843,6 +1035,9 @@ const SallaProductsList = class {
         return productCardsView;
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "selectable": ["onSelectableChanged"]
+    }; }
 };
 SallaProductsList.style = sallaProductsListCss;
 

package/dist/esm/salla-progress-bar.entry.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h } from './index-a4x9urdK.js';
+import { r as registerInstance, h } from './index-D2yBy7Jh.js';
 
 const sallaProgressBarCss = "";
 

package/dist/esm/salla-quick-order.entry.js

@@ -1,9 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-a4x9urdK.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-D2yBy7Jh.js';
 import { S as SIiPhoneX } from './iphone-x-CciN5Q_x.js';
-import { S as SIMail } from './mail-DLNIOD9t.js';
+import { e as email } from './mail-DzAIgzdz.js';
 import { S as SICancel } from './cancel-8Tsmrwno.js';
 
 var CelebrationIcon = `<!-- Generated by IcoMoon.io -->
@@ -210,7 +210,7 @@ const SallaQuickOrder = class {
             ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: SICancel }) : this.confirmPayButtonTitle)), h("form", { onSubmit: (e) => this.submit(e), class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '') }, Salla.config.isGuest() &&
             [
                 h("div", { class: "s-form-group" }, h("span", { innerHTML: PortraitIcon }), h("input", { type: "text", required: true, class: "s-form-control s-quick-order-phone-field", name: 'name', placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
-                h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: SIiPhoneX }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: SIMail }), h("input", { type: "email", class: "s-form-control s-quick-order-email-field", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
+                h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: SIiPhoneX }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: email }), h("input", { type: "email", class: "s-form-control s-quick-order-email-field", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
             ], this.isTermsRequired && (h("label", { htmlFor: "terms", class: "s-quick-order-terms" }, h("input", { type: "checkbox", required: true, name: 'terms', id: 'terms', ref: el => (this.termsInput = el), onChange: () => (this.termsChecked = this.termsInput.checked), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText))), " "))), h("salla-button", { type: "submit", color: this.getBtnColor(), width: "wide", ref: el => (this.submitBtn = el) }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", { innerHTML: this.agreementText })))));
     }
     componentDidLoad() {

package/dist/esm/salla-rating-modal.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-a4x9urdK.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-D2yBy7Jh.js';
 import { W as WishListIcon } from './star-ZT7ehBBk.js';
 import { C as CheckCircle2 } from './check-circle2-BV4kqbdL.js';
 import { H as Helper } from './Helper-BXj4f_Qj.js';
 import { I as ImageIcon } from './image-C-tzSDxw.js';
 import { W as WhatsappIcon } from './whatsapp2-CgR-T_ZS.js';
-import { S as SIMail } from './mail-DLNIOD9t.js';
+import { e as email } from './mail-DzAIgzdz.js';
 import { a as anime } from './anime.es-CgtvEd63.js';
 
 var ShippingFast = `<!-- Generated by IcoMoon.io -->
@@ -434,7 +434,7 @@ const SallaRatingModal = class {
                         ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
                             ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
                             : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", `${salla.lang.get('pages.rating.rate_shipping')} ${this.order.shipping.company.name}`), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
-                        : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), this.allowContactSupport && this.showContactWidget && (salla.config.get('store.contacts.whatsapp') || salla.config.get('store.contacts.email')) ? h("div", { class: "s-rating-modal-contact" }, h("p", null, this.contactUsLabel), h("div", { class: "s-rating-modal-contact-icons" }, salla.config.get('store.contacts.whatsapp') && h("span", { onClick: () => this.handleSendWhatsApp(), innerHTML: WhatsappIcon }), salla.config.get('store.contacts.email') && h("span", { onClick: () => this.handleSendEmail(), innerHTML: SIMail }))) : '', h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map((v) => h("li", { key: v, class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next')))]
+                        : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), this.allowContactSupport && this.showContactWidget && (salla.config.get('store.contacts.whatsapp') || salla.config.get('store.contacts.email')) ? h("div", { class: "s-rating-modal-contact" }, h("p", null, this.contactUsLabel), h("div", { class: "s-rating-modal-contact-icons" }, salla.config.get('store.contacts.whatsapp') && h("span", { onClick: () => this.handleSendWhatsApp(), innerHTML: WhatsappIcon }), salla.config.get('store.contacts.email') && h("span", { onClick: () => this.handleSendEmail(), innerHTML: email }))) : '', h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map((v) => h("li", { key: v, class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next')))]
                 : h("salla-placeholder", { alignment: "center" }))));
         }
     }