@salla.sa/twilight-components
Version:
Salla Web Component
4 lines • 6.04 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as t,c as s,h as e,H as i}from"./p-BHYtfMwX.js";import{a}from"./p-BedNk7k1.js";const l=class{constructor(e){t(this,e),this.changed=s(this,"changed"),this.min=0,this.max=1e4,this.moreThanLabel="أكثر من",this.lessThanLabel="أقل من",this.toLabel="الى",this.fromLabel="من",this.typing=!1,this.isMin=!1,this.isRTL=salla.config.get("theme.is_rtl",!0),this.filterValues=[]}connectedCallback(){if(this.filtersData&&this.filtersData?.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)})),1==this.option.values.length)return;if(this.option.values.length<=5)return void(this.filterValues=this.option.values);const t=Math.ceil(this.option.values.length/5);for(let s=0;s<this.option.values.length;s+=t)this.filterValues.push(this.option.values.slice(s,s+t).reduce(((t,s)=>(t.to=s.to,t.count+=s.count,t))))}async reset(){this.minInput.value=null,this.maxInput.value=null,this.minPrice=null,this.maxPrice=null}getPriceLabel(t){return isNaN(t.from)||t.from<1?`${this.lessThanLabel} ${salla.money(t.to)}`:isNaN(t.to)||t.to<1?`${this.moreThanLabel} ${salla.money(t.from)}`:`${salla.money(t.from)} ${this.toLabel} ${salla.money(t.to)}`}minInputValidation(t){t&&(t>this.max||this.maxPrice&&t>this.maxPrice)||(t<this.min?this.minPrice=this.min:t&&(this.minPrice=t))}maxInputValidation(t){t&&(t<this.min||this.minPrice&&t<this.minPrice)||t>this.max&&(this.maxPrice=this.max)}async changedEventHandler(t){salla.helpers.inputDigitsOnly(this.minInput),salla.helpers.inputDigitsOnly(this.maxInput);const s=this.minPrice?1*+this.minPrice:null,e=this.maxPrice?1*+this.maxPrice:null;this.maxPrice||(this.maxPrice=""),this.isMin?this.minInputValidation(s):(this.minPrice||(this.minPrice=0),this.maxInputValidation(e)),this.isReady&&this.changed.emit({event:t,option:this.option,value:{max:this.maxPrice,min:this.minPrice}})}handleMinMaxPrice(t,s){this.minPrice=s.from,this.maxPrice="*"!==s.to?s.to:"",this.changedEventHandler(t)}isChecked(t){return!(!this.minPrice&&!this.maxPrice)&&(((t.from<1||"*"==t.from)&&0==this.minPrice||t.from==this.minPrice)&&("*"==t.to||!t.to||t.to==this.maxPrice))}handleMinPrice(t){this.isMin=!0;const s=t.target.value;this.minPrice=""===s?0:s}handleMaxPrice(t){this.isMin=!1;const s=t.target.value;this.maxPrice=void 0===s?"":s}render(){return e(i,{key:"b3292086c1beb0d5df51712839daabb25dad2658"},this.filterValues.map(((t,s)=>e("label",{class:"s-filters-label",htmlFor:`${this.option.key}-${s}`,key:s},e("input",{id:`${this.option.key}-${s}`,name:"price",type:"radio",checked:this.isChecked(t),class:"s-filters-radio",onChange:s=>this.handleMinMaxPrice(s,t)}),e("span",{innerHTML:this.getPriceLabel(t)})))),e("div",{key:"d987fea90281b884a1db631f0f3f90a53353ce65",class:"flex justify-center items-center"},e("div",{key:"17aec2dff1433bae4f8d06679a86af7d41019a7d",class:"relative max-w-xl w-full"},e("div",{key:"fad234797e87821b0df33a5275a3c4bd3ea75fa9",class:"s-price-range-inputs"},e("div",{key:"7099b01a40271f0757149260a560d038763b0322",class:"s-price-range-relative"},e("div",{key:"44178266832f05eaf0ca33aa0a2f6436da846100",class:"s-price-range-currency"}," ",salla.config.currency().symbol),e("input",{key:"70cda3b471c177958870527a4f0008cf951a381a",type:"number",maxlength:"5",ref:t=>this.minInput=t,onBlur:t=>this.handleMinPrice(t),value:this.minPrice,placeholder:this.fromLabel,class:"s-price-range-number-input"})),e("div",{key:"be3f732538589997f52d2340c72b16e419406666",class:"s-price-range-gray-text"}," -"),e("div",{key:"5de9d9ba6e5925da36c3483b82167894e49b0088",class:"s-price-range-relative"},e("div",{key:"903371ebc01237214fc143447789dd8011f86045",class:"s-price-range-currency"}," ",salla.config.currency().symbol),e("input",{key:"88dbf3b5930adb70fc16fc2a95d471185fcf760a",type:"number",maxlength:"5",ref:t=>this.maxInput=t,onBlur:t=>this.handleMaxPrice(t),value:this.maxPrice,placeholder:this.toLabel,class:"s-price-range-number-input","aria-describedby":"price-currency"})),e("salla-button",{key:"8b10d455ca665e4a0df80fa3a6c05b3501e769f4",color:"gray",shape:"icon",size:"small",fill:"outline",onClick:t=>this.changedEventHandler(t)},e("span",{key:"8935d722de14843a1efaa4b784e5aa487e80be77",innerHTML:this.isRTL?a:'\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>arrow-right</title>\n<path d="M29.217 15.465c-0.019-0.044-0.056-0.077-0.080-0.119-0.067-0.116-0.139-0.227-0.236-0.317-0.011-0.009-0.013-0.024-0.024-0.033l-10.667-9.333c-0.553-0.484-1.396-0.429-1.881 0.125-0.484 0.555-0.428 1.396 0.127 1.881l7.996 6.997h-20.452c-0.737 0-1.333 0.597-1.333 1.333s0.596 1.333 1.333 1.333h20.452l-7.996 6.997c-0.555 0.485-0.611 1.327-0.127 1.881 0.264 0.3 0.633 0.455 1.004 0.455 0.312 0 0.625-0.109 0.877-0.331l10.667-9.333c0.011-0.009 0.015-0.024 0.024-0.033 0.097-0.091 0.169-0.201 0.236-0.317 0.024-0.041 0.060-0.075 0.080-0.119 0.073-0.163 0.116-0.343 0.116-0.533s-0.043-0.371-0.116-0.535z"></path>\n</svg>\n'}))))))}componentDidLoad(){this.isReady=!0}};l.style=":host{display:block}.rtl .rtl-range-slider,[dir=rtl] .rtl-range-slider{transform:rotateY(180deg)}.rtl .rtl-range-numbers,[dir=rtl] .rtl-range-numbers{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%}";export{l as salla_price_range}