@salla.sa/twilight-components/dist/cjs/salla-products-slider.cjs.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-B99uI20k.js');
var Helper = require('./Helper-CU4Xuiki.js');
require('./anime.es-BqW8JHZi.js');

const sallaProductsSliderCss = "";

const SallaProductsSlider = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Custom Card Component for the Salla Products Slider.
         *
         * This component allows you to customize the appearance of individual product cards within a Salla Products Slider.
         *
         * @example
         * <salla-products-slider product-card-component="my-custom-card-style1" ...
         * <salla-products-slider product-card-component="my-custom-card-style2" ...
         */
        this.productCardComponent = 'custom-salla-product-card';
        this.apiUrl = '';
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => {
            //TODO:: check why `this.includes` not working!!
            this.includes = Helper.Helper.parseJson(this.includes || this.host.getAttribute('includes'));
            if (!Array.isArray(this.includes)) {
                this.includes = null;
            }
            Helper.Helper.setIncludes(this.includes);
            this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
            if (!this.sourceValueIsValid) {
                salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);
                return;
            }
            this.hasCustomComponent = !!customElements.get(this.productCardComponent);
            if (this.source === 'json') {
                this.productsData = this.getSourceValue();
                this.isReady = true;
                return;
            }
            if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled'))) {
                this.isReady = false;
                return;
            }
            return salla.api.withoutNotifier(() => salla.product.api.fetch({
                source: Helper.Helper.getApiSource(this.getSource()),
                source_value: this.getSourceValue(),
                limit: this.limit
            }))
                .then(response => Helper.Helper.injectExtraFieldsToResponse(response))
                .then(response => {
                this.productsData = response.data;
                this.isReady = true;
                response.source = this.getSource();
                response.sourceValue = this.getSourceValue();
                salla.event.emit('salla-products-slider::products.fetched', response.data);
            });
        });
    }
    componentDidRender() {
        let processedCount = 0;
        const intervalId = setInterval(() => {
            this.host.querySelectorAll('[loading="lazy"]')?.forEach(img => img.removeAttribute('loading'));
            processedCount++;
            if (processedCount >= 10) {
                clearInterval(intervalId);
            }
        }, 1000);
    }
    async componentDidLoad() {
        await Salla.hooks.registerComponent('salla-products-slider', this);
    }
    isSourceWithoutValue() {
        return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
    }
    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
        const isLandingPage = this.getSource() === 'landing-page';
        isLandingPage && (product.url = '');
        const handleClick = isLandingPage ? undefined : () => {
            Helper.Helper.saveProductSource(this.getSource());
        };
        if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
            return index.h("div", { class: "s-products-slider-card", onClick: handleClick }, index.h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
        }
        if (this.hasCustomComponent) {
            const customElem = document.createElement(this.productCardComponent);
            customElem.setAttribute('product', JSON.stringify(product));
            customElem.setAttribute('source', this.getSource());
            customElem.setAttribute('source-value', this.getSourceValue());
            return index.h("div", { class: "s-products-slider-card", onClick: handleClick, innerHTML: customElem.outerHTML });
        }
        return index.h("div", { class: "s-products-slider-card", onClick: handleClick }, index.h("salla-product-card", { "show-quantity": isLandingPage, "hide-add-btn": isLandingPage, "shadow-on-hover": true, product: product }));
    }
    canRender() {
        return this.sourceValueIsValid && this.isReady;
    }
    getSource() {
        return Helper.Helper.getProductsSource(this.source);
    }
    getSourceValue() {
        return Helper.Helper.getProductsSourceValue(this.source, this.sourceValue);
    }
    render() {
        if (!this.canRender()) {
            return;
        }
        return (index.h(index.Host, { class: "s-products-slider-wrapper" }, index.h("salla-slider", { class: "s-products-slider-slider", id: this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`, ...(this.sliderProps || {}), "auto-play": this.autoplay, type: "carousel", "block-title": this.blockTitle, "block-subTitle": this.subTitle, "display-all-url": this.displayAllUrl, sliderConfig: this.sliderConfig ? this.sliderConfig : null }, index.h("div", { slot: "items" }, this.productsData?.map(product => this.getItemHTML(product))))));
    }
    get host() { return index.getElement(this); }
};
SallaProductsSlider.style = sallaProductsSliderCss;

exports.salla_products_slider = SallaProductsSlider;