@salla.sa/twilight-components 2.11.110 → 2.11.112

package/dist/components/salla-price-range2.js

@@ -9,84 +9,154 @@ const SallaPriceRange = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   constructor() {
     super();
     this.__registerHost();
-    this.minPriceSelected = createEvent(this, "minPriceSelected", 7);
-    this.maxPriceSelected = createEvent(this, "maxPriceSelected", 7);
+    this.changed = createEvent(this, "changed", 7);
     this.minPrice = 1000;
     this.maxPrice = 5000;
+    this.option = undefined;
+    this.filtersData = undefined;
     this.min = 0;
     this.max = 10000;
     this.minthumb = 0;
     this.maxthumb = 0;
+    this.priceOptions = undefined;
+    this.generatePriceOptions();
   }
-  componentWillLoad() {
-    this.minTrigger();
-    this.maxTrigger();
+  async reset() {
+    var _a, _b;
+    //@ts-ignore
+    this.minInput.value = `${((_b = (_a = this.option) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.min) || 0}`;
+    this.maxInput.value = `${this.max}`;
   }
-  async minTrigger(event = null) {
-    let value = event ? event.target.value * 1 : null;
-    this.minInputValidation(value);
-    this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;
-    this.changeLeftHandle();
-    this.isReady && this.minPriceSelected.emit(value);
+  generatePriceOptions() {
+    const MAX_PRICE = this.max;
+    let option1 = Math.floor(MAX_PRICE / 100);
+    if (option1 < 1) {
+      option1 = Math.floor(MAX_PRICE / 10);
+    }
+    let option2 = Math.floor(MAX_PRICE / 2);
+    let option3 = Math.floor((MAX_PRICE / 3) * 2);
+    this.priceOptions = [option1, option2, option3];
+    // to be removed
+    console.log(`Price options for max price ${MAX_PRICE}: ${this.priceOptions.join(', ')}`);
+  }
+  getPriceLabel(price) {
+    if (price == Math.floor(this.max / 100)) {
+      return `اقل من ${salla.money(price)}`;
+    }
+    else if (price == Math.floor(this.max / 2)) {
+      return `${salla.money(this.priceOptions[0])} الى ${salla.money(this.priceOptions[2])}`;
+    }
+    else {
+      return `أكثر من ${salla.money(price)}`;
+    }
+  }
+  handleMinMaxPrice(event, option) {
+    const [firstOption, secondOption, thirdOption] = this.priceOptions;
+    switch (option) {
+      case firstOption:
+        this.minPrice = 0;
+        this.maxPrice = firstOption;
+        break;
+      case secondOption:
+        this.minPrice = firstOption;
+        this.maxPrice = thirdOption;
+        break;
+      case thirdOption:
+        this.minPrice = thirdOption;
+        this.maxPrice = this.max;
+        break;
+      default:
+        throw new Error(`Invalid price option: ${option}`);
+    }
+    // Update the input values
+    this.minInput.value = `${this.minPrice}`;
+    this.maxInput.value = `${this.maxPrice}`;
+    this.changedEventHandler(event);
   }
-  async maxTrigger(event = null) {
+  async changedEventHandler(event, isMin = false) {
     let value = event ? event.target.value * 1 : null;
-    this.maxInputValidation(value);
-    this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);
-    this.changeRightHandle();
-    this.isReady && this.maxPriceSelected.emit(value);
+    if (isMin) {
+      this.minInputValidation(value);
+      this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;
+    }
+    else {
+      this.maxInputValidation(value);
+      this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);
+    }
+    this.isReady && this.changed.emit({
+      event: event,
+      option: this.option,
+      value: { max: this.maxPrice, min: this.minPrice }
+    });
   }
-  async minInputValidation(value) {
-    if (value && (value > this.max || value > this.maxPrice))
+  minInputValidation(value) {
+    if (value && (value > this.max || value > this.maxPrice)) {
+      // this.minPrice = this.maxPrice;
       return;
-    else if (value < this.min) {
+    }
+    if (value < this.min) {
       this.minPrice = this.min;
+      return;
     }
-    else {
-      value && (this.minPrice = value);
+    if (value) {
+      this.minPrice = value;
     }
   }
-  async maxInputValidation(value) {
-    if (value && (value < this.min || value < this.minPrice))
+  maxInputValidation(value) {
+    if (value && (value < this.min || value < this.minPrice)) {
+      // this.maxPrice = this.minPrice;
       return;
-    else if (value > this.max) {
+    }
+    if (value > this.max) {
       this.maxPrice = this.max;
+      return;
     }
-    else {
-      value && (this.maxPrice = value);
+    if (value) {
+      this.maxPrice = value;
     }
   }
-  async changeRightHandle() {
-    this.rightHandle && (this.rightHandle.style.right = `${this.maxthumb}%`);
-    this.activeBar && (this.activeBar.style.right = `${this.maxthumb}%`);
-  }
-  async changeLeftHandle() {
-    this.leftHandle && (this.leftHandle.style.left = `${this.minthumb}%`);
-    this.activeBar && (this.activeBar.style.left = `${this.minthumb}%`);
+  isChecked(option) {
+    if (option == Math.floor(this.max / 100)) {
+      return this.minPrice == 0 && this.maxPrice == option;
+    }
+    if (option == Math.floor(this.max / 2)) {
+      return this.minPrice == this.priceOptions[0] && this.maxPrice == this.priceOptions[2];
+    }
+    if (option == Math.floor((this.max / 3) * 2)) {
+      return this.minPrice == option && this.maxPrice == this.max;
+    }
   }
   render() {
-    return (h(Host, null, h("div", { style: { direction: 'ltr' }, class: "flex justify-center items-center" }, h("div", { class: "relative max-w-xl w-full" }, h("div", { class: "rtl-range-slider" }, h("input", { type: "range", step: "100", min: this.min, max: this.max, onInput: (event) => this.minTrigger(event), value: this.minPrice, class: "s-price-range-input" }), h("input", { type: "range", step: "100", min: this.min, max: this.max, onInput: (event) => this.maxTrigger(event), value: this.maxPrice, class: "s-price-range-input" }), h("div", { class: "s-price-range-bar-container" }, h("div", { class: "s-price-range-bar" }), h("div", { class: "s-price-range-active-bar", ref: (el) => this.activeBar = el }), h("div", { class: "s-price-range-left-handle", ref: (el) => this.leftHandle = el }), h("div", { class: "s-price-range-right-handle", ref: (el) => this.rightHandle = el }))), h("div", { class: "s-price-range-inputs" }, h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", onInput: (event) => this.minTrigger(event), value: this.minPrice, class: "s-price-range-number-input" })), h("div", { class: "s-price-range-gray-text" }, " - "), h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", onInput: (event) => this.maxTrigger(event), value: this.maxPrice, class: "s-price-range-number-input", placeholder: "0.00", "aria-describedby": "price-currency" })))))));
+    return (h(Host, null, this.priceOptions && this.priceOptions.map((option, index) => {
+      return h("label", { class: "s-filters-label", htmlFor: `${option}-${index}` }, h("input", { id: `${option}-${index}`, name: "price", type: "radio", checked: this.isChecked(option), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, option) }), this.getPriceLabel(option));
+    }), h("div", { class: "flex justify-center items-center" }, h("div", { class: "relative max-w-xl w-full" }, h("div", { class: "s-price-range-inputs" }, h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", ref: el => this.minInput = el, onInput: (event) => this.changedEventHandler(event, true),
+      // value={this.minPrice}
+      placeholder: "\u0645\u0646", class: "s-price-range-number-input" })), h("div", { class: "s-price-range-gray-text" }, " -"), h("div", { class: "s-price-range-relative" }, h("div", { class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { type: "number", maxlength: "5", placeholder: "\u0627\u0644\u0649", ref: el => this.maxInput = el, onInput: (event) => this.changedEventHandler(event),
+      // value={this.maxPrice}
+      class: "s-price-range-number-input", "aria-describedby": "price-currency" })))))));
   }
   componentDidLoad() {
-    // this.max=this.maxPrice;
-    this.changeLeftHandle();
-    this.changeRightHandle();
+    var _a;
+    if (this.filtersData && ((_a = this.filtersData) === null || _a === void 0 ? void 0 : _a.price)) {
+      this.minPrice = this.filtersData.price.min;
+      this.maxPrice = this.filtersData.price.max;
+      this.maxInput.value = `${this.maxPrice}`;
+      this.minInput.value = `${this.minPrice}`;
+    }
     this.isReady = true;
   }
   static get style() { return sallaPriceRangeCss; }
 }, [0, "salla-price-range", {
     "minPrice": [1026, "min-price"],
     "maxPrice": [1026, "max-price"],
+    "option": [16],
+    "filtersData": [520, "filters-data"],
     "min": [32],
     "max": [32],
     "minthumb": [32],
     "maxthumb": [32],
-    "minTrigger": [64],
-    "maxTrigger": [64],
-    "minInputValidation": [64],
-    "maxInputValidation": [64],
-    "changeRightHandle": [64],
-    "changeLeftHandle": [64]
+    "priceOptions": [32],
+    "reset": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/salla-price-range2.js.map

@@ -1 +1 @@
-{"file":"salla-price-range2.js","mappings":"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","names":[],"sources":["./src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","./src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n  .rtl-range-slider {\n      transform: rotateY(180deg);\n  }\n\n  .rtl-range-numbers{\n      flex-direction: row-reverse;\n  }\n\n  .form-select, select{\n      background-position: left 0.5rem center;\n      padding-right: 12px;\n  }   \n\n  // divide\n.menu-divide {\n  li {\n      &:not(:last-child) {\n          &:after {\n              left: 0;\n              right: auto;\n          }\n      }\n  }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 24px;\n  height: 24px;\n  -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n  background-size: 80%;\n}","import {Component, Host, h, Method, State, Prop, Event, EventEmitter} from '@stencil/core';\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  @Prop({mutable: true}) minPrice = 1000;\n  @Prop({mutable: true}) maxPrice = 5000;\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() minthumb = 0;\n  @State() maxthumb = 0;\n\n  @Event() minPriceSelected: EventEmitter<number>;\n  @Event() maxPriceSelected: EventEmitter<number>;\n\n  isReady: Boolean;\n  rightHandle: HTMLDivElement;\n  leftHandle: HTMLDivElement;\n  activeBar: HTMLDivElement;\n\n  componentWillLoad() {\n    this.minTrigger();\n    this.maxTrigger();\n  }\n\n  @Method()\n  async minTrigger(event = null) {\n    let value = event ? event.target.value * 1 : null\n    this.minInputValidation(value);\n    this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;\n    this.changeLeftHandle()\n    \n    this.isReady && this.minPriceSelected.emit(value);\n  }\n\n  @Method()\n  async maxTrigger(event = null) {\n    let value = event ? event.target.value * 1 : null\n    this.maxInputValidation(value)\n    this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);\n    this.changeRightHandle()\n   \n    this.isReady && this.maxPriceSelected.emit(value);\n  }\n\n  @Method()\n  async minInputValidation(value) {\n    if (value && (value > this.max || value > this.maxPrice)) return;\n    else if (value < this.min) {\n      this.minPrice = this.min;\n    } else {\n      value && (this.minPrice = value)\n    }\n  }\n\n  @Method()\n  async maxInputValidation(value) {\n    if (value && (value < this.min || value < this.minPrice)) return;\n    else if (value > this.max) {\n      this.maxPrice = this.max;\n    } else {\n      value && (this.maxPrice = value)\n    }\n  }\n\n  @Method()\n  async changeRightHandle() {\n    this.rightHandle && (this.rightHandle.style.right = `${this.maxthumb}%`);\n    this.activeBar && (this.activeBar.style.right = `${this.maxthumb}%`);\n  }\n\n  @Method()\n  async changeLeftHandle() {\n    this.leftHandle && (this.leftHandle.style.left = `${this.minthumb}%`);\n    this.activeBar && (this.activeBar.style.left = `${this.minthumb}%`);\n  }\n\n\n  render() {\n    return (\n      <Host>\n        <div style={{direction: 'ltr'}} class=\"flex justify-center items-center\">\n          <div class=\"relative max-w-xl w-full\">\n            <div class=\"rtl-range-slider\">\n              <input\n                type=\"range\"\n                step=\"100\"\n                min={this.min} max={this.max}\n                onInput={(event) => this.minTrigger(event)}\n                value={this.minPrice}\n                class=\"s-price-range-input\"\n              />\n\n              <input\n                type=\"range\"\n                step=\"100\"\n                min={this.min}\n                max={this.max}\n                onInput={(event) => this.maxTrigger(event)}\n                value={this.maxPrice}\n                class=\"s-price-range-input\"\n              />\n\n              <div class=\"s-price-range-bar-container\">\n                <div class=\"s-price-range-bar\"/>\n                <div class=\"s-price-range-active-bar\" ref={(el) => this.activeBar = el}/>\n                <div class=\"s-price-range-left-handle\" ref={(el) => this.leftHandle = el}/>\n                <div class=\"s-price-range-right-handle\" ref={(el) => this.rightHandle = el}/>\n              </div>\n\n            </div>\n\n\n            <div class=\"s-price-range-inputs\">\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  onInput={(event) => this.minTrigger(event)}\n                  value={this.minPrice}\n                  class=\"s-price-range-number-input\"\n                />\n              </div>\n\n              <div class=\"s-price-range-gray-text\"> - </div>\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input type=\"number\" maxlength=\"5\"\n                       onInput={(event) => this.maxTrigger(event)}\n                       value={this.maxPrice}\n                       class=\"s-price-range-number-input\" placeholder=\"0.00\" aria-describedby=\"price-currency\"/>\n              </div>\n\n            </div>\n\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    // this.max=this.maxPrice;\n    this.changeLeftHandle()\n    this.changeRightHandle()\n    this.isReady = true;\n  }\n}\n"],"version":3}
+{"file":"salla-price-range2.js","mappings":"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","names":[],"sources":["./src/components/salla-price-range/salla-price-range.scss?tag=salla-price-range","./src/components/salla-price-range/salla-price-range.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n\n.rtl, [dir=\"rtl\"] {\n  .rtl-range-slider {\n      transform: rotateY(180deg);\n  }\n\n  .rtl-range-numbers{\n      flex-direction: row-reverse;\n  }\n\n  .form-select, select{\n      background-position: left 0.5rem center;\n      padding-right: 12px;\n  }   \n\n  // divide\n.menu-divide {\n  li {\n      &:not(:last-child) {\n          &:after {\n              left: 0;\n              right: auto;\n          }\n      }\n  }\n}\n}\n\ninput[type=range]::-webkit-slider-thumb {\n  pointer-events: all;\n  width: 24px;\n  height: 24px;\n  -webkit-appearance: none;\n}\n\n[type='checkbox']:checked{\n  background-size: 80%;\n}","import { Component, Host, h, State, Prop, Event, Method } from '@stencil/core';\nimport { Filter } from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  constructor() {\n    this.generatePriceOptions();\n  }\n  @Prop({ mutable: true }) minPrice = 1000;\n  @Prop({ mutable: true }) maxPrice = 5000;\n  @Prop({ reflect: true }) option: Filter;\n  @Prop({ reflect: true }) filtersData: any;\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() minthumb = 0;\n  @State() maxthumb = 0;\n  @State() priceOptions: any;\n\n  @Event() changed: any;\n\n  isReady: Boolean;\n  rightHandle: HTMLDivElement;\n  leftHandle: HTMLDivElement;\n  activeBar: HTMLDivElement;\n  minInput: HTMLInputElement;\n  maxInput: HTMLInputElement;\n\n  @Method()\n  async reset() {\n    //@ts-ignore\n    this.minInput.value = `${this.option?.values?.min || 0}`;\n    this.maxInput.value = `${this.max}`;\n  }\n\n  private generatePriceOptions() {\n    const MAX_PRICE = this.max;\n    let option1 = Math.floor(MAX_PRICE / 100);\n    if (option1 < 1) {\n      option1 = Math.floor(MAX_PRICE / 10);\n    }\n    let option2 = Math.floor(MAX_PRICE / 2);\n    let option3 = Math.floor((MAX_PRICE / 3) * 2);\n    this.priceOptions = [option1, option2, option3];\n\n    // to be removed\n    console.log(`Price options for max price ${MAX_PRICE}: ${this.priceOptions.join(', ')}`);\n  }\n  private getPriceLabel(price) {\n    if (price == Math.floor(this.max / 100)) {\n      return `اقل من ${salla.money(price)}`;\n    } else if (price == Math.floor(this.max / 2)) {\n      return `${salla.money(this.priceOptions[0])} الى ${salla.money(this.priceOptions[2])}`;\n    } else {\n      return `أكثر من ${salla.money(price)}`;\n    }\n  }\n\n  private handleMinMaxPrice(event: Event, option: string): void {\n    const [firstOption, secondOption, thirdOption] = this.priceOptions;\n    switch (option) {\n      case firstOption:\n        this.minPrice = 0;\n        this.maxPrice = firstOption;\n        break;\n      case secondOption:\n        this.minPrice = firstOption;\n        this.maxPrice = thirdOption;\n        break;\n      case thirdOption:\n        this.minPrice = thirdOption;\n        this.maxPrice = this.max;\n        break;\n      default:\n        throw new Error(`Invalid price option: ${option}`);\n    }\n\n    // Update the input values\n    this.minInput.value = `${this.minPrice}`;\n    this.maxInput.value = `${this.maxPrice}`;\n    this.changedEventHandler(event);\n  }\n\n  private async changedEventHandler(event, isMin = false) {\n\n    let value = event ? event.target.value * 1 : null\n    if (isMin) {\n      this.minInputValidation(value);\n      this.minthumb = ((this.minPrice - this.min) / (this.max - this.min)) * 100;\n    } else {\n      this.maxInputValidation(value)\n      this.maxthumb = 100 - (((this.maxPrice - this.min) / (this.max - this.min)) * 100);\n    }\n\n\n    this.isReady && this.changed.emit({\n      event: event,\n      option: this.option,\n      value: { max: this.maxPrice, min: this.minPrice }\n    })\n  }\n\n\n  minInputValidation(value) {\n    if (value && (value > this.max || value > this.maxPrice)) {\n      // this.minPrice = this.maxPrice;\n      return;\n    }\n\n    if (value < this.min) {\n      this.minPrice = this.min;\n      return;\n    }\n\n    if (value) {\n      this.minPrice = value;\n    }\n  }\n\n  maxInputValidation(value) {\n    if (value && (value < this.min || value < this.minPrice)) {\n      // this.maxPrice = this.minPrice;\n      return;\n    }\n    if (value > this.max) {\n      this.maxPrice = this.max;\n      return;\n    }\n\n    if (value) {\n      this.maxPrice = value;\n    }\n  }\n  private isChecked(option) {\n    if (option == Math.floor(this.max / 100)) {\n      return this.minPrice == 0 && this.maxPrice == option;\n    }\n    if (option == Math.floor(this.max / 2)) {\n      return this.minPrice == this.priceOptions[0] && this.maxPrice == this.priceOptions[2];\n    }\n    if (option == Math.floor((this.max / 3) * 2)) {\n\n      return this.minPrice == option && this.maxPrice == this.max;\n    }\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {\n          this.priceOptions && this.priceOptions.map((option, index) => {\n            return <label class=\"s-filters-label\" htmlFor={`${option}-${index}`}>\n              <input\n                id={`${option}-${index}`}\n                name=\"price\"\n                type=\"radio\"\n                checked={this.isChecked(option)}\n                class=\"s-filters-radio\"\n                onChange={e => this.handleMinMaxPrice(e, option)}\n              />\n              {this.getPriceLabel(option)}\n            </label>\n          })\n        }\n\n\n        <div class=\"flex justify-center items-center\">\n          <div class=\"relative max-w-xl w-full\">\n            <div class=\"s-price-range-inputs\">\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input\n                  type=\"number\"\n                  maxlength=\"5\"\n                  ref={el => this.minInput = el}\n                  onInput={(event) => this.changedEventHandler(event, true)}\n                  // value={this.minPrice}\n                  placeholder=\"من\"\n                  class=\"s-price-range-number-input\"\n                />\n              </div>\n\n              <div class=\"s-price-range-gray-text\"> -</div>\n              <div class=\"s-price-range-relative\">\n                <div class=\"s-price-range-currency\"> {salla.config.currency().symbol}</div>\n                <input type=\"number\" maxlength=\"5\"\n                  placeholder=\"الى\"\n                  ref={el => this.maxInput = el}\n                  onInput={(event) => this.changedEventHandler(event)}\n                  // value={this.maxPrice}\n                  class=\"s-price-range-number-input\" aria-describedby=\"price-currency\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (this.filtersData && this.filtersData?.price) {\n      this.minPrice = this.filtersData.price.min;\n      this.maxPrice = this.filtersData.price.max;\n      this.maxInput.value = `${this.maxPrice}`;\n      this.minInput.value = `${this.minPrice}`;\n    }\n    this.isReady = true;\n  }\n}\n"],"version":3}

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

@@ -32,10 +32,21 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     this.isReady = undefined;
     this.showPlaceholder = undefined;
     this.parsedFilters = undefined;
+  }
+  connectedCallback() {
     salla.onReady(() => {
       this.hasCustomComponent = !!customElements.get('custom-salla-product-card');
       this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
       this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.getSource());
+      try {
+        let searchParams = new URLSearchParams(window.location.search);
+        this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
+        let filters = searchParams.get('filters');
+        this.parsedFilters = filters ? JSON.parse(decodeURIComponent(filters)) : {};
+      }
+      catch (e) {
+        salla.logger.warn('failed to get filters from url', e.message);
+      }
       this.buildNextPageUrl();
       this.createStatusDom();
       this.isReady = true;
@@ -46,22 +57,12 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     }
     salla.event.on('salla-filters::changed', filters => this.setFilters(filters));
   }
-  connectedCallback() {
-    try {
-      let searchParams = new URLSearchParams(window.location.search);
-      this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
-      let filters = searchParams.get('filters');
-      this.parsedFilters = filters ? JSON.parse(decodeURIComponent(filters)) : {};
-    }
-    catch (e) {
-      salla.logger.warn('failed to get filters from url', e.message);
-    }
-  }
   async setFilters(filters) {
     this.parsedFilters = filters;
     return this.reload();
   }
   async reload() {
+    salla.infiniteScroll.destroy(this.infiniteScroll);
     this.buildNextPageUrl();
     this.wrapper.innerHTML = '';
     this.init();
@@ -100,52 +101,53 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.placeholderText = salla.lang.get('pages.categories.no_products');
     });
   }
+  initBaseNextPageUrl(source) {
+    this.nextPage = salla.url.api(`products?source=${source}`);
+    if (this.limit) {
+      this.nextPage += `&per_page=${this.limit > 32 ? 32 : this.limit}`;
+    }
+    if (this.sortBy) {
+      this.nextPage += `&sort=${this.sortBy}`;
+    }
+    // if (!this.isFilterable()) {
+    //   return this.nextPage;
+    // }
+    this.nextPage += '&filterable=1';
+    for (const [key, value] of Object.entries(this.parsedFilters || {})) {
+      if (["string", "number"].includes(typeof value)) {
+        this.nextPage += `&filters[${key}]=${value}`;
+      }
+      else if (Array.isArray(value)) {
+        value.forEach(item => this.nextPage += `&filters[${key}][]=${item}`);
+      }
+      else if (typeof value === 'object') {
+        for (const [k, v] of Object.entries(value)) {
+          this.nextPage += `&filters[${key}][${k}]=${v}`;
+        }
+      }
+    }
+  }
   buildNextPageUrl() {
     let source = this.getSource();
     if (source === 'json') {
       return;
     }
-    let urlPrefix = this.getUrlPrefix();
+    this.initBaseNextPageUrl(source);
     if (this.isSourceWithoutValue()) {
-      this.nextPage = salla.url.api(`products?source=${source}${urlPrefix}`);
       return;
     }
     if (['search', 'related', 'landing-page'].includes(source)) {
-      this.nextPage = salla.url.api(`products?source=${source}&source_value=${this.getSourceValue()}${urlPrefix}`);
+      this.nextPage += `&source_value=${this.getSourceValue()}`;
       return;
     }
     try {
-      this.nextPage = salla.url.api(`products?source=${source}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${urlPrefix}`);
+      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;
     }
   }
-  getUrlPrefix() {
-    let urlPrefix = '';
-    if (this.limit) {
-      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;
-    }
-    if (this.sortBy) {
-      urlPrefix = `&sort=${this.sortBy}`;
-    }
-    if (!this.isFilterable()) {
-      return urlPrefix;
-    }
-    urlPrefix += '&filterable=1';
-    for (const [key, value] of Object.entries(this.parsedFilters || {})) {
-      if (typeof value == "string") {
-        urlPrefix += `&filters[${key}]=${value}`;
-      }
-      else if (Array.isArray(value)) {
-        value.forEach(item => {
-          urlPrefix += `&filters[${key}][]=${item}}`;
-        });
-      }
-    }
-    return urlPrefix;
-  }
   getSource() {
     return {
       'brands.single': 'brands',
@@ -195,10 +197,25 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     }
     if (this.horizontalCards && !this.hasCustomComponent) {
       customComponent.toggleAttribute('horizontal', true);
+      customComponent.toggleAttribute('shadow-on-hover', true);
     }
-    customComponent.toggleAttribute('shadow-on-hover', true);
     return customComponent;
   }
+  fetchProducts() {
+    salla.product.fetch({
+      source: this.getSource(),
+      source_value: this.getSourceValue(),
+      limit: this.limit
+    })
+      .then(res => {
+      if (!res.data.length) {
+        this.showPlaceholder = true;
+        this.loading(false);
+        return;
+      }
+      this.handleResponse(res).forEach(card => this.wrapper.append(card));
+    });
+  }
   initiateInfiniteScroll() {
     if (!this.hasInfiniteScroll) {
       return;
@@ -211,11 +228,27 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       scrollThreshold: 100,
     }, /* infinite via api*/ true);
     this.infiniteScroll.on('request', () => this.loading());
-    this.infiniteScroll.on('load', response => this.infiniteScroll.appendItems(this.handleResponse(response)));
+    this.infiniteScroll.on('load', response => {
+      var _a;
+      if (!((_a = response.data) === null || _a === void 0 ? void 0 : _a.length)) {
+        this.showPlaceholder = true;
+        salla.infiniteScroll.destroy(this.infiniteScroll);
+        this.loading(false);
+        return;
+      }
+      else {
+        this.showPlaceholder = false;
+      }
+      this.infiniteScroll.appendItems(this.handleResponse(response));
+      if (this.infiniteScroll.pageIndex == 2) {
+        this.animateItems();
+      }
+    });
     this.infiniteScroll.on('error', () => {
       this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden');
       this.loading(false);
     });
+    salla.onReady(() => salla.infiniteScroll.loadNextPage(this.infiniteScroll));
   }
   canRender() {
     return this.sourceValueIsValid && this.isReady;
@@ -238,6 +271,7 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
     if (!this.canRender()) {
       return;
     }
+    // Handle json source
     if (this.getSource() === 'json') {
       if (!this.getSourceValue().length) {
         this.showPlaceholder = true;
@@ -246,34 +280,26 @@ const SallaProductsList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLE
       this.getSourceValue().map(product => this.wrapper.append(this.getItemHTML(product)));
       return;
     }
+    // Handle selected source
+    if (this.getSource() === 'selected') {
+      if (!this.getSourceValue().length) {
+        this.showPlaceholder = true;
+        return;
+      }
+      this.fetchProducts();
+      return;
+    }
     this.init();
   }
   init() {
     this.initiateInfiniteScroll();
     this.loading();
-    salla.product.fetch({
-      source: this.getSource(),
-      source_value: this.getSourceValue(),
-      filters: this.parsedFilters,
-      limit: this.limit,
-      filterable: this.isFilterable() ? 1 : 0,
-      sort: this.sortBy,
-    })
-      .then(res => {
-      var _a;
-      if (!((_a = res.data) === null || _a === void 0 ? void 0 : _a.length)) {
-        this.showPlaceholder = true;
-        this.loading(false);
-        return;
-      }
-      this.handleResponse(res).forEach(card => this.wrapper.append(card));
-      this.animateItems();
-    });
   }
   handleResponse(response) {
     var _a;
     //💡 when source is related, cursor will not be existed
     if (response.filters && this.isFilterable()) {
+      this.filtersResults = true;
       salla.event.emit('filters::fetched', { filters: response.filters });
     }
     else if (this.isFilterable()) {

package/dist/components/salla-products-list.js.map

@@ -1 +1 @@
-{"file":"salla-products-list.js","mappings":"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","names":["SallaProductsList"],"sources":["./src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","./src/components/salla-products-list/salla-products-list.tsx"],"sourcesContent":["\n","import {Component, Host, h, Prop, State, Element, Method} from '@stencil/core';\nimport anime from 'animejs';\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    salla.onReady(() => {\n      this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n      this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());\n      this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.getSource());\n\n      this.buildNextPageUrl();\n      this.createStatusDom();\n      this.isReady = true;\n    });\n\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n      return;\n    }\n    salla.event.on('salla-filters::changed', filters => this.setFilters(filters))\n  }\n\n  connectedCallback() {\n    try {\n      let searchParams = new URLSearchParams(window.location.search);\n      this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');\n      let filters = searchParams.get('filters')\n      this.parsedFilters = filters ? JSON.parse(decodeURIComponent(filters)) : {};\n    } catch (e) {\n      salla.logger.warn('failed to get filters from url', e.message);\n    }\n  }\n\n  @Method()\n  async setFilters(filters) {\n    this.parsedFilters = filters;\n    return this.reload();\n  }\n\n\n  @Method()\n  async reload() {\n    this.buildNextPageUrl();\n    this.wrapper.innerHTML = '';\n    this.init();\n  }\n\n\n  private 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' | 'sales';\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   * Sorting the list of products\n   */\n  @Prop({mutable: true}) sortBy?: string | 'ourSuggest' | 'bestSell' | 'topRated' | 'priceFromTopToLow' | 'priceFromLowToTop';\n\n  /**\n   * should listen to filters events `salla-filters::changed` and re-render\n   */\n  @Prop({reflect: true, mutable: true}) filtersResults: boolean;\n\n  /**\n   * Horizontal cards\n   */\n  @Prop({reflect: true}) horizontalCards: boolean\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() parsedFilters: any;\n\n  private isFilterable() {\n    return salla.config.get('store.settings.product.filters') && this.filtersResults;\n  }\n\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales'].includes(this.getSource());\n  }\n\n  private animateItems() {\n    anime({\n      targets: 'salla-products-list salla-product-card',\n      opacity: [0, 1],\n      duration: 1200,\n      translateY: [20, 0],\n      delay: function (_el, i) {\n        return i * 100;\n      },\n    })\n  }\n\n  private createStatusDom() {\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 buildNextPageUrl() {\n    let source = this.getSource();\n    if (source === 'json') {\n      return;\n    }\n    let urlPrefix = this.getUrlPrefix();\n    if (this.isSourceWithoutValue()) {\n      this.nextPage = salla.url.api(`products?source=${source}${urlPrefix}`);\n      return;\n    }\n\n    if (['search', 'related', 'landing-page'].includes(source)) {\n      this.nextPage = salla.url.api(`products?source=${source}&source_value=${this.getSourceValue()}${urlPrefix}`);\n      return;\n    }\n\n    try {\n      this.nextPage = salla.url.api(`products?source=${source}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${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 [${source}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n\n  private getUrlPrefix() {\n    let urlPrefix = '';\n    if (this.limit) {\n      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n    }\n    if (this.sortBy) {\n      urlPrefix = `&sort=${this.sortBy}`;\n    }\n    if (!this.isFilterable()) {\n      return urlPrefix;\n    }\n    urlPrefix += '&filterable=1';\n    for (const [key, value] of Object.entries(this.parsedFilters || {})) {\n      if (typeof value == \"string\") {\n        urlPrefix += `&filters[${key}]=${value}`;\n      } else if (Array.isArray(value)) {\n        (value as any).forEach(item => {\n          urlPrefix += `&filters[${key}][]=${item}}`\n        })\n      }\n    }\n    return urlPrefix;\n  }\n\n  private getSource() {\n    return {\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      'product.index.sales': 'sales',\n      'components.most_sales_products': 'sales',//temporary, delete it after two days from now\n    }[this.source || salla.config.get('page.slug')] || this.source || 'latest';\n  }\n\n  private getSourceValue() {\n    let source = this.getSource();\n\n    //todo:: enhance this code, it call JSON.parse too many times.\n    if (!['search', 'json', 'offers', 'latest', 'sales'].includes(source)) {\n      if (this.sourceValue && Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n        return JSON.parse(this.sourceValue);\n      }\n\n      if (this.sourceValue && typeof JSON.parse(this.sourceValue) == 'number') {\n        return [JSON.parse(this.sourceValue)];\n      }\n      if (!this.sourceValue && ['categories', 'tags', 'brands', 'landing-page'].includes(this.getSource())) {\n        return [salla.config.get('page.id')];\n      }\n    }\n\n    if (this.sourceValue) {\n      return this.sourceValue;\n    }\n\n\n    if (source === 'search') {\n      return (new URLSearchParams(window.location.search)).get('q');\n    }\n\n    return salla.config.get('page.id');\n  }\n\n\n  private loading(isLoading = true) {\n    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n  }\n\n  private getItemHTML(product) {\n    let customComponentTag: string = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n    let customComponent: HTMLSallaProductCardElement = document.createElement(customComponentTag) as HTMLSallaProductCardElement;\n    customComponent.product = product;\n    // customComponent.setAttribute('product', JSON.stringify(product));\n    if (this.getSource() == 'landing-page' && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('hide-add-btn', true);\n      customComponent.classList.add('s-product-card-fit-height');\n    }\n    if (this.horizontalCards && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('horizontal', true);\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('beforeend', 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}/>\n        <p>{this.placeholderText}</p>\n      </div>;\n    }\n    return (\n      <Host class=\"s-products-list\">\n        <div class={{\n          \"s-products-list-wrapper\": true,\n          's-products-list-horizontal-cards': this.horizontalCards && !this.filtersResults,\n          's-products-list-vertical-cards': !this.horizontalCards && !this.filtersResults,\n          's-products-list-filters-results': this.filtersResults,\n        }}\n             ref={wrapper => this.wrapper = wrapper}/>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.canRender()) {\n      return;\n    }\n    if (this.getSource() === 'json') {\n      if (!this.getSourceValue().length) {\n        this.showPlaceholder = true;\n        return;\n      }\n      this.getSourceValue().map(product => this.wrapper.append(this.getItemHTML(product)));\n      return;\n    }\n    this.init();\n  }\n\n  private init() {\n    this.initiateInfiniteScroll();\n    this.loading();\n    salla.product.fetch({\n      source: this.getSource(),\n      source_value: this.getSourceValue(),\n      filters: this.parsedFilters,\n      limit: this.limit,\n      filterable: this.isFilterable() ? 1 : 0,\n      sort: this.sortBy,\n    })\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        this.animateItems();\n      })\n  }\n\n  private handleResponse(response): Array<HTMLElement> {\n    //💡 when source is related, cursor will not be existed\n    if (response.filters && this.isFilterable()) {\n      salla.event.emit('filters::fetched', {filters: response.filters});\n    } else if (this.isFilterable()) {\n      salla.event.emit('filters::hidden');\n    }\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"],"version":3}
+{"file":"salla-products-list.js","mappings":"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","names":["SallaProductsList"],"sources":["./src/components/salla-products-list/salla-products-list.scss?tag=salla-products-list","./src/components/salla-products-list/salla-products-list.tsx"],"sourcesContent":["\n","import {Component, Host, h, Prop, State, Element, Method} from '@stencil/core';\nimport anime from 'animejs';\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  connectedCallback() {\n    salla.onReady(() => {\n      this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n      this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());\n      this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.getSource());\n      try {\n        let searchParams = new URLSearchParams(window.location.search);\n        this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');\n        let filters = searchParams.get('filters')\n        this.parsedFilters = filters ? JSON.parse(decodeURIComponent(filters)) : {};\n      } catch (e) {\n        salla.logger.warn('failed to get filters from url', e.message);\n      }\n      this.buildNextPageUrl();\n      this.createStatusDom();\n\n      this.isReady = true;\n    });\n\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n      return;\n    }\n    salla.event.on('salla-filters::changed', filters => this.setFilters(filters))\n\n\n  }\n\n  @Method()\n  async setFilters(filters) {\n    this.parsedFilters = filters;\n    return this.reload();\n  }\n\n\n  @Method()\n  async reload() {\n    salla.infiniteScroll.destroy(this.infiniteScroll);\n    this.buildNextPageUrl();\n    this.wrapper.innerHTML = '';\n    this.init();\n  }\n\n\n  private 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' | 'sales';\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   * Sorting the list of products\n   */\n  @Prop({mutable: true}) sortBy?: string | 'ourSuggest' | 'bestSell' | 'topRated' | 'priceFromTopToLow' | 'priceFromLowToTop';\n\n  /**\n   * should listen to filters events `salla-filters::changed` and re-render\n   */\n  @Prop({reflect: true, mutable: true}) filtersResults: boolean;\n\n  /**\n   * Horizontal cards\n   */\n  @Prop({reflect: true}) horizontalCards: boolean\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() parsedFilters: any;\n\n  private isFilterable() {\n    return salla.config.get('store.settings.product.filters') && this.filtersResults;\n  }\n\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales'].includes(this.getSource());\n  }\n\n  private animateItems() {\n    anime({\n      targets: 'salla-products-list salla-product-card',\n      opacity: [0, 1],\n      duration: 1200,\n      translateY: [20, 0],\n      delay: function (_el, i) {\n        return i * 100;\n      },\n    })\n  }\n\n  private createStatusDom() {\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 initBaseNextPageUrl(source: string) {\n\n    this.nextPage = salla.url.api(`products?source=${source}`);\n\n    if (this.limit) {\n      this.nextPage += `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n    }\n    if (this.sortBy) {\n      this.nextPage += `&sort=${this.sortBy}`;\n    }\n    // if (!this.isFilterable()) {\n    //   return this.nextPage;\n    // }\n    this.nextPage += '&filterable=1';\n    for (const [key, value] of Object.entries(this.parsedFilters || {})) {\n      if ([\"string\", \"number\"].includes(typeof value)) {\n        this.nextPage += `&filters[${key}]=${value}`;\n      } else if (Array.isArray(value)) {\n        (value as any).forEach(item => this.nextPage += `&filters[${key}][]=${item}`)\n      } else if (typeof value === 'object') {\n        for (const [k, v] of Object.entries(value)) {\n          this.nextPage += `&filters[${key}][${k}]=${v}`;\n        }\n      }\n    }\n  }\n\n  private buildNextPageUrl() {\n    let source = this.getSource();\n    if (source === 'json') {\n      return;\n    }\n    this.initBaseNextPageUrl(source);\n    if (this.isSourceWithoutValue()) {\n      return;\n    }\n\n    if (['search', 'related', 'landing-page'].includes(source)) {\n      this.nextPage += `&source_value=${this.getSourceValue()}`;\n      return;\n    }\n\n    try {\n      this.nextPage += `&source_value[]=${this.getSourceValue().join('&source_value[]=')}`;\n    } catch (e) {\n      salla.logger.warn(`source-value prop should be array of ids ex source-value=\"[1,2,3]\" for the source [${source}]`);\n      this.sourceValueIsValid = false;\n    }\n  }\n\n  private getSource() {\n    return {\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      'product.index.sales': 'sales',\n      'components.most_sales_products': 'sales',//temporary, delete it after two days from now\n    }[this.source || salla.config.get('page.slug')] || this.source || 'latest';\n  }\n\n  private getSourceValue() {\n    let source = this.getSource();\n\n    //todo:: enhance this code, it call JSON.parse too many times.\n    if (!['search', 'json', 'offers', 'latest', 'sales'].includes(source)) {\n      if (this.sourceValue && Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n        return JSON.parse(this.sourceValue);\n      }\n\n      if (this.sourceValue && typeof JSON.parse(this.sourceValue) == 'number') {\n        return [JSON.parse(this.sourceValue)];\n      }\n      if (!this.sourceValue && ['categories', 'tags', 'brands', 'landing-page'].includes(this.getSource())) {\n        return [salla.config.get('page.id')];\n      }\n    }\n\n    if (this.sourceValue) {\n      return this.sourceValue;\n    }\n\n\n    if (source === 'search') {\n      return (new URLSearchParams(window.location.search)).get('q');\n    }\n\n    return salla.config.get('page.id');\n  }\n\n\n  private loading(isLoading = true) {\n    this.btnLoader.style.display = isLoading ? 'inherit' : 'none';\n  }\n\n  private getItemHTML(product) {\n    let customComponentTag: string = this.hasCustomComponent ? 'custom-salla-product-card' : 'salla-product-card';\n    let customComponent: HTMLSallaProductCardElement = document.createElement(customComponentTag) as HTMLSallaProductCardElement;\n    customComponent.product = product;\n    // customComponent.setAttribute('product', JSON.stringify(product));\n    if (this.getSource() == 'landing-page' && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('hide-add-btn', true);\n      customComponent.classList.add('s-product-card-fit-height');\n    }\n    if (this.horizontalCards && !this.hasCustomComponent) {\n      customComponent.toggleAttribute('horizontal', true);\n      customComponent.toggleAttribute('shadow-on-hover', true);\n    }\n    return customComponent;\n  }\n\n  private fetchProducts() {\n    salla.product.fetch({\n      source: this.getSource(),\n      source_value: this.getSourceValue(),\n      limit: this.limit\n    })\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  \n  private initiateInfiniteScroll() {\n    if (!this.hasInfiniteScroll) {\n      return;\n    }\n\n    this.host.insertAdjacentElement('beforeend', 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 => {\n      if (!response.data?.length) {\n        this.showPlaceholder = true;\n        salla.infiniteScroll.destroy(this.infiniteScroll);\n        this.loading(false);\n        return;\n      }else{\n        this.showPlaceholder = false;\n\n      }\n      this.infiniteScroll.appendItems(this.handleResponse(response))\n      if (this.infiniteScroll.pageIndex == 2) {\n        this.animateItems();\n      }\n    })\n    this.infiniteScroll.on('error', () => {\n      this.status.querySelector('.s-infinite-scroll-error').classList.remove('s-hidden')\n      this.loading(false);\n    });\n    salla.onReady(() => salla.infiniteScroll.loadNextPage(this.infiniteScroll))\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}/>\n        <p>{this.placeholderText}</p>\n      </div>;\n    }\n    return (\n      <Host class=\"s-products-list\">\n        <div class={{\n          \"s-products-list-wrapper\": true,\n          's-products-list-horizontal-cards': this.horizontalCards && !this.filtersResults,\n          's-products-list-vertical-cards': !this.horizontalCards && !this.filtersResults,\n          's-products-list-filters-results': this.filtersResults,\n        }}\n             ref={wrapper => this.wrapper = wrapper}/>\n      </Host>\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.canRender()) {\n      return;\n    }\n\n    // Handle json source\n    if (this.getSource() === 'json') {\n      if (!this.getSourceValue().length) {\n        this.showPlaceholder = true;\n        return;\n      }\n      this.getSourceValue().map(product => this.wrapper.append(this.getItemHTML(product)));\n      return;\n    }\n    // Handle selected source\n    if (this.getSource() === 'selected') {\n      if (!this.getSourceValue().length) {\n        this.showPlaceholder = true;\n        return;\n      }\n      this.fetchProducts()\n      return;\n    }\n    this.init();\n  }\n\n  private init() {\n    this.initiateInfiniteScroll();\n    this.loading();\n  }\n\n  private handleResponse(response): Array<HTMLElement> {\n    //💡 when source is related, cursor will not be existed\n    if (response.filters && this.isFilterable()) {\n      this.filtersResults = true;\n      salla.event.emit('filters::fetched', {filters: response.filters});\n    } else if (this.isFilterable()) {\n      salla.event.emit('filters::hidden');\n    }\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"],"version":3}