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

Salla Web Component

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

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-a2d7a914.js');
const Helper = require('./Helper-ebee48d1.js');
require('./anime.es-78730411.js');

const sallaProductsSliderCss = "";

const SallaProductsSlider = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.blockTitle = undefined;
    this.subTitle = undefined;
    this.sliderId = undefined;
    this.displayAllUrl = undefined;
    this.autoplay = undefined;
    this.source = undefined;
    this.sourceValue = undefined;
    this.limit = undefined;
    this.sliderConfig = undefined;
    this.productCardComponent = 'custom-salla-product-card';
    this.includes = undefined;
    this.productsData = undefined;
    this.isReady = undefined;
    this.sourceValueIsValid = undefined;
    this.hasCustomComponent = undefined;
    this.apiUrl = '';
    this.parsedSourceValue = undefined;
  }
  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.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit })
        .then(response => Helper.Helper.injectExtraFieldsToResponse(response))
        .then(response => {
        this.productsData = response.data;
        this.isReady = true;
        salla.event.emit('salla-products-slider::products.fetched', response.data);
      });
    });
  }
  componentDidRender() {
    let processedCount = 0;
    const intervalId = setInterval(() => {
      var _a;
      (_a = this.host.querySelectorAll('[loading="lazy"]')) === null || _a === void 0 ? void 0 : _a.forEach(img => img.removeAttribute('loading'));
      processedCount++;
      if (processedCount >= 10) {
        clearInterval(intervalId);
      }
    }, 1000);
  }
  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
    this.getSource() === 'landing-page' && (product.url = '');
    if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
      return index.h("div", { class: "s-products-slider-card" }, 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", innerHTML: customElem.outerHTML });
    }
    return index.h("div", { class: "s-products-slider-card" }, index.h("salla-product-card", { "show-quantity": this.getSource() == 'landing-page', "hide-add-btn": this.getSource() == 'landing-page', "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() {
    var _a;
    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)}`, "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" }, (_a = this.productsData) === null || _a === void 0 ? void 0 : _a.map(product => this.getItemHTML(product))))));
  }
  get host() { return index.getElement(this); }
};
SallaProductsSlider.style = sallaProductsSliderCss;

exports.salla_products_slider = SallaProductsSlider;

//# sourceMappingURL=salla-products-slider.cjs.entry.js.map