@salla.sa/twilight-components/dist/twilight/p-30bdeebc.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as s,h as e,a}from"./p-D4I5TLtE.js";import{S as t}from"./p-BscTeWDc.js";import{H as i}from"./p-CHf8XdiS.js";import"./p-CgtvEd63.js";const r=class{constructor(e){s(this,e),this.inputValue="",this.translationLoaded=!1,this.loading=!1,this.typing=!1,this.debounce=setTimeout((()=>""),1e3),this.placeholder=!1,this.inline=!1,this.oval=!1,this.height=60,this.maxWords=5,this.showAction=!1,this.productSlot=this.host.querySelector('[slot="product"]')?.innerHTML||this.getDefaultProductSlot(),salla.event.on("search::open",(()=>this.open())),salla.lang.onLoaded((()=>{this.translationLoaded=!0})),salla.event.on("modalClosed",(()=>this.onModalClose()))}async open(){this.inline||await this.modal.open().then((()=>setTimeout((()=>this.searchInput.focus()),300)))}onModalClose(){this.searchInput.value="",this.results=void 0,this.afterSearching(),this.container.classList.remove("s-search-no-results")}handleKeyDown(s){"Enter"===s.key&&this.search_term?.length&&(window.location.href=salla.url.get("search?q="+encodeURI(this.search_term)))}getDefaultProductSlot(){return'<div class="s-search-product-image-container">  <img class="s-search-product-image" src="{image}" alt="{name}"/></div><div class="s-search-product-details">  <div class="s-search-product-title">{name}</div> <div class="s-search-product-price">{price} <span class="s-search-product-regular-price">{regular_price}</span></div></div>'}debounceSearch(s){this.typing=!0,clearTimeout(this.debounce),this.debounce=setTimeout((()=>{this.typing=!1,this.search_term=s.target.value}),700)}limitWordsAndSearch(s){const e=s.target.value.trim().split(/\s+/);if(e.length>this.maxWords){const s=e.slice(0,this.maxWords).join(" ");this.searchInput.value=s}this.debounceSearch(s)}getQueryParam(s){return new URLSearchParams(window.location.search).get(s)}handleActionClick(){if(this.search_term&&this.search_term.length>2)return this.search(this.search_term)}handleSearch(s){this.inputValue=s,s.length>2?this.search(s):(this.results=void 0,this.afterSearching())}search(s){this.noResults.style.display="none",this.loading=!0,salla.product.fetch({source:"search",source_value:s}).then((e=>{this.results=e,salla.event.emit("Products Searched",s)})).catch((s=>"Query is same as previous one!"!==s?this.results=void 0:null)).finally((()=>this.afterSearching(!1)))}afterSearching(s=!0){this.noResults.style.display=s||this.results?.data.length>0?"none":"block",i.toggleElementClassIf(this.container,"s-search-container-open","s-search-no-results",(()=>this.results?.data.length)),this.loading=!1,salla.product.api.previousQuery="",this.inputValue.length<3&&this.container.classList.remove("s-search-no-results")}render(){const s=e("div",{key:"25857ea8c54c56875ed665e9163db0b0dfc23d48",class:{"s-search-container":!0,"s-search-inline":this.inline},ref:s=>this.container=s},e("div",{key:"2d75789cec346377f1ad6e27605868a747f57ec0",class:"s-search-input-wrapper"},e("span",{key:"68f3d318d8a1a54aff7da564f571bb7e1521d600",class:"s-search-icon-wrap"},e("span",{key:"479b33adc20e2e6c34eff5fda4e303bfae16e445",class:"s-search-icon",innerHTML:this.loading?'<i class="s-search-spinner-loader"/>':t})),e("input",{key:"4577ea9dbec8175e52603a0934a2d6f22aa26a02",type:"search",enterkeyhint:"search",autocomplete:"off",class:"s-search-input",placeholder:salla.lang.get("blocks.header.search_placeholder"),onInput:s=>this.limitWordsAndSearch(s),onKeyDown:s=>this.handleKeyDown(s),ref:s=>this.searchInput=s,style:{height:this.height+"px",borderRadius:this.oval?this.height/2+"px":""}}),this.showAction?e("salla-button",{loading:this.loading,class:{"s-search-action":!0,"s-search-action-oval":this.oval},onClick:()=>this.handleActionClick()},!this.loading&&e("span",{innerHTML:t})):null),e("div",{key:"0607676854eefa6966ec38c0d2e6dd5a3c6423bb",class:"s-search-results"},this.results?.data.map((s=>e("a",{href:s.url+"?from=search-bar",class:{"s-search-product":!0,"s-search-product-not-available":!s.is_available},innerHTML:this.productSlot.replace(/\{name\}/g,s.name).replace(/\{price\}/g,s.price?salla.money(s.price):"").replace(/\{regular_price\}/g,s.is_on_sale&&s.regular_price?salla.money(s.regular_price):"").replace(/\{image\}/g,s.image.url)}))),e("p",{key:"7136791cf4dc3d523cdba41367bd7691fd4ad9ba",ref:s=>this.noResults=s,class:"s-search-no-results-placeholder"},salla.lang.get("common.elements.no_options")))),a=e("salla-modal",{key:"ec8705a09e4993459d92569a5b71836cb0acefd8",position:"top",class:"s-search-modal",ref:s=>this.modal=s},s),i=e("div",{key:"19b7e1c22e3a40c780eff0c74a23413f089ec96b",class:"s-search-placeholder-wrapper s-search-inline"},e("div",{key:"d87fc19fce928f230edb427e952903262a9ba32c",class:"s-search-input-wrapper"},e("span",{key:"6475d41b267a2b35027016b5de474463cc7e6055",class:"s-search-icon-wrap"},e("span",{key:"e6ebac28c76a8a9824188da7ad2c290db610094f",class:"s-search-icon",innerHTML:t})),e("button",{key:"3d7db311a4c348d4baaf1cb50eb5a0ed7953b28e",type:"button",class:"s-search-input s-search-placeholder-trigger",onClick:()=>this.open(),style:{height:this.height+"px",borderRadius:this.oval?this.height/2+"px":""}},salla.lang.get("blocks.header.search_placeholder"))),a);return this.placeholder?i:this.inline?e("div",{class:"s-search-modal"},s):a}componentDidLoad(){this.afterSearching(),this.searchInput.value=this.getQueryParam("q")}get host(){return a(this)}static get watchers(){return{search_term:["handleSearch"]}}};r.style=".s-search-placeholder-wrapper{position:relative;display:inline-block}.s-search-input-wrapper{position:relative}.s-search-placeholder-trigger{cursor:pointer;appearance:none;text-align:start}";export{r as salla_search}