@salla.sa/twilight-components 2.11.95 → 2.11.96

package/dist/twilight/p-18d654a0.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as s,h as t,H as i,g as e}from"./p-7dc66c07.js";const r=`\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>shopping-bag</title>\n<path d="M28 10.667h-4v-2.667c0-4.412-3.588-8-8-8s-8 3.588-8 8v2.667h-4c-0.736 0-1.333 0.596-1.333 1.333v13.333c0 3.676 2.991 6.667 6.667 6.667h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333zM10.667 8c0-2.941 2.392-5.333 5.333-5.333s5.333 2.392 5.333 5.333v2.667h-10.667zM26.667 25.333c0 2.205-1.795 4-4 4h-13.333c-2.205 0-4-1.795-4-4v-12h2.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h10.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h2.667z"></path>\n</svg>\n`;const a="";const l=class{constructor(t){s(this,t);this.page=1;this.urlPrefix="";salla.onReady((()=>{this.source=this.source||{"brands.single":"brands","product.index":"categories","product.index.latest":"latest","product.index.offers":"offers","product.index.search":"search","landing-page":"landing-page","product.index.tag":"tags"}[salla.config.get("page.slug")]||"latest";let s=this.sourceValue=this.sourceValue||this.getSourceValue();if(this.sourceValue&&["categories","brands","tags","selected"].includes(this.source)&&typeof this.sourceValue=="string"){s=JSON.parse(this.sourceValue)}this.parsedSourceValue=s;this.sourceValueIsValid=!!(this.sourceValue||["latest","offers"].includes(this.source));this.buildNextPageUrl();this.isReady=true}));if(!this.sourceValueIsValid){salla.logger.warn(`source-value prop is required for source [${this.source}]`);return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card");this.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(this.source);this.status=document.createElement("div");this.status.className="s-infinite-scroll-wrapper";this.status.innerHTML=`<div class="s-infinite-scroll-status">\n        <p class="s-infinite-scroll-last infinite-scroll-last s-hidden" >${salla.lang.get("common.elements.end_of_content")}</p>\n        <p class="s-infinite-scroll-error infinite-scroll-error s-hidden">${salla.lang.get("common.elements.failed_to_load_more")}</p>\n      </div>\n      <a href="#" class="s-infinite-scroll-btn s-button-btn">\n        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>\n      </a>`;this.btnLoader=this.status.querySelector(".s-button-loader");salla.lang.onLoaded((()=>{this.status.querySelector(".s-infinite-scroll-last").innerHTML=salla.lang.get("common.elements.end_of_content");this.status.querySelector(".s-infinite-scroll-error").innerHTML=salla.lang.get("common.elements.failed_to_load_more");this.placeholderText=salla.lang.get("pages.categories.no_products")}))}validateLimitMaximumValue(s,t){if(this.limit){this.urlPrefix+=`&per_page=${this.limit>32?32:this.limit}}`}}parseFilters(s,t){this.parsedFilters=typeof s=="string"?JSON.parse(s):s;this.urlPrefix="";for(const[s,t]of Object.entries(this.parsedFilters)){if(typeof t=="string"){this.urlPrefix+=`&filters[${s}]=${t}`}else if(Array.isArray(t)){t.forEach((t=>{this.urlPrefix+=`&filters[${s}][]=${t}}`}))}}if(this.source=="categories"){this.wrapper.innerHTML="";this.init()}}buildNextPageUrl(){if(this.source==="json"){return}if(["offers","latest"].includes(this.source)){this.nextPage=salla.url.api(`products?source=${this.source}${this.urlPrefix}`);return}if(["search","related","landing-page"].includes(this.source)){this.nextPage=salla.url.api(`products?source=${this.source}&source_value=${this.parsedSourceValue}${this.urlPrefix}`);return}try{this.nextPage=salla.url.api(`products?source=${this.source}&source_value[]=${this.parsedSourceValue.join("&source_value[]=")}${this.urlPrefix}`)}catch(s){salla.logger.warn(`source-value prop should be array of ids ex source-value="[1,2,3]" for the source [${this.source}]`);this.sourceValueIsValid=false}}getSourceValue(){if(["landing-page"].includes(this.source)){return`${salla.config.get("page.id")}`}else if(["categories","brands","tags"].includes(this.source)){return JSON.stringify([salla.config.get("page.id")])}return this.sourceValue}loading(s=true){this.btnLoader.style.display=s?"inherit":"none"}getItemHTML(s){let t=this.hasCustomComponent?"custom-salla-product-card":"salla-product-card";t=document.createElement(t);t.setAttribute("product",JSON.stringify(s));if(this.source=="landing-page"&&!this.hasCustomComponent){t.toggleAttribute("hide-add-btn",true);t.toggleAttribute("show-quantity",true);t.classList.add("s-product-card-fit-height")}t.toggleAttribute("shadow-on-hover",true);return t}initiateInfiniteScroll(){if(!this.hasInfiniteScroll){return}this.host.insertAdjacentElement("afterend",this.status);this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:()=>this.nextPage,history:false,nextPage:this.nextPage,scrollThreshold:100},true);this.infiniteScroll.on("request",(()=>this.loading()));this.infiniteScroll.on("load",(s=>this.infiniteScroll.appendItems(this.handleResponse(s))));this.infiniteScroll.on("error",(()=>{this.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");this.loading(false)}))}canRender(){return this.sourceValueIsValid&&this.isReady}render(){if(!this.canRender()){return""}if(this.showPlaceholder){return t("div",{class:"s-products-list-placeholder"},t("span",{innerHTML:r}),t("p",null,this.placeholderText))}return t(i,{class:"s-products-list"},t("div",{class:"s-products-list-wrapper",ref:s=>this.wrapper=s}))}componentDidLoad(){if(!this.canRender()){return}if(this.source==="json"){if(!this.parsedSourceValue.length){this.showPlaceholder=true;return}this.parsedSourceValue.map((s=>this.wrapper.append(this.getItemHTML(s))));return}if(this.source=="categories"){const s=window.location.search.replace("?","").split("&").map((s=>s.split("="))).reduce(((s,[t,i])=>{if(t=="sort"){s[t]=i}return s}),{});if(s){this.filters=s;return}}this.init()}init(){this.initiateInfiniteScroll();this.loading();salla.product.fetch({source:this.source,source_value:this.parsedSourceValue,filters:this.filters,limit:this.limit}).then((s=>{if(!s.data.length){this.showPlaceholder=true;this.loading(false);return}this.handleResponse(s).forEach((s=>this.wrapper.append(s)))}))}handleResponse(s){var t;this.nextPage=s.cursor?s.cursor.next:this.nextPage;this.loading(false);if(this.hasInfiniteScroll&&!this.nextPage){this.infiniteScroll.option({scrollThreshold:false,loadOnScroll:false});this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden")}return((t=s.data)===null||t===void 0?void 0:t.map((s=>this.getItemHTML(s))))||[]}get host(){return e(this)}static get watchers(){return{limit:["validateLimitMaximumValue"],filters:["parseFilters"]}}};l.style=a;export{l as salla_products_list};
-//# sourceMappingURL=p-18d654a0.entry.js.map

package/dist/twilight/p-18d654a0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","src/components/salla-products-list/salla-products-list.tsx"],"names":["sallaProductsListCss","SallaProductsList","[object Object]","hostRef","this","page","urlPrefix","salla","onReady","source","brands.single","product.index","product.index.latest","product.index.offers","product.index.search","landing-page","product.index.tag","config","get","parsedSourceValue","sourceValue","getSourceValue","includes","JSON","parse","sourceValueIsValid","buildNextPageUrl","isReady","logger","warn","hasCustomComponent","customElements","hasInfiniteScroll","status","document","createElement","className","innerHTML","lang","btnLoader","querySelector","onLoaded","placeholderText","_newValue","_","limit","newValue","parsedFilters","key","value","Object","entries","Array","isArray","forEach","item","wrapper","init","nextPage","url","api","join","e","stringify","isLoading","style","display","product","customComponent","setAttribute","toggleAttribute","classList","add","host","insertAdjacentElement","infiniteScroll","initiate","path","history","scrollThreshold","on","loading","response","appendItems","handleResponse","remove","canRender","showPlaceholder","h","class","ShoppingBag","Host","ref","length","map","append","getItemHTML","filters","window","location","search","replace","split","reduce","acc","initiateInfiniteScroll","fetch","source_value","then","res","data","card","cursor","next","option","loadOnScroll","_a"],"mappings":"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","sourcesContent":["\n","import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';\nimport ShoppingBag from '../../assets/svg/shopping-bag.svg';\n\n@Component({\n  tag: 'salla-products-list',\n  styleUrl: 'salla-products-list.scss'\n})\nexport class SallaProductsList {\n  constructor() {\n    // this.source = this.source || 'latest';\n    salla.onReady(() => {\n      this.source = this.source || {\n        'brands.single': 'brands',\n        'product.index': 'categories',\n        'product.index.latest': 'latest',\n        'product.index.offers': 'offers',\n        'product.index.search': 'search',\n        'landing-page': 'landing-page',\n        'product.index.tag': 'tags',\n      }[salla.config.get('page.slug')] || 'latest';\n\n\n      let parsedSourceValue = this.sourceValue = this.sourceValue || this.getSourceValue();\n\n      if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {\n        parsedSourceValue = JSON.parse(this.sourceValue);\n      }\n      this.parsedSourceValue = parsedSourceValue;\n      this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.source));\n      this.buildNextPageUrl();\n      this.isReady = true;\n    });\n\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n      return;\n    }\n    this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n\n    this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.source);\n    // Language\n    //enhance\n    this.status = document.createElement('div');\n    this.status.className = 's-infinite-scroll-wrapper';\n    this.status.innerHTML = `<div class=\"s-infinite-scroll-status\">\n        <p class=\"s-infinite-scroll-last infinite-scroll-last s-hidden\" >${salla.lang.get('common.elements.end_of_content')}</p>\n        <p class=\"s-infinite-scroll-error infinite-scroll-error s-hidden\">${salla.lang.get('common.elements.failed_to_load_more')}</p>\n      </div>\n      <a href=\"#\" class=\"s-infinite-scroll-btn s-button-btn\">\n        <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" style=\"display: none\"></span>\n      </a>`;\n    this.btnLoader = this.status.querySelector('.s-button-loader');\n    salla.lang.onLoaded(() => {\n      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');\n      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');\n      this.placeholderText = salla.lang.get('pages.categories.no_products');\n    });\n  }\n\n  private readonly status: HTMLDivElement;\n  private btnLoader: HTMLAnchorElement;\n  @Element() host: HTMLElement;\n  private wrapper: any;\n  private infiniteScroll: any;\n  /**\n   * The source of the products list\n   * @type {string}\n   * */\n  @Prop({\n    reflect: true,\n    mutable: true\n  }) source: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page';\n\n  /**\n   * The source value, cloud be different values as following:\n   * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n   * - keyword when `source` = 'search'\n   * - products payload when `source` = 'json'\n   * - product_id when `source` = 'related'\n   *\n   * @type {string}\n   * */\n  @Prop({ mutable: true }) sourceValue: any;\n\n  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({ mutable: true }) limit: number;\n\n  /**\n   * Filter parameters. JSON STRING or object\n   */\n  @Prop({ mutable: true }) filters: string | object;\n\n  @Watch('limit')\n  validateLimitMaximumValue(_newValue: number, _) {\n    if (this.limit) {\n      this.urlPrefix += `&per_page=${this.limit > 32 ? 32 : this.limit}}`;\n    }\n  }\n\n  @Watch('filters')\n  parseFilters(newValue: string | object, _) {\n    this.parsedFilters = typeof newValue == 'string' ? JSON.parse(newValue) : newValue\n    this.urlPrefix = '';\n\n    for (const [key, value] of Object.entries(this.parsedFilters)) {\n      if (typeof value == \"string\") {\n        this.urlPrefix += `&filters[${key}]=${value}`;\n      }\n      else if (Array.isArray(value)) {\n        (value as any).forEach(item => {\n          this.urlPrefix += `&filters[${key}][]=${item}}`\n        })\n      }\n    }\n    // reset page products\n    if (this.source == 'categories') {\n      this.wrapper.innerHTML = '';\n      this.init()\n    }\n  }\n\n  // State\n  @State() page: number = 1;\n  @State() nextPage: string;\n  @State() hasInfiniteScroll: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() placeholderText: string;\n  @State() isReady: boolean;\n  @State() showPlaceholder: boolean;\n  @State() urlPrefix: string = '';\n  @State() parsedSourceValue: any;\n  @State() parsedFilters: any;\n\n\n  private buildNextPageUrl() {\n    if (this.source === 'json') {\n      return;\n    }\n    if (['offers', 'latest'].includes(this.source)) {\n      this.nextPage = salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n      return;\n    }\n\n    if (['search', 'related', 'landing-page'].includes(this.source)) {\n      this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.parsedSourceValue}${this.urlPrefix}`);\n      return;\n    }\n\n    try {\n      this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${this.parsedSourceValue.join('&source_value[]=')}${this.urlPrefix}`);\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n\n  private getSourceValue() {\n    if (['landing-page'].includes(this.source)) {\n      return `${salla.config.get('page.id')}`\n    } else if (['categories', 'brands', 'tags'].includes(this.source)) {\n      return JSON.stringify([salla.config.get('page.id')])\n    }\n    return this.sourceValue;\n  }\n\n  private loading(isLoading = true) {\n    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n  }\n\n  private getItemHTML(product) {\n    let customComponent: string | HTMLElement = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n    customComponent = document.createElement(customComponent);\n    customComponent.setAttribute('product', JSON.stringify(product));\n    if (this.source == 'landing-page' && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('hide-add-btn', true);\n      customComponent.toggleAttribute('show-quantity', true);\n      customComponent.classList.add('s-product-card-fit-height');\n    }\n    customComponent.toggleAttribute('shadow-on-hover', true);\n    return customComponent;\n  }\n\n  private initiateInfiniteScroll() {\n    if (!this.hasInfiniteScroll) {\n      return;\n    }\n\n    this.host.insertAdjacentElement('afterend', this.status);\n    this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n      path: () => this.nextPage,\n      history: false,\n      nextPage: this.nextPage,\n      scrollThreshold: 100,\n    }, /* infinite via api*/true);\n    this.infiniteScroll.on('request', () => this.loading())\n    this.infiniteScroll.on('load', response => this.infiniteScroll.appendItems(this.handleResponse(response)))\n    this.infiniteScroll.on('error', () => {\n      this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden')\n      this.loading(false);\n    });\n  }\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  render() {\n    if (!this.canRender()) {\n      return '';\n    }\n    if (this.showPlaceholder) {\n      return <div class=\"s-products-list-placeholder\">\n        <span innerHTML={ShoppingBag}></span>\n        <p>{this.placeholderText}</p>\n      </div>;\n    }\n    return (\n      <Host class=\"s-products-list\">\n        <div class=\"s-products-list-wrapper\" ref={wrapper => this.wrapper = wrapper} />\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.canRender()) {\n      return;\n    }\n    if (this.source === 'json') {\n      if (!this.parsedSourceValue.length) {\n        this.showPlaceholder = true;\n        return;\n      }\n      this.parsedSourceValue.map(product => this.wrapper.append(this.getItemHTML(product)));\n      return;\n    }\n    if (this.source == 'categories') {\n      // check if there is a filters in the url\n      const filters = window.location.search\n        .replace('?', '')\n        .split('&')\n        .map(item => item.split('='))\n        .reduce((acc, [key, value]) => {\n          if (key == 'sort') {\n            acc[key] = value;\n          }\n          return acc;\n        }, {});\n      if (filters) {\n        this.filters = filters;\n        return;\n      }\n    }\n    this.init();\n  }\n\n  private init() {\n    this.initiateInfiniteScroll();\n    this.loading();\n    salla.product.fetch({ source: this.source, source_value: this.parsedSourceValue, filters: this.filters, limit: this.limit })\n      .then(res => {\n        if (!res.data.length) {\n          this.showPlaceholder = true;\n          this.loading(false);\n          return;\n        }\n        this.handleResponse(res).forEach(card => this.wrapper.append(card));\n      })\n  }\n  private handleResponse(response): Array<HTMLElement> {\n    //💡 when source is related, cursor will not be existed\n    this.nextPage = response.cursor ? response.cursor.next : this.nextPage;\n    this.loading(false);\n    if (this.hasInfiniteScroll && !this.nextPage) {\n      this.infiniteScroll.option({ scrollThreshold: false, loadOnScroll: false });\n      this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');\n    }\n    return response.data?.map(product => this.getItemHTML(product)) || [];\n  }\n}\n"]}

package/dist/twilight/p-5316354e.system.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-System.register(["./p-d9130020.system.js"],(function(e){"use strict";var s,t,r,a;return{setters:[function(e){s=e.r;t=e.h;r=e.H;a=e.g}],execute:function(){var u="";var o=e("salla_products_slider",function(){function e(e){var t=this;s(this,e);this.urlPrefix="";this.apiUrl="";salla.onReady((function(){t.source=t.source||{"brands.single":"brands","product.index":"categories","product.index.latest":"latest","product.index.offers":"offers","landing-page":"landing-page","product.index.tag":"tags","product.single":"related"}[salla.config.get("page.slug")]||"latest";var e=t.sourceValue=t.sourceValue||t.getSourceValue();if(t.sourceValue&&["categories","brands","tags","selected"].includes(t.source)&&typeof t.sourceValue=="string"){e=JSON.parse(t.sourceValue)}t.parsedSourceValue=e;t.sourceValueIsValid=!!(t.sourceValue||["latest","offers"].includes(t.source))}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.source,"]"));return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card")}e.prototype.getSourceValue=function(){if(["landing-page","related"].includes(this.source)){return"".concat(salla.config.get("page.id"))}else if(["categories","brands","tags"].includes(this.source)){return JSON.stringify([salla.config.get("page.id")])}return this.sourceValue};e.prototype.getItemHTML=function(e){if(this.hasCustomComponent){return t("div",{class:"s-products-slider-card"},t("custom-salla-product-card",{product:e,source:this.source,"source-value":this.sourceValue}))}return t("div",{class:"s-products-slider-card"},t("salla-product-card",{"show-quantity":this.source=="landing-page","hide-add-btn":this.source=="landing-page","shadow-on-hover":true,product:e}))};e.prototype.getApiUrl=function(){if(this.source==="json"){return}if(["offers","latest"].includes(this.source)){return salla.url.api("products?source=".concat(this.source).concat(this.urlPrefix))}if(["related","landing-page"].includes(this.source)){return salla.url.api("products?source=".concat(this.source,"&source_value=").concat(this.sourceValue).concat(this.urlPrefix))}try{var e=JSON.parse(this.sourceValue);return salla.url.api("products?source=".concat(this.source,"&source_value[]=").concat(e.join("&source_value[]=")).concat(this.urlPrefix))}catch(e){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(this.source,"]"));this.sourceValueIsValid=false}};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.componentWillLoad=function(){var e=this;if(this.source==="json"){this.productsData=JSON.parse(this.sourceValue);this.isReady=true;return}salla.api.request(this.getApiUrl(),null,"get").then((function(s){e.productsData=s.data;e.isReady=true}))};e.prototype.render=function(){var e=this;var s;if(this.source=="related"&&salla.config.get("product.related_products")||!this.canRender()){return}return t(r,{class:"s-products-slider-wrapper"},t("salla-slider",{class:"s-products-slider-slider",id:this.sliderId||"s-products-slider-".concat(Math.random().toString(36).substr(2,9)),type:"carousel","block-title":this.blockTitle,"block-subTitle":this.subTitle,"display-all-url":this.displayAllUrl},t("div",{slot:"items"},(s=this.productsData)===null||s===void 0?void 0:s.map((function(s){return e.getItemHTML(s)})))))};Object.defineProperty(e.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});return e}());o.style=u}}}));
-//# sourceMappingURL=p-5316354e.system.entry.js.map

package/dist/twilight/p-5316354e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"names":["sallaProductsSliderCss","SallaProductsSlider","exports","class_1","hostRef","_this","this","urlPrefix","apiUrl","salla","onReady","source","brands.single","product.index","product.index.latest","product.index.offers","landing-page","product.index.tag","product.single","config","get","parsedSourceValue","sourceValue","getSourceValue","includes","JSON","parse","sourceValueIsValid","logger","warn","concat","hasCustomComponent","customElements","prototype","stringify","getItemHTML","product","h","class","source-value","show-quantity","hide-add-btn","shadow-on-hover","getApiUrl","url","api","ids","join","e","canRender","isReady","componentWillLoad","productsData","request","then","res","data","render","Host","id","sliderId","Math","random","toString","substr","type","block-title","blockTitle","block-subTitle","subTitle","display-all-url","displayAllUrl","slot","_a","map"],"mappings":"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","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';\n\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\nexport class SallaProductsSlider {\n  constructor() {\n    salla.onReady(() => {\n      this.source = this.source || {\n        'brands.single': 'brands',\n        'product.index': 'categories',\n        'product.index.latest': 'latest',\n        'product.index.offers': 'offers',\n        'landing-page': 'landing-page',\n        'product.index.tag': 'tags',\n        'product.single': 'related',\n      }[salla.config.get('page.slug')] || 'latest';\n   \n      let parsedSourceValue = this.sourceValue = this.sourceValue || this.getSourceValue();\n\n      if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {\n        parsedSourceValue = JSON.parse(this.sourceValue);\n      }\n      this.parsedSourceValue = parsedSourceValue;\n      this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.source));\n\n    });\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n      return;\n    }\n    this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n  }\n\n  @Element() host: HTMLElement;\n  //todo:: support limit, default =10, make sure that maximum is 32,\n\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   * 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';\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  //todo:: remove this\n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() urlPrefix: string = '';\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n  private getSourceValue() {\n    if (['landing-page', 'related'].includes(this.source)) {\n      return `${salla.config.get('page.id')}`\n    } else if (['categories', 'brands', 'tags'].includes(this.source)) {\n      return JSON.stringify([salla.config.get('page.id')])\n    }\n    return this.sourceValue;\n  }\n\n  private getItemHTML(product) {\n    if (this.hasCustomComponent) {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.source} source-value={this.sourceValue}/>\n      </div>;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.source == 'landing-page'}\n        hide-add-btn={this.source == 'landing-page'}\n        shadow-on-hover={true}\n        product={product}/>\n    </div>;\n  }\n\n  getApiUrl() {\n    if (this.source === 'json') {\n      return;\n    }\n    if (['offers', 'latest'].includes(this.source)) {\n      return salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n    }\n    if (['related', 'landing-page'].includes(this.source)) {\n      return salla.url.api(`products?source=${this.source}&source_value=${this.sourceValue}${this.urlPrefix}`);\n    }\n\n    try {\n      let ids: Array<number> = JSON.parse(this.sourceValue);\n      return salla.url.api(`products?source=${this.source}&source_value[]=${ids.join('&source_value[]=')}${this.urlPrefix}`);\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  componentWillLoad() {\n    if (this.source === 'json') {\n      this.productsData = JSON.parse(this.sourceValue)\n      this.isReady = true\n      return;\n    }\n    salla.api.request(this.getApiUrl(), null, 'get').then(res => {\n      this.productsData = res.data\n      this.isReady = true\n    })\n  }\n\n  render() {\n    if ((this.source == 'related' && salla.config.get('product.related_products')) || !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          type=\"carousel\"\n          block-title={this.blockTitle}\n          block-subTitle={this.subTitle}\n          display-all-url={this.displayAllUrl}\n        >\n          <div slot=\"items\">\n            {this.productsData?.map((product) =>\n              this.getItemHTML(product)\n            )}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/twilight/p-affbcb10.system.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-System.register(["./p-d9130020.system.js"],(function(e){"use strict";var t,s,r,i;return{setters:[function(e){t=e.r;s=e.h;r=e.H;i=e.g}],execute:function(){var n='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>shopping-bag</title>\n<path d="M28 10.667h-4v-2.667c0-4.412-3.588-8-8-8s-8 3.588-8 8v2.667h-4c-0.736 0-1.333 0.596-1.333 1.333v13.333c0 3.676 2.991 6.667 6.667 6.667h13.333c3.676 0 6.667-2.991 6.667-6.667v-13.333c0-0.737-0.597-1.333-1.333-1.333zM10.667 8c0-2.941 2.392-5.333 5.333-5.333s5.333 2.392 5.333 5.333v2.667h-10.667zM26.667 25.333c0 2.205-1.795 4-4 4h-13.333c-2.205 0-4-1.795-4-4v-12h2.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h10.667v2.667c0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-2.667h2.667z"></path>\n</svg>\n';var a="";var o=e("salla_products_list",function(){function e(e){var s=this;t(this,e);this.page=1;this.urlPrefix="";salla.onReady((function(){s.source=s.source||{"brands.single":"brands","product.index":"categories","product.index.latest":"latest","product.index.offers":"offers","product.index.search":"search","landing-page":"landing-page","product.index.tag":"tags"}[salla.config.get("page.slug")]||"latest";var e=s.sourceValue=s.sourceValue||s.getSourceValue();if(s.sourceValue&&["categories","brands","tags","selected"].includes(s.source)&&typeof s.sourceValue=="string"){e=JSON.parse(s.sourceValue)}s.parsedSourceValue=e;s.sourceValueIsValid=!!(s.sourceValue||["latest","offers"].includes(s.source));s.buildNextPageUrl();s.isReady=true}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.source,"]"));return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card");this.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(this.source);this.status=document.createElement("div");this.status.className="s-infinite-scroll-wrapper";this.status.innerHTML='<div class="s-infinite-scroll-status">\n        <p class="s-infinite-scroll-last infinite-scroll-last s-hidden" >'.concat(salla.lang.get("common.elements.end_of_content"),'</p>\n        <p class="s-infinite-scroll-error infinite-scroll-error s-hidden">').concat(salla.lang.get("common.elements.failed_to_load_more"),'</p>\n      </div>\n      <a href="#" class="s-infinite-scroll-btn s-button-btn">\n        <span class="s-button-loader s-button-loader-center s-infinite-scroll-btn-loader" style="display: none"></span>\n      </a>');this.btnLoader=this.status.querySelector(".s-button-loader");salla.lang.onLoaded((function(){s.status.querySelector(".s-infinite-scroll-last").innerHTML=salla.lang.get("common.elements.end_of_content");s.status.querySelector(".s-infinite-scroll-error").innerHTML=salla.lang.get("common.elements.failed_to_load_more");s.placeholderText=salla.lang.get("pages.categories.no_products")}))}e.prototype.validateLimitMaximumValue=function(e,t){if(this.limit){this.urlPrefix+="&per_page=".concat(this.limit>32?32:this.limit,"}")}};e.prototype.parseFilters=function(e,t){var s=this;this.parsedFilters=typeof e=="string"?JSON.parse(e):e;this.urlPrefix="";var r=function(e,t){if(typeof t=="string"){i.urlPrefix+="&filters[".concat(e,"]=").concat(t)}else if(Array.isArray(t)){t.forEach((function(t){s.urlPrefix+="&filters[".concat(e,"][]=").concat(t,"}")}))}};var i=this;for(var n=0,a=Object.entries(this.parsedFilters);n<a.length;n++){var o=a[n],l=o[0],c=o[1];r(l,c)}if(this.source=="categories"){this.wrapper.innerHTML="";this.init()}};e.prototype.buildNextPageUrl=function(){if(this.source==="json"){return}if(["offers","latest"].includes(this.source)){this.nextPage=salla.url.api("products?source=".concat(this.source).concat(this.urlPrefix));return}if(["search","related","landing-page"].includes(this.source)){this.nextPage=salla.url.api("products?source=".concat(this.source,"&source_value=").concat(this.parsedSourceValue).concat(this.urlPrefix));return}try{this.nextPage=salla.url.api("products?source=".concat(this.source,"&source_value[]=").concat(this.parsedSourceValue.join("&source_value[]=")).concat(this.urlPrefix))}catch(e){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(this.source,"]"));this.sourceValueIsValid=false}};e.prototype.getSourceValue=function(){if(["landing-page"].includes(this.source)){return"".concat(salla.config.get("page.id"))}else if(["categories","brands","tags"].includes(this.source)){return JSON.stringify([salla.config.get("page.id")])}return this.sourceValue};e.prototype.loading=function(e){if(e===void 0){e=true}this.btnLoader.style.display=e?"inherit":"none"};e.prototype.getItemHTML=function(e){var t=this.hasCustomComponent?"custom-salla-product-card":"salla-product-card";t=document.createElement(t);t.setAttribute("product",JSON.stringify(e));if(this.source=="landing-page"&&!this.hasCustomComponent){t.toggleAttribute("hide-add-btn",true);t.toggleAttribute("show-quantity",true);t.classList.add("s-product-card-fit-height")}t.toggleAttribute("shadow-on-hover",true);return t};e.prototype.initiateInfiniteScroll=function(){var e=this;if(!this.hasInfiniteScroll){return}this.host.insertAdjacentElement("afterend",this.status);this.infiniteScroll=salla.infiniteScroll.initiate(this.wrapper,this.wrapper,{path:function(){return e.nextPage},history:false,nextPage:this.nextPage,scrollThreshold:100},true);this.infiniteScroll.on("request",(function(){return e.loading()}));this.infiniteScroll.on("load",(function(t){return e.infiniteScroll.appendItems(e.handleResponse(t))}));this.infiniteScroll.on("error",(function(){e.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");e.loading(false)}))};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.render=function(){var e=this;if(!this.canRender()){return""}if(this.showPlaceholder){return s("div",{class:"s-products-list-placeholder"},s("span",{innerHTML:n}),s("p",null,this.placeholderText))}return s(r,{class:"s-products-list"},s("div",{class:"s-products-list-wrapper",ref:function(t){return e.wrapper=t}}))};e.prototype.componentDidLoad=function(){var e=this;if(!this.canRender()){return}if(this.source==="json"){if(!this.parsedSourceValue.length){this.showPlaceholder=true;return}this.parsedSourceValue.map((function(t){return e.wrapper.append(e.getItemHTML(t))}));return}if(this.source=="categories"){var t=window.location.search.replace("?","").split("&").map((function(e){return e.split("=")})).reduce((function(e,t){var s=t[0],r=t[1];if(s=="sort"){e[s]=r}return e}),{});if(t){this.filters=t;return}}this.init()};e.prototype.init=function(){var e=this;this.initiateInfiniteScroll();this.loading();salla.product.fetch({source:this.source,source_value:this.parsedSourceValue,filters:this.filters,limit:this.limit}).then((function(t){if(!t.data.length){e.showPlaceholder=true;e.loading(false);return}e.handleResponse(t).forEach((function(t){return e.wrapper.append(t)}))}))};e.prototype.handleResponse=function(e){var t=this;var s;this.nextPage=e.cursor?e.cursor.next:this.nextPage;this.loading(false);if(this.hasInfiniteScroll&&!this.nextPage){this.infiniteScroll.option({scrollThreshold:false,loadOnScroll:false});this.status.querySelector(".s-infinite-scroll-last").classList.remove("s-hidden")}return((s=e.data)===null||s===void 0?void 0:s.map((function(e){return t.getItemHTML(e)})))||[]};Object.defineProperty(e.prototype,"host",{get:function(){return i(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{limit:["validateLimitMaximumValue"],filters:["parseFilters"]}},enumerable:false,configurable:true});return e}());o.style=a}}}));
-//# sourceMappingURL=p-affbcb10.system.entry.js.map

package/dist/twilight/p-affbcb10.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","src/components/salla-products-list/salla-products-list.tsx"],"names":["sallaProductsListCss","SallaProductsList","exports","class_1","hostRef","_this","this","page","urlPrefix","salla","onReady","source","brands.single","product.index","product.index.latest","product.index.offers","product.index.search","landing-page","product.index.tag","config","get","parsedSourceValue","sourceValue","getSourceValue","includes","JSON","parse","sourceValueIsValid","buildNextPageUrl","isReady","logger","warn","concat","hasCustomComponent","customElements","hasInfiniteScroll","status","document","createElement","className","innerHTML","lang","btnLoader","querySelector","onLoaded","placeholderText","prototype","validateLimitMaximumValue","_newValue","_","limit","parseFilters","newValue","parsedFilters","key","value","this_1","Array","isArray","forEach","item","_i","_b","Object","entries","length","_c","wrapper","init","nextPage","url","api","join","e","stringify","loading","isLoading","style","display","getItemHTML","product","customComponent","setAttribute","toggleAttribute","classList","add","initiateInfiniteScroll","host","insertAdjacentElement","infiniteScroll","initiate","path","history","scrollThreshold","on","response","appendItems","handleResponse","remove","canRender","render","showPlaceholder","h","class","ShoppingBag","Host","ref","componentDidLoad","map","append","filters","window","location","search","replace","split","reduce","acc","fetch","source_value","then","res","data","card","cursor","next","option","loadOnScroll","_a"],"mappings":"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","sourcesContent":["\n","import { Component, Host, h, Prop, State, Element, Watch } from '@stencil/core';\nimport ShoppingBag from '../../assets/svg/shopping-bag.svg';\n\n@Component({\n  tag: 'salla-products-list',\n  styleUrl: 'salla-products-list.scss'\n})\nexport class SallaProductsList {\n  constructor() {\n    // this.source = this.source || 'latest';\n    salla.onReady(() => {\n      this.source = this.source || {\n        'brands.single': 'brands',\n        'product.index': 'categories',\n        'product.index.latest': 'latest',\n        'product.index.offers': 'offers',\n        'product.index.search': 'search',\n        'landing-page': 'landing-page',\n        'product.index.tag': 'tags',\n      }[salla.config.get('page.slug')] || 'latest';\n\n\n      let parsedSourceValue = this.sourceValue = this.sourceValue || this.getSourceValue();\n\n      if (this.sourceValue && ['categories', 'brands', 'tags', 'selected'].includes(this.source) && typeof this.sourceValue == 'string') {\n        parsedSourceValue = JSON.parse(this.sourceValue);\n      }\n      this.parsedSourceValue = parsedSourceValue;\n      this.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.source));\n      this.buildNextPageUrl();\n      this.isReady = true;\n    });\n\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.source}]`);\n      return;\n    }\n    this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n\n    this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.source);\n    // Language\n    //enhance\n    this.status = document.createElement('div');\n    this.status.className = 's-infinite-scroll-wrapper';\n    this.status.innerHTML = `<div class=\"s-infinite-scroll-status\">\n        <p class=\"s-infinite-scroll-last infinite-scroll-last s-hidden\" >${salla.lang.get('common.elements.end_of_content')}</p>\n        <p class=\"s-infinite-scroll-error infinite-scroll-error s-hidden\">${salla.lang.get('common.elements.failed_to_load_more')}</p>\n      </div>\n      <a href=\"#\" class=\"s-infinite-scroll-btn s-button-btn\">\n        <span class=\"s-button-loader s-button-loader-center s-infinite-scroll-btn-loader\" style=\"display: none\"></span>\n      </a>`;\n    this.btnLoader = this.status.querySelector('.s-button-loader');\n    salla.lang.onLoaded(() => {\n      this.status.querySelector('.s-infinite-scroll-last').innerHTML = salla.lang.get('common.elements.end_of_content');\n      this.status.querySelector('.s-infinite-scroll-error').innerHTML = salla.lang.get('common.elements.failed_to_load_more');\n      this.placeholderText = salla.lang.get('pages.categories.no_products');\n    });\n  }\n\n  private readonly status: HTMLDivElement;\n  private btnLoader: HTMLAnchorElement;\n  @Element() host: HTMLElement;\n  private wrapper: any;\n  private infiniteScroll: any;\n  /**\n   * The source of the products list\n   * @type {string}\n   * */\n  @Prop({\n    reflect: true,\n    mutable: true\n  }) source: 'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page';\n\n  /**\n   * The source value, cloud be different values as following:\n   * - array of ids when `source` in ['categories', 'brands', 'tags', 'selected']\n   * - keyword when `source` = 'search'\n   * - products payload when `source` = 'json'\n   * - product_id when `source` = 'related'\n   *\n   * @type {string}\n   * */\n  @Prop({ mutable: true }) sourceValue: any;\n\n  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({ mutable: true }) limit: number;\n\n  /**\n   * Filter parameters. JSON STRING or object\n   */\n  @Prop({ mutable: true }) filters: string | object;\n\n  @Watch('limit')\n  validateLimitMaximumValue(_newValue: number, _) {\n    if (this.limit) {\n      this.urlPrefix += `&per_page=${this.limit > 32 ? 32 : this.limit}}`;\n    }\n  }\n\n  @Watch('filters')\n  parseFilters(newValue: string | object, _) {\n    this.parsedFilters = typeof newValue == 'string' ? JSON.parse(newValue) : newValue\n    this.urlPrefix = '';\n\n    for (const [key, value] of Object.entries(this.parsedFilters)) {\n      if (typeof value == \"string\") {\n        this.urlPrefix += `&filters[${key}]=${value}`;\n      }\n      else if (Array.isArray(value)) {\n        (value as any).forEach(item => {\n          this.urlPrefix += `&filters[${key}][]=${item}}`\n        })\n      }\n    }\n    // reset page products\n    if (this.source == 'categories') {\n      this.wrapper.innerHTML = '';\n      this.init()\n    }\n  }\n\n  // State\n  @State() page: number = 1;\n  @State() nextPage: string;\n  @State() hasInfiniteScroll: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() placeholderText: string;\n  @State() isReady: boolean;\n  @State() showPlaceholder: boolean;\n  @State() urlPrefix: string = '';\n  @State() parsedSourceValue: any;\n  @State() parsedFilters: any;\n\n\n  private buildNextPageUrl() {\n    if (this.source === 'json') {\n      return;\n    }\n    if (['offers', 'latest'].includes(this.source)) {\n      this.nextPage = salla.url.api(`products?source=${this.source}${this.urlPrefix}`);\n      return;\n    }\n\n    if (['search', 'related', 'landing-page'].includes(this.source)) {\n      this.nextPage = salla.url.api(`products?source=${this.source}&source_value=${this.parsedSourceValue}${this.urlPrefix}`);\n      return;\n    }\n\n    try {\n      this.nextPage = salla.url.api(`products?source=${this.source}&source_value[]=${this.parsedSourceValue.join('&source_value[]=')}${this.urlPrefix}`);\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${this.source}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n\n  private getSourceValue() {\n    if (['landing-page'].includes(this.source)) {\n      return `${salla.config.get('page.id')}`\n    } else if (['categories', 'brands', 'tags'].includes(this.source)) {\n      return JSON.stringify([salla.config.get('page.id')])\n    }\n    return this.sourceValue;\n  }\n\n  private loading(isLoading = true) {\n    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n  }\n\n  private getItemHTML(product) {\n    let customComponent: string | HTMLElement = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n    customComponent = document.createElement(customComponent);\n    customComponent.setAttribute('product', JSON.stringify(product));\n    if (this.source == 'landing-page' && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('hide-add-btn', true);\n      customComponent.toggleAttribute('show-quantity', true);\n      customComponent.classList.add('s-product-card-fit-height');\n    }\n    customComponent.toggleAttribute('shadow-on-hover', true);\n    return customComponent;\n  }\n\n  private initiateInfiniteScroll() {\n    if (!this.hasInfiniteScroll) {\n      return;\n    }\n\n    this.host.insertAdjacentElement('afterend', this.status);\n    this.infiniteScroll = salla.infiniteScroll.initiate(this.wrapper, this.wrapper, {\n      path: () => this.nextPage,\n      history: false,\n      nextPage: this.nextPage,\n      scrollThreshold: 100,\n    }, /* infinite via api*/true);\n    this.infiniteScroll.on('request', () => this.loading())\n    this.infiniteScroll.on('load', response => this.infiniteScroll.appendItems(this.handleResponse(response)))\n    this.infiniteScroll.on('error', () => {\n      this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden')\n      this.loading(false);\n    });\n  }\n\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  render() {\n    if (!this.canRender()) {\n      return '';\n    }\n    if (this.showPlaceholder) {\n      return <div class=\"s-products-list-placeholder\">\n        <span innerHTML={ShoppingBag}></span>\n        <p>{this.placeholderText}</p>\n      </div>;\n    }\n    return (\n      <Host class=\"s-products-list\">\n        <div class=\"s-products-list-wrapper\" ref={wrapper => this.wrapper = wrapper} />\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.canRender()) {\n      return;\n    }\n    if (this.source === 'json') {\n      if (!this.parsedSourceValue.length) {\n        this.showPlaceholder = true;\n        return;\n      }\n      this.parsedSourceValue.map(product => this.wrapper.append(this.getItemHTML(product)));\n      return;\n    }\n    if (this.source == 'categories') {\n      // check if there is a filters in the url\n      const filters = window.location.search\n        .replace('?', '')\n        .split('&')\n        .map(item => item.split('='))\n        .reduce((acc, [key, value]) => {\n          if (key == 'sort') {\n            acc[key] = value;\n          }\n          return acc;\n        }, {});\n      if (filters) {\n        this.filters = filters;\n        return;\n      }\n    }\n    this.init();\n  }\n\n  private init() {\n    this.initiateInfiniteScroll();\n    this.loading();\n    salla.product.fetch({ source: this.source, source_value: this.parsedSourceValue, filters: this.filters, limit: this.limit })\n      .then(res => {\n        if (!res.data.length) {\n          this.showPlaceholder = true;\n          this.loading(false);\n          return;\n        }\n        this.handleResponse(res).forEach(card => this.wrapper.append(card));\n      })\n  }\n  private handleResponse(response): Array<HTMLElement> {\n    //💡 when source is related, cursor will not be existed\n    this.nextPage = response.cursor ? response.cursor.next : this.nextPage;\n    this.loading(false);\n    if (this.hasInfiniteScroll && !this.nextPage) {\n      this.infiniteScroll.option({ scrollThreshold: false, loadOnScroll: false });\n      this.status.querySelector('.s-infinite-scroll-last').classList.remove('s-hidden');\n    }\n    return response.data?.map(product => this.getItemHTML(product)) || [];\n  }\n}\n"]}