@salla.sa/twilight-components 2.11.110 → 2.11.112

package/dist/collection/components/salla-price-range/salla-price-range.js

@@ -6,64 +6,137 @@ export class SallaPriceRange {
   constructor() {
     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 is() { return "salla-price-range"; }
@@ -114,6 +187,43 @@ export class SallaPriceRange {
         "attribute": "max-price",
         "reflect": false,
         "defaultValue": "5000"
+      },
+      "option": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Filter",
+          "resolved": "Filter",
+          "references": {
+            "Filter": {
+              "location": "import",
+              "path": "../salla-filters/interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "filtersData": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filters-data",
+        "reflect": true
       }
     };
   }
@@ -122,13 +232,14 @@ export class SallaPriceRange {
       "min": {},
       "max": {},
       "minthumb": {},
-      "maxthumb": {}
+      "maxthumb": {},
+      "priceOptions": {}
     };
   }
   static get events() {
     return [{
-        "method": "minPriceSelected",
-        "name": "minPriceSelected",
+        "method": "changed",
+        "name": "changed",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -137,122 +248,15 @@ export class SallaPriceRange {
           "text": ""
         },
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        }
-      }, {
-        "method": "maxPriceSelected",
-        "name": "maxPriceSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         }
       }];
   }
   static get methods() {
     return {
-      "minTrigger": {
-        "complexType": {
-          "signature": "(event?: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "maxTrigger": {
-        "complexType": {
-          "signature": "(event?: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "minInputValidation": {
-        "complexType": {
-          "signature": "(value: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "maxInputValidation": {
-        "complexType": {
-          "signature": "(value: any) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "changeRightHandle": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "changeLeftHandle": {
+      "reset": {
         "complexType": {
           "signature": "() => Promise<void>",
           "parameters": [],

package/dist/collection/components/salla-price-range/salla-price-range.js.map

@@ -1 +1 @@
-{"version":3,"file":"salla-price-range.js","sourceRoot":"","sources":["../../../src/components/salla-price-range/salla-price-range.tsx"],"names":[],"mappings":"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","sourcesContent":["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-range.js","sourceRoot":"","sources":["../../../src/components/salla-price-range/salla-price-range.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -21,10 +21,21 @@ export class SallaProductsList {
     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;
@@ -35,22 +46,12 @@ export class SallaProductsList {
     }
     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();
@@ -89,52 +90,53 @@ export class SallaProductsList {
       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',
@@ -184,10 +186,25 @@ export class SallaProductsList {
     }
     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;
@@ -200,11 +217,27 @@ export class SallaProductsList {
       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;
@@ -227,6 +260,7 @@ export class SallaProductsList {
     if (!this.canRender()) {
       return;
     }
+    // Handle json source
     if (this.getSource() === 'json') {
       if (!this.getSourceValue().length) {
         this.showPlaceholder = true;
@@ -235,34 +269,26 @@ export class SallaProductsList {
       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()) {