@salla.sa/twilight-components 2.12.0 → 2.12.2

package/dist/twilight/p-ab31fcc3.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Crafted with ❤ by Salla
- */
-import{r as t,c as e,h as i,H as s}from"./p-c76c4ed2.js";const r=":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%}";const l=class{constructor(i){t(this,i);this.changed=e(this,"changed",7);this.filterValues=[];this.minPrice=1e3;this.maxPrice=5e3;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.priceOptions=undefined;this.moreThanLabel="أكثر من";this.lessThanLabel="أقل من";this.toLabel="الى";this.fromLabel="من"}connectedCallback(){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}salla.lang.onLoaded((()=>{this.moreThanLabel=salla.lang.getWithDefault("common.elements.more_than",this.moreThanLabel);this.lessThanLabel=salla.lang.getWithDefault("common.elements.less_than",this.lessThanLabel);this.toLabel=salla.lang.getWithDefault("common.elements.to",this.toLabel);this.fromLabel=salla.lang.getWithDefault("common.elements.from",this.fromLabel)}));if(this.option.values.length==1){return}if(this.option.values.length<=5){this.filterValues=this.option.values;return}const e=Math.ceil(this.option.values.length/5);for(let t=0;t<this.option.values.length;t+=e){this.filterValues.push(this.option.values.slice(t,t+e).reduce(((t,e)=>{t.to=e.to;t.count+=e.count;return t})))}}async reset(){this.minInput.value=null;this.maxInput.value=null}getPriceLabel(t){if(isNaN(t.from)||t.from<1){return`${this.lessThanLabel} ${salla.money(t.to)}`}if(isNaN(t.to)||t.to<1){return`${this.moreThanLabel} ${salla.money(t.from)}`}return`${salla.money(t.from)} ${this.toLabel} ${salla.money(t.to)}`}handleMinMaxPrice(t,e){this.minPrice=e.from;this.maxPrice=e.to!="*"?e.to:null;this.changedEventHandler(t)}async changedEventHandler(t,e=false){salla.helpers.inputDigitsOnly(t.target);let i=t?t.target.value*1:null;if(e){this.minInputValidation(i)}else{this.maxInputValidation(i)}this.isReady&&this.changed.emit({event:t,option:this.option,value:{max:this.maxPrice,min:this.minPrice}})}minInputValidation(t){if(t&&(t>this.max||t>this.maxPrice)){return}if(t<this.min){this.minPrice=this.min;return}if(t){this.minPrice=t}}maxInputValidation(t){if(t&&(t<this.min||t<this.minPrice)){return}if(t>this.max){this.maxPrice=this.max;return}if(t){this.maxPrice=t}}isChecked(t){if(!this.minPrice&&!this.maxPrice){return false}let e=(t.from<1||t.from=="*")&&this.minPrice==0||t.from==this.minPrice;let i=t.to=="*"||!t.to||t.to==this.maxPrice;return e&&i}render(){return i(s,null,this.filterValues.map(((t,e)=>i("label",{class:"s-filters-label",htmlFor:`${this.option.key}-${e}`},i("input",{id:`${this.option.key}-${e}`,name:"price",type:"radio",checked:this.isChecked(t),class:"s-filters-radio",onChange:e=>this.handleMinMaxPrice(e,t)}),this.getPriceLabel(t)))),i("div",{class:"flex justify-center items-center"},i("div",{class:"relative max-w-xl w-full"},i("div",{class:"s-price-range-inputs"},i("div",{class:"s-price-range-relative"},i("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),i("input",{type:"number",maxlength:"5",ref:t=>this.minInput=t,onInput:t=>this.changedEventHandler(t,true),value:this.minPrice,placeholder:this.fromLabel,class:"s-price-range-number-input"})),i("div",{class:"s-price-range-gray-text"}," -"),i("div",{class:"s-price-range-relative"},i("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),i("input",{type:"number",maxlength:"5",placeholder:this.toLabel,ref:t=>this.maxInput=t,onInput:t=>this.changedEventHandler(t),value:this.maxPrice,class:"s-price-range-number-input","aria-describedby":"price-currency"}))))))}componentDidLoad(){this.isReady=true}};l.style=r;export{l as salla_price_range};
-//# sourceMappingURL=p-ab31fcc3.entry.js.map

package/dist/twilight/p-ab31fcc3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","this","filterValues","connectedCallback","filtersData","_a","price","minPrice","min","maxPrice","max","salla","lang","onLoaded","moreThanLabel","getWithDefault","lessThanLabel","toLabel","fromLabel","option","values","length","chunkSize","Math","ceil","i","push","slice","reduce","final","currentValue","to","count","async","minInput","value","maxInput","getPriceLabel","filterValue","isNaN","from","money","handleMinMaxPrice","event","changedEventHandler","isMin","helpers","inputDigitsOnly","target","minInputValidation","maxInputValidation","isReady","changed","emit","isChecked","isMinEqual","isMaxEqual","render","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  /**\n   * The minimum price value.\n   */\n  @Prop({mutable: true}) minPrice:number| \"*\" = 1000;\n\n  /**\n   * The maximum price value.\n   */\n  @Prop({mutable: true}) maxPrice = 5000;\n\n  /**\n   * Price filter option along with the minimum and maximum range values.\n   */\n  @Prop({reflect: true}) option: Filter;\n\n  /**\n   * Selected price filter option values.\n   */\n  @Prop({reflect: true}) filtersData: any;\n\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() priceOptions: any;\n  @State() moreThanLabel: string=\"أكثر من\";\n  @State() lessThanLabel: string=\"أقل من\";\n  @State() toLabel: string=\"الى\";\n  @State() fromLabel: string=\"من\";\n\n  /**\n   * Custome event emitted when there is a change in price input.\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    salla.lang.onLoaded(() => {\n      this.moreThanLabel=salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel)\n      this.lessThanLabel=salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n      this.toLabel=salla.lang.getWithDefault('common.elements.to', this.toLabel)\n      this.fromLabel=salla.lang.getWithDefault('common.elements.from', this.fromLabel)\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 `${this.lessThanLabel} ${salla.money(filterValue.to)}`;\n    }\n    // @ts-ignore\n    if (isNaN(filterValue.to) || filterValue.to < 1) {\n      return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;\n    }\n\n    return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;\n  }\n\n  private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n    //todo:: cover when from is star\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    salla.helpers.inputDigitsOnly(event.target)\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    //@ts-ignore\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: FilterValue, index: number) => {\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={this.fromLabel}\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={this.toLabel}\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/twilight/p-bd9159c0.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,n,i){function r(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,a){function l(e){try{s(i.next(e))}catch(e){a(e)}}function o(e){try{s(i["throw"](e))}catch(e){a(e)}}function s(e){e.done?n(e.value):r(e.value).then(l,o)}s((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,r,a,l;return l={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(l[Symbol.iterator]=function(){return this}),l;function o(e){return function(t){return s([e,t])}}function s(o){if(i)throw new TypeError("Generator is already executing.");while(l&&(l=0,o[0]&&(n=0)),n)try{if(i=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:n.label++;return{value:o[1],done:false};case 5:n.label++;r=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(a=n.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1];a=o;break}if(a&&n.label<a[2]){n.label=a[2];n.ops.push(o);break}if(a[2])n.ops.pop();n.trys.pop();continue}o=t.call(e,n)}catch(e){o=[6,e];r=0}finally{i=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};
-/*!
- * Crafted with ❤ by Salla
- */System.register(["./p-9fcca94b.system.js"],(function(e){"use strict";var t,n,i,r;return{setters:[function(e){t=e.r;n=e.c;i=e.h;r=e.H}],execute:function(){var a=":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 l=e("salla_price_range",function(){function e(e){t(this,e);this.changed=n(this,"changed",7);this.filterValues=[];this.minPrice=1e3;this.maxPrice=5e3;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.priceOptions=undefined;this.moreThanLabel="أكثر من";this.lessThanLabel="أقل من";this.toLabel="الى";this.fromLabel="من"}e.prototype.connectedCallback=function(){var e=this;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}salla.lang.onLoaded((function(){e.moreThanLabel=salla.lang.getWithDefault("common.elements.more_than",e.moreThanLabel);e.lessThanLabel=salla.lang.getWithDefault("common.elements.less_than",e.lessThanLabel);e.toLabel=salla.lang.getWithDefault("common.elements.to",e.toLabel);e.fromLabel=salla.lang.getWithDefault("common.elements.from",e.fromLabel)}));if(this.option.values.length==1){return}if(this.option.values.length<=5){this.filterValues=this.option.values;return}var n=Math.ceil(this.option.values.length/5);for(var i=0;i<this.option.values.length;i+=n){this.filterValues.push(this.option.values.slice(i,i+n).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(this.lessThanLabel," ").concat(salla.money(e.to))}if(isNaN(e.to)||e.to<1){return"".concat(this.moreThanLabel," ").concat(salla.money(e.from))}return"".concat(salla.money(e.from)," ").concat(this.toLabel," ").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 n;return __generator(this,(function(i){salla.helpers.inputDigitsOnly(e.target);n=e?e.target.value*1:null;if(t){this.minInputValidation(n)}else{this.maxInputValidation(n)}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 n=e.to=="*"||!e.to||e.to==this.maxPrice;return t&&n};e.prototype.render=function(){var e=this;return i(r,null,this.filterValues.map((function(t,n){return i("label",{class:"s-filters-label",htmlFor:"".concat(e.option.key,"-").concat(n)},i("input",{id:"".concat(e.option.key,"-").concat(n),name:"price",type:"radio",checked:e.isChecked(t),class:"s-filters-radio",onChange:function(n){return e.handleMinMaxPrice(n,t)}}),e.getPriceLabel(t))})),i("div",{class:"flex justify-center items-center"},i("div",{class:"relative max-w-xl w-full"},i("div",{class:"s-price-range-inputs"},i("div",{class:"s-price-range-relative"},i("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),i("input",{type:"number",maxlength:"5",ref:function(t){return e.minInput=t},onInput:function(t){return e.changedEventHandler(t,true)},value:this.minPrice,placeholder:this.fromLabel,class:"s-price-range-number-input"})),i("div",{class:"s-price-range-gray-text"}," -"),i("div",{class:"s-price-range-relative"},i("div",{class:"s-price-range-currency"}," ",salla.config.currency().symbol),i("input",{type:"number",maxlength:"5",placeholder:this.toLabel,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}());l.style=a}}}));
-//# sourceMappingURL=p-bd9159c0.system.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","exports","this","filterValues","class_1","prototype","connectedCallback","_this","filtersData","_a","price","minPrice","min","maxPrice","max","salla","lang","onLoaded","moreThanLabel","getWithDefault","lessThanLabel","toLabel","fromLabel","option","values","length","chunkSize","Math","ceil","i","push","slice","reduce","final","currentValue","to","count","reset","minInput","value","maxInput","getPriceLabel","filterValue","isNaN","from","concat","money","handleMinMaxPrice","event","changedEventHandler","isMin","helpers","inputDigitsOnly","target","minInputValidation","maxInputValidation","isReady","changed","emit","isChecked","isMinEqual","isMaxEqual","render","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  /**\n   * The minimum price value.\n   */\n  @Prop({mutable: true}) minPrice:number| \"*\" = 1000;\n\n  /**\n   * The maximum price value.\n   */\n  @Prop({mutable: true}) maxPrice = 5000;\n\n  /**\n   * Price filter option along with the minimum and maximum range values.\n   */\n  @Prop({reflect: true}) option: Filter;\n\n  /**\n   * Selected price filter option values.\n   */\n  @Prop({reflect: true}) filtersData: any;\n\n  @State() min = 0;\n  @State() max = 10000;\n\n  @State() priceOptions: any;\n  @State() moreThanLabel: string=\"أكثر من\";\n  @State() lessThanLabel: string=\"أقل من\";\n  @State() toLabel: string=\"الى\";\n  @State() fromLabel: string=\"من\";\n\n  /**\n   * Custome event emitted when there is a change in price input.\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    salla.lang.onLoaded(() => {\n      this.moreThanLabel=salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel)\n      this.lessThanLabel=salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel)\n      this.toLabel=salla.lang.getWithDefault('common.elements.to', this.toLabel)\n      this.fromLabel=salla.lang.getWithDefault('common.elements.from', this.fromLabel)\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 `${this.lessThanLabel} ${salla.money(filterValue.to)}`;\n    }\n    // @ts-ignore\n    if (isNaN(filterValue.to) || filterValue.to < 1) {\n      return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;\n    }\n\n    return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;\n  }\n\n  private handleMinMaxPrice(event: Event, value: FilterValue): void {\n\n    //todo:: cover when from is star\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    salla.helpers.inputDigitsOnly(event.target)\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    //@ts-ignore\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: FilterValue, index: number) => {\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={this.fromLabel}\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={this.toLabel}\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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"}