@salla.sa/twilight-components 2.14.467 → 2.14.469

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -1,7 +1,7 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import anime from "animejs";
 import ShoppingBag from "../../assets/svg/shopping-bag.svg";
 import Helper from "../../Helpers/Helper";
@@ -21,6 +21,18 @@ export class SallaProductsList {
          * <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');
@@ -28,10 +40,12 @@ export class SallaProductsList {
         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();
@@ -40,7 +54,44 @@ export class SallaProductsList {
             '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'));
@@ -57,15 +108,17 @@ export class SallaProductsList {
     }
     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
@@ -78,7 +131,9 @@ export class SallaProductsList {
         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();
@@ -166,12 +221,12 @@ export class SallaProductsList {
         }
         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)) {
@@ -225,7 +280,9 @@ export class SallaProductsList {
         //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
@@ -236,7 +293,7 @@ export class SallaProductsList {
         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');
@@ -248,8 +305,69 @@ export class SallaProductsList {
                 }
             }
         });
+        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);
@@ -267,7 +385,7 @@ export class SallaProductsList {
     }
     waitForResizing(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const resizeObserver = new ResizeObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -280,7 +398,7 @@ export class SallaProductsList {
     }
     waitForLayoutStable(element) {
         let timeout = null;
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             const observer = new MutationObserver(() => {
                 clearTimeout(timeout);
                 timeout = setTimeout(() => {
@@ -300,15 +418,14 @@ export class SallaProductsList {
         // 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;
@@ -316,8 +433,12 @@ export class SallaProductsList {
                 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' });
@@ -325,7 +446,7 @@ export class SallaProductsList {
                 //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);
@@ -342,16 +463,15 @@ export class SallaProductsList {
         });
     }
     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
@@ -362,7 +482,7 @@ export class SallaProductsList {
         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);
@@ -409,9 +529,8 @@ export class SallaProductsList {
         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;
@@ -455,7 +574,9 @@ export class SallaProductsList {
         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 {
@@ -466,7 +587,9 @@ export class SallaProductsList {
                 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,
@@ -483,7 +606,9 @@ export class SallaProductsList {
                     : {}),
             });
         }
-        catch { /* analytics */ }
+        catch {
+            /* analytics */
+        }
     }
     appendDataLayer(data) {
         if (typeof dataLayer !== 'object' || !Array.isArray(dataLayer)) {
@@ -491,29 +616,29 @@ export class SallaProductsList {
             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() {
@@ -526,7 +651,7 @@ export class SallaProductsList {
             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', () => {
@@ -637,11 +762,13 @@ export class SallaProductsList {
     }
     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();
@@ -665,9 +792,65 @@ export class SallaProductsList {
     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;
@@ -747,15 +930,16 @@ export class SallaProductsList {
                     });
                 }
                 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() {
@@ -766,16 +950,18 @@ export class SallaProductsList {
             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();
@@ -792,14 +978,19 @@ export class SallaProductsList {
                 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);
                     }
@@ -855,7 +1046,7 @@ export class SallaProductsList {
                 "attribute": "source",
                 "mutable": true,
                 "complexType": {
-                    "original": "'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'sales' | 'wishlist' | 'top-rated' | 'reorder' | 'recently'",
+                    "original": "| 'categories'\n    | 'latest'\n    | 'related'\n    | 'brands'\n    | 'json'\n    | 'search'\n    | 'tags'\n    | 'selected'\n    | 'offers'\n    | 'landing-page'\n    | 'sales'\n    | 'wishlist'\n    | 'top-rated'\n    | 'reorder'\n    | 'recently'",
                     "resolved": "\"brands\" | \"categories\" | \"json\" | \"landing-page\" | \"latest\" | \"offers\" | \"recently\" | \"related\" | \"reorder\" | \"sales\" | \"search\" | \"selected\" | \"tags\" | \"top-rated\" | \"wishlist\"",
                     "references": {}
                 },
@@ -918,7 +1109,7 @@ export class SallaProductsList {
                 "attribute": "sort-by",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | 'ourSuggest' | 'bestSell' | 'topRated' | 'priceFromTopToLow' | 'priceFromLowToTop'",
+                    "original": "| string\n    | 'ourSuggest'\n    | 'bestSell'\n    | 'topRated'\n    | 'priceFromTopToLow'\n    | 'priceFromLowToTop'",
                     "resolved": "string",
                     "references": {}
                 },
@@ -1087,6 +1278,26 @@ export class SallaProductsList {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "selectable": {
+                "type": "boolean",
+                "attribute": "selectable",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables multi-selection of products. When enabled, a checkbox overlay is\nrendered on top of each product card and the selected products are exposed\nvia the `selectionChanged` event, the `salla-products-list::selection.changed`\nglobal event and the `getSelected()` method.\n\nThis is source-agnostic (works for any `source`) and defaults to `false`.\nOn the wishlist page the `salla-wishlist-actions` panel turns it on at\nruntime (when the customer chooses \"share specific items\"), so no theme\nmarkup changes are required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }
@@ -1125,6 +1336,21 @@ export class SallaProductsList {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "selectionChanged",
+                "name": "selectionChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom event fired when the selection changes (only when `selectable` is enabled).\nDetail: `{ ids: Array<string|number>, products: Product[], count: number }`."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -1186,8 +1412,104 @@ export class SallaProductsList {
                     "text": "Load the next products page.",
                     "tags": []
                 }
+            },
+            "getSelected": {
+                "complexType": {
+                    "signature": "() => Promise<{ ids: Array<string | number>; products: Product[]; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Array": {
+                            "location": "global",
+                            "id": "global::Array"
+                        },
+                        "Product": {
+                            "location": "import",
+                            "path": "@salla.sa/twilight/types/common",
+                            "id": "../twilight/types/common.d.ts::Product"
+                        }
+                    },
+                    "return": "Promise<{ ids: (string | number)[]; products: Product[]; }>"
+                },
+                "docs": {
+                    "text": "Get the currently selected products.",
+                    "tags": []
+                }
+            },
+            "getLoadedProducts": {
+                "complexType": {
+                    "signature": "() => Promise<Product[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Product": {
+                            "location": "import",
+                            "path": "@salla.sa/twilight/types/common",
+                            "id": "../twilight/types/common.d.ts::Product"
+                        }
+                    },
+                    "return": "Promise<Product[]>"
+                },
+                "docs": {
+                    "text": "Get all products currently rendered in the list (works whether selection\nis enabled or not). Useful to gather ids for \"share all\".",
+                    "tags": []
+                }
+            },
+            "selectAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Select all currently rendered products.",
+                    "tags": []
+                }
+            },
+            "clearSelection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear the current selection.",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "selectable",
+                "methodName": "onSelectableChanged"
+            }];
+    }
 }