https://www.routeone.co.uk/cdn/shop/t/2672/assets/component-SearchField.min.js

1import "./component-PredictiveSearch.min.js";
2import { ThemeComponent } from "./theme.min.js";
3import { throttle } from "./vendor.min.js";
4import "./component-SearchField.min.js";
5class SearchField extends ThemeComponent {
6  init() {
7    this.$listen(this.searchInput, "keyup", throttle(() => {
8      if (this.searchInput.value == "") {
9        this.classList.remove("search-field--active");
10      } else {
11        this.classList.add("search-field--active");
12      }
13    }, 300));
14    this.$listen(this.clearButton, "click", () => {
15      this.resetField();
16    });
17  }
18  resetField() {
19    this.searchInput.value = "";
20    this.classList.remove("search-field--active");
21    const predictiveSearchComponent = this.closest("predictive-search");
22    if (predictiveSearchComponent) {
23      predictiveSearchComponent.setDefaultState();
24    }
25  }
26}
27const ___PropTypes = {};
28SearchField.prototype.$name = "SearchField";
29SearchField.prototype.$info = JSON.parse('{"name":"SearchField","meta":{"isLegacy":false,"selector":"search-field"},"props":[],"refs":[{"selector":"[data-ref=\\"searchInput\\"]","required":true,"propertyKey":"searchInput","propertyType":"Object","propertyTypeName":"Object","propertyTsTypeName":"HTMLInputElement"},{"selector":"[data-ref=\\"clearButton\\"]","required":true,"propertyKey":"clearButton","propertyType":"Object","propertyTypeName":"Object","propertyTsTypeName":"HTMLButtonElement"}]}');
30SearchField.prototype.$info.component = SearchField;
31for (const prop of SearchField.prototype.$info.props) {
32  prop.propertyType = ___PropTypes[prop.propertyType];
33}
34window.componentService.registerComponent("Search/SearchField.ts", { SearchField }, void 0);
35
36;(() => {
37    const style = document.createElement('style');
38    style.innerHTML =`/* component-SearchField.css */ 
39/* ---------------------------------------------
40    Variables 
41--------------------------------------------- */
42/**
43 -------------------------------------------------------------------------
44 Global Variables - Fonts
45 -------------------------------------------------------------------------
46*/
47/* ---------------------------------------------
48    Fonts
49--------------------------------------------- */
50/* ---------------------------------------------
51    Font Weight
52--------------------------------------------- */
53/* ---------------------------------------------
54    Line Height 
55--------------------------------------------- */
56/* ---------------------------------------------
57    Z-index
58--------------------------------------------- */
59/* ---------------------------------------------
60    Spacing
61--------------------------------------------- */
62/* ---------------------------------------------
63    Screen sizes
64--------------------------------------------- */
65/* ---------------------------------------------
66    Animation
67--------------------------------------------- */
68.search-field {
69  display: block;
70  position: relative;
71}
72.search-field--active .search-field__submit {
73  display: none;
74}
75.search-field--active .search-field__clear {
76  display: -webkit-box;
77  display: -ms-flexbox;
78  display: flex;
79}
80.search-field__submit, .search-field__clear {
81  width: 36px;
82  height: 36px;
83  display: -webkit-box;
84  display: -ms-flexbox;
85  display: flex;
86  -webkit-box-align: center;
87      -ms-flex-align: center;
88          align-items: center;
89  -webkit-box-pack: center;
90      -ms-flex-pack: center;
91          justify-content: center;
92  position: absolute;
93  right: 0;
94  top: 0;
95}
96.search-field__submit {
97  -webkit-appearance: none;
98     -moz-appearance: none;
99          appearance: none;
100  background: none;
101  border: 0;
102  color: inherit;
103  padding: 0;
104  border-radius: 50%;
105  background-color: var(--color-black);
106}
107.search-field__submit svg {
108  width: 15px;
109  height: 15px;
110  color: var(--color-white);
111}
112.search-field__submit svg path {
113  fill: var(--color-white);
114}
115.search-field__clear {
116  display: none;
117  background-color: transparent;
118  border: none;
119  outline: none;
120  padding: 0;
121  -webkit-box-pack: center;
122      -ms-flex-pack: center;
123          justify-content: center;
124  -webkit-box-align: center;
125      -ms-flex-align: center;
126          align-items: center;
127}
128.search-field__clear .icon {
129  width: 14px;
130}`;
131    document.body.appendChild(style);
132})();