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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as s,h as e,a}from"./p-BHYtfMwX.js";import{S as t}from"./p-BscTeWDc.js";import{H as i}from"./p-CHf8XdiS.js";import"./p-CgtvEd63.js";const c=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:"d152ce7b41f44975724214a4957b366a3d372efe",class:{"s-search-container":!0,"s-search-inline":this.inline},ref:s=>this.container=s},e("div",{key:"19c13742ed6b78300da453503c01052cc56e6224",class:"s-search-input-wrapper"},e("span",{key:"65b092ca1797d23fca0370578c3780bb553bbc2e",class:"s-search-icon-wrap"},e("span",{key:"14caaa450614f8dd99b05edd447184ab79cd94f2",class:"s-search-icon",innerHTML:this.loading?'<i class="s-search-spinner-loader"/>':t})),e("input",{key:"4656f0002ff24e9948c5799d5bbed20e59eee2e9",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:"ca998ee139b31b0284ae72ccd1f9466f697feb6a",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:"c8f2750a602097c96b1424acc35d2a190f86bf5d",ref:s=>this.noResults=s,class:"s-search-no-results-placeholder"},salla.lang.get("common.elements.no_options")))),a=e("salla-modal",{key:"2656ec22b40c5d69c9ce9887ff683d119ef826e2",position:"top",class:"s-search-modal",ref:s=>this.modal=s},s),i=e("div",{key:"8f771fddec5620cbfc8259a6d94e955db0f5e787",class:"s-search-placeholder-wrapper s-search-inline"},e("div",{key:"a6ac18f63248ae303d05f8ed62f0dadfded33fad",class:"s-search-input-wrapper"},e("span",{key:"5996163e3314b9c9240018e438f121d553e58e0f",class:"s-search-icon-wrap"},e("span",{key:"581c625690b9fc000108bc5ba642f3a3452f67c8",class:"s-search-icon",innerHTML:t})),e("button",{key:"8f7edf24f999f3c5a37cca2c82c664822e729088",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"]}}};c.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{c as salla_search}