https://wetforher.com/cdn/shop/t/358/assets/component-search-form.js?v=66661886067727350861749788089

1import{LitElement,html,css}from"lit-all";import{t,refreshFocusTrap}from"lib-utils";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.searchData={},this.searchTerm=""}firstUpdated(changedProperties){super.firstUpdated(changedProperties),this.shadowRoot.querySelector(".header-search__input").addEventListener("input",this.searchOnChange.bind(this)),this.value&&this.getSearchResults(this.value)}searchOnChange(event){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){this.searchData={},this.searchTerm="",refreshFocusTrap(this,0),this.requestUpdate();return}try{const response=await fetch(`/search/suggest.json?q=${encodeURIComponent(searchTerm)}&resources[type]=query,product,collection,page,article`);response.ok||(console.error(`HTTP error! Status: ${response.status}`),this.searchData={},this.searchTerm="");const data=await response.json();this.searchData=data,this.searchTerm=searchTerm}catch(error){console.error("Error:",error.message),this.searchData={},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        aria-label="${this.label}"
8      >
9        <div class="field header-search__field">
10          <slot name="search-icon"></slot>
11          <input
12            class="header-search__input h4"
13            placeholder="Search entire store here..."
14            id="Search-In-Modal"
15            type="search"
16            name="q"
17            value="${this.value}"
18            autofocus
19            aria-label="${this.label}"
20            aria-autocomplete="list"
21            aria-controls="search-results"
22          />
23          <input type="hidden" name="options[prefix]" value="last" />
24          <button class="visually-hidden" tabindex="-1">
25            ${t("general.search.search")}
26          </button>
27          <slot name="close-button"></slot>
28        </div>
29        <label class="header-search__label" for="Search-In-Modal"
30          >Press 'Enter' to search</label
31        >
32      </form>
33      <nova-search-result
34        .searchData=${this.searchData}
35        .searchTerm=${this.searchTerm}
36        openState=${this.openState}
37        noResults=${t("general.search.no_results_found_for")}
38        searchAgain=${t("general.search.try_again")}
39        role="listbox"
40        aria-expanded="${Object.keys(this.searchData).length!==0}"
41      ></nova-search-result>
42    `}static styles=css`
43    :host {
44      width: 100%;
45    }
46
47    :host .header-search__form {
48      width: 100%;
49    }
50
51    :host .header-search__field {
52      display: flex;
53      align-items: center;
54      border-bottom: 1px solid var(--nova-brand-primary);
55    }
56
57    :host .header-search__input {
58      width: 100%;
59      border: none;
60      font: var(--nova-h6-font);
61      font-size: 24px;
62      background-color: var(--nova-color-background);
63    }
64
65    :host .visually-hidden {
66      position: absolute !important;
67      overflow: hidden;
68      width: 1px;
69      height: 1px;
70      margin: -1px;
71      padding: 0;
72      border: 0;
73      clip: rect(0 0 0 0);
74      word-wrap: normal !important;
75    }
76
77    :host .header-search__label {
78      display: block;
79      padding-top: var(--nova-space-xs);
80      color: var(--nova-brand-subdued);
81      font-size: 16px;
82    }
83
84    :host .header-search__input:focus-visible {
85      outline: none;
86    }
87
88    /* Clear default clear button from Internet Explorer */
89    :host input[type='search']::-ms-clear {
90      display: none;
91      -webkit-appearance: none;
92      width: 0;
93      height: 0;
94    }
95
96    /* Clear default clear button from Chrome */
97    :host input[type='search']::-webkit-search-cancel-button {
98      display: none;
99      -webkit-appearance: none;
100    }
101
102    ::slotted([slot='search-icon']) {
103      padding-right: var(--nova-space-xs);
104    }
105
106    @media screen and (min-width: 750px) {
107      ::slotted([slot='search-icon']) {
108        display: none;
109      }
110    }
111  `}customElements.define("nova-search-form",NovaSearchForm);
112//# sourceMappingURL=/cdn/shop/t/358/assets/component-search-form.js.map?v=66661886067727350861749788089