@salla.sa/twilight-components 2.14.139 → 2.14.141

package/dist/esm/salla-products-slider.entry.js.map

@@ -1 +0,0 @@
-{"file":"salla-products-slider.entry.js","mappings":"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","names":[],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n  &-wrapper{\n\n  }\n  &-slider{\n\n  }\n  &-card{\n\n  }\n}","import { Component, Host, h, Prop, Element, State } from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\n\n//todo:: extends this component from salla-products-list or the opposite\nexport class SallaProductsSlider {\n  /**\n   * Title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() blockTitle: string;\n\n  /**\n   * Sub title of the block - works only if slider is true\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() subTitle: string;\n\n  /**\n   * Slider Id, if not provided will be generated automatically\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() sliderId: string;\n\n  /**\n   * Display 'ALL' URL\n   * @type {string}\n   * @default ''\n   * */\n  @Prop() displayAllUrl: string;\n\n  /**\n  * autoplay option for products slider\n  */\n  @Prop({ mutable: true }) autoplay: boolean\n\n  /**\n   * Source of the products, if api will get the products from the API, if json will get the products from the products prop\n   * @type {string}\n   * @default ''\n   * */\n  @Prop({\n    reflect: true,\n    mutable: true\n  }) source: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'wishlist' | 'top-rated';\n\n  /**\n   * The source value, cloud be different values as following:\n   * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n   * - products payload when `source` = 'json'\n   * - product_id when `source` = 'related'\n   *\n   * @type {string}\n   * */\n  @Prop() sourceValue: string;\n\n  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({ mutable: true }) limit: number;\n\n  /**\n   * Slider Configs refer to https://swiperjs.com/swiper-api#parameters and pass the entire config object\n   * @example\n   * let productsSlider = document.querySelector('salla-products-slider');\n   *  productsSlider.sliderConfig = {\n   *  slidesPerView: 1,\n   *  spaceBetween : 30,\n   *  lazy: true,\n   * }\n   *\n   */\n  @Prop({ reflect: true }) sliderConfig: any;\n\n  /**\n   * Custom Card Component for the Salla Products Slider.\n   *\n   * This component allows you to customize the appearance of individual product cards within a Salla Products Slider.\n   *\n   * @example\n   * <salla-products-slider product-card-component=\"my-custom-card-style1\" ...\n   * <salla-products-slider product-card-component=\"my-custom-card-style2\" ...\n   */\n  @Prop() productCardComponent: string = 'custom-salla-product-card';\n\n  /**\n   * Specifies additional data to be included in the product fetch response.\n   * The value can be an array of strings or a JSON string.\n   * \n   * Example:\n   * - As an array: includes=[\"options\"]\n   * - As a JSON string: includes='[\"options\"]'\n   * \n   * The array or JSON string can include:\n   * - \"options\": Include product options in the response.\n   * - \"images\": Include product images in the response.\n   */\n  @Prop({mutable: true}) includes: string[];\n\n\n  @Element() host: HTMLElement;\n  //todo:: support limit, default =10, make sure that maximum is 32,\n\n\n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n\n  componentWillLoad() {\n    return salla.onReady()\n    .then(() => {\n        //TODO:: check why `this.includes` not working!!\n        this.includes = Helper.parseJson(this.includes||this.host.getAttribute('includes'));\n        if (!Array.isArray(this.includes)) {\n          this.includes = null;\n        }\n        Helper.setIncludes(this.includes);\n      this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());\n      if (!this.sourceValueIsValid) {\n        salla.logger.warn(`source-value prop is required for source [${this.getSource()\n          }]`);\n        return;\n      }\n      this.hasCustomComponent = !!customElements.get(this.productCardComponent);\n\n      if (this.source === 'json') {\n        this.productsData = this.getSourceValue();\n        this.isReady = true\n        return;\n      }\n\n      if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled'))) {\n        this.isReady = false\n        return;\n      }\n\n      return salla.product.api.fetch({source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit})\n    .then(response => Helper.injectExtraFieldsToResponse(response))\n    .then(response => {\n        this.productsData = response.data;\n        this.isReady = true;\n        salla.event.emit('salla-products-slider::products.fetched', response.data);\n      });\n    });\n  }\n  componentDidRender() {\n    let processedCount = 0;\n    const intervalId = setInterval(() => {\n      this.host.querySelectorAll('[loading=\"lazy\"]')?.forEach(img => img.removeAttribute('loading'));\n      processedCount++;\n      if (processedCount >= 10) {\n        clearInterval(intervalId);\n      }\n    }, 1000);\n  }\n\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());\n  }\n\n  private getItemHTML(product) {\n\n    //as a request they don't want to let the user to open the product details\n    //todo:: find a better way to handle this request\n    this.getSource() === 'landing-page' && (product.url = '');\n    if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()} />\n      </div>\n    }\n\n    if (this.hasCustomComponent) {\n      const customElem = document.createElement(this.productCardComponent);\n      customElem.setAttribute('product', JSON.stringify(product));\n      customElem.setAttribute('source', this.getSource());\n      customElem.setAttribute('source-value', this.getSourceValue());\n\n      return <div class=\"s-products-slider-card\" innerHTML={customElem.outerHTML} />;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.getSource() == 'landing-page'}\n        hide-add-btn={this.getSource() == 'landing-page'}\n        shadow-on-hover={true}\n        product={product} />\n    </div>;\n  }\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  private getSource() {\n    return Helper.getProductsSource(this.source);\n  }\n\n  private getSourceValue() {\n    return Helper.getProductsSourceValue(this.source, this.sourceValue);\n  }\n\n  render() {\n    if (!this.canRender()) {\n      return;\n    }\n    return (\n      <Host class=\"s-products-slider-wrapper\">\n        <salla-slider\n          class=\"s-products-slider-slider\"\n          id={this.sliderId || `s-products-slider-${Math.random().toString(36).substr(2, 9)}`}\n          auto-play={this.autoplay}\n          type=\"carousel\"\n          block-title={this.blockTitle}\n          block-subTitle={this.subTitle}\n          display-all-url={this.displayAllUrl}\n          sliderConfig={this.sliderConfig ? this.sliderConfig : null}\n        >\n          <div slot=\"items\">\n            {this.productsData?.map(product => this.getItemHTML(product))}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}