@salla.sa/twilight-components 2.14.391 → 2.14.393

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

@@ -1,815 +1,4 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-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 SallaProductsList = /*@__PURE__*/ proxyCustomElement(class SallaProductsList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.productsFetched = createEvent(this, "productsFetched", 7);
-        /**
-         * Autoload next page when scroll
-         */
-        this.autoload = false;
-        /**
-         * Custom Card Component for the Salla Products List.
-         *
-         * This component allows you to customize the appearance of individual product cards within a Salla Products List.
-         *
-         * @example
-         * <salla-products-list product-card-component="my-custom-card-style1" ...
-         * <salla-products-list product-card-component="my-custom-card-style2" ...
-         */
-        this.productCardComponent = 'custom-salla-product-card';
-        // State
-        this.page = 1;
-        this.placeholderText = salla.lang.get('pages.categories.no_products');
-        this.endOfText = salla.lang.get('common.elements.end_of_content');
-        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";
-        this.isProcessing = false; // Tracks if we are processing data
-        this.scrollTimeout = null;
-        this.boundScrollToLastViewedProduct = () => this.scrollToLastViewedProduct();
-        this.boundHandleScroll = () => this.handleScroll();
-        this.specialPagesWithoutIds = {
-            'product.index.latest': 'latest',
-            'product.index.offers': 'offers',
-            'product.index.search': 'search',
-            'product.index.sales': 'sales'
-        };
-        //TODO:: check why `this.includes` not working!!
-        this.includes = Helper.parseJson(this.includes || this.host.getAttribute('includes'));
-        if (!Array.isArray(this.includes)) {
-            this.includes = null;
-        }
-        Helper.setIncludes(this.includes);
-        salla.lang.onLoaded(() => {
-            this.placeholderText = salla.lang.get('pages.categories.no_products');
-            this.endOfText = salla.lang.get('common.elements.end_of_content');
-            this.failedLoadMore = salla.lang.get('common.elements.failed_to_load_more');
-            this.currentPage = salla.config.get('page');
-        });
-    }
-    connectedCallback() {
-        //Override browser scroll restoration default behaviour
-        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));
-    }
-    disconnectedCallback() {
-        window.removeEventListener('DOMContentLoaded', this.boundScrollToLastViewedProduct);
-        window.removeEventListener('scroll', this.boundHandleScroll);
-    }
-    /**
-     * Set parsed filters data from URI
-     * @param filters
-     */
-    async setFilters(filters) {
-        if (!filters || JSON.stringify(filters) === JSON.stringify(this.parsedFilters)) {
-            return;
-        }
-        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));
-        this.filtersSnapshot = this.parsedFilters;
-        if (this.currentPage?.slug == "product.index" && this.parsedFilters && this.parsedFilters.category_id) {
-            this.currentCategoryIdFilter = [this.parsedFilters.category_id];
-        }
-        return this.reload();
-    }
-    /**
-     * Reload the list of products (entire content of the component).
-     */
-    async reload() {
-        !this.autoload && this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'none');
-        this.hasInfiniteScroll && salla.infiniteScroll.destroy(this.infiniteScroll);
-        this.buildNextPageUrl();
-        // TODO: this is problematic in testing, for the time being it's been resolved like this
-        this.wrapper.innerHTML = '';
-        if (this.hasInfiniteScroll) {
-            this.init();
-        }
-        else {
-            this.getInitialData();
-        }
-        // Special case for the placeholder loader
-        if (this.showPlaceholder) {
-            this.showPlaceholder = false;
-            this.placeholderLoader = document.createElement('div');
-            this.placeholderLoader.classList.add('s-products-list-loading-wrapper');
-            this.placeholderLoader.style.display = 'inherit';
-            this.placeholderLoader.innerHTML = `<span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"></span>`;
-            this.host.insertAdjacentElement('afterend', this.placeholderLoader);
-        }
-    }
-    isFilterable() {
-        return salla.config.get('store.settings.product.filters') && this.filtersResults;
-    }
-    isSourceWithoutValue() {
-        return ['offers', 'latest', 'sales', 'wishlist', 'top-rated', 'reorder'].includes(this.getSource());
-    }
-    animateItems() {
-        anime({
-            targets: 'salla-products-list salla-product-card',
-            opacity: [0, 1],
-            duration: 1200,
-            translateY: [20, 0],
-            delay: function (_el, i) {
-                return i * 100;
-            },
-        });
-    }
-    initBaseNextPageUrl(source) {
-        this.nextPage = salla.url.api(`products?source=${source}`);
-        if (this.includes?.length) {
-            this.nextPage += `&includes[]=${this.includes.join('&includes[]=')}`;
-        }
-        if (this.limit) {
-            this.nextPage += `&per_page=${this.limit > 32 ? 32 : this.limit}`;
-        }
-        if (this.sortBy) {
-            this.nextPage += `&sort=${this.sortBy}`;
-        }
-        if (salla.config.get('theme.mode') === 'preview') {
-            this.nextPage += `&use_username_url=1`;
-        }
-        this.nextPage += '&filterable=1';
-        for (const [key, value] of Object.entries(this.parsedFilters || {})) {
-            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)}`);
-            }
-            else if (typeof value === 'object') {
-                for (const [k, v] of Object.entries(value)) {
-                    this.nextPage += `&filters[${encodeURIComponent(key)}][${encodeURIComponent(k)}]=${encodeURIComponent(v)}`;
-                }
-            }
-        }
-    }
-    buildNextPageUrl() {
-        let source = this.getSource();
-        if (source === 'json') {
-            return;
-        }
-        const snapshot = sessionStorage.getItem(this.infiniteScrollStateKey);
-        if (snapshot) {
-            const { nextPage } = JSON.parse(snapshot);
-            if (!nextPage) {
-                return;
-            }
-        }
-        this.initBaseNextPageUrl(source);
-        if (this.isSourceWithoutValue()) {
-            return;
-        }
-        if (['search', 'related', 'landing-page'].includes(source)) {
-            this.nextPage += `&source_value=${this.getSourceValue()}`;
-            return;
-        }
-        try {
-            this.nextPage += `&source_value[]=${this.getSourceValue().join('&source_value[]=')}`;
-        }
-        catch (e) {
-            salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${source}]`);
-            this.sourceValueIsValid = false;
-        }
-    }
-    loading(isLoading = true, isBtn = false) {
-        if (!isLoading) {
-            if (!this.autoload) {
-                this.btnLoader && (this.btnLoader.style.display = 'none');
-            }
-            this.loader && (this.loader.style.display = 'none');
-        }
-        else {
-            let currentLoader = isBtn && !this.autoload ? this.btnLoader : this.loader;
-            currentLoader && (currentLoader.style.display = 'inherit');
-        }
-    }
-    getItemHTML(product) {
-        //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 productCard = document.createElement(customComponentTag);
-        productCard.product = product;
-        // Apply compact layout if requested - set both property and attribute for compatibility
-        if (this.compactCards) {
-            productCard.compact = true;
-            productCard.toggleAttribute('compact', true);
-        }
-        this.applyLandingPageStyles(productCard);
-        this.applyHorizontalCardStyles(productCard);
-        // Attach click event listener to save the current products snapshot
-        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');
-            if (anchor) {
-                Helper.saveProductSource(this.getSource());
-                if (this.hasInfiniteScroll) {
-                    this.takeStateSnapshot();
-                    sessionStorage.setItem(this.lastViewedProductKey, product.id);
-                }
-            }
-        });
-        return productCard;
-    }
-    applyLandingPageStyles(productCard) {
-        if (this.getSource() === 'landing-page' && !this.hasCustomComponent) {
-            productCard.toggleAttribute('hide-add-btn', true);
-            productCard.classList.add('s-product-card-fit-height');
-        }
-    }
-    applyHorizontalCardStyles(productCard) {
-        if (!this.horizontalCards) {
-            return;
-        }
-        productCard.toggleAttribute('horizontal', true);
-        if (!this.hasCustomComponent) {
-            productCard.toggleAttribute('shadow-on-hover', true);
-        }
-    }
-    waitForResizing(element) {
-        let timeout = null;
-        return new Promise((resolve) => {
-            const resizeObserver = new ResizeObserver(() => {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => {
-                    resizeObserver.disconnect();
-                    resolve(null);
-                }, 160); // Adjust delay as needed for your layout
-            });
-            resizeObserver.observe(element); // Watch the body or a specific container
-        });
-    }
-    waitForLayoutStable(element) {
-        let timeout = null;
-        return new Promise((resolve) => {
-            const observer = new MutationObserver(() => {
-                clearTimeout(timeout);
-                timeout = setTimeout(() => {
-                    observer.disconnect();
-                    resolve(null);
-                }, 160); // Adjust delay as needed for your layout
-            });
-            // Observe changes to the entire body, including child nodes and attributes.
-            observer.observe(element, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-            });
-        });
-    }
-    async waitForStableLayout(element) {
-        // Wait for DOM mutations and layout shifts to stabilize
-        return await Promise.allSettled([
-            this.waitForResizing(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(() => {
-            const productCard = this.wrapper?.querySelector(`[id*="${lastViewedProductId}"]`);
-            if (!productCard)
-                return;
-            const scrollToPosition = () => {
-                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 cardsListRowGap = parseInt(getComputedStyle(this.wrapper).rowGap) ?? 16;
-                    const productCardOffset = headerHeight + cardsListRowGap;
-                    scrollBy({ top: productCardOffset * -1, behavior: 'instant' });
-                };
-                //start scrolling to the product card position
-                requestAnimationFrame(scrollToProductCard);
-                const productImages = productCard.querySelectorAll('img.lazy');
-                productImages.forEach((image) => {
-                    const productImage = image;
-                    const handleImageEvent = () => {
-                        requestAnimationFrame(scrollToProductCard);
-                        productImage.onload = productImage.onerror = null;
-                    };
-                    productImage.onload = handleImageEvent;
-                    productImage.onerror = handleImageEvent;
-                });
-                // remove snapshot of  product cards items in session storage after scroll restoration completiion
-                this.removeScrollRestorationSession();
-                return void 0;
-            };
-            this.waitForStableLayout(this.host).then(() => requestAnimationFrame(scrollToPosition));
-        });
-    }
-    isElementLoaded(selector) {
-        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
-        for (let i = 0; i < this.wrapper.children.length; i++) {
-            const child = this.wrapper.children?.[i];
-            currentPageData.push(child.product);
-        }
-        const scrollState = {
-            pageIndex: Math.max((this.infiniteScroll?.pageIndex ?? 1) - 1, 1),
-            nextPage: this.nextPage,
-            currentPageData
-        };
-        if (this.isFilterable()) {
-            const existingFilters = sessionStorage.getItem(this.filtersKey);
-            sessionStorage.setItem(this.filtersKey, existingFilters || JSON.stringify(this.filtersSnapshot));
-        }
-        sessionStorage.setItem(this.infiniteScrollStateKey, JSON.stringify(scrollState));
-        // Determine and store the correct prevCategoryId
-        let prevCategoryId = salla.config.get('page.id'); // Number or null
-        const currentPage = Object.keys(this.specialPagesWithoutIds).find(page => salla.url.is_page(page));
-        if (currentPage) {
-            prevCategoryId = this.specialPagesWithoutIds[currentPage];
-        }
-        else if (prevCategoryId !== null) {
-            prevCategoryId = String(prevCategoryId); // Ensure it's stored as a string
-        }
-        sessionStorage.setItem(this.prevCategoryIdKey, prevCategoryId);
-    }
-    removeScrollRestorationSession() {
-        if (!this.isFilterable()) {
-            sessionStorage.removeItem(this.filtersKey);
-        }
-        sessionStorage.removeItem(this.infiniteScrollStateKey);
-        sessionStorage.removeItem(this.lastViewedProductKey);
-        sessionStorage.removeItem(this.prevCategoryIdKey);
-    }
-    loadStoredScrollState() {
-        const storedState = sessionStorage.getItem(this.infiniteScrollStateKey);
-        const filetrsState = sessionStorage.getItem(this.filtersKey);
-        /*
-         * Remove the scroll restoration session under the following conditions:
-         * 1. The user has navigated to a different category page:
-         *    - If the previously stored category ID is different from the current one.
-         *    - This includes "latest", "offers", "sales" and "search" pages.
-         *
-         * 2. The user is on the homepage, but infinite scroll is disabled.
-         *
-         * 3. The user is on a product page.
-         */
-        const prevCategory = sessionStorage.getItem(this.prevCategoryIdKey); // Get previously stored category
-        const currentPageSlug = this.specialPagesWithoutIds[salla.config.get('page.slug')] || null;
-        const currentPageId = salla.config.get('page.id'); // Number or null
-        const isHomepage = salla.url.is_page('index');
-        const isProductPage = salla.url.is_page('product.single');
-        const isDifferentCategory = currentPageSlug
-            ? prevCategory !== currentPageSlug // Compare slugs for special pages
-            : prevCategory !== String(currentPageId); // Compare IDs otherwise
-        if ((prevCategory && isDifferentCategory && !isHomepage && !isProductPage)
-            ||
-                (isHomepage && !this.hasInfiniteScroll)) {
-            this.removeScrollRestorationSession();
-            this.switchToNormalBehavior = true;
-            return false;
-        }
-        // Keep the snapshot in product page that contains salla-products-list but without scroll restoration
-        if (isProductPage) {
-            this.switchToNormalBehavior = true;
-            return false;
-        }
-        if (storedState) {
-            try {
-                const { pageIndex, nextPage, currentPageData } = JSON.parse(storedState);
-                if (filetrsState !== 'undefined') {
-                    const filters = JSON.parse(filetrsState);
-                    salla.event.emit('filters::fetched', { filters });
-                }
-                this.page = pageIndex;
-                this.nextPage = nextPage;
-                // more performant on larger set of data
-                for (let i = 0; i < currentPageData.length; i++) {
-                    this.wrapper.append(this.getItemHTML(currentPageData?.[i]));
-                }
-                return true;
-            }
-            catch (error) {
-                console.error('Failed to load stored scroll state:', error);
-                this.removeScrollRestorationSession();
-            }
-        }
-        return false;
-    }
-    getSource() {
-        return Helper.getProductsSource(this.source);
-    }
-    getSourceValue() {
-        return this.currentCategoryIdFilter ? this.currentCategoryIdFilter : Helper.getProductsSourceValue(this.source, this.sourceValue);
-    }
-    appendDataLayer(data) {
-        if (typeof dataLayer !== 'object' || !Array.isArray(dataLayer)) {
-            //todo:: check if we should define it here
-            return;
-        }
-        dataLayer.push({
-            "event": "impressions",
-            "ecommerce": {
-                "currencyCode": salla.config.currency().code,
-                // "event_id":"", // todo
-                "impressions": data.map((product, index) => {
-                    return {
-                        "id": product.id,
-                        "name": product.name,
-                        "price": product.price,
-                        "brand": product.brand?.name || '',
-                        "quantity": product.quantity,
-                        // "variant": "",
-                        "categories": [
-                            {
-                                "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
-                    };
-                })
-            }
-        });
-    }
-    initiateInfiniteScroll() {
-        if (!this.hasInfiniteScroll) {
-            return;
-        }
-        const shouldApplyManualLoad = this.autoload && this.includes && this.includes.length > 0;
-        this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {
-            path: () => this.nextPage,
-            history: false,
-            nextPage: this.nextPage,
-            scrollThreshold: shouldApplyManualLoad ? false : this.autoload ? 100 : false,
-            loadOnScroll: shouldApplyManualLoad ? false : this.autoload
-        }, true);
-        this.infiniteScroll.pageIndex = this.page;
-        this.infiniteScroll?.on('request', () => {
-            this.loading(true, this.autoload ? false : true);
-        });
-        // Manual scroll listener
-        shouldApplyManualLoad && window.addEventListener('scroll', this.boundHandleScroll);
-        this.infiniteScroll?.on('load', async (response) => {
-            if (this.isProcessing)
-                return;
-            this.isProcessing = true;
-            try {
-                if (!response.data?.length && this.infiniteScroll.pageIndex === 2) {
-                    this.showPlaceholder = true;
-                    salla.infiniteScroll.destroy(this.infiniteScroll);
-                    this.loading(false);
-                    this.placeholderLoader && this.placeholderLoader.remove();
-                    return;
-                }
-                if (this.includes) {
-                    await this.injectAndProcessData(response);
-                }
-                const items = this.handleResponse(response);
-                this.infiniteScroll.appendItems(items);
-                if (this.infiniteScroll.pageIndex === 2) {
-                    if (!this.autoload && this.nextPage) {
-                        this.loadMoreWrapper.style.display = 'block';
-                    }
-                    this.animateItems();
-                }
-            }
-            catch (error) {
-                console.error('Error during load:', error);
-            }
-            finally {
-                this.isProcessing = false;
-            }
-        });
-        this.infiniteScroll?.on('error', () => {
-            console.log('Error occurred during request');
-            this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden');
-            this.placeholderLoader && this.placeholderLoader.remove();
-            this.loading(false);
-            this.isProcessing = false;
-        });
-        salla.onReady(() => {
-            const snapshot = sessionStorage.getItem(this.infiniteScrollStateKey);
-            if (!snapshot) {
-                this.manualLoadNextPage();
-            }
-        });
-    }
-    handleScroll() {
-        if (this.isProcessing)
-            return;
-        if (this.scrollTimeout)
-            return;
-        this.scrollTimeout = setTimeout(() => {
-            this.scrollTimeout = null;
-            // Defer layout reads to next frame to avoid forced reflow (Lighthouse/PageSpeed)
-            requestAnimationFrame(() => {
-                const wrapperRect = this.wrapper.getBoundingClientRect();
-                const windowHeight = window.innerHeight;
-                const distanceToBottom = wrapperRect.bottom - windowHeight;
-                // Trigger only when the wrapper bottom is within 200px of the viewport bottom
-                if (distanceToBottom <= 200 && !this.isProcessing && this.nextPage) {
-                    // Reached near the bottom of the wrapper, loading next page...
-                    this.manualLoadNextPage();
-                }
-            });
-        }, 200);
-    }
-    manualLoadNextPage() {
-        if (this.nextPage) {
-            this.infiniteScroll.loadNextPage();
-        }
-    }
-    async injectAndProcessData(response) {
-        try {
-            await Helper.injectExtraFieldsToResponse(response);
-        }
-        catch (error) {
-            console.error('Error injecting data:', error);
-        }
-    }
-    getInitialData() {
-        this.loading();
-        return salla.api.withoutNotifier(() => salla.product.api.fetch({
-            source: Helper.getApiSource(this.getSource()),
-            source_value: this.getSourceValue(),
-            limit: this.limit
-        }).then(async (response) => {
-            if (!response.data.length) {
-                this.showPlaceholder = true;
-                this.placeholderLoader && this.placeholderLoader.remove();
-                this.loading(false);
-                return;
-            }
-            await Helper.injectExtraFieldsToResponse(response);
-            //this.firstPageResponse will be null only in the first page, after that it will be assinged,
-            //for the first page we need to inject the dom after the load, see @method componentDidLoad
-            if (!this.firstPageResponse) {
-                this.firstPageResponse = response;
-                this.nextPage = response.cursor ? response.cursor.next : this.nextPage;
-                return;
-            }
-            this.handleResponse(response).forEach(card => this.wrapper.append(card));
-        }));
-    }
-    async loadMore() {
-        this.infiniteScroll?.loadNextPage();
-    }
-    componentWillLoad() {
-        return salla.onReady()
-            .then(() => {
-            this.hasCustomComponent = !!customElements.get(this.productCardComponent);
-            this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
-            this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource()) && !this.limit;
-            let searchParams = new URLSearchParams(window.location.search);
-            try {
-                this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
-                this.parsedFilters = Helper.extractFiltersFromUrl(searchParams);
-                if (this.parsedFilters && this.parsedFilters.category_id) {
-                    this.currentCategoryIdFilter = [this.parsedFilters.category_id];
-                }
-            }
-            catch (e) {
-                salla.logger.warn('failed to get filters from url', e.message);
-            }
-            this.buildNextPageUrl();
-            this.isReady = true;
-            const snapshot = sessionStorage.getItem(this.infiniteScrollStateKey);
-            if (!!snapshot) {
-                return;
-            }
-            if (!this.sourceValueIsValid) {
-                salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);
-                return;
-            }
-            if (this.hasInfiniteScroll) {
-                return;
-            }
-            // Handle json source
-            if (this.getSource() === 'json') {
-                if (!this.getSourceValue().length) {
-                    this.showPlaceholder = true;
-                    return;
-                }
-                //todo:: avoid using timeout, just assigne the data to the this.firstPageResponse and it should work fine, because it will be rendered in componentDidLoad
-                setTimeout(() => {
-                    let productsList = this.getSourceValue();
-                    productsList.map(product => this.wrapper.append(this.getItemHTML(product)));
-                });
-                return;
-            }
-            // Handle selected source
-            if (this.getSource() === 'selected' && !this.getSourceValue().length) {
-                this.showPlaceholder = true;
-                return;
-            }
-            return this.getInitialData();
-        });
-    }
-    async componentDidLoad() {
-        this.hasInfiniteScroll && this.init();
-        await Salla.hooks.registerComponent('salla-products-list', this);
-        if (this.loadStoredScrollState()) {
-            if (this.autoload) {
-                !this.nextPage && this.loading(false);
-            }
-            else if (!this.nextPage) {
-                this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'none');
-                this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');
-            }
-            else {
-                this.loadMoreWrapper && (this.loadMoreWrapper.style.display = 'block');
-            }
-            this.scrollToLastViewedProduct();
-        }
-        else if (!this.firstPageResponse && this.switchToNormalBehavior) {
-            this.getInitialData()
-                .then(() => {
-                if (this.firstPageResponse) {
-                    this.handleResponse(this.firstPageResponse, false).forEach(card => {
-                        this.wrapper.append(card);
-                    });
-                    setTimeout(() => {
-                        if (!this.autoload && this.nextPage && this.infiniteScroll.pageIndex == 1) {
-                            const loadMoreWrapper = this.host.querySelector('.s-infinite-scroll-wrapper');
-                            loadMoreWrapper && (loadMoreWrapper.style.display = 'block');
-                        }
-                    });
-                }
-                else {
-                    console.error("No response received after getInitialData.");
-                }
-            })
-                .catch(error => {
-                console.error("Error during initial data fetch:", error);
-            });
-        }
-        else {
-            this.firstPageResponse && this.handleResponse(this.firstPageResponse, false).forEach(card => this.wrapper.append(card));
-        }
-    }
-    canRender() {
-        return this.sourceValueIsValid && this.isReady;
-    }
-    render() {
-        if (!this.canRender()) {
-            return '';
-        }
-        if (this.showPlaceholder) {
-            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-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" } })))) : ""));
-    }
-    init() {
-        this.initiateInfiniteScroll();
-        this.loading();
-    }
-    handleResponse(response, shouldBuildNextPage = true) {
-        //todo:: check why it reach here undfined one time🤔
-        if (!response) {
-            return [];
-        }
-        let source = this.getSource();
-        let title = '';
-        //help the developer to know the current page title
-        if (response.cursor?.current === 1) {
-            title = Helper.getPageTitleForSource(source);
-            try {
-                if (this.getSource() === 'search') {
-                    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 ?? '';
-                    this.filtersSnapshot = response.filters;
-                }
-                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);
-                }
-                response.title = title;
-            }
-            catch (e) {
-                salla.logger.error('Error::falid to handle response', e);
-            }
-            //inject the SEO schema
-            //handleResponse works only on the infinite-scroll and infinite scroll works only on the categories pages and main latest-page ..etc, so no need to add condition
-            Helper.generateProductSchema(response.data);
-        }
-        this.appendDataLayer(response.data);
-        response.nextPage = this.nextPage;
-        response.source = this.getSource();
-        response.sourceValue = this.getSourceValue();
-        salla.event.emit('salla-products-list::products.fetched', response);
-        this.productsFetched.emit(response);
-        //💡 when source is related, cursor will not be existed
-        if (response.filters && this.isFilterable()) {
-            this.filtersResults = true;
-            this.filtersSnapshot = JSON.parse(JSON.stringify(response.filters));
-            salla.event.emit('filters::fetched', { filters: response.filters });
-        }
-        else if (this.isFilterable()) {
-            salla.event.emit('filters::hidden');
-        }
-        //because: this.nextPage is state we don't need to touch it after the build, to avoid the re-rendering
-        if (shouldBuildNextPage) {
-            this.nextPage = response.cursor ? response.cursor.next : this.nextPage;
-        }
-        this.loading(false);
-        this.placeholderLoader && this.placeholderLoader.remove();
-        if (this.hasInfiniteScroll && !this.nextPage) {
-            this.infiniteScroll.option({ scrollThreshold: false, loadOnScroll: false });
-            this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');
-        }
-        const productCardsView = [];
-        for (let i = 0; i < response.data.length; i++) {
-            productCardsView.push(this.getItemHTML(response.data?.[i]));
-        }
-        return productCardsView;
-    }
-    get host() { return this; }
-    static get style() { return sallaProductsListCss; }
-}, [0, "salla-products-list", {
-        "source": [1537],
-        "sourceValue": [1032, "source-value"],
-        "limit": [1026],
-        "sortBy": [1025, "sort-by"],
-        "filtersResults": [1540, "filters-results"],
-        "horizontalCards": [516, "horizontal-cards"],
-        "rowCards": [516, "row-cards"],
-        "compactCards": [516, "compact-cards"],
-        "autoload": [1028],
-        "loadMoreText": [1, "load-more-text"],
-        "productCardComponent": [1, "product-card-component"],
-        "includes": [1040],
-        "page": [32],
-        "nextPage": [32],
-        "hasInfiniteScroll": [32],
-        "hasCustomComponent": [32],
-        "sourceValueIsValid": [32],
-        "placeholderText": [32],
-        "endOfText": [32],
-        "failedLoadMore": [32],
-        "currentPage": [32],
-        "currentCategoryIdFilter": [32],
-        "isReady": [32],
-        "showPlaceholder": [32],
-        "switchToNormalBehavior": [32],
-        "parsedFilters": [32],
-        "filtersSnapshot": [32],
-        "setFilters": [64],
-        "reload": [64]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["salla-products-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "salla-products-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SallaProductsList);
-            }
-            break;
-    } });
-}
-defineCustomElement();
-
-export { SallaProductsList as S, defineCustomElement as d };
+import{transformTag as t,proxyCustomElement as s,HTMLElement as i,createEvent as e,h as o,Host as a}from"@stencil/core/internal/client";import{a as r}from"./anime.es.js";import{S as l}from"./shopping-bag.js";import{H as h}from"./Helper.js";const n=s(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.productsFetched=e(this,"productsFetched",7),this.autoload=!1,this.productCardComponent="custom-salla-product-card",this.page=1,this.placeholderText=salla.lang.get("pages.categories.no_products"),this.endOfText=salla.lang.get("common.elements.end_of_content"),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",this.isProcessing=!1,this.scrollTimeout=null,this.boundScrollToLastViewedProduct=()=>this.scrollToLastViewedProduct(),this.boundHandleScroll=()=>this.handleScroll(),this.specialPagesWithoutIds={"product.index.latest":"latest","product.index.offers":"offers","product.index.search":"search","product.index.sales":"sales"},this.includes=h.parseJson(this.includes||this.host.getAttribute("includes")),Array.isArray(this.includes)||(this.includes=null),h.setIncludes(this.includes),salla.lang.onLoaded((()=>{this.placeholderText=salla.lang.get("pages.categories.no_products"),this.endOfText=salla.lang.get("common.elements.end_of_content"),this.failedLoadMore=salla.lang.get("common.elements.failed_to_load_more"),this.currentPage=salla.config.get("page")}))}connectedCallback(){"scrollRestoration"in history&&(history.scrollRestoration="manual"),window.addEventListener("DOMContentLoaded",this.boundScrollToLastViewedProduct),salla.event.on("salla-filters::changed",(t=>this.setFilters(t)))}disconnectedCallback(){window.removeEventListener("DOMContentLoaded",this.boundScrollToLastViewedProduct),window.removeEventListener("scroll",this.boundHandleScroll)}async setFilters(t){if(t&&JSON.stringify(t)!==JSON.stringify(this.parsedFilters))return window.scrollTo({top:0,behavior:"smooth"}),this.parsedFilters=JSON.parse(JSON.stringify(t)),this.filtersSnapshot=this.parsedFilters,"product.index"==this.currentPage?.slug&&this.parsedFilters&&this.parsedFilters.category_id&&(this.currentCategoryIdFilter=[this.parsedFilters.category_id]),this.reload()}async reload(){!this.autoload&&this.loadMoreWrapper&&(this.loadMoreWrapper.style.display="none"),this.hasInfiniteScroll&&salla.infiniteScroll.destroy(this.infiniteScroll),this.buildNextPageUrl(),this.wrapper.innerHTML="",this.hasInfiniteScroll?this.init():this.getInitialData(),this.showPlaceholder&&(this.showPlaceholder=!1,this.placeholderLoader=document.createElement("div"),this.placeholderLoader.classList.add("s-products-list-loading-wrapper"),this.placeholderLoader.style.display="inherit",this.placeholderLoader.innerHTML='<span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"></span>',this.host.insertAdjacentElement("afterend",this.placeholderLoader))}isFilterable(){return salla.config.get("store.settings.product.filters")&&this.filtersResults}isSourceWithoutValue(){return["offers","latest","sales","wishlist","top-rated","reorder"].includes(this.getSource())}animateItems(){r({targets:"salla-products-list salla-product-card",opacity:[0,1],duration:1200,translateY:[20,0],delay:function(t,s){return 100*s}})}initBaseNextPageUrl(t){this.nextPage=salla.url.api(`products?source=${t}`),this.includes?.length&&(this.nextPage+=`&includes[]=${this.includes.join("&includes[]=")}`),this.limit&&(this.nextPage+=`&per_page=${this.limit>32?32:this.limit}`),this.sortBy&&(this.nextPage+=`&sort=${this.sortBy}`),"preview"===salla.config.get("theme.mode")&&(this.nextPage+="&use_username_url=1"),this.nextPage+="&filterable=1";for(const[t,s]of Object.entries(this.parsedFilters||{}))if(["string","number"].includes(typeof s))this.nextPage+=`&filters[${encodeURIComponent(t)}]=${encodeURIComponent(s)}`;else if(Array.isArray(s))s.forEach((s=>this.nextPage+=`&filters[${encodeURIComponent(t)}][]=${encodeURIComponent(s)}`));else if("object"==typeof s)for(const[i,e]of Object.entries(s))this.nextPage+=`&filters[${encodeURIComponent(t)}][${encodeURIComponent(i)}]=${encodeURIComponent(e)}`}buildNextPageUrl(){let t=this.getSource();if("json"===t)return;const s=sessionStorage.getItem(this.infiniteScrollStateKey);if(s){const{nextPage:t}=JSON.parse(s);if(!t)return}if(this.initBaseNextPageUrl(t),!this.isSourceWithoutValue())if(["search","related","landing-page"].includes(t))this.nextPage+=`&source_value=${this.getSourceValue()}`;else try{this.nextPage+=`&source_value[]=${this.getSourceValue().join("&source_value[]=")}`}catch(s){salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${t}]`),this.sourceValueIsValid=!1}}loading(t=!0,s=!1){if(t){let t=s&&!this.autoload?this.btnLoader:this.loader;t&&(t.style.display="inherit")}else this.autoload||this.btnLoader&&(this.btnLoader.style.display="none"),this.loader&&(this.loader.style.display="none")}getItemHTML(t){"landing-page"===this.getSource()&&(t.url="");const s=document.createElement(this.hasCustomComponent?this.productCardComponent:"salla-product-card");return s.product=t,this.compactCards&&(s.compact=!0,s.toggleAttribute("compact",!0)),this.applyLandingPageStyles(s),this.applyHorizontalCardStyles(s),s.addEventListener("click",(s=>{s.target.closest("a")&&(h.saveProductSource(this.getSource()),this.hasInfiniteScroll&&(this.takeStateSnapshot(),sessionStorage.setItem(this.lastViewedProductKey,t.id)))})),s}applyLandingPageStyles(t){"landing-page"!==this.getSource()||this.hasCustomComponent||(t.toggleAttribute("hide-add-btn",!0),t.classList.add("s-product-card-fit-height"))}applyHorizontalCardStyles(t){this.horizontalCards&&(t.toggleAttribute("horizontal",!0),this.hasCustomComponent||t.toggleAttribute("shadow-on-hover",!0))}waitForResizing(t){let s=null;return new Promise((i=>{const e=new ResizeObserver((()=>{clearTimeout(s),s=setTimeout((()=>{e.disconnect(),i(null)}),160)}));e.observe(t)}))}waitForLayoutStable(t){let s=null;return new Promise((i=>{const e=new MutationObserver((()=>{clearTimeout(s),s=setTimeout((()=>{e.disconnect(),i(null)}),160)}));e.observe(t,{childList:!0,subtree:!0,attributes:!0})}))}async waitForStableLayout(t){return await Promise.allSettled([this.waitForResizing(t),this.waitForLayoutStable(t)])}scrollToLastViewedProduct(){const t=sessionStorage.getItem(this.lastViewedProductKey);t&&!salla.url.is_page("product.single")&&this.isElementLoaded(`[id*="${t}"]`).then((()=>{const s=this.wrapper?.querySelector(`[id*="${t}"]`);if(!s)return;const i=()=>{const t=()=>{s.scrollIntoView({block:"start",behavior:"instant"});const t=matchMedia("(max-width: 1024px)").matches?"header .inner":"ul.main-menu",i=window?.header_is_sticky?document.querySelector(t)?.getBoundingClientRect()?.height??56:0,e=parseInt(getComputedStyle(this.wrapper).rowGap)??16;scrollBy({top:-1*(i+e),behavior:"instant"})};requestAnimationFrame(t),s.querySelectorAll("img.lazy").forEach((s=>{const i=s,e=()=>{requestAnimationFrame(t),i.onload=i.onerror=null};i.onload=e,i.onerror=e})),this.removeScrollRestorationSession()};this.waitForStableLayout(this.host).then((()=>requestAnimationFrame(i)))}))}isElementLoaded(t){return new Promise((s=>{const i=setInterval((()=>{if(document.querySelector(t))return clearInterval(i),s(document.querySelector(t))}),50)}))}takeStateSnapshot(){const t=[];for(let s=0;s<this.wrapper.children.length;s++){const i=this.wrapper.children?.[s];t.push(i.product)}const s={pageIndex:Math.max((this.infiniteScroll?.pageIndex??1)-1,1),nextPage:this.nextPage,currentPageData:t};if(this.isFilterable()){const t=sessionStorage.getItem(this.filtersKey);sessionStorage.setItem(this.filtersKey,t||JSON.stringify(this.filtersSnapshot))}sessionStorage.setItem(this.infiniteScrollStateKey,JSON.stringify(s));let i=salla.config.get("page.id");const e=Object.keys(this.specialPagesWithoutIds).find((t=>salla.url.is_page(t)));e?i=this.specialPagesWithoutIds[e]:null!==i&&(i=String(i)),sessionStorage.setItem(this.prevCategoryIdKey,i)}removeScrollRestorationSession(){this.isFilterable()||sessionStorage.removeItem(this.filtersKey),sessionStorage.removeItem(this.infiniteScrollStateKey),sessionStorage.removeItem(this.lastViewedProductKey),sessionStorage.removeItem(this.prevCategoryIdKey)}loadStoredScrollState(){const t=sessionStorage.getItem(this.infiniteScrollStateKey),s=sessionStorage.getItem(this.filtersKey),i=sessionStorage.getItem(this.prevCategoryIdKey),e=this.specialPagesWithoutIds[salla.config.get("page.slug")]||null,o=salla.config.get("page.id"),a=salla.url.is_page("index"),r=salla.url.is_page("product.single"),l=e?i!==e:i!==String(o);if(i&&l&&!a&&!r||a&&!this.hasInfiniteScroll)return this.removeScrollRestorationSession(),this.switchToNormalBehavior=!0,!1;if(r)return this.switchToNormalBehavior=!0,!1;if(t)try{const{pageIndex:i,nextPage:e,currentPageData:o}=JSON.parse(t);if("undefined"!==s){const t=JSON.parse(s);salla.event.emit("filters::fetched",{filters:t})}this.page=i,this.nextPage=e;for(let t=0;t<o.length;t++)this.wrapper.append(this.getItemHTML(o?.[t]));return!0}catch(t){console.error("Failed to load stored scroll state:",t),this.removeScrollRestorationSession()}return!1}getSource(){return h.getProductsSource(this.source)}getSourceValue(){return this.currentCategoryIdFilter?this.currentCategoryIdFilter:h.getProductsSourceValue(this.source,this.sourceValue)}appendDataLayer(t){"object"==typeof dataLayer&&Array.isArray(dataLayer)&&dataLayer.push({event:"impressions",ecommerce:{currencyCode:salla.config.currency().code,impressions:t.map(((t,s)=>({id:t.id,name:t.name,price:t.price,brand:t.brand?.name||"",quantity:t.quantity,categories:[{name:t.category?.name||salla.config.get("page.title"),id:salla.config.get("page.id")}],category:t.category?.name||salla.config.get("page.title"),position:s+1})))}})}initiateInfiniteScroll(){if(!this.hasInfiniteScroll)return;const t=this.autoload&&this.includes&&this.includes.length>0;this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:()=>this.nextPage,history:!1,nextPage:this.nextPage,scrollThreshold:!t&&!!this.autoload&&100,loadOnScroll:!t&&this.autoload},!0),this.infiniteScroll.pageIndex=this.page,this.infiniteScroll?.on("request",(()=>{this.loading(!0,!this.autoload)})),t&&window.addEventListener("scroll",this.boundHandleScroll),this.infiniteScroll?.on("load",(async t=>{if(!this.isProcessing){this.isProcessing=!0;try{if(!t.data?.length&&2===this.infiniteScroll.pageIndex)return this.showPlaceholder=!0,salla.infiniteScroll.destroy(this.infiniteScroll),this.loading(!1),void(this.placeholderLoader&&this.placeholderLoader.remove());this.includes&&await this.injectAndProcessData(t);const s=this.handleResponse(t);this.infiniteScroll.appendItems(s),2===this.infiniteScroll.pageIndex&&(!this.autoload&&this.nextPage&&(this.loadMoreWrapper.style.display="block"),this.animateItems())}catch(t){console.error("Error during load:",t)}finally{this.isProcessing=!1}}})),this.infiniteScroll?.on("error",(()=>{console.log("Error occurred during request"),this.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden"),this.placeholderLoader&&this.placeholderLoader.remove(),this.loading(!1),this.isProcessing=!1})),salla.onReady((()=>{sessionStorage.getItem(this.infiniteScrollStateKey)||this.manualLoadNextPage()}))}handleScroll(){this.isProcessing||this.scrollTimeout||(this.scrollTimeout=setTimeout((()=>{this.scrollTimeout=null,requestAnimationFrame((()=>{const t=this.wrapper.getBoundingClientRect(),s=window.innerHeight;t.bottom-s<=200&&!this.isProcessing&&this.nextPage&&this.manualLoadNextPage()}))}),200))}manualLoadNextPage(){this.nextPage&&this.infiniteScroll.loadNextPage()}async injectAndProcessData(t){try{await h.injectExtraFieldsToResponse(t)}catch(t){console.error("Error injecting data:",t)}}getInitialData(){return this.loading(),salla.api.withoutNotifier((()=>salla.product.api.fetch({source:h.getApiSource(this.getSource()),source_value:this.getSourceValue(),limit:this.limit}).then((async t=>t.data.length?(await h.injectExtraFieldsToResponse(t),this.firstPageResponse?void this.handleResponse(t).forEach((t=>this.wrapper.append(t))):(this.firstPageResponse=t,void(this.nextPage=t.cursor?t.cursor.next:this.nextPage))):(this.showPlaceholder=!0,this.placeholderLoader&&this.placeholderLoader.remove(),void this.loading(!1))))))}async loadMore(){this.infiniteScroll?.loadNextPage()}componentWillLoad(){return salla.onReady().then((()=>{this.hasCustomComponent=!!customElements.get(this.productCardComponent),this.sourceValueIsValid=!(!this.getSourceValue()&&!this.isSourceWithoutValue()),this.hasInfiniteScroll=!["json","selected","related","landing-page","recently"].includes(this.getSource())&&!this.limit;let t=new URLSearchParams(window.location.search);try{this.sortBy=this.sortBy||t.get("sort")||t.get("by"),this.parsedFilters=h.extractFiltersFromUrl(t),this.parsedFilters&&this.parsedFilters.category_id&&(this.currentCategoryIdFilter=[this.parsedFilters.category_id])}catch(t){salla.logger.warn("failed to get filters from url",t.message)}if(this.buildNextPageUrl(),this.isReady=!0,!sessionStorage.getItem(this.infiniteScrollStateKey))if(this.sourceValueIsValid){if(!this.hasInfiniteScroll){if("json"===this.getSource())return this.getSourceValue().length?void setTimeout((()=>{this.getSourceValue().map((t=>this.wrapper.append(this.getItemHTML(t))))})):void(this.showPlaceholder=!0);if("selected"!==this.getSource()||this.getSourceValue().length)return this.getInitialData();this.showPlaceholder=!0}}else salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`)}))}async componentDidLoad(){this.hasInfiniteScroll&&this.init(),await Salla.hooks.registerComponent("salla-products-list",this),this.loadStoredScrollState()?(this.autoload?!this.nextPage&&this.loading(!1):this.nextPage?this.loadMoreWrapper&&(this.loadMoreWrapper.style.display="block"):(this.loadMoreWrapper&&(this.loadMoreWrapper.style.display="none"),this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden")),this.scrollToLastViewedProduct()):!this.firstPageResponse&&this.switchToNormalBehavior?this.getInitialData().then((()=>{this.firstPageResponse?(this.handleResponse(this.firstPageResponse,!1).forEach((t=>{this.wrapper.append(t)})),setTimeout((()=>{if(!this.autoload&&this.nextPage&&1==this.infiniteScroll.pageIndex){const t=this.host.querySelector(".s-infinite-scroll-wrapper");t&&(t.style.display="block")}}))):console.error("No response received after getInitialData.")})).catch((t=>{console.error("Error during initial data fetch:",t)})):this.firstPageResponse&&this.handleResponse(this.firstPageResponse,!1).forEach((t=>this.wrapper.append(t)))}canRender(){return this.sourceValueIsValid&&this.isReady}render(){return this.canRender()?this.showPlaceholder?o("div",{class:"s-products-list-placeholder"},o("span",{innerHTML:l}),o("p",null,this.placeholderText)):o(a,{class:"s-products-list"},o("div",{class:{"s-products-list-wrapper":!0,"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:t=>this.wrapper=t}),o("div",{class:"s-infinite-scroll-status",ref:t=>this.status=t},o("p",{class:"s-infinite-scroll-last infinite-scroll-last s-hidden"},this.endOfText),o("p",{class:"s-infinite-scroll-error infinite-scroll-error s-hidden"},this.failedLoadMore)),this.autoload&&o("div",{class:"s-products-list-loading-wrapper",style:{display:"none"},ref:t=>this.loader=t},o("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader"})),this.hasInfiniteScroll&&this.nextPage&&!this.autoload?o("div",{class:"s-infinite-scroll-wrapper",style:{display:"none"},ref:t=>this.loadMoreWrapper=t},o("button",{onClick:()=>this.loadMore(),class:"s-infinite-scroll-btn s-button-btn s-button-primary"},o("span",{class:"s-button-text s-infinite-scroll-btn-text"},this.loadMoreText?this.loadMoreText:salla.lang.get("common.elements.load_more")),o("span",{class:"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader",ref:t=>this.btnLoader=t,style:{display:"none"}}))):""):""}init(){this.initiateInfiniteScroll(),this.loading()}handleResponse(t,s=!0){if(!t)return[];let i=this.getSource(),e="";if(1===t.cursor?.current){e=h.getPageTitleForSource(i);try{if("search"===this.getSource())e=salla.lang.get("common.elements.search_about",{word:this.getSourceValue()});else if(!e){let s=this.parsedFilters.category_id||this.getSourceValue()[0];e=t.filters?.find((t=>"category_id"===t.key))?.values?.find((t=>t.key===s))?.value??"",this.filtersSnapshot=t.filters}e+=(e?" - ":"")+salla.lang.choice("blocks.header.products_count",t.data?.length),15===t.data.length&&(e=e.replace(t.data.length,salla.lang.get("common.elements.more_than")+" "+t.data.length)),t.title=e}catch(t){salla.logger.error("Error::falid to handle response",t)}h.generateProductSchema(t.data)}this.appendDataLayer(t.data),t.nextPage=this.nextPage,t.source=this.getSource(),t.sourceValue=this.getSourceValue(),salla.event.emit("salla-products-list::products.fetched",t),this.productsFetched.emit(t),t.filters&&this.isFilterable()?(this.filtersResults=!0,this.filtersSnapshot=JSON.parse(JSON.stringify(t.filters)),salla.event.emit("filters::fetched",{filters:t.filters})):this.isFilterable()&&salla.event.emit("filters::hidden"),s&&(this.nextPage=t.cursor?t.cursor.next:this.nextPage),this.loading(!1),this.placeholderLoader&&this.placeholderLoader.remove(),this.hasInfiniteScroll&&!this.nextPage&&(this.infiniteScroll.option({scrollThreshold:!1,loadOnScroll:!1}),this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden"));const o=[];for(let s=0;s<t.data.length;s++)o.push(this.getItemHTML(t.data?.[s]));return o}get host(){return this}static get style(){return""}},[0,"salla-products-list",{source:[1537],sourceValue:[1032,"source-value"],limit:[1026],sortBy:[1025,"sort-by"],filtersResults:[1540,"filters-results"],horizontalCards:[516,"horizontal-cards"],rowCards:[516,"row-cards"],compactCards:[516,"compact-cards"],autoload:[1028],loadMoreText:[1,"load-more-text"],productCardComponent:[1,"product-card-component"],includes:[1040],page:[32],nextPage:[32],hasInfiniteScroll:[32],hasCustomComponent:[32],sourceValueIsValid:[32],placeholderText:[32],endOfText:[32],failedLoadMore:[32],currentPage:[32],currentCategoryIdFilter:[32],isReady:[32],showPlaceholder:[32],switchToNormalBehavior:[32],parsedFilters:[32],filtersSnapshot:[32],setFilters:[64],reload:[64]}]);function c(){"undefined"!=typeof customElements&&["salla-products-list"].forEach((s=>{"salla-products-list"===s&&(customElements.get(t(s))||customElements.define(t(s),n))}))}c();export{n as S,c as d}