1import{d as e}from"./defineElement-Bh-rOTph.js";import"./GlobalStylesStore--z5tmrDj.js";import{T as t}from"./TemplateElement-u6hNeGmQ.js";import{M as r}from"./ModalElementEvent-C2IIP3nm.js";import"./search-suggestion-DM7e3QJP.js";import"./search-history-BR-dxjRS.js";import{productSearchStore as o}from"./product-search-store-D4Xvxc5Q.js";import{h as s}from"./html-BmWsKWcd.js";import"./StyledElement-Dmi2NcTH.js";import"./i18n-Ccmx08iC.js";import"./product-count-Dvg8kAXN.js";import"./product-list-DSs5D9DO.js";import"./loading-spinner-O93VGWsC.js";import"./highlight-text-UyVTaW3X.js";import"./directives-geaH8KPO.js";import"./search-history-BzwGFvd1.js";import"./js.cookie-BZunJvXJ.js";class c extends t{styles(){return["battery-included-product-search-form{--input-background-color:#fff}battery-included-product-search-form .input-search{background-color:var(--input-background-color)}battery-included-product-search-form .input-search input{caret-color:var(--colors-brand-400,#60a5fa);background-color:transparent}battery-included-product-search-form .input-search input::-moz-placeholder{color:var(--colors-grey-400,#999999);font-weight:200}battery-included-product-search-form .input-search input::placeholder{color:var(--colors-grey-400,#999999);font-weight:200}battery-included-product-search-form .input-search input:valid ~ .search-button svg-icon{color:var(--colors-black,#000)}battery-included-product-search-form .input-search .close-button svg-icon{position:absolute;transform:scale(0.6)}battery-included-product-search-form .input-search .search-button{color:var(--colors-grey-200,#CCCCCC)}battery-included-product-search-form .input-search:hover input ~ .search-button svg-icon{color:var(--colors-brand-500,#3b82f6)}battery-included-product-search-form .keyword{border-width:1px;font-weight:400}battery-included-product-search-form .suggestion-highlight{text-decoration-line:underline;color:var(--product-search-suggestion-highlight-color,var(--colors-accent-500,#fddd04))}battery-included-product-search-form .search-suggestion-products product-list{scrollbar-width:thin}"]}connected(){this.value=this.dataset.searchword??"";const e=this.closest("modal-element");e&&e.addEventListener(r.OPEN,(e=>{this.hasFocus=!0,window.setTimeout((()=>this.$refs.search.focus()),100)}))}properties(){return{placeholder:"Produktsuche",searchUrl:"/search",minLength:3,inputName:"search",value:"",hasFocus:!1,productSearchStore:o}}provideProperties(){return{productSearchStore:this.productSearchStore,searchUrl:this.searchUrl}}events(){return{this:{focusin:()=>{this.hasFocus=!0},focusout:()=>{window.setTimeout((()=>{this.hasFocus=this.contains(document.activeElement)}),100)}},"[ref=search]":{input:async()=>{const{value:e}=this.$refs.search;try{if(e.length<this.minLength)throw"short search";this.productSearchStore.fetchSuggestion(e)}catch(e){console.error("Error fetching keywordProducts",e),this._suggestions=[]}this.value=e}},"[ref=cancel]":{click:()=>{this.$refs.search.value="",this.value="",this.$refs.search.focus()}}}}get hasValue(){return""!==this.value}get hasSuggestions(){return this.productSearchStore?.hasSuggestions}template(){return s` 2 <form 3 ref="form" 4 action="${this.searchUrl}" 5 method="${this.method}" 6 autocomplete="off" 7 class="w-full text-grey-800 relative" 8 > 9 <div class="input-search relative py-2 px-4 flex items-center border border-grey-300"> 10 <input 11 ref="search" 12 type="text" 13 tabindex="1" 14 name="${this.inputName}" 15 value="${this.value}" 16 required 17 placeholder="${this.placeholder}" 18 autocomplete="off" 19 class="outline-none text-2xl rfs-text no-rfs-margin leading-snug w-full border-0 flex-auto min-w-0 truncate" 20 /> 21 22 ${this.hasFocus&&this.hasValue?s` 23 <button 24 ref="cancel" 25 type="reset" 26 class="relative close-button flex-shrink-0 mr-4 md:mr-6 h-4 w-4 md:h-6 md:w-6 outline-none bg-grey-200 rounded-full text-white" 27 > 28 <svg-icon class="absolute inset-0 color-white" name="close"></svg-icon> 29 </button> 30 `:""} 31 <button 32 type="submit" 33 class="search-button flex-shrink-0 relative h-6 w-6 md:h-8 md:w-8 outline-none focus:color-brand-400" 34 > 35 <svg-icon class="h-full w-full" name="search"></svg-icon> 36 </button> 37 </div> 38 ${this.hasSuggestions?s`<search-suggestion search-string="${this.value}"></search-suggestion>`:s`<search-history></search-history>`} 39 </form> 40 `}}e("battery-included-product-search-form",c);
40export{c as default}; 41//# sourceMappingURL=battery-included-product-search-form-CuRXrv1t.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.