@salla.sa/twilight-components 2.11.111 → 2.11.113

package/dist/esm-es5/salla-filters-widget.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(t,e,i,n){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,s){function o(t){try{l(n.next(t))}catch(t){s(t)}}function a(t){try{l(n["throw"](t))}catch(t){s(t)}}function l(t){t.done?i(t.value):r(t.value).then(o,a)}l((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},n,r,s,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(t){return function(e){return l([t,e])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(i=0)),i)try{if(n=1,r&&(s=a[0]&2?r["return"]:a[0]?r["throw"]||((s=r["return"])&&s.call(r),0):r.next)&&!(s=s.call(r,a[1])).done)return s;if(r=0,s)a=[a[0]&2,s.value];switch(a[0]){case 0:case 1:s=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(s=i.trys,s=s.length>0&&s[s.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!s||a[1]>s[0]&&a[1]<s[3])){i.label=a[1];break}if(a[0]===6&&i.label<s[1]){i.label=s[1];s=a;break}if(s&&i.label<s[2]){i.label=s[2];i.ops.push(a);break}if(s[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];r=0}finally{n=s=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-957caa0e.js";import{H as Helper}from"./Helper-30bbdc37.js";import{a as FilterOptionTypes,F as FilterOptionInputType}from"./interfaces-5bea5a45.js";var sallaFiltersWidgetCss=":host{display:block}";var SallaFiltersWidget=function(){function t(t){registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.initHeight=195;this.widgetTitle=undefined;this.withLoadMore=undefined;this.filtersData=undefined;this.option=undefined;this.isOpen=true;this.isShowMore=false}t.prototype.connectedCallback=function(){this.withLoadMore=Array.isArray(this.option.values)&&this.option.values.length>8;this.widgetTitle=this.option.label};t.prototype.componentDidLoad=function(){this.widgetValues.scrollHeight<this.initHeight&&(this.withLoadMore=false);this.withLoadMore&&this.widgetValues&&(this.widgetValues.style.maxHeight="".concat(this.initHeight,"px"));this.widgetContent.style.height="".concat(this.widgetContent.scrollHeight,"px")};t.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.option.type===FilterOptionTypes.RANGE){this.priceRange.reset()}Array.from(this.host.querySelectorAll("input")).forEach((function(t){return t.checked=false}));return[2]}))}))};t.prototype.showMore=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isShowMore=!this.isShowMore;this.widgetContent.style.height="auto";this.widgetValues.style.maxHeight=this.isShowMore?"".concat(this.widgetValues.scrollHeight,"px"):"".concat(this.initHeight,"px");setTimeout((function(){t.widgetContent.style.height="".concat(t.widgetContent.scrollHeight,"px")}),400);return[2]}))}))};t.prototype.toggleWidget=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isOpen=!this.isOpen;Helper.toggleElementClassIf(this.widgetContent,"s-filters-widget-opened","s-filters-widget-closed",(function(){return t.isOpen}));return[2]}))}))};t.prototype.renderFilterOption=function(t){var e=this;if(![FilterOptionTypes.VALUES,FilterOptionTypes.MINIMUM,FilterOptionTypes.VARIANTS].includes(t.type)){return""}return t.values.map((function(i,n){var r=typeof i=="number"?i:i.key||i.value;return h("label",{class:"s-filters-label",htmlFor:"".concat(t.key,"-option-").concat(n)},h("input",{id:"".concat(t.key,"-option-").concat(n),name:t.key,type:t.inputType,checked:e.isSelectedOption(t,r),class:"s-filters-".concat(t.inputType),onChange:function(i){return e.changed.emit({event:i,option:t,value:r})}}),e.getOptionLabel(t,i))}))};t.prototype.isSelectedOption=function(t,e){if(!this.filtersData||!this.filtersData[t.key]){return false}return t.inputType===FilterOptionInputType.CHECKBOX?this.filtersData[t.key].includes(e):this.filtersData[t.key]==e};t.prototype.getOptionLabel=function(t,e){if(t.key=="rating"){return h("salla-rating-stars",{size:"small",value:e})}var i=e.value||"null";return h("span",{class:"s-filters-option-name"},i)};t.prototype.render=function(){var t=this;return h(Host,{class:"s-filters-widget-container"},h("h3",{class:"s-filters-widget-title",onClick:function(){return t.toggleWidget()}},h("span",null,this.widgetTitle),h("span",{class:"s-filters-widget-plusminus ".concat(this.isOpen?"s-filters-widget-plusminus-active":"")})),h("div",{class:"s-filters-widget-content",ref:function(e){return t.widgetContent=e}},h("div",{class:"s-filters-widget-values",ref:function(e){return t.widgetValues=e}},h("slot",null),this.option.type!==FilterOptionTypes.RANGE?this.renderFilterOption(this.option):h("salla-price-range",{onChanged:function(e){return t.changed.emit(e.detail)},ref:function(e){return t.priceRange=e},filtersData:this.filtersData,option:this.option})),this.withLoadMore&&h("a",{class:"s-filters-widget-more",onClick:function(){return t.showMore()}},!this.isShowMore?"عرض المزيد":"عرض أقل")))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaFiltersWidget.style=sallaFiltersWidgetCss;export{SallaFiltersWidget as salla_filters_widget};
+ */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-957caa0e.js";import{H as Helper}from"./Helper-30bbdc37.js";import{a as FilterOptionTypes,F as FilterOptionInputType}from"./interfaces-5bea5a45.js";var sallaFiltersWidgetCss=":host{display:block}";var SallaFiltersWidget=function(){function t(t){registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.initHeight=195;this.widgetTitle=undefined;this.withLoadMore=undefined;this.filtersData=undefined;this.option=undefined;this.isOpen=true;this.isShowMore=false}t.prototype.connectedCallback=function(){this.withLoadMore=this.option.key!="price"&&Array.isArray(this.option.values)&&this.option.values.length>8;this.widgetTitle=this.option.label};t.prototype.componentDidLoad=function(){this.widgetValues.scrollHeight<this.initHeight&&(this.withLoadMore=false);this.withLoadMore&&this.widgetValues&&(this.widgetValues.style.maxHeight="".concat(this.initHeight,"px"));this.widgetContent.style.height="".concat(this.widgetContent.scrollHeight,"px")};t.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.option.type===FilterOptionTypes.RANGE){this.priceRange.reset()}Array.from(this.host.querySelectorAll("input")).forEach((function(t){return t.checked=false}));return[2]}))}))};t.prototype.showMore=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isShowMore=!this.isShowMore;this.widgetContent.style.height="auto";this.widgetValues.style.maxHeight=this.isShowMore?"".concat(this.widgetValues.scrollHeight,"px"):"".concat(this.initHeight,"px");setTimeout((function(){t.widgetContent.style.height="".concat(t.widgetContent.scrollHeight,"px")}),400);return[2]}))}))};t.prototype.toggleWidget=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.isOpen=!this.isOpen;Helper.toggleElementClassIf(this.widgetContent,"s-filters-widget-opened","s-filters-widget-closed",(function(){return t.isOpen}));return[2]}))}))};t.prototype.renderFilterOption=function(t){var e=this;if(![FilterOptionTypes.VALUES,FilterOptionTypes.MINIMUM,FilterOptionTypes.VARIANTS].includes(t.type)){return""}return t.values.map((function(i,n){var r=typeof i=="number"?i:i.key||i.value;return h("label",{class:"s-filters-label",htmlFor:"".concat(t.key,"-option-").concat(n)},h("input",{id:"".concat(t.key,"-option-").concat(n),name:t.key,type:t.inputType,checked:e.isSelectedOption(t,r),class:"s-filters-".concat(t.inputType),onChange:function(i){return e.changed.emit({event:i,option:t,value:r})}}),e.getOptionLabel(t,i))}))};t.prototype.isSelectedOption=function(t,e){if(!this.filtersData||!this.filtersData[t.key]){return false}return t.inputType===FilterOptionInputType.CHECKBOX?this.filtersData[t.key].includes(e):this.filtersData[t.key]==e};t.prototype.getOptionLabel=function(t,e){if(t.key=="rating"){return h("salla-rating-stars",{size:"small",value:e})}var i=e.value||"null";return h("span",{class:"s-filters-option-name"},i)};t.prototype.render=function(){var t=this;return h(Host,{class:"s-filters-widget-container"},h("h3",{class:"s-filters-widget-title",onClick:function(){return t.toggleWidget()}},h("span",null,this.widgetTitle),h("span",{class:"s-filters-widget-plusminus ".concat(this.isOpen?"s-filters-widget-plusminus-active":"")})),h("div",{class:"s-filters-widget-content",ref:function(e){return t.widgetContent=e}},h("div",{class:"s-filters-widget-values",ref:function(e){return t.widgetValues=e}},h("slot",null),this.option.type!==FilterOptionTypes.RANGE?this.renderFilterOption(this.option):h("salla-price-range",{onChanged:function(e){return t.changed.emit(e.detail)},ref:function(e){return t.priceRange=e},filtersData:this.filtersData,option:this.option})),this.withLoadMore&&h("a",{class:"s-filters-widget-more",onClick:function(){return t.showMore()}},!this.isShowMore?"عرض المزيد":"عرض أقل")))};Object.defineProperty(t.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();SallaFiltersWidget.style=sallaFiltersWidgetCss;export{SallaFiltersWidget as salla_filters_widget};
 //# sourceMappingURL=salla-filters-widget.entry.js.map

package/dist/esm-es5/salla-filters-widget.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","class_1","prototype","connectedCallback","withLoadMore","Array","isArray","option","values","length","widgetTitle","label","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","concat","widgetContent","height","reset","type","FilterOptionTypes","RANGE","priceRange","from","host","querySelectorAll","forEach","input","checked","showMore","isShowMore","setTimeout","_this","toggleWidget","isOpen","Helper","toggleElementClassIf","renderFilterOption","VALUES","MINIMUM","VARIANTS","includes","map","filterOption","index","value","key","h","class","htmlFor","id","name","inputType","isSelectedOption","onChange","e","changed","emit","event","getOptionLabel","filtersData","FilterOptionInputType","CHECKBOX","size","render","Host","onClick","ref","el","onChanged","detail","price"],"sources":["src/components/salla-filters-widget/salla-filters-widget.scss?tag=salla-filters-widget","src/components/salla-filters-widget/salla-filters-widget.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {Component, Host, h, Method, State, Prop, Event, Element} from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport {Filter, FilterOptionInputType, FilterOptionTypes} from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-filters-widget',\n  styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n  @Element() host: HTMLElement;\n  @Prop({mutable: true}) widgetTitle: string;\n  @Prop({mutable: true}) withLoadMore: boolean;\n  @Prop({reflect: true}) filtersData: object;\n  @Prop({reflect: true}) option: Filter;\n  priceRange: HTMLSallaPriceRangeElement\n\n\n  private widgetValues: HTMLElement;\n  private widgetContent: HTMLDivElement;\n  private initHeight: number = 195;\n  @State() isOpen: boolean = true;\n  @State() isShowMore: boolean = false;\n\n  @Event() changed: any;\n\n  connectedCallback() {\n    //lets be smart and don't show 5 and more link for 8 options\n    this.withLoadMore = Array.isArray(this.option.values) && this.option.values.length > 8;\n    this.widgetTitle = this.option.label;\n  }\n\n  componentDidLoad() {\n    this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);\n    (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.initHeight}px`);\n    this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n  }\n\n  @Method()\n  async reset() {\n    if (this.option.type === FilterOptionTypes.RANGE) {\n      this.priceRange.reset()\n    }\n    Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);\n  }\n\n\n  @Method()\n  async showMore() {\n    this.isShowMore = !this.isShowMore\n    this.widgetContent.style.height = 'auto';\n    this.widgetValues.style.maxHeight = this.isShowMore ? `${this.widgetValues.scrollHeight}px` : `${this.initHeight}px`;\n    setTimeout(() => {\n      this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n    }, 400); // get height after time of collapse animtion (duration-300)\n  }\n\n  @Method()\n  async toggleWidget() {\n    this.isOpen = !this.isOpen;\n    Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);\n  }\n\n  renderFilterOption(option: Filter) {\n    if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {\n      return '';\n    }\n    //@ts-ignore\n    return option.values.map((filterOption, index) => {\n        let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);\n\n        return <label class=\"s-filters-label\" htmlFor={`${option.key}-option-${index}`}>\n          <input\n            id={`${option.key}-option-${index}`}\n            name={option.key}\n            type={option.inputType}\n            //TODO:: debug more why sometimes it's not rendered as selected🤨\n            checked={this.isSelectedOption(option, value)}\n            class={`s-filters-${option.inputType}`}\n            onChange={e => this.changed.emit({event: e, option: option, value: value})}\n          />\n          {this.getOptionLabel(option, filterOption)}\n        </label>\n      }\n    )\n  }\n\n  private isSelectedOption(option: Filter, value) {\n    if (!this.filtersData || !this.filtersData[option.key]) {\n      return false\n    }\n\n    return option.inputType === FilterOptionInputType.CHECKBOX\n      ? this.filtersData[option.key].includes(value)\n      : this.filtersData[option.key] == value;\n  }\n\n  private getOptionLabel(option: Filter, filterOption) {\n    if (option.key == 'rating') {\n      //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products\n      return <salla-rating-stars size=\"small\" value={filterOption}/>;\n    }\n    let label = filterOption.value || 'null';\n    //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';\n    return <span class=\"s-filters-option-name\">{label}</span>;\n  }\n\n  render() {\n    return (\n      <Host class=\"s-filters-widget-container\">\n        <h3 class=\"s-filters-widget-title\" onClick={() => this.toggleWidget()}>\n          <span>{this.widgetTitle}</span>\n          <span class={`s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}`}/>\n        </h3>\n        <div class=\"s-filters-widget-content\" ref={(el) => this.widgetContent = el}>\n          <div class=\"s-filters-widget-values\" ref={(el) => this.widgetValues = el}>\n            <slot/>\n            {\n              this.option.type !== FilterOptionTypes.RANGE\n                ? this.renderFilterOption(this.option)\n                : <salla-price-range onChanged={(event) => this.changed.emit(event.detail)}\n                                     ref={price => this.priceRange = price}\n                                     filtersData={this.filtersData}\n                                     option={this.option}/>\n            }\n          </div>\n          {this.withLoadMore &&\n          <a class=\"s-filters-widget-more\"\n             onClick={() => this.showMore()}>{!this.isShowMore ? 'عرض المزيد' : 'عرض أقل'}</a>\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}
+{"version":3,"names":["sallaFiltersWidgetCss","SallaFiltersWidget","this","initHeight","class_1","prototype","connectedCallback","withLoadMore","option","key","Array","isArray","values","length","widgetTitle","label","componentDidLoad","widgetValues","scrollHeight","style","maxHeight","concat","widgetContent","height","reset","type","FilterOptionTypes","RANGE","priceRange","from","host","querySelectorAll","forEach","input","checked","showMore","isShowMore","setTimeout","_this","toggleWidget","isOpen","Helper","toggleElementClassIf","renderFilterOption","VALUES","MINIMUM","VARIANTS","includes","map","filterOption","index","value","h","class","htmlFor","id","name","inputType","isSelectedOption","onChange","e","changed","emit","event","getOptionLabel","filtersData","FilterOptionInputType","CHECKBOX","size","render","Host","onClick","ref","el","onChanged","detail","price"],"sources":["src/components/salla-filters-widget/salla-filters-widget.scss?tag=salla-filters-widget","src/components/salla-filters-widget/salla-filters-widget.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import {Component, Host, h, Method, State, Prop, Event, Element} from '@stencil/core';\nimport Helper from '../../Helpers/Helper';\nimport {Filter, FilterOptionInputType, FilterOptionTypes} from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-filters-widget',\n  styleUrl: 'salla-filters-widget.scss',\n})\nexport class SallaFiltersWidget {\n  @Element() host: HTMLElement;\n  @Prop({mutable: true}) widgetTitle: string;\n  @Prop({mutable: true}) withLoadMore: boolean;\n  @Prop({reflect: true}) filtersData: object;\n  @Prop({reflect: true}) option: Filter;\n  priceRange: HTMLSallaPriceRangeElement\n\n\n  private widgetValues: HTMLElement;\n  private widgetContent: HTMLDivElement;\n  private initHeight: number = 195;\n  @State() isOpen: boolean = true;\n  @State() isShowMore: boolean = false;\n\n  @Event() changed: any;\n\n  connectedCallback() {\n    //lets be smart and don't show 5 and more link for 8 options\n    this.withLoadMore = this.option.key!='price' && Array.isArray(this.option.values) && this.option.values.length > 8;\n    this.widgetTitle = this.option.label;\n  }\n\n  componentDidLoad() {\n    this.widgetValues.scrollHeight < this.initHeight && (this.withLoadMore = false);\n    (this.withLoadMore && this.widgetValues) && (this.widgetValues.style.maxHeight = `${this.initHeight}px`);\n    this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n  }\n\n  @Method()\n  async reset() {\n    if (this.option.type === FilterOptionTypes.RANGE) {\n      this.priceRange.reset()\n    }\n    Array.from(this.host.querySelectorAll('input')).forEach(input => input.checked = false);\n  }\n\n\n  @Method()\n  async showMore() {\n    this.isShowMore = !this.isShowMore\n    this.widgetContent.style.height = 'auto';\n    this.widgetValues.style.maxHeight = this.isShowMore ? `${this.widgetValues.scrollHeight}px` : `${this.initHeight}px`;\n    setTimeout(() => {\n      this.widgetContent.style.height = `${this.widgetContent.scrollHeight}px`;\n    }, 400); // get height after time of collapse animtion (duration-300)\n  }\n\n  @Method()\n  async toggleWidget() {\n    this.isOpen = !this.isOpen;\n    Helper.toggleElementClassIf(this.widgetContent, 's-filters-widget-opened', 's-filters-widget-closed', () => this.isOpen);\n  }\n\n  renderFilterOption(option: Filter) {\n    if (![FilterOptionTypes.VALUES, FilterOptionTypes.MINIMUM, FilterOptionTypes.VARIANTS].includes(option.type)) {\n      return '';\n    }\n    //@ts-ignore\n    return option.values.map((filterOption, index) => {\n        let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);\n\n        return <label class=\"s-filters-label\" htmlFor={`${option.key}-option-${index}`}>\n          <input\n            id={`${option.key}-option-${index}`}\n            name={option.key}\n            type={option.inputType}\n            //TODO:: debug more why sometimes it's not rendered as selected🤨\n            checked={this.isSelectedOption(option, value)}\n            class={`s-filters-${option.inputType}`}\n            onChange={e => this.changed.emit({event: e, option: option, value: value})}\n          />\n          {this.getOptionLabel(option, filterOption)}\n        </label>\n      }\n    )\n  }\n\n  private isSelectedOption(option: Filter, value) {\n    if (!this.filtersData || !this.filtersData[option.key]) {\n      return false\n    }\n\n    return option.inputType === FilterOptionInputType.CHECKBOX\n      ? this.filtersData[option.key].includes(value)\n      : this.filtersData[option.key] == value;\n  }\n\n  private getOptionLabel(option: Filter, filterOption) {\n    if (option.key == 'rating') {\n      //in amazon has stars & up, should we add it, to avoid those people who will come to say I selected 4 why I see 5 sars products\n      return <salla-rating-stars size=\"small\" value={filterOption}/>;\n    }\n    let label = filterOption.value || 'null';\n    //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';\n    return <span class=\"s-filters-option-name\">{label}</span>;\n  }\n\n  render() {\n    return (\n      <Host class=\"s-filters-widget-container\">\n        <h3 class=\"s-filters-widget-title\" onClick={() => this.toggleWidget()}>\n          <span>{this.widgetTitle}</span>\n          <span class={`s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}`}/>\n        </h3>\n        <div class=\"s-filters-widget-content\" ref={(el) => this.widgetContent = el}>\n          <div class=\"s-filters-widget-values\" ref={(el) => this.widgetValues = el}>\n            <slot/>\n            {\n              this.option.type !== FilterOptionTypes.RANGE\n                ? this.renderFilterOption(this.option)\n                : <salla-price-range onChanged={(event) => this.changed.emit(event.detail)}\n                                     ref={price => this.priceRange = price}\n                                     filtersData={this.filtersData}\n                                     option={this.option}/>\n            }\n          </div>\n          {this.withLoadMore &&\n          <a class=\"s-filters-widget-more\"\n             onClick={() => this.showMore()}>{!this.isShowMore ? 'عرض المزيد' : 'عرض أقل'}</a>\n          }\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}

package/dist/esm-es5/salla-price-range.entry.js

@@ -1,5 +1,5 @@
-var __awaiter=this&&this.__awaiter||function(t,i,e,n){function r(t){return t instanceof e?t:new e((function(i){i(t)}))}return new(e||(e=Promise))((function(e,a){function s(t){try{o(n.next(t))}catch(t){a(t)}}function c(t){try{o(n["throw"](t))}catch(t){a(t)}}function o(t){t.done?e(t.value):r(t.value).then(s,c)}o((n=n.apply(t,i||[])).next())}))};var __generator=this&&this.__generator||function(t,i){var e={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,r,a,s;return s={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function c(t){return function(i){return o([t,i])}}function o(c){if(n)throw new TypeError("Generator is already executing.");while(s&&(s=0,c[0]&&(e=0)),e)try{if(n=1,r&&(a=c[0]&2?r["return"]:c[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,c[1])).done)return a;if(r=0,a)c=[c[0]&2,a.value];switch(c[0]){case 0:case 1:a=c;break;case 4:e.label++;return{value:c[1],done:false};case 5:e.label++;r=c[1];c=[0];continue;case 7:c=e.ops.pop();e.trys.pop();continue;default:if(!(a=e.trys,a=a.length>0&&a[a.length-1])&&(c[0]===6||c[0]===2)){e=0;continue}if(c[0]===3&&(!a||c[1]>a[0]&&c[1]<a[3])){e.label=c[1];break}if(c[0]===6&&e.label<a[1]){e.label=a[1];a=c;break}if(a&&e.label<a[2]){e.label=a[2];e.ops.push(c);break}if(a[2])e.ops.pop();e.trys.pop();continue}c=i.call(t,e)}catch(t){c=[6,t];r=0}finally{n=a=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};
+var __awaiter=this&&this.__awaiter||function(e,t,i,n){function r(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,a){function s(e){try{l(n.next(e))}catch(e){a(e)}}function o(e){try{l(n["throw"](e))}catch(e){a(e)}}function l(e){e.done?i(e.value):r(e.value).then(s,o)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},n,r,a,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(e){return function(t){return l([e,t])}}function l(o){if(n)throw new TypeError("Generator is already executing.");while(s&&(s=0,o[0]&&(i=0)),i)try{if(n=1,r&&(a=o[0]&2?r["return"]:o[0]?r["throw"]||((a=r["return"])&&a.call(r),0):r.next)&&!(a=a.call(r,o[1])).done)return a;if(r=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:i.label++;return{value:o[1],done:false};case 5:i.label++;r=o[1];o=[0];continue;case 7:o=i.ops.pop();i.trys.pop();continue;default:if(!(a=i.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){i=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){i.label=o[1];break}if(o[0]===6&&i.label<a[1]){i.label=a[1];a=o;break}if(a&&i.label<a[2]){i.label=a[2];i.ops.push(o);break}if(a[2])i.ops.pop();i.trys.pop();continue}o=t.call(e,i)}catch(e){o=[6,e];r=0}finally{n=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,c as createEvent,h,H as Host}from"./index-957caa0e.js";var sallaPriceRangeCss=":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";var SallaPriceRange=function(){function t(t){registerInstance(this,t);this.changed=createEvent(this,"changed",7);this.minPrice=1e3;this.maxPrice=5e3;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.minthumb=0;this.maxthumb=0;this.priceOptions=undefined;this.generatePriceOptions()}t.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){var t,i;return __generator(this,(function(e){this.minInput.value="".concat(((i=(t=this.option)===null||t===void 0?void 0:t.values)===null||i===void 0?void 0:i.min)||0);this.maxInput.value="".concat(this.max);return[2]}))}))};t.prototype.generatePriceOptions=function(){var t=this.max;var i=Math.floor(t/100);if(i<1){i=Math.floor(t/10)}var e=Math.floor(t/2);var n=Math.floor(t/3*2);this.priceOptions=[i,e,n];console.log("Price options for max price ".concat(t,": ").concat(this.priceOptions.join(", ")))};t.prototype.getPriceLabel=function(t){if(t==Math.floor(this.max/100)){return"اقل من ".concat(salla.money(t))}else if(t==Math.floor(this.max/2)){return"".concat(salla.money(this.priceOptions[0])," الى ").concat(salla.money(this.priceOptions[2]))}else{return"أكثر من ".concat(salla.money(t))}};t.prototype.handleMinMaxPrice=function(t,i){var e=this.priceOptions,n=e[0],r=e[1],a=e[2];switch(i){case n:this.minPrice=0;this.maxPrice=n;break;case r:this.minPrice=n;this.maxPrice=a;break;case a:this.minPrice=a;this.maxPrice=this.max;break;default:throw new Error("Invalid price option: ".concat(i))}this.minInput.value="".concat(this.minPrice);this.maxInput.value="".concat(this.maxPrice);this.changedEventHandler(t)};t.prototype.changedEventHandler=function(t,i){if(i===void 0){i=false}return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=t?t.target.value*1:null;if(i){this.minInputValidation(e);this.minthumb=(this.minPrice-this.min)/(this.max-this.min)*100}else{this.maxInputValidation(e);this.maxthumb=100-(this.maxPrice-this.min)/(this.max-this.min)*100}this.isReady&&this.changed.emit({event:t,option:this.option,value:{max:this.maxPrice,min:this.minPrice}});return[2]}))}))};t.prototype.minInputValidation=function(t){if(t&&(t>this.max||t>this.maxPrice)){return}if(t<this.min){this.minPrice=this.min;return}if(t){this.minPrice=t}};t.prototype.maxInputValidation=function(t){if(t&&(t<this.min||t<this.minPrice)){return}if(t>this.max){this.maxPrice=this.max;return}if(t){this.maxPrice=t}};t.prototype.isChecked=function(t){if(t==Math.floor(this.max/100)){return this.minPrice==0&&this.maxPrice==t}if(t==Math.floor(this.max/2)){return this.minPrice==this.priceOptions[0]&&this.maxPrice==this.priceOptions[2]}if(t==Math.floor(this.max/3*2)){return this.minPrice==t&&this.maxPrice==this.max}};t.prototype.render=function(){var t=this;return h(Host,null,this.priceOptions&&this.priceOptions.map((function(i,e){return h("label",{class:"s-filters-label",htmlFor:"".concat(i,"-").concat(e)},h("input",{id:"".concat(i,"-").concat(e),name:"price",type:"radio",checked:t.isChecked(i),class:"s-filters-radio",onChange:function(e){return t.handleMinMaxPrice(e,i)}}),t.getPriceLabel(i))})),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:function(i){return t.minInput=i},onInput:function(i){return t.changedEventHandler(i,true)},placeholder:"من",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:"الى",ref:function(i){return t.maxInput=i},onInput:function(i){return t.changedEventHandler(i)},class:"s-price-range-number-input","aria-describedby":"price-currency"}))))))};t.prototype.componentDidLoad=function(){var t;if(this.filtersData&&((t=this.filtersData)===null||t===void 0?void 0:t.price)){this.minPrice=this.filtersData.price.min;this.maxPrice=this.filtersData.price.max;this.maxInput.value="".concat(this.maxPrice);this.minInput.value="".concat(this.minPrice)}this.isReady=true};return t}();SallaPriceRange.style=sallaPriceRangeCss;export{SallaPriceRange as salla_price_range};
+ */import{r as registerInstance,c as createEvent,h,H as Host}from"./index-957caa0e.js";var sallaPriceRangeCss=":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.rtl .form-select,.rtl select,[dir=rtl] .form-select,[dir=rtl] select{background-position:left 0.5rem center;padding-right:12px}.rtl .menu-divide li:not(:last-child):after,[dir=rtl] .menu-divide li:not(:last-child):after{left:0;right:auto}input[type=range]::-webkit-slider-thumb{pointer-events:all;width:24px;height:24px;-webkit-appearance:none}[type=checkbox]:checked{background-size:80%}";var SallaPriceRange=function(){function e(e){registerInstance(this,e);this.changed=createEvent(this,"changed",7);this.filterValues=[];this.minPrice=undefined;this.maxPrice=undefined;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.priceOptions=undefined}e.prototype.connectedCallback=function(){var e;if(this.filtersData&&((e=this.filtersData)===null||e===void 0?void 0:e.price)){this.minPrice=this.filtersData.price.min;this.maxPrice=this.filtersData.price.max}if(this.option.values.length==1){return}if(this.option.values.length<=5){this.filterValues=this.option.values;return}var t=Math.ceil(this.option.values.length/5);for(var i=0;i<this.option.values.length;i+=t){this.filterValues.push(this.option.values.slice(i,i+t).reduce((function(e,t){e.to=t.to;e.count+=t.count;return e})))}};e.prototype.reset=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.minInput.value=null;this.maxInput.value=null;return[2]}))}))};e.prototype.getPriceLabel=function(e){if(isNaN(e.from)||e.from<1){return"اقل من ".concat(salla.money(e.to))}if(isNaN(e.to)||e.to<1){return"أكثر من ".concat(salla.money(e.from))}return"".concat(salla.money(e.from)," الى ").concat(salla.money(e.to))};e.prototype.handleMinMaxPrice=function(e,t){this.minPrice=t.from;this.maxPrice=t.to!="*"?t.to:null;this.changedEventHandler(e)};e.prototype.changedEventHandler=function(e,t){if(t===void 0){t=false}return __awaiter(this,void 0,void 0,(function(){var i;return __generator(this,(function(n){i=e?e.target.value*1:null;if(t){this.minInputValidation(i)}else{this.maxInputValidation(i)}this.isReady&&this.changed.emit({event:e,option:this.option,value:{max:this.maxPrice,min:this.minPrice}});return[2]}))}))};e.prototype.minInputValidation=function(e){if(e&&(e>this.max||e>this.maxPrice)){return}if(e<this.min){this.minPrice=this.min;return}if(e){this.minPrice=e}};e.prototype.maxInputValidation=function(e){if(e&&(e<this.min||e<this.minPrice)){return}if(e>this.max){this.maxPrice=this.max;return}if(e){this.maxPrice=e}};e.prototype.isChecked=function(e){if(!this.minPrice&&!this.maxPrice){return false}var t=(e.from<1||e.from=="*")&&this.minPrice==0||e.from==this.minPrice;var i=e.to=="*"||!e.to||e.to==this.maxPrice;return t&&i};e.prototype.render=function(){var e=this;return h(Host,null,this.filterValues.map((function(t,i){return h("label",{class:"s-filters-label",htmlFor:"".concat(e.option.key,"-").concat(i)},h("input",{id:"".concat(e.option.key,"-").concat(i),name:"price",type:"radio",checked:e.isChecked(t),class:"s-filters-radio",onChange:function(i){return e.handleMinMaxPrice(i,t)}}),e.getPriceLabel(t))})),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:function(t){return e.minInput=t},onInput:function(t){return e.changedEventHandler(t,true)},value:this.minPrice,placeholder:"من",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:"الى",ref:function(t){return e.maxInput=t},onInput:function(t){return e.changedEventHandler(t)},value:this.maxPrice,class:"s-price-range-number-input","aria-describedby":"price-currency"}))))))};e.prototype.componentDidLoad=function(){this.isReady=true};return e}();SallaPriceRange.style=sallaPriceRangeCss;export{SallaPriceRange as salla_price_range};
 //# sourceMappingURL=salla-price-range.entry.js.map

package/dist/esm-es5/salla-price-range.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","class_1","hostRef","this","generatePriceOptions","prototype","reset","minInput","value","concat","_b","_a","option","values","min","maxInput","max","MAX_PRICE","option1","Math","floor","option2","option3","priceOptions","console","log","join","getPriceLabel","price","salla","money","handleMinMaxPrice","event","_c","firstOption","secondOption","thirdOption","minPrice","maxPrice","Error","changedEventHandler","isMin","target","minInputValidation","minthumb","maxInputValidation","maxthumb","isReady","changed","emit","isChecked","render","_this","h","Host","map","index","class","htmlFor","id","name","type","checked","onChange","e","config","currency","symbol","maxlength","ref","el","onInput","placeholder","componentDidLoad","filtersData"],"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"],"mappings":"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"}
+{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","this","filterValues","class_1","prototype","connectedCallback","filtersData","_a","price","minPrice","min","maxPrice","max","option","values","length","chunkSize","Math","ceil","i","push","slice","reduce","final","currentValue","to","count","reset","minInput","value","maxInput","getPriceLabel","filterValue","isNaN","from","concat","salla","money","handleMinMaxPrice","event","changedEventHandler","isMin","target","minInputValidation","maxInputValidation","isReady","changed","emit","isChecked","isMinEqual","isMaxEqual","render","_this","h","Host","map","index","class","htmlFor","key","id","name","type","checked","onChange","e","config","currency","symbol","maxlength","ref","el","onInput","placeholder","componentDidLoad"],"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, FilterValue} from \"../salla-filters/interfaces\";\n\n@Component({\n  tag: 'salla-price-range',\n  styleUrl: 'salla-price-range.scss',\n})\nexport class SallaPriceRange {\n  @Prop({mutable: true}) minPrice;\n  @Prop({mutable: true}) maxPrice;\n  @Prop({reflect: true}) option: Filter;\n  @Prop({reflect: true}) filtersData: any;\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() priceOptions: any;\n\n  @Event() changed: any;\n\n  isReady: Boolean;\n  minInput: HTMLInputElement;\n  maxInput: HTMLInputElement;\n  filterValues: Array<FilterValue> = [];\n\n\n  connectedCallback() {\n    if (this.filtersData && this.filtersData?.price) {\n      this.minPrice = this.filtersData.price.min;\n      this.maxPrice = this.filtersData.price.max;\n    }\n\n    //no need to show one option only\n    if (this.option.values.length == 1) {\n      return;\n    }\n    //here we may recive too many prices, we will group all inputs to\n    if (this.option.values.length <= 5) {\n      this.filterValues = this.option.values;\n      return;\n    }\n    const chunkSize = Math.ceil(this.option.values.length / 5);\n    for (let i = 0; i < this.option.values.length; i += chunkSize) {\n      this.filterValues.push(\n        this.option.values\n          .slice(i, i + chunkSize)\n          .reduce((final: FilterValue, currentValue: FilterValue) => {\n            final.to = currentValue.to;\n            final.count += currentValue.count;\n            return final;\n          })\n      );\n      // do whatever\n    }\n  }\n\n  @Method()\n  async reset() {\n    //@ts-ignore\n    this.minInput.value = null;\n    this.maxInput.value = null;\n  }\n\n  private getPriceLabel(filterValue: FilterValue) {\n    // @ts-ignore\n    if (isNaN(filterValue.from) || filterValue.from < 1) {\n      return `اقل من ${salla.money(filterValue.to)}`;\n    }\n    // @ts-ignore\n    if (isNaN(filterValue.to) || filterValue.to < 1) {\n      return `أكثر من ${salla.money(filterValue.from)}`;\n    }\n\n    return `${salla.money(filterValue.from)} الى ${salla.money(filterValue.to)}`;\n  }\n\n\n  private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n    this.minPrice = value.from;\n    this.maxPrice = value.to != '*' ? value.to : null;\n\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    } else {\n      this.maxInputValidation(value)\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\n  private isChecked(filterValue: FilterValue) {\n    if (!this.minPrice && !this.maxPrice) {\n      return false;\n    }\n\n    //1 filterValue.from zero or * and this.minPrice not set or zero\n    //2 filterValue.from == this.minPrice\n    let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;\n\n    //1 filterValue.to == \"*\" or null\n    //2 filterValue.to == this.max\n    let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;\n    return isMinEqual && isMaxEqual;\n  }\n\n\n  render() {\n    return (\n      <Host>\n        {\n          this.filterValues.map((filterValue, index) => {\n            return <label class=\"s-filters-label\" htmlFor={`${this.option.key}-${index}`}>\n              <input\n                id={`${this.option.key}-${index}`}\n                name=\"price\"\n                type=\"radio\"\n                checked={this.isChecked(filterValue)}\n                class=\"s-filters-radio\"\n                onChange={e => this.handleMinMaxPrice(e, filterValue)}\n              />\n              {this.getPriceLabel(filterValue)}\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    this.isReady = true;\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/salla-products-list.entry.js

@@ -1,5 +1,5 @@
 var __awaiter=this&&this.__awaiter||function(e,t,s,r){function i(e){return e instanceof s?e:new s((function(t){t(e)}))}return new(s||(s=Promise))((function(s,n){function a(e){try{l(r.next(e))}catch(e){n(e)}}function o(e){try{l(r["throw"](e))}catch(e){n(e)}}function l(e){e.done?s(e.value):i(e.value).then(a,o)}l((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var s={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},r,i,n,a;return a={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function o(e){return function(t){return l([e,t])}}function l(o){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,o[0]&&(s=0)),s)try{if(r=1,i&&(n=o[0]&2?i["return"]:o[0]?i["throw"]||((n=i["return"])&&n.call(i),0):i.next)&&!(n=n.call(i,o[1])).done)return n;if(i=0,n)o=[o[0]&2,n.value];switch(o[0]){case 0:case 1:n=o;break;case 4:s.label++;return{value:o[1],done:false};case 5:s.label++;i=o[1];o=[0];continue;case 7:o=s.ops.pop();s.trys.pop();continue;default:if(!(n=s.trys,n=n.length>0&&n[n.length-1])&&(o[0]===6||o[0]===2)){s=0;continue}if(o[0]===3&&(!n||o[1]>n[0]&&o[1]<n[3])){s.label=o[1];break}if(o[0]===6&&s.label<n[1]){s.label=n[1];n=o;break}if(n&&s.label<n[2]){s.label=n[2];s.ops.push(o);break}if(n[2])s.ops.pop();s.trys.pop();continue}o=t.call(e,s)}catch(e){o=[6,e];i=0}finally{r=n=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
 /*!
  * Crafted with ❤ by Salla
- */import{r as registerInstance,h,H as Host,g as getElement}from"./index-957caa0e.js";import{a as anime}from"./anime.es-f7ad0bd3.js";var ShoppingBag='\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 sallaProductsListCss="";var SallaProductsList=function(){function e(e){registerInstance(this,e);this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sortBy=undefined;this.filtersResults=undefined;this.horizontalCards=undefined;this.page=1;this.nextPage=undefined;this.hasInfiniteScroll=undefined;this.hasCustomComponent=undefined;this.sourceValueIsValid=undefined;this.placeholderText=undefined;this.isReady=undefined;this.showPlaceholder=undefined;this.parsedFilters=undefined}e.prototype.connectedCallback=function(){var e=this;salla.onReady((function(){e.hasCustomComponent=!!customElements.get("custom-salla-product-card");e.sourceValueIsValid=!!(e.getSourceValue()||e.isSourceWithoutValue());e.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(e.getSource());try{var t=new URLSearchParams(window.location.search);e.sortBy=e.sortBy||t.get("sort")||t.get("by");var s=t.get("filters");e.parsedFilters=s?JSON.parse(decodeURIComponent(s)):{}}catch(e){salla.logger.warn("failed to get filters from url",e.message)}e.buildNextPageUrl();e.createStatusDom();e.isReady=true}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.getSource(),"]"));return}salla.event.on("salla-filters::changed",(function(t){return e.setFilters(t)}))};e.prototype.setFilters=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.parsedFilters=e;return[2,this.reload()]}))}))};e.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){salla.infiniteScroll.destroy(this.infiniteScroll);this.buildNextPageUrl();this.wrapper.innerHTML="";this.init();return[2]}))}))};e.prototype.isFilterable=function(){return salla.config.get("store.settings.product.filters")&&this.filtersResults};e.prototype.isSourceWithoutValue=function(){return["offers","latest","sales"].includes(this.getSource())};e.prototype.animateItems=function(){anime({targets:"salla-products-list salla-product-card",opacity:[0,1],duration:1200,translateY:[20,0],delay:function(e,t){return t*100}})};e.prototype.createStatusDom=function(){var e=this;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(){e.status.querySelector(".s-infinite-scroll-last").innerHTML=salla.lang.get("common.elements.end_of_content");e.status.querySelector(".s-infinite-scroll-error").innerHTML=salla.lang.get("common.elements.failed_to_load_more");e.placeholderText=salla.lang.get("pages.categories.no_products")}))};e.prototype.initBaseNextPageUrl=function(e){var t=this;this.nextPage=salla.url.api("products?source=".concat(e));if(this.limit){this.nextPage+="&per_page=".concat(this.limit>32?32:this.limit)}if(this.sortBy){this.nextPage+="&sort=".concat(this.sortBy)}this.nextPage+="&filterable=1";var s=function(e,s){if(["string","number"].includes(typeof s)){r.nextPage+="&filters[".concat(e,"]=").concat(s)}else if(Array.isArray(s)){s.forEach((function(s){return t.nextPage+="&filters[".concat(e,"][]=").concat(s)}))}else if(typeof s==="object"){for(var i=0,n=Object.entries(s);i<n.length;i++){var a=n[i],o=a[0],l=a[1];r.nextPage+="&filters[".concat(e,"][").concat(o,"]=").concat(l)}}};var r=this;for(var i=0,n=Object.entries(this.parsedFilters||{});i<n.length;i++){var a=n[i],o=a[0],l=a[1];s(o,l)}};e.prototype.buildNextPageUrl=function(){var e=this.getSource();if(e==="json"){return}this.initBaseNextPageUrl(e);if(this.isSourceWithoutValue()){return}if(["search","related","landing-page"].includes(e)){this.nextPage+="&source_value=".concat(this.getSourceValue());return}try{this.nextPage+="&source_value[]=".concat(this.getSourceValue().join("&source_value[]="))}catch(t){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(e,"]"));this.sourceValueIsValid=false}};e.prototype.getSource=function(){return{"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","product.index.sales":"sales","components.most_sales_products":"sales"}[this.source||salla.config.get("page.slug")]||this.source||"latest"};e.prototype.getSourceValue=function(){var e=this.getSource();if(!["search","json","offers","latest","sales"].includes(e)){if(this.sourceValue&&Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(this.sourceValue&&typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}if(!this.sourceValue&&["categories","tags","brands","landing-page"].includes(this.getSource())){return[salla.config.get("page.id")]}}if(this.sourceValue){return this.sourceValue}if(e==="search"){return new URLSearchParams(window.location.search).get("q")}return salla.config.get("page.id")};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";var s=document.createElement(t);s.product=e;if(this.getSource()=="landing-page"&&!this.hasCustomComponent){s.toggleAttribute("hide-add-btn",true);s.classList.add("s-product-card-fit-height")}if(this.horizontalCards&&!this.hasCustomComponent){s.toggleAttribute("horizontal",true);s.toggleAttribute("shadow-on-hover",true)}return s};e.prototype.fetchProducts=function(){var e=this;salla.product.fetch({source:this.getSource(),source_value:this.getSourceValue(),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.initiateInfiniteScroll=function(){var e=this;if(!this.hasInfiniteScroll){return}this.host.insertAdjacentElement("beforeend",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){var s;if(!((s=t.data)===null||s===void 0?void 0:s.length)){e.showPlaceholder=true;salla.infiniteScroll.destroy(e.infiniteScroll);e.loading(false);return}else{e.showPlaceholder=false}e.infiniteScroll.appendItems(e.handleResponse(t));if(e.infiniteScroll.pageIndex==2){e.animateItems()}}));this.infiniteScroll.on("error",(function(){e.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");e.loading(false)}));salla.onReady((function(){return salla.infiniteScroll.loadNextPage(e.infiniteScroll)}))};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.render=function(){var e=this;if(!this.canRender()){return""}if(this.showPlaceholder){return h("div",{class:"s-products-list-placeholder"},h("span",{innerHTML:ShoppingBag}),h("p",null,this.placeholderText))}return h(Host,{class:"s-products-list"},h("div",{class:{"s-products-list-wrapper":true,"s-products-list-horizontal-cards":this.horizontalCards&&!this.filtersResults,"s-products-list-vertical-cards":!this.horizontalCards&&!this.filtersResults,"s-products-list-filters-results":this.filtersResults},ref:function(t){return e.wrapper=t}}))};e.prototype.componentDidLoad=function(){var e=this;if(!this.canRender()){return}if(this.getSource()==="json"){if(!this.getSourceValue().length){this.showPlaceholder=true;return}this.getSourceValue().map((function(t){return e.wrapper.append(e.getItemHTML(t))}));return}if(this.getSource()==="selected"){if(!this.getSourceValue().length){this.showPlaceholder=true;return}this.fetchProducts();return}this.init()};e.prototype.init=function(){this.initiateInfiniteScroll();this.loading()};e.prototype.handleResponse=function(e){var t=this;var s;if(e.filters&&this.isFilterable()){this.filtersResults=true;salla.event.emit("filters::fetched",{filters:e.filters})}else if(this.isFilterable()){salla.event.emit("filters::hidden")}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 getElement(this)},enumerable:false,configurable:true});return e}();SallaProductsList.style=sallaProductsListCss;export{SallaProductsList as salla_products_list};
+ */import{r as registerInstance,h,H as Host,g as getElement}from"./index-957caa0e.js";import{a as anime}from"./anime.es-f7ad0bd3.js";var ShoppingBag='\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 sallaProductsListCss="";var SallaProductsList=function(){function e(e){registerInstance(this,e);this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.sortBy=undefined;this.filtersResults=undefined;this.horizontalCards=undefined;this.page=1;this.nextPage=undefined;this.hasInfiniteScroll=undefined;this.hasCustomComponent=undefined;this.sourceValueIsValid=undefined;this.placeholderText=undefined;this.isReady=undefined;this.showPlaceholder=undefined;this.parsedFilters=undefined}e.prototype.connectedCallback=function(){var e=this;salla.onReady((function(){e.hasCustomComponent=!!customElements.get("custom-salla-product-card");e.sourceValueIsValid=!!(e.getSourceValue()||e.isSourceWithoutValue());e.hasInfiniteScroll=!["json","selected","related","landing-page"].includes(e.getSource());try{var t=new URLSearchParams(window.location.search);e.sortBy=e.sortBy||t.get("sort")||t.get("by");var s=t.get("filters");e.parsedFilters=s?JSON.parse(decodeURIComponent(s)):{}}catch(e){salla.logger.warn("failed to get filters from url",e.message)}e.buildNextPageUrl();e.createStatusDom();e.isReady=true}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.getSource(),"]"));return}salla.event.on("salla-filters::changed",(function(t){return e.setFilters(t)}))};e.prototype.setFilters=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.parsedFilters=e;return[2,this.reload()]}))}))};e.prototype.reload=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){salla.infiniteScroll.destroy(this.infiniteScroll);this.buildNextPageUrl();this.wrapper.innerHTML="";this.init();return[2]}))}))};e.prototype.isFilterable=function(){return salla.config.get("store.settings.product.filters")&&this.filtersResults};e.prototype.isSourceWithoutValue=function(){return["offers","latest","sales"].includes(this.getSource())};e.prototype.animateItems=function(){anime({targets:"salla-products-list salla-product-card",opacity:[0,1],duration:1200,translateY:[20,0],delay:function(e,t){return t*100}})};e.prototype.createStatusDom=function(){var e=this;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(){e.status.querySelector(".s-infinite-scroll-last").innerHTML=salla.lang.get("common.elements.end_of_content");e.status.querySelector(".s-infinite-scroll-error").innerHTML=salla.lang.get("common.elements.failed_to_load_more");e.placeholderText=salla.lang.get("pages.categories.no_products")}))};e.prototype.initBaseNextPageUrl=function(e){var t=this;this.nextPage=salla.url.api("products?source=".concat(e));if(this.limit){this.nextPage+="&per_page=".concat(this.limit>32?32:this.limit)}if(this.sortBy){this.nextPage+="&sort=".concat(this.sortBy)}this.nextPage+="&filterable=1";var s=function(e,s){if(["string","number"].includes(typeof s)){r.nextPage+="&filters[".concat(e,"]=").concat(s)}else if(Array.isArray(s)){s.forEach((function(s){return t.nextPage+="&filters[".concat(e,"][]=").concat(s)}))}else if(typeof s==="object"){for(var i=0,n=Object.entries(s);i<n.length;i++){var a=n[i],o=a[0],l=a[1];r.nextPage+="&filters[".concat(e,"][").concat(o,"]=").concat(l)}}};var r=this;for(var i=0,n=Object.entries(this.parsedFilters||{});i<n.length;i++){var a=n[i],o=a[0],l=a[1];s(o,l)}};e.prototype.buildNextPageUrl=function(){var e=this.getSource();if(e==="json"){return}this.initBaseNextPageUrl(e);if(this.isSourceWithoutValue()){return}if(["search","related","landing-page"].includes(e)){this.nextPage+="&source_value=".concat(this.getSourceValue());return}try{this.nextPage+="&source_value[]=".concat(this.getSourceValue().join("&source_value[]="))}catch(t){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(e,"]"));this.sourceValueIsValid=false}};e.prototype.getSource=function(){return{"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","product.index.sales":"sales","components.most_sales_products":"sales"}[this.source||salla.config.get("page.slug")]||this.source||"latest"};e.prototype.getSourceValue=function(){var e=this.getSource();if(!["search","json","offers","latest","sales"].includes(e)){if(this.sourceValue&&Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(this.sourceValue&&typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}if(!this.sourceValue&&["categories","tags","brands"].includes(this.getSource())){return[salla.config.get("page.id")]}}if(this.sourceValue){return this.sourceValue}if(e==="search"){return new URLSearchParams(window.location.search).get("q")}return salla.config.get("page.id")};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";var s=document.createElement(t);s.product=e;if(this.getSource()=="landing-page"&&!this.hasCustomComponent){s.toggleAttribute("hide-add-btn",true);s.classList.add("s-product-card-fit-height")}if(this.horizontalCards&&!this.hasCustomComponent){s.toggleAttribute("horizontal",true);s.toggleAttribute("shadow-on-hover",true)}return s};e.prototype.fetchProducts=function(){var e=this;salla.product.fetch({source:this.getSource(),source_value:this.getSourceValue(),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.initiateInfiniteScroll=function(){var e=this;if(!this.hasInfiniteScroll){return}this.host.insertAdjacentElement("beforeend",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){var s;if(!((s=t.data)===null||s===void 0?void 0:s.length)){e.showPlaceholder=true;salla.infiniteScroll.destroy(e.infiniteScroll);e.loading(false);return}else{e.showPlaceholder=false}e.infiniteScroll.appendItems(e.handleResponse(t));if(e.infiniteScroll.pageIndex==2){e.animateItems()}}));this.infiniteScroll.on("error",(function(){e.status.querySelector(".s-infinite-scroll-error").classList.remove("s-hidden");e.loading(false)}));salla.onReady((function(){return salla.infiniteScroll.loadNextPage(e.infiniteScroll)}))};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.render=function(){var e=this;if(!this.canRender()){return""}if(this.showPlaceholder){return h("div",{class:"s-products-list-placeholder"},h("span",{innerHTML:ShoppingBag}),h("p",null,this.placeholderText))}return h(Host,{class:"s-products-list"},h("div",{class:{"s-products-list-wrapper":true,"s-products-list-horizontal-cards":this.horizontalCards&&!this.filtersResults,"s-products-list-vertical-cards":!this.horizontalCards&&!this.filtersResults,"s-products-list-filters-results":this.filtersResults},ref:function(t){return e.wrapper=t}}))};e.prototype.componentDidLoad=function(){var e=this;if(!this.canRender()){return}if(this.getSource()==="json"){if(!this.getSourceValue().length){this.showPlaceholder=true;return}this.getSourceValue().map((function(t){return e.wrapper.append(e.getItemHTML(t))}));return}if(this.getSource()==="selected"||this.getSource()==="landing-page"){if(this.getSource()==="selected"&&!this.getSourceValue().length){this.showPlaceholder=true;return}this.fetchProducts();return}this.init()};e.prototype.init=function(){this.initiateInfiniteScroll();this.loading()};e.prototype.handleResponse=function(e){var t=this;var s;if(e.filters&&this.isFilterable()){this.filtersResults=true;salla.event.emit("filters::fetched",{filters:e.filters})}else if(this.isFilterable()){salla.event.emit("filters::hidden")}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 getElement(this)},enumerable:false,configurable:true});return e}();SallaProductsList.style=sallaProductsListCss;export{SallaProductsList as salla_products_list};
 //# sourceMappingURL=salla-products-list.entry.js.map

package/dist/esm-es5/salla-products-list.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["sallaProductsListCss","SallaProductsList","class_1","prototype","connectedCallback","_this","this","salla","onReady","hasCustomComponent","customElements","get","sourceValueIsValid","getSourceValue","isSourceWithoutValue","hasInfiniteScroll","includes","getSource","searchParams","URLSearchParams","window","location","search","sortBy","filters","parsedFilters","JSON","parse","decodeURIComponent","e","logger","warn","message","buildNextPageUrl","createStatusDom","isReady","concat","event","on","setFilters","reload","infiniteScroll","destroy","wrapper","innerHTML","init","isFilterable","config","filtersResults","animateItems","anime","targets","opacity","duration","translateY","delay","_el","i","status","document","createElement","className","lang","btnLoader","querySelector","onLoaded","placeholderText","initBaseNextPageUrl","source","nextPage","url","api","limit","key","value","this_1","Array","isArray","forEach","item","_d","_e","Object","entries","length","_f","k","v","_i","_b","_c","join","sourceValue","loading","isLoading","style","display","getItemHTML","product","customComponentTag","customComponent","toggleAttribute","classList","add","horizontalCards","fetchProducts","fetch","source_value","then","res","data","showPlaceholder","handleResponse","card","append","initiateInfiniteScroll","host","insertAdjacentElement","initiate","path","history","scrollThreshold","response","_a","appendItems","pageIndex","remove","loadNextPage","canRender","render","h","class","ShoppingBag","Host","ref","componentDidLoad","map","emit","cursor","next","option","loadOnScroll"],"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"],"mappings":"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"}
+{"version":3,"names":["sallaProductsListCss","SallaProductsList","class_1","prototype","connectedCallback","_this","this","salla","onReady","hasCustomComponent","customElements","get","sourceValueIsValid","getSourceValue","isSourceWithoutValue","hasInfiniteScroll","includes","getSource","searchParams","URLSearchParams","window","location","search","sortBy","filters","parsedFilters","JSON","parse","decodeURIComponent","e","logger","warn","message","buildNextPageUrl","createStatusDom","isReady","concat","event","on","setFilters","reload","infiniteScroll","destroy","wrapper","innerHTML","init","isFilterable","config","filtersResults","animateItems","anime","targets","opacity","duration","translateY","delay","_el","i","status","document","createElement","className","lang","btnLoader","querySelector","onLoaded","placeholderText","initBaseNextPageUrl","source","nextPage","url","api","limit","key","value","this_1","Array","isArray","forEach","item","_d","_e","Object","entries","length","_f","k","v","_i","_b","_c","join","sourceValue","loading","isLoading","style","display","getItemHTML","product","customComponentTag","customComponent","toggleAttribute","classList","add","horizontalCards","fetchProducts","fetch","source_value","then","res","data","showPlaceholder","handleResponse","card","append","initiateInfiniteScroll","host","insertAdjacentElement","initiate","path","history","scrollThreshold","response","_a","appendItems","pageIndex","remove","loadNextPage","canRender","render","h","class","ShoppingBag","Host","ref","componentDidLoad","map","emit","cursor","next","option","loadOnScroll"],"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'].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' || this.getSource() === 'landing-page') {\n      if (this.getSource() === 'selected' && !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"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-957caa0e.js";var sallaProductsSliderCss="";var SallaProductsSlider=function(){function e(e){var t=this;registerInstance(this,e);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined;salla.onReady((function(){t.sourceValueIsValid=!!(t.sourceValue||["latest","offers"].includes(t.getSource()))}));if(!this.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(this.getSource(),"]"));return}this.hasCustomComponent=!!customElements.get("custom-salla-product-card")}e.prototype.getItemHTML=function(e){if(this.hasCustomComponent){return h("div",{class:"s-products-slider-card"},h("custom-salla-product-card",{product:e,source:this.getSource(),"source-value":this.getSourceValue()}))}return h("div",{class:"s-products-slider-card"},h("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:e}))};e.prototype.getUrlPrefix=function(){var e="";if(this.limit){e="&per_page=".concat(this.limit>32?32:this.limit)}return e};e.prototype.getApiUrl=function(){if(this.getSource()==="json"){return}var e=this.getUrlPrefix();if(["offers","latest"].includes(this.getSource())){return salla.url.api("products?source=".concat(this.getSource()).concat(e))}if(["related","landing-page"].includes(this.getSource())){return salla.url.api("products?source=".concat(this.getSource(),"&source_value=").concat(this.getSourceValue()).concat(e))}try{return salla.url.api("products?source=".concat(this.getSource(),"&source_value[]=").concat(this.getSourceValue().join("&source_value[]=")).concat(e))}catch(e){salla.logger.warn('source-value prop should be array of ids ex source-value="[1,2,3]" for the source ['.concat(this.getSource(),"]"));this.sourceValueIsValid=false}};e.prototype.getSource=function(){return{"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"}[this.source||salla.config.get("page.slug")]||this.source||"latest"};e.prototype.getSourceValue=function(){if(!["search","json"].includes(this.getSource())){if(Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}}return this.sourceValue||salla.config.get("page.id")};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.componentWillLoad=function(){var e=this;if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return}salla.api.request(this.getApiUrl(),null,"get").then((function(t){e.productsData=t.data;e.isReady=true}))};e.prototype.render=function(){var e=this;var t;if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")||!this.canRender()){return}return h(Host,{class:"s-products-slider-wrapper"},h("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},h("div",{slot:"items"},(t=this.productsData)===null||t===void 0?void 0:t.map((function(t){return e.getItemHTML(t)})))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();SallaProductsSlider.style=sallaProductsSliderCss;export{SallaProductsSlider as salla_products_slider};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-957caa0e.js";var sallaProductsSliderCss="";var SallaProductsSlider=function(){function e(e){var t=this;registerInstance(this,e);this.blockTitle=undefined;this.subTitle=undefined;this.sliderId=undefined;this.displayAllUrl=undefined;this.source=undefined;this.sourceValue=undefined;this.limit=undefined;this.productsData=undefined;this.isReady=undefined;this.sourceValueIsValid=undefined;this.hasCustomComponent=undefined;this.apiUrl="";this.parsedSourceValue=undefined;salla.onReady((function(){t.sourceValueIsValid=!!(t.getSource()||t.isSourceWithoutValue());if(!t.sourceValueIsValid){salla.logger.warn("source-value prop is required for source [".concat(t.getSource(),"]"));return}t.hasCustomComponent=!!customElements.get("custom-salla-product-card")}))}e.prototype.isSourceWithoutValue=function(){return["offers","latest","sales"].includes(this.getSource())};e.prototype.getItemHTML=function(e){if(this.hasCustomComponent){return h("div",{class:"s-products-slider-card"},h("custom-salla-product-card",{product:e,source:this.getSource(),"source-value":this.getSourceValue()}))}return h("div",{class:"s-products-slider-card"},h("salla-product-card",{"show-quantity":this.getSource()=="landing-page","hide-add-btn":this.getSource()=="landing-page","shadow-on-hover":true,product:e}))};e.prototype.getSource=function(){return{"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"}[this.source||salla.config.get("page.slug")]||this.source||"latest"};e.prototype.getSourceValue=function(){var e=this.getSource();if(!["search","json","offers","latest","sales"].includes(e)){if(this.sourceValue&&Array.isArray(JSON.parse(this.sourceValue))&&JSON.parse(this.sourceValue).length){return JSON.parse(this.sourceValue)}if(this.sourceValue&&typeof JSON.parse(this.sourceValue)=="number"){return[JSON.parse(this.sourceValue)]}if(!this.sourceValue&&["categories","tags","brands"].includes(this.getSource())){return[salla.config.get("page.id")]}}if(this.sourceValue){return this.sourceValue}if(e==="search"){return new URLSearchParams(window.location.search).get("q")}return salla.config.get("page.id")};e.prototype.canRender=function(){return this.sourceValueIsValid&&this.isReady};e.prototype.componentWillLoad=function(){var e=this;if(this.source==="json"){this.productsData=this.getSourceValue();this.isReady=true;return}return salla.product.fetch({source:this.getSource(),source_value:this.getSourceValue(),limit:this.limit}).then((function(t){e.productsData=t.data;e.isReady=true}))};e.prototype.render=function(){var e=this;var t;if(this.getSource()=="related"&&!salla.config.get("store.settings.product.related_products_enabled")||!this.canRender()){return}return h(Host,{class:"s-products-slider-wrapper"},h("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},h("div",{slot:"items"},(t=this.productsData)===null||t===void 0?void 0:t.map((function(t){return e.getItemHTML(t)})))))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();SallaProductsSlider.style=sallaProductsSliderCss;export{SallaProductsSlider as salla_products_slider};
 //# sourceMappingURL=salla-products-slider.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","hostRef","_this","this","salla","onReady","sourceValueIsValid","sourceValue","includes","getSource","logger","warn","concat","hasCustomComponent","customElements","get","prototype","getItemHTML","product","h","class","source","getSourceValue","getUrlPrefix","urlPrefix","limit","getApiUrl","prefixes","url","api","join","e","config","Array","isArray","JSON","parse","length","canRender","isReady","componentWillLoad","productsData","request","then","res","data","render","Host","id","sliderId","Math","random","toString","substr","type","blockTitle","subTitle","displayAllUrl","slot","_a","map"],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n  &-wrapper{\n\n  }\n  &-slider{\n\n  }\n  &-card{\n\n  }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\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.sourceValueIsValid = !!(this.sourceValue || ['latest', 'offers'].includes(this.getSource()));\n    });\n    if (!this.sourceValueIsValid) {\n      salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\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  /**\n  * Limit for number of products in the list.\n  */\n  @Prop({mutable: true}) limit: number;\n\n   \n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n\n  private getItemHTML(product) {\n    if (this.hasCustomComponent) {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()}/>\n      </div>;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.getSource() == 'landing-page'}\n        hide-add-btn={this.getSource() == 'landing-page'}\n        shadow-on-hover={true}\n        product={product}/>\n    </div>;\n  }\n\n  private getUrlPrefix() {\n    let urlPrefix = '';\n    if (this.limit) {\n      urlPrefix = `&per_page=${this.limit > 32 ? 32 : this.limit}`;\n    }\n    return urlPrefix;\n  }\n\n  getApiUrl() {\n    if (this.getSource() === 'json') {\n      return;\n    }\n    let prefixes = this.getUrlPrefix();\n    if (['offers', 'latest'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}${prefixes}`);\n    }\n    if (['related', 'landing-page'].includes(this.getSource())) {\n      return salla.url.api(`products?source=${this.getSource()}&source_value=${this.getSourceValue()}${prefixes}`);\n    }\n\n    try {\n      return salla.url.api(`products?source=${this.getSource()}&source_value[]=${this.getSourceValue().join('&source_value[]=')}${prefixes}`);\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.getSource()}]`);\n      this.sourceValueIsValid = false;\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    }[this.source || salla.config.get('page.slug')] || this.source ||'latest';\n  }\n\n  private getSourceValue() {\n     if (!['search', 'json'].includes(this.getSource())) {\n      if (Array.isArray(JSON.parse(this.sourceValue)) && JSON.parse(this.sourceValue).length) {\n        return JSON.parse(this.sourceValue);\n      }\n\n      if (typeof JSON.parse(this.sourceValue) == 'number') {\n        return [JSON.parse(this.sourceValue)];\n      }\n    }\n    return this.sourceValue || salla.config.get('page.id');\n  }\n  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  componentWillLoad() {\n    if (this.source === 'json') {\n      this.productsData = this.getSourceValue();\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.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) || !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"],"mappings":"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"}
+{"version":3,"names":["sallaProductsSliderCss","SallaProductsSlider","hostRef","_this","this","salla","onReady","sourceValueIsValid","getSource","isSourceWithoutValue","logger","warn","concat","hasCustomComponent","customElements","get","prototype","includes","getItemHTML","product","h","class","source","getSourceValue","config","sourceValue","Array","isArray","JSON","parse","length","URLSearchParams","window","location","search","canRender","isReady","componentWillLoad","productsData","fetch","source_value","limit","then","res","data","render","Host","id","sliderId","Math","random","toString","substr","type","blockTitle","subTitle","displayAllUrl","slot","_a","map"],"sources":["src/components/salla-products-slider/salla-products-slider.scss?tag=salla-products-slider","src/components/salla-products-slider/salla-products-slider.tsx"],"sourcesContent":[".s-products-slider{\n  &-wrapper{\n\n  }\n  &-slider{\n\n  }\n  &-card{\n\n  }\n}","import {Component, Host, h, Prop, Element, State} from '@stencil/core';\n\n@Component({\n  tag: 'salla-products-slider',\n  styleUrl: 'salla-products-slider.scss'\n})\n\n//todo:: extends this component from salla-products-list or the opposite\nexport class SallaProductsSlider {\n  constructor() {\n    salla.onReady(() => {\n      this.sourceValueIsValid = !!(this.getSource() || this.isSourceWithoutValue());\n      if (!this.sourceValueIsValid) {\n        salla.logger.warn(`source-value prop is required for source [${this.getSource()}]`);\n        return;\n      }\n      this.hasCustomComponent = !!customElements.get('custom-salla-product-card');\n    });\n  }\n  private isSourceWithoutValue() {\n    return ['offers', 'latest', 'sales'].includes(this.getSource());\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  /**\n   * Limit for number of products in the list.\n   */\n  @Prop({mutable: true}) limit: number;\n\n\n  @State() productsData: any;\n  @State() isReady: boolean;\n  @State() sourceValueIsValid: boolean;\n  @State() hasCustomComponent: boolean;\n  @State() apiUrl: string = '';\n  @State() parsedSourceValue: any;\n\n  private getItemHTML(product) {\n    if (this.hasCustomComponent) {\n      return <div class=\"s-products-slider-card\">\n        <custom-salla-product-card product={product} source={this.getSource()} source-value={this.getSourceValue()}/>\n      </div>;\n    }\n\n    return <div class=\"s-products-slider-card\">\n      <salla-product-card\n        show-quantity={this.getSource() == 'landing-page'}\n        hide-add-btn={this.getSource() == 'landing-page'}\n        shadow-on-hover={true}\n        product={product}/>\n    </div>;\n  }\n\n  private 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    }[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'].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  private canRender() {\n    return this.sourceValueIsValid && this.isReady;\n  }\n\n  componentWillLoad() {\n    if (this.source === 'json') {\n      this.productsData = this.getSourceValue();\n      this.isReady = true\n      return;\n    }\n    return  salla.product.fetch({\n      source: this.getSource(),\n      source_value: this.getSourceValue(),\n      limit: this.limit,\n    }).then(res => {\n      this.productsData = res.data\n      this.isReady = true\n    })\n  }\n\n  render() {\n    if ((this.getSource() == 'related' && !salla.config.get('store.settings.product.related_products_enabled')) || !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 => this.getItemHTML(product))}\n          </div>\n        </salla-slider>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"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"}