https://chilewich.com/cdn/shop/t/334/assets/component-search-form.js?v=66862025635925348391790255855

1import{LitElement,css,html}from"@lit";import{t}from"@nova/utils";import*as paths from"@nova/paths";class NovaSearchForm extends LitElement{static properties={url:{type:String},value:{type:String},placeholder:{type:String},label:{type:String},noResults:{type:String},searchAgain:{type:String},openState:{type:String}};constructor(){super(),this.emptySearchData={resources:{results:{products:[],collections:[]}}},this.searchData={},this.searchTerm="",this.searchOnChange=this.searchOnChange.bind(this),this.doSearchOnChange=this.doSearchOnChange.bind(this)}firstUpdated(changedProperties){super.firstUpdated(changedProperties);const searchInput=this.shadowRoot.querySelector(".header-search__input");searchInput.addEventListener("focus",this.doSearchOnChange),searchInput.addEventListener("input",this.searchOnChange),searchInput.addEventListener("keydown",this.searchOnChange)}doSearchOnChange(event){this.openState="opened",this.searchOnChange(event)}searchOnChange(event){if((event.keyCode||event.which)===27){this.openState="closed",document.documentElement.classList.remove("sl-scroll-lock");return}if(this.openState==="closed")return;const searchValue=event.target?.value||"";this.value=searchValue,clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.getSearchResults(searchValue)},300)}async getSearchResults(searchTerm){if(searchTerm.length<3){this.searchData=this.emptySearchData,this.searchTerm="",this.requestUpdate();return}try{const response=await fetch(`/search/suggest.json?q=${encodeURIComponent(searchTerm)}&resources[type]=product,collection`);response.ok||(console.error(`HTTP error! Status: ${response.status}`),this.searchData=this.emptySearchData,this.searchTerm="");const data=await response.json();this.searchData=data,this.searchTerm=searchTerm}catch(error){console.error("Error:",error.message),this.searchData=this.emptySearchData,this.searchTerm=""}this.requestUpdate()}render(){return html`
2      <form
3        class="header-search__form"
4        action=${this.url}
5        method="get"
6        role="search"
7      >
8        <div class="field header-search__field">
9          <sl-input
10            class="header-search__input h4"
11            id="Search-In-Modal"
12            type="search"
13            name="q"
14            value=${this.value}
15            placeholder=${t("general.search.search")}
16            label="Press 'Enter' to search"
17            autocomplete="off"
18          >
19            <div name="search" slot="suffix">
20              ${paths.search}
21            </div>
22          </sl-input>
23          <input type="hidden" name="options[prefix]" value="last" />
24          <slot name="close-button"></slot>
25        </div>
26      </form>
27      <nova-search-result
28        .searchData=${this.searchData}
29        .searchTerm=${this.searchTerm}
30        openState=${this.openState}
31        noResults=${t("general.search.no_results_found_for")}
32        searchAgain=${t("general.search.try_again")}
33      ></nova-search-result>
34    `}static styles=css`
35    :host {
36      width: 100%;
37      overflow: auto;
38      -ms-overflow-style: none; 
39      scrollbar-width: none; 
40    }
41
42    :host::-webkit-scrollbar {

43      display: none;
44      width: 0;
45    }
46
47    :host .header-search__form {
48      padding: var(--nova-space-xs) var(--nova-space-page-margin);
49      background: var(--nova-color-white);
50    }
51
52    @media screen and (min-width: 1024px) {
53      :host .header-search__form {
54        padding: 0;
55      }
56    }
57
58    :host nova-search-result {
59      display: block;
60      padding-inline: var(--nova-space-page-margin);
61      background-color: var(--nova-color-grey-100);
62    }
63
64    :host .header-search__field {
65      display: flex;
66      align-items: center;
67    }
68
69    :host .header-search__input {
70      width: 100%;
71      border: none;
72      font: var(--nova-h4-font);
73    }
74
75    :host .visually-hidden {
76      position: absolute !important;
77      overflow: hidden;
78      width: 1px;
79      height: 1px;
80      margin: -1px;
81      padding: 0;
82      border: 0;
83      clip: rect(0 0 0 0);
84      word-wrap: normal !important;
85    }
86
87    :host .header-search__label {
88      display: block;
89      padding: var(--nova-space-sm) 0 var(--nova-space-md);
90      color: var(--nova-color-subdued);
91    }
92
93    :host .header-search__input::part(base) {
94      background-color: var(--nova-color-grey-100);
95      border-width: 0;
96      border-radius: var(--nova-border-radius-xs);
97      box-shadow: none;
98      height: 38px;
99    }
100
101    :host .header-search__input::part(form-control-label) {
102      display: none;
103    }
104
105    :host .header-search__input::part(input) {
106      font: var(--nova-body-font);
107    }
108
109    @media screen and (max-width: 767px) {
110      :host .header-search__input::part(input) {
111        font-size: 16px !important;
112      }
113    }
114
115    :host .header-search__input::part(input)::placeholder {
116      color: var(--nova-color-grey-500);
117      opacity: 1; /* Firefox */
118    }
119
120    :host .header-search__input::part(input)::-ms-input-placeholder { /* Edge 12 -18 */
121      color: var(--nova-color-grey-500);
122    }
123
124    @media screen and (max-width: 767px) {
125      :host .header-search__input::part(input)::placeholder {
126        font-size: 14px;
127      }
128
129      :host .header-search__input::part(input)::-ms-input-placeholder { /* Edge 12 -18 */
130        font-size: 14px;
131      }
132    }
133
134    :host .header-search__input:focus-visible {
135      outline: none;
136    }
137
138    /* Clear default clear button from Internet Explorer */
139    :host input[type='search']::-ms-clear {
140      display: none;
141      -webkit-appearance: none;
142      width: 0;
143      height: 0;
144    }
145
146    /* Clear default clear button from Chrome */
147    :host input[type='search']::-webkit-search-cancel-button {
148      display: none;
149      -webkit-appearance: none;
150    }
151
152    ::slotted([slot='search-icon']) {
153      padding-right: var(--nova-space-xs);
154    }
155
156    @media screen and (min-width: 768px) {
157      ::slotted([slot='search-icon']) {
158        display: none;
159      }
160    }
161
162    :host .header-search__input [slot="suffix"] {
163      display: flex;
164      margin-inline-end: var(--nova-space-sm);
165    }
166
167    @media screen and (min-width: 1024px) {
168      :host .header-search__input [slot="suffix"] {
169        margin-inline-end: var(--nova-space-xsm);
170      }
171    }
172  `}customElements.define("nova-search-form",NovaSearchForm);
173//# sourceMappingURL=/cdn/shop/t/334/assets/component-search-form.js.map?v=66862025635925348391790255855