@salla.sa/twilight-components 2.14.467 → 2.14.468

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

@@ -6,13 +6,14 @@ import { a as anime } from './anime.es.js';
 import { S as ShoppingBag } from './shopping-bag.js';
 import { H as Helper } from './Helper.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 = /*@__PURE__*/ proxyCustomElement(class SallaProductsList extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.productsFetched = createEvent(this, "productsFetched", 7);
+        this.selectionChanged = createEvent(this, "selectionChanged", 7);
         /**
          * Autoload next page when scroll
          */
@@ -27,6 +28,18 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
          * <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');
@@ -34,10 +47,12 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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();
@@ -46,7 +61,44 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             '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'));
@@ -63,15 +115,17 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     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
@@ -84,7 +138,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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();
@@ -172,12 +228,12 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         }
         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)) {
@@ -231,7 +287,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         //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
@@ -242,7 +300,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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');
@@ -254,8 +312,69 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 }
             }
         });
+        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);
@@ -273,7 +392,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     waitForResizing(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const resizeObserver = new ResizeObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -286,7 +405,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     waitForLayoutStable(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const observer = new MutationObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -306,15 +425,14 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         // 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;
@@ -322,8 +440,12 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 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' });
@@ -331,7 +453,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 //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);
@@ -348,16 +470,15 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         });
     }
     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
@@ -368,7 +489,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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);
@@ -415,9 +536,8 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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;
@@ -461,7 +581,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         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 {
@@ -472,7 +594,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 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,
@@ -489,7 +613,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                     : {}),
             });
         }
-        catch { /* analytics */ }
+        catch {
+            /* analytics */
+        }
     }
     appendDataLayer(data) {
         if (typeof dataLayer !== 'object' || !Array.isArray(dataLayer)) {
@@ -497,29 +623,29 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             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() {
@@ -532,7 +658,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             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', () => {
@@ -643,11 +769,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     }
     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();
@@ -671,9 +799,65 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
     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;
@@ -753,15 +937,16 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                     });
                 }
                 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() {
@@ -772,16 +957,18 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
             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();
@@ -798,14 +985,19 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
                 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);
                     }
@@ -844,6 +1036,9 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         return productCardsView;
     }
     get host() { return this; }
+    static get watchers() { return {
+        "selectable": ["onSelectableChanged"]
+    }; }
     static get style() { return sallaProductsListCss; }
 }, [0, "salla-products-list", {
         "source": [1537],
@@ -858,6 +1053,7 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         "loadMoreText": [1, "load-more-text"],
         "productCardComponent": [1, "product-card-component"],
         "includes": [1040],
+        "selectable": [1540],
         "page": [32],
         "nextPage": [32],
         "hasInfiniteScroll": [32],
@@ -875,7 +1071,13 @@ const SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsLi
         "filtersSnapshot": [32],
         "setFilters": [64],
         "reload": [64],
-        "loadMore": [64]
+        "loadMore": [64],
+        "getSelected": [64],
+        "getLoadedProducts": [64],
+        "selectAll": [64],
+        "clearSelection": [64]
+    }, undefined, {
+        "selectable": ["onSelectableChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {