@salla.sa/twilight-components 2.11.123 → 2.11.124

package/dist/twilight/p-d4d0a75e.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-3c7d3f26.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=undefined;this.maxPrice=undefined;this.option=undefined;this.filtersData=undefined;this.min=0;this.max=1e4;this.priceOptions=undefined}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}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`اقل من ${salla.money(t.to)}`}if(isNaN(t.to)||t.to<1){return`أكثر من ${salla.money(t.from)}`}return`${salla.money(t.from)} الى ${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:"من",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:"الى",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-d4d0a75e.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sallaPriceRangeCss","SallaPriceRange","this","filterValues","connectedCallback","filtersData","_a","price","minPrice","min","maxPrice","max","option","values","length","chunkSize","Math","ceil","i","push","slice","reduce","final","currentValue","to","count","async","minInput","value","maxInput","getPriceLabel","filterValue","isNaN","from","salla","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  @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    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    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":";;;yDAAA,MAAMA,EAAqB,0nB,MCOdC,EAAe,M,0DAe1BC,KAAAC,aAAmC,G,0GAVpB,E,SACA,I,4BAYfC,oB,MACE,GAAIF,KAAKG,eAAeC,EAAAJ,KAAKG,eAAW,MAAAC,SAAA,SAAAA,EAAEC,OAAO,CAC/CL,KAAKM,SAAWN,KAAKG,YAAYE,MAAME,IACvCP,KAAKQ,SAAWR,KAAKG,YAAYE,MAAMI,G,CAIzC,GAAIT,KAAKU,OAAOC,OAAOC,QAAU,EAAG,CAClC,M,CAGF,GAAIZ,KAAKU,OAAOC,OAAOC,QAAU,EAAG,CAClCZ,KAAKC,aAAeD,KAAKU,OAAOC,OAChC,M,CAEF,MAAME,EAAYC,KAAKC,KAAKf,KAAKU,OAAOC,OAAOC,OAAS,GACxD,IAAK,IAAII,EAAI,EAAGA,EAAIhB,KAAKU,OAAOC,OAAOC,OAAQI,GAAKH,EAAW,CAC7Db,KAAKC,aAAagB,KAChBjB,KAAKU,OAAOC,OACTO,MAAMF,EAAGA,EAAIH,GACbM,QAAO,CAACC,EAAoBC,KAC3BD,EAAME,GAAKD,EAAaC,GACxBF,EAAMG,OAASF,EAAaE,MAC5B,OAAOH,CAAK,I,EAQtBI,cAEExB,KAAKyB,SAASC,MAAQ,KACtB1B,KAAK2B,SAASD,MAAQ,I,CAGhBE,cAAcC,GAEpB,GAAIC,MAAMD,EAAYE,OAASF,EAAYE,KAAO,EAAG,CACnD,MAAO,UAAUC,MAAMC,MAAMJ,EAAYP,K,CAG3C,GAAIQ,MAAMD,EAAYP,KAAOO,EAAYP,GAAK,EAAG,CAC/C,MAAO,WAAWU,MAAMC,MAAMJ,EAAYE,O,CAG5C,MAAO,GAAGC,MAAMC,MAAMJ,EAAYE,aAAaC,MAAMC,MAAMJ,EAAYP,K,CAIjEY,kBAAkBC,EAAcT,GAEtC1B,KAAKM,SAAWoB,EAAMK,KACtB/B,KAAKQ,SAAWkB,EAAMJ,IAAM,IAAMI,EAAMJ,GAAK,KAE7CtB,KAAKoC,oBAAoBD,E,CAGnBX,0BAA0BW,EAAOE,EAAQ,OAC/CL,MAAMM,QAAQC,gBAAgBJ,EAAMK,QACpC,IAAId,EAAQS,EAAQA,EAAMK,OAAOd,MAAQ,EAAI,KAC7C,GAAIW,EAAO,CACTrC,KAAKyC,mBAAmBf,E,KACnB,CACL1B,KAAK0C,mBAAmBhB,E,CAI1B1B,KAAK2C,SAAW3C,KAAK4C,QAAQC,KAAK,CAChCV,MAAOA,EACPzB,OAAQV,KAAKU,OACbgB,MAAO,CAACjB,IAAKT,KAAKQ,SAAUD,IAAKP,KAAKM,W,CAK1CmC,mBAAmBf,GACjB,GAAIA,IAAUA,EAAQ1B,KAAKS,KAAOiB,EAAQ1B,KAAKQ,UAAW,CAExD,M,CAGF,GAAIkB,EAAQ1B,KAAKO,IAAK,CACpBP,KAAKM,SAAWN,KAAKO,IACrB,M,CAGF,GAAImB,EAAO,CACT1B,KAAKM,SAAWoB,C,EAIpBgB,mBAAmBhB,GACjB,GAAIA,IAAUA,EAAQ1B,KAAKO,KAAOmB,EAAQ1B,KAAKM,UAAW,CAExD,M,CAEF,GAAIoB,EAAQ1B,KAAKS,IAAK,CACpBT,KAAKQ,SAAWR,KAAKS,IACrB,M,CAGF,GAAIiB,EAAO,CACT1B,KAAKQ,SAAWkB,C,EAIZoB,UAAUjB,GAChB,IAAK7B,KAAKM,WAAaN,KAAKQ,SAAU,CACpC,OAAO,K,CAKT,IAAIuC,GAAelB,EAAYE,KAAO,GAAKF,EAAYE,MAAQ,MAAQ/B,KAAKM,UAAY,GAAMuB,EAAYE,MAAQ/B,KAAKM,SAIvH,IAAI0C,EAAanB,EAAYP,IAAM,MAAQO,EAAYP,IAAMO,EAAYP,IAAMtB,KAAKQ,SACpF,OAAOuC,GAAcC,C,CAIvBC,SACE,OACEC,EAACC,EAAI,KAEDnD,KAAKC,aAAamD,KAAI,CAACvB,EAAawB,IAC3BH,EAAA,SAAOI,MAAM,kBAAkBC,QAAS,GAAGvD,KAAKU,OAAO8C,OAAOH,KACnEH,EAAA,SACEO,GAAI,GAAGzD,KAAKU,OAAO8C,OAAOH,IAC1BK,KAAK,QACLC,KAAK,QACLC,QAAS5D,KAAK8C,UAAUjB,GACxByB,MAAM,kBACNO,SAAUC,GAAK9D,KAAKkC,kBAAkB4B,EAAGjC,KAE1C7B,KAAK4B,cAAcC,MAM1BqB,EAAA,OAAKI,MAAM,oCACTJ,EAAA,OAAKI,MAAM,4BACTJ,EAAA,OAAKI,MAAM,wBACTJ,EAAA,OAAKI,MAAM,0BACTJ,EAAA,OAAKI,MAAM,0BAAwB,IAAGtB,MAAM+B,OAAOC,WAAWC,QAC9Df,EAAA,SACES,KAAK,SACLO,UAAU,IACVC,IAAKC,GAAMpE,KAAKyB,SAAW2C,EAC3BC,QAAUlC,GAAUnC,KAAKoC,oBAAoBD,EAAO,MACpDT,MAAO1B,KAAKM,SACZgE,YAAY,KACZhB,MAAM,gCAIVJ,EAAA,OAAKI,MAAM,2BAAyB,MACpCJ,EAAA,OAAKI,MAAM,0BACTJ,EAAA,OAAKI,MAAM,0BAAwB,IAAGtB,MAAM+B,OAAOC,WAAWC,QAC9Df,EAAA,SAAOS,KAAK,SAASO,UAAU,IACxBI,YAAY,MACZH,IAAKC,GAAMpE,KAAK2B,SAAWyC,EAC3BC,QAAUlC,GAAUnC,KAAKoC,oBAAoBD,GAC7CT,MAAO1B,KAAKQ,SACZ8C,MAAM,6BAA4B,mBAAkB,uB,CASzEiB,mBACEvE,KAAK2C,QAAU,I"}