@searchcraft/javascript-sdk 0.1.9 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/dist/cjs/{index-d0e71432.js → index-6c5282a0.js} +3 -3
  2. package/dist/cjs/index-6c5282a0.js.map +1 -0
  3. package/dist/cjs/index.cjs.js +2 -2
  4. package/dist/cjs/loader.cjs.js +2 -2
  5. package/dist/cjs/{searchcraft-auto-search-form_16.cjs.entry.js → searchcraft-auto-search-form_17.cjs.entry.js} +177 -68
  6. package/dist/cjs/searchcraft-auto-search-form_17.cjs.entry.js.map +1 -0
  7. package/dist/cjs/searchcraft-base-search-form.cjs.entry.js +4 -4
  8. package/dist/cjs/searchcraft-button-icon.cjs.entry.js +1 -1
  9. package/dist/cjs/searchcraft-button.cjs.entry.js +2 -2
  10. package/dist/cjs/searchcraft-javascript-sdk.cjs.js +2 -2
  11. package/dist/cjs/{store-3f6eab7d.js → store-ccdd30e6.js} +35 -40
  12. package/dist/cjs/store-ccdd30e6.js.map +1 -0
  13. package/dist/cjs/{utils-39791159.js → utils-bd99e8b0.js} +3 -3
  14. package/dist/cjs/utils-bd99e8b0.js.map +1 -0
  15. package/dist/collection/collection-manifest.json +1 -0
  16. package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js +29 -6
  17. package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.js.map +1 -1
  18. package/dist/collection/components/searchcraft-auto-search-form/searchcraft-auto-search-form.module.css +0 -6
  19. package/dist/collection/components/searchcraft-base-search-form/searchcraft-base-search-form.js +1 -1
  20. package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js +2 -2
  21. package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.js.map +1 -1
  22. package/dist/collection/components/searchcraft-base-search-result/searchcraft-base-search-result.module.css +13 -6
  23. package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js +43 -9
  24. package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.js.map +1 -1
  25. package/dist/collection/components/searchcraft-base-search-results/searchcraft-base-search-results.module.css +8 -1
  26. package/dist/collection/components/searchcraft-button/searchcraft-button.js +1 -1
  27. package/dist/collection/components/searchcraft-clear-input-button/searchcraft-clear-input-button.module.css +2 -2
  28. package/dist/collection/components/searchcraft-error-message/searchcraft-error-message.js +1 -1
  29. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js +47 -23
  30. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.js.map +1 -1
  31. package/dist/collection/components/searchcraft-filters-list/searchcraft-filters-list.module.css +37 -2
  32. package/dist/collection/components/searchcraft-input/searchcraft-input.js +2 -2
  33. package/dist/collection/components/searchcraft-input/searchcraft-input.js.map +1 -1
  34. package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.js +51 -0
  35. package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.js.map +1 -0
  36. package/dist/collection/components/searchcraft-results-info/searchcraft-results-info.module.css +16 -0
  37. package/dist/collection/components/searchcraft-slider/searchcraft-slider.js +32 -8
  38. package/dist/collection/components/searchcraft-slider/searchcraft-slider.js.map +1 -1
  39. package/dist/collection/components/searchcraft-slider/searchcraft-slider.module.css +9 -7
  40. package/dist/collection/components/searchcraft-spinner-dark/searchcraft-spinner-dark.js +1 -1
  41. package/dist/collection/components/searchcraft-spinner-light/searchcraft-spinner-light.js +1 -1
  42. package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js +22 -9
  43. package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.js.map +1 -1
  44. package/dist/collection/components/searchcraft-toggle-button/searchcraft-toggle-button.module.css +0 -7
  45. package/dist/collection/provider/store.js +3 -7
  46. package/dist/collection/provider/store.js.map +1 -1
  47. package/dist/collection/utils/utils.js +2 -2
  48. package/dist/collection/utils/utils.js.map +1 -1
  49. package/dist/components/index.js +3 -3
  50. package/dist/components/{p-25bd714c.js → p-01c5864b.js} +2 -2
  51. package/dist/components/{p-25bd714c.js.map → p-01c5864b.js.map} +1 -1
  52. package/dist/components/{p-f2e41d24.js → p-0ef8f141.js} +3 -3
  53. package/dist/components/{p-f2e41d24.js.map → p-0ef8f141.js.map} +1 -1
  54. package/dist/components/{p-c9629cc3.js → p-162887a4.js} +3 -3
  55. package/dist/components/{p-c9629cc3.js.map → p-162887a4.js.map} +1 -1
  56. package/dist/components/{p-574e8e3c.js → p-2bff6d1e.js} +4 -4
  57. package/dist/components/{p-574e8e3c.js.map → p-2bff6d1e.js.map} +1 -1
  58. package/dist/components/{p-50ca3fe4.js → p-2f5acc0e.js} +3 -3
  59. package/dist/components/{p-50ca3fe4.js.map → p-2f5acc0e.js.map} +1 -1
  60. package/dist/components/{p-e0e0fc94.js → p-42f8a605.js} +3 -3
  61. package/dist/components/{p-e0e0fc94.js.map → p-42f8a605.js.map} +1 -1
  62. package/dist/components/p-544b2de1.js +86 -0
  63. package/dist/components/p-544b2de1.js.map +1 -0
  64. package/dist/components/{p-9bb9d6f0.js → p-68ad42b5.js} +2 -2
  65. package/dist/components/{p-9bb9d6f0.js.map → p-68ad42b5.js.map} +1 -1
  66. package/dist/components/{p-c9cd5533.js → p-7498e493.js} +3 -3
  67. package/dist/components/p-7498e493.js.map +1 -0
  68. package/dist/components/{p-5aa6335f.js → p-80ea9602.js} +35 -40
  69. package/dist/components/p-80ea9602.js.map +1 -0
  70. package/dist/components/{p-17c94ac1.js → p-aff5cd24.js} +3 -3
  71. package/dist/components/p-aff5cd24.js.map +1 -0
  72. package/dist/components/{p-37df2122.js → p-d11d9b1f.js} +12 -12
  73. package/dist/components/p-d11d9b1f.js.map +1 -0
  74. package/dist/components/{p-71dff048.js → p-ee5e7a8c.js} +2 -2
  75. package/dist/components/{p-71dff048.js.map → p-ee5e7a8c.js.map} +1 -1
  76. package/dist/components/{p-05cd002d.js → p-fc0540e5.js} +2 -2
  77. package/dist/components/{p-05cd002d.js.map → p-fc0540e5.js.map} +1 -1
  78. package/dist/components/{p-403f6115.js → p-fd1f6c2f.js} +6 -6
  79. package/dist/components/p-fd1f6c2f.js.map +1 -0
  80. package/dist/components/searchcraft-auto-search-form.js +30 -21
  81. package/dist/components/searchcraft-auto-search-form.js.map +1 -1
  82. package/dist/components/searchcraft-base-search-form.js +15 -15
  83. package/dist/components/searchcraft-base-search-result.js +1 -1
  84. package/dist/components/searchcraft-base-search-results.js +28 -14
  85. package/dist/components/searchcraft-base-search-results.js.map +1 -1
  86. package/dist/components/searchcraft-button-icon.js +1 -1
  87. package/dist/components/searchcraft-button.js +1 -1
  88. package/dist/components/searchcraft-clear-icon-set.js +1 -1
  89. package/dist/components/searchcraft-clear-input-button.js +1 -1
  90. package/dist/components/searchcraft-error-message.js +1 -1
  91. package/dist/components/searchcraft-filters-list.js +50 -26
  92. package/dist/components/searchcraft-filters-list.js.map +1 -1
  93. package/dist/components/searchcraft-input-caption.js +1 -1
  94. package/dist/components/searchcraft-input-icon.js +1 -1
  95. package/dist/components/searchcraft-input-label.js +1 -1
  96. package/dist/components/searchcraft-input.js +1 -1
  97. package/dist/components/searchcraft-results-info.d.ts +11 -0
  98. package/dist/components/searchcraft-results-info.js +64 -0
  99. package/dist/components/searchcraft-results-info.js.map +1 -0
  100. package/dist/components/searchcraft-search-icon-set.js +1 -1
  101. package/dist/components/searchcraft-slider.js +35 -11
  102. package/dist/components/searchcraft-slider.js.map +1 -1
  103. package/dist/components/searchcraft-spinner-dark.js +1 -1
  104. package/dist/components/searchcraft-spinner-light.js +1 -1
  105. package/dist/components/searchcraft-toggle-button.js +25 -12
  106. package/dist/components/searchcraft-toggle-button.js.map +1 -1
  107. package/dist/esm/{index-92040c37.js → index-0ac5bb53.js} +3 -3
  108. package/dist/esm/index-0ac5bb53.js.map +1 -0
  109. package/dist/esm/index.js +2 -2
  110. package/dist/esm/loader.js +3 -3
  111. package/dist/esm/{searchcraft-auto-search-form_16.entry.js → searchcraft-auto-search-form_17.entry.js} +177 -69
  112. package/dist/esm/searchcraft-auto-search-form_17.entry.js.map +1 -0
  113. package/dist/esm/searchcraft-base-search-form.entry.js +4 -4
  114. package/dist/esm/searchcraft-button-icon.entry.js +1 -1
  115. package/dist/esm/searchcraft-button.entry.js +2 -2
  116. package/dist/esm/searchcraft-javascript-sdk.js +3 -3
  117. package/dist/esm/{store-5f6f8445.js → store-311de204.js} +35 -40
  118. package/dist/esm/store-311de204.js.map +1 -0
  119. package/dist/esm/{utils-7bff0c78.js → utils-e2076797.js} +3 -3
  120. package/dist/esm/utils-e2076797.js.map +1 -0
  121. package/dist/searchcraft-javascript-sdk/index.esm.js +1 -1
  122. package/dist/searchcraft-javascript-sdk/p-0880cfbb.js +3 -0
  123. package/dist/searchcraft-javascript-sdk/p-0880cfbb.js.map +1 -0
  124. package/dist/searchcraft-javascript-sdk/{p-81eaebdc.entry.js → p-5ec960bd.entry.js} +2 -2
  125. package/dist/searchcraft-javascript-sdk/p-6108dd80.entry.js +2 -0
  126. package/dist/searchcraft-javascript-sdk/p-6108dd80.entry.js.map +1 -0
  127. package/dist/searchcraft-javascript-sdk/{p-5aa6335f.js → p-80ea9602.js} +2 -2
  128. package/dist/searchcraft-javascript-sdk/p-80ea9602.js.map +1 -0
  129. package/dist/searchcraft-javascript-sdk/p-a9bac3ca.entry.js +2 -0
  130. package/dist/searchcraft-javascript-sdk/{p-639d019b.entry.js.map → p-a9bac3ca.entry.js.map} +1 -1
  131. package/dist/searchcraft-javascript-sdk/{p-17c94ac1.js → p-aff5cd24.js} +1 -1
  132. package/dist/searchcraft-javascript-sdk/p-aff5cd24.js.map +1 -0
  133. package/dist/searchcraft-javascript-sdk/{p-02f632b6.entry.js → p-cc454542.entry.js} +2 -2
  134. package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js +1 -1
  135. package/dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js.map +1 -1
  136. package/dist/types/components/searchcraft-auto-search-form/searchcraft-auto-search-form.d.ts +3 -2
  137. package/dist/types/components/searchcraft-base-search-results/searchcraft-base-search-results.d.ts +3 -1
  138. package/dist/types/components/searchcraft-filters-list/searchcraft-filters-list.d.ts +7 -0
  139. package/dist/types/components/searchcraft-results-info/searchcraft-results-info.d.ts +10 -0
  140. package/dist/types/components/searchcraft-slider/searchcraft-slider.d.ts +7 -1
  141. package/dist/types/components/searchcraft-toggle-button/searchcraft-toggle-button.d.ts +5 -0
  142. package/dist/types/components.d.ts +19 -2
  143. package/dist/types/utils/utils.d.ts +1 -1
  144. package/package.json +1 -1
  145. package/dist/cjs/index-d0e71432.js.map +0 -1
  146. package/dist/cjs/searchcraft-auto-search-form_16.cjs.entry.js.map +0 -1
  147. package/dist/cjs/store-3f6eab7d.js.map +0 -1
  148. package/dist/cjs/utils-39791159.js.map +0 -1
  149. package/dist/components/p-17c94ac1.js.map +0 -1
  150. package/dist/components/p-37df2122.js.map +0 -1
  151. package/dist/components/p-3cbac2bb.js +0 -86
  152. package/dist/components/p-3cbac2bb.js.map +0 -1
  153. package/dist/components/p-403f6115.js.map +0 -1
  154. package/dist/components/p-5aa6335f.js.map +0 -1
  155. package/dist/components/p-c9cd5533.js.map +0 -1
  156. package/dist/esm/index-92040c37.js.map +0 -1
  157. package/dist/esm/searchcraft-auto-search-form_16.entry.js.map +0 -1
  158. package/dist/esm/store-5f6f8445.js.map +0 -1
  159. package/dist/esm/utils-7bff0c78.js.map +0 -1
  160. package/dist/searchcraft-javascript-sdk/p-05369654.js +0 -3
  161. package/dist/searchcraft-javascript-sdk/p-05369654.js.map +0 -1
  162. package/dist/searchcraft-javascript-sdk/p-17c94ac1.js.map +0 -1
  163. package/dist/searchcraft-javascript-sdk/p-5aa6335f.js.map +0 -1
  164. package/dist/searchcraft-javascript-sdk/p-639d019b.entry.js +0 -2
  165. package/dist/searchcraft-javascript-sdk/p-73265750.entry.js +0 -2
  166. package/dist/searchcraft-javascript-sdk/p-73265750.entry.js.map +0 -1
  167. /package/dist/searchcraft-javascript-sdk/{p-81eaebdc.entry.js.map → p-5ec960bd.entry.js.map} +0 -0
  168. /package/dist/searchcraft-javascript-sdk/{p-02f632b6.entry.js.map → p-cc454542.entry.js.map} +0 -0
@@ -2,28 +2,31 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-d0e71432.js');
6
- const store = require('./store-3f6eab7d.js');
7
- const utils = require('./utils-39791159.js');
5
+ const index = require('./index-6c5282a0.js');
6
+ const store = require('./store-ccdd30e6.js');
7
+ const utils = require('./utils-bd99e8b0.js');
8
8
  const index$1 = require('./index-5b0b9d4c.js');
9
9
 
10
- const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{text-align:left;width:100%}.formRTL{text-align:right;width:100%}.searchContainer{align-items:center;display:flex;width:100%}";
10
+ const searchcraftAutoSearchFormModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.formLTR{text-align:left;width:100%}.formRTL{text-align:right;width:100%}";
11
11
  const SearchcraftAutoSearchFormStyle0 = searchcraftAutoSearchFormModuleCss;
12
12
 
13
13
  const SearchcraftAutoSearchForm = class {
14
14
  constructor(hostRef) {
15
15
  index.registerInstance(this, hostRef);
16
16
  this.querySubmit = index.createEvent(this, "querySubmit", 7);
17
+ this.inputClearedOrNoResults = index.createEvent(this, "inputClearedOrNoResults", 7);
17
18
  this.debounceTimeout = null;
18
- this.debounceDelay = 300; // 300ms debounce delay
19
+ this.debounceDelay = 0;
19
20
  this.searchStore = store.useSearchcraftStore.getState();
20
21
  this.handleInputChange = (event) => {
21
22
  this.query = event.detail;
23
+ this.searchStore.setQuery(this.query);
22
24
  this.querySubmit.emit(this.query);
23
25
  };
24
26
  this.handleInputKeyUp = (event) => {
25
27
  const target = event.detail;
26
28
  this.query = target;
29
+ this.searchStore.setQuery(this.query);
27
30
  this.querySubmit.emit(this.query);
28
31
  if (this.debounceTimeout) {
29
32
  clearTimeout(this.debounceTimeout);
@@ -34,6 +37,7 @@ const SearchcraftAutoSearchForm = class {
34
37
  };
35
38
  this.handleClearInput = () => {
36
39
  this.query = '';
40
+ this.searchStore.setQuery('');
37
41
  if (typeof this.clearInput === 'function') {
38
42
  this.clearInput();
39
43
  }
@@ -41,22 +45,22 @@ const SearchcraftAutoSearchForm = class {
41
45
  clearTimeout(this.debounceTimeout);
42
46
  }
43
47
  this.error = false;
44
- this.searchResults = '';
48
+ this.inputClearedOrNoResults.emit();
45
49
  };
46
50
  this.runSearch = async () => {
47
51
  if (this.query.trim() === '') {
48
52
  this.error = true;
49
- this.searchResults = '';
53
+ this.inputClearedOrNoResults.emit();
50
54
  }
51
55
  else {
52
56
  this.error = false;
53
57
  this.searchStore.setQuery(this.query);
54
58
  try {
55
59
  await this.searchStore.search();
56
- this.searchResults = JSON.stringify(this.searchStore.searchResults);
57
60
  }
58
61
  catch (error) {
59
62
  this.error = true;
63
+ this.inputClearedOrNoResults.emit();
60
64
  }
61
65
  }
62
66
  };
@@ -82,13 +86,14 @@ const SearchcraftAutoSearchForm = class {
82
86
  this.error = false;
83
87
  this.isRequesting = false;
84
88
  this.query = '';
85
- this.searchResults = '';
89
+ this.searchResults = null;
86
90
  }
87
91
  componentDidLoad() {
88
- const searchcraft = new store.p(this.config);
92
+ const searchcraft = new store.g(this.config);
89
93
  this.searchStore.initialize(searchcraft, true);
90
94
  this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
91
95
  this.isRequesting = state.isRequesting;
96
+ this.searchResults = Object.assign({}, state.searchResults);
92
97
  });
93
98
  }
94
99
  disconnectedCallback() {
@@ -97,14 +102,18 @@ const SearchcraftAutoSearchForm = class {
97
102
  }
98
103
  }
99
104
  render() {
105
+ var _a, _b, _c;
100
106
  const formClass = this.rightToLeftOrientation ? 'formRTL' : 'formLTR';
101
107
  const parsedCustomStyles = utils.parseCustomStyles(this.customStylesForInput);
102
- return (index.h("form", { key: '8a3cf6e3cc1d8cc3f2fcff7ff3b8e90d2e76f400', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: 'ab055252710a95574811c9bf82ed2c01fef355d2', label: this.labelForInput }), index.h("div", { key: '9c397f34ebfe25994de60b7d135cc3167e787499', class: 'searchContainer' }, index.h("searchcraft-input", { key: '4f3614615c3880fb305e39d511f3ae40e71eed32', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation })), this.error && (index.h("searchcraft-error-message", { key: '1a297169ed2b12870169e8c533a7112aaa991b93', errorMessage: 'Please enter a search query.' }))));
108
+ if (this.query.length > 0 && ((_c = (_b = (_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) === 0) {
109
+ this.inputClearedOrNoResults.emit();
110
+ }
111
+ return (index.h("form", { key: '49950058e612dc1017fb56235affd3b8077b6926', class: `${formClass}`, onSubmit: this.handleFormSubmit }, index.h("searchcraft-input-label", { key: 'ce2cb4d74c139fc4f010d1ca51739c49a8e9f6c2', label: this.labelForInput }), index.h("searchcraft-input", { key: '8fb1eee5dca952ba472f03e768b57663528f5c84', customStyles: parsedCustomStyles, "input-caption-value": this.inputCaptionValue, "is-requesting": this.isRequesting, "input-icon-height": this.inputIconHeight, "input-icon-width": this.inputIconWidth, onClearInput: this.handleClearInput, onInputKeyUp: this.handleInputKeyUp, onSearchInputChange: this.handleInputChange, "placeholder-value": this.placeholderValue, query: this.query, "right-to-left-orientation": this.rightToLeftOrientation }), this.error && (index.h("searchcraft-error-message", { key: 'd1c893186af4cdb927f31b086aa7d027947c1d2c', errorMessage: 'Please enter a search query.' }))));
103
112
  }
104
113
  };
105
114
  SearchcraftAutoSearchForm.style = SearchcraftAutoSearchFormStyle0;
106
115
 
107
- const searchcraftBaseSearchResultModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-height:540px;max-width:100%}@media (min-width: 600px){.imageContainer{max-height:175px}}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
116
+ const searchcraftBaseSearchResultModuleCss = "@charset \"UTF-8\";:root{--font-stack:Helvetica, Arial, sans-serif}.interactiveResultContainerLight{background-color:#FAFAFA;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerLight{flex-direction:row}}.interactiveResultContainerDark{background-color:#2E2E2E;align-items:flex-start;border-radius:16px;display:flex;position:relative;flex-direction:column;gap:16px;padding:8px}@media (min-width: 600px){.interactiveResultContainerDark{flex-direction:row}}.resultContainer{align-items:flex-start;display:flex;flex-direction:column;gap:16px}@media (min-width: 600px){.resultContainer{flex-direction:row}}.interactiveIconLarge{display:inline-block;position:absolute;right:5px;top:8px}@media (max-width: 600px){.interactiveIconLarge{display:none}}.interactiveIconSmall{position:absolute;right:5px;top:-2px;display:inline-block}@media (min-width: 600px){.interactiveIconSmall{display:none}}.imageContainer{max-width:100%}.contentContainer{max-height:100%;max-width:100%}@media (min-width: 600px){.contentContainer{max-width:50%}}.secondaryContentContainer{display:flex}.imageLight{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #D9D9D9}.imageDark{aspect-ratio:2/1;border-radius:8px;max-height:100%;max-width:100%;border:1px solid #333}.headingLight{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#292929}.headingDark{font-family:var(--font-stack);font-size:16px;font-weight:700;line-height:20px;margin-bottom:4px;margin-top:0px;position:relative;color:#FFF}.subheadingLight{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#737373}.subheadingDark{font-family:var(--font-stack);font-size:12px;font-weight:400;line-height:16px;margin-bottom:4px;margin-top:0px;color:#BFBFBF}.primaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.primaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.secondaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.secondaryContentLight::after{content:\"•\";color:#404040;font-size:1em;margin-left:5px;margin-right:5px}.secondaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}.tertiaryContentLight{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#404040}.tertiaryContentDark{font-family:var(--font-stack);font-size:16px;font-weight:400;line-height:20px;margin-bottom:4px;margin-top:0px;color:#E6E6E6}";
108
117
  const SearchcraftBaseSearchResultStyle0 = searchcraftBaseSearchResultModuleCss;
109
118
 
110
119
  const SearchcraftBaseSearchResult = class {
@@ -148,16 +157,16 @@ const SearchcraftBaseSearchResult = class {
148
157
  render() {
149
158
  const isLightTheme = this.themeMode === 'light';
150
159
  const styles = this.parseStyles();
151
- return (index.h("div", { key: 'e16bae2d337d064e057645cfb0ebf52346229b83', class: this.isInteractive
160
+ return (index.h("div", { key: '91cfc671b0b99082915df3eaafa053a9a7f77929', class: this.isInteractive
152
161
  ? isLightTheme
153
162
  ? 'interactiveResultContainerLight'
154
163
  : 'interactiveResultContainerDark'
155
- : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, index.h("div", { key: 'f2154ce85febbe54956a7f28292b13113e3048dd', class: 'imageContainer' }, index.h("img", { key: '8063fa3b88ba56b9cba63ded99967c8097b8b185', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), index.h("div", { key: 'e04a38165dc98b0d72f215e4252f7065db3664d6', class: 'contentContainer' }, index.h("h2", { key: '33d2d3483d7c0f4e1ae7e15ba5895a8b15b45a34', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), index.h("h3", { key: '9587d0acea25ede251eba3e79dba932a5565f51a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), index.h("p", { key: '74f55a23963d5ddc8753d68b164587865da2dd13', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), index.h("div", { key: 'db4e498b08c7075b276e90d8ed233dd48992ecdd' }, index.h("p", { key: 'c09d3164a15452c5fbfa23a54028f2080dd56550', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), index.h("p", { key: 'ae78c4f53d9b12d62cad6b408aad5caf103303db', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: '3ea036c680f3970e9d6f1b00b3505f11e338922c', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
164
+ : 'resultContainer', style: styles.container || {}, tabindex: '0', onClick: this.handleContainerClick, onKeyDown: this.keyDownCallback }, index.h("div", { key: 'ccda236ef60aee285472155889c5490c69a86415', class: 'imageContainer' }, index.h("img", { key: 'e55d743952e2997d91f6486436e3a7955ffc1dcc', alt: this.imageDescription, src: this.imageSource, style: styles.image || {}, class: isLightTheme ? 'imageLight' : 'imageDark' })), index.h("div", { key: 'b0e831c0c7bfef46b8b6da4e84536adf3ebd7158', class: 'contentContainer' }, index.h("h2", { key: '54137612623a39d711f4e3c888bf2015b6fb9500', style: styles.heading || {}, class: isLightTheme ? 'headingLight' : 'headingDark' }, this.headingText), index.h("h3", { key: 'de46df990be3d0b5d2134d272e1766e911ab094a', style: styles.subheading || {}, class: isLightTheme ? 'subheadingLight' : 'subheadingDark' }, this.subheadingText), index.h("p", { key: 'd9e7656bc739b0dd2267f86ac51b17d9ca16da6a', style: styles.primaryContent || {}, class: isLightTheme ? 'primaryContentLight' : 'primaryContentDark' }, this.primaryContent), index.h("div", { key: 'd05813b3da29b8b21c2e370db9c0cbc7b48b9556', class: 'secondaryContentContainer' }, index.h("p", { key: 'e8d2ede937705a5bd88927779ee24e35ba2efbd8', style: styles.secondaryContent || {}, class: isLightTheme ? 'secondaryContentLight' : 'secondaryContentDark' }, this.secondaryContent), index.h("p", { key: '2f9b9f603d55bcefe8347675cb31f705b1f7a0e8', style: styles.tertiaryContent || {}, class: isLightTheme ? 'tertiaryContentLight' : 'tertiaryContentDark' }, this.tertiaryContent)), this.buttonText && (index.h("button", { key: '58724046c9704974cb3ae1c34335ebb7131b91ab', onClick: this.handleButtonClick, style: styles.button || {}, type: 'button' }, this.buttonText)))));
156
165
  }
157
166
  };
158
167
  SearchcraftBaseSearchResult.style = SearchcraftBaseSearchResultStyle0;
159
168
 
160
- const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:100px 20px}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;border:1px solid #DCDDDE;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{text-align:center}";
169
+ const searchcraftBaseSearchResultsModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.resultsContainer{display:flex;flex-direction:column;justify-content:center;margin:16px 0}.resultsContainer>p{align-self:center}.resultsContainer>div{margin-bottom:20px}.resultsContainer>div img{height:300px;width:200px}.adSection{align-items:center;background-color:#F1F1F1;border:1px solid #DCDDDE;border-radius:16px;display:flex;flex-direction:column;font-size:16px;justify-content:center;margin:auto;min-height:150px;text-align:center;width:100%}.adSection p{margin-top:5px}.emptyState{width:100%;text-align:center}.errorMessageContainer{text-align:center}";
161
170
  const SearchcraftBaseSearchResultsStyle0 = searchcraftBaseSearchResultsModuleCss;
162
171
 
163
172
  const SearchcraftBaseSearchResults = class {
@@ -165,19 +174,28 @@ const SearchcraftBaseSearchResults = class {
165
174
  index.registerInstance(this, hostRef);
166
175
  this.query = '';
167
176
  this.searchResults = null;
168
- this.searchKeys = '';
177
+ this.hasSearched = false;
178
+ this.documentAttributesForDisplay = '';
169
179
  this.customStylesForResults = {};
170
180
  this.placeAdAtStart = true;
171
181
  this.placeAdAtEnd = false;
172
182
  this.adInterval = 4;
173
183
  this.formatTime = true;
184
+ this.fallbackElement = null;
174
185
  }
175
186
  componentDidLoad() {
176
- if (!this.searchKeys || this.searchKeys.length === 0) {
177
- console.warn('No searchKeys provided; using empty keys array.');
178
- this.searchKeys = '';
187
+ if (!this.documentAttributesForDisplay ||
188
+ this.documentAttributesForDisplay.length === 0) {
189
+ console.warn('No document attributes provided; using empty keys array.');
190
+ this.documentAttributesForDisplay = '';
179
191
  }
180
192
  this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
193
+ if (state.query.length > 0) {
194
+ this.hasSearched = true;
195
+ }
196
+ else {
197
+ this.hasSearched = false;
198
+ }
181
199
  this.searchResults = Object.assign({}, state.searchResults);
182
200
  this.query = state.query;
183
201
  });
@@ -211,11 +229,14 @@ const SearchcraftBaseSearchResults = class {
211
229
  }
212
230
  render() {
213
231
  var _a, _b, _c, _d, _e, _f, _g;
232
+ if (!this.hasSearched) {
233
+ return (index.h("div", { class: 'emptyState' }, index.h("slot", { name: 'empty-search' })));
234
+ }
214
235
  if (!((_a = this.searchResults) === null || _a === void 0 ? void 0 : _a.data)) {
215
236
  console.warn('No search results data available');
216
237
  return index.h("div", { class: 'emptyState' }, "No results to display.");
217
238
  }
218
- const parsedSearchKeys = utils.parseSearchKeys(this.searchKeys);
239
+ const parsedSearchKeys = utils.parseSearchKeys(this.documentAttributesForDisplay);
219
240
  const serializedStyles = typeof this.customStylesForResults === 'string'
220
241
  ? this.customStylesForResults
221
242
  : utils.serializeStyles(this.customStylesForResults);
@@ -256,7 +277,7 @@ const SearchcraftBaseSearchResults = class {
256
277
  finalComponents.push(index.h("div", { key: 'ad-section-end', class: 'adSection' }, index.h("span", null, "##"), index.h("p", null, " Ad Impressions")));
257
278
  }
258
279
  return (index.h("div", { class: 'resultsContainer' }, finalComponents, this.query.length > 0 &&
259
- ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (index.h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` }))));
280
+ ((_g = (_f = (_e = this.searchResults) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.hits) === null || _g === void 0 ? void 0 : _g.length) === 0 && (index.h("div", { class: 'errorMessageContainer' }, index.h("searchcraft-error-message", { "error-message": `No search results found for "${this.query}" query` })))));
260
281
  }
261
282
  };
262
283
  SearchcraftBaseSearchResults.style = SearchcraftBaseSearchResultsStyle0;
@@ -282,7 +303,7 @@ const SearchcraftClearIconSet = class {
282
303
  }
283
304
  };
284
305
 
285
- const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:25px;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:25px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
306
+ const searchcraftClearInputButtonModuleCss = ":root{--font-stack:Helvetica, Arial, sans-serif}.inputClearButtonLTR{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;padding:0;position:absolute;right:0;top:50%;transform:translateY(-50%);width:20px}.inputClearButtonRTL{align-items:center;background:none;border:none;display:flex;height:20px;justify-content:center;left:0px;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:20px}";
286
307
  const SearchcraftClearInputButtonStyle0 = searchcraftClearInputButtonModuleCss;
287
308
 
288
309
  const SearchcraftClearInputButton = class {
@@ -318,12 +339,12 @@ const SearchcraftErrorMessage = class {
318
339
  }
319
340
  render() {
320
341
  const errorMessageStyle = this.theme === 'light' ? 'errorMessageLight' : 'errorMessageDark';
321
- return (index.h("p", { key: 'f520ac38f2f42e9780454aef5e25576095ae5ee9', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
342
+ return (index.h("p", { key: '544903d700810ed5d6efdefedab646cafed2376d', class: index$1.classNames(errorMessageStyle) }, this.errorMessage || 'Search term is required.'));
322
343
  }
323
344
  };
324
345
  SearchcraftErrorMessage.style = SearchcraftErrorMessageStyle0;
325
346
 
326
- const searchcraftFiltersListModuleCss = "@charset \"UTF-8\";.filtersList{padding:16px}.checkboxLabel{align-items:center;color:#292929;display:flex;font-size:14px;font-weight:600;gap:12px}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:checked{background-color:#000}.checkboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\";font-size:14px}";
347
+ const searchcraftFiltersListModuleCss = "@charset \"UTF-8\";.filtersList{width:100%}.checkboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:14px}.checkboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.checkboxLabel input[type=checkbox]:checked{background-color:#000}.checkboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}.remainingFilterListCheckbox{margin-left:16px}.childCheckboxLabel{align-items:center;color:#292929;display:flex;font-family:\"Source Sans Pro\";font-size:14px;font-weight:600;gap:12px}.childCheckboxLabel input[type=checkbox]{align-items:center;appearance:none;background-color:#EDEDED;border:1px solid #D9D9D9;cursor:pointer;display:flex;height:24px;justify-content:center;width:24px}.childCheckboxLabel input[type=checkbox]:checked{background-color:#000}.childCheckboxLabel input[type=checkbox]:checked::before{color:#fff;content:\"✔\"}";
327
348
  const SearchcraftFiltersListStyle0 = searchcraftFiltersListModuleCss;
328
349
 
329
350
  const SearchcraftFiltersList = class {
@@ -345,15 +366,20 @@ const SearchcraftFiltersList = class {
345
366
  };
346
367
  this.filters = [];
347
368
  this.dynamicFilters = [];
369
+ this.initialFilters = [];
348
370
  this.isRequesting = false;
349
371
  this.selectedFilters = new Set();
350
372
  this.originalFilterCounts = {};
373
+ this.query = '';
374
+ this.resultsCount = 0;
351
375
  }
352
376
  connectedCallback() {
353
377
  this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
354
- var _a;
378
+ var _a, _b, _c, _d;
355
379
  this.isRequesting = state.isRequesting;
356
- const facets = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data.facets;
380
+ this.query = state.query || '';
381
+ this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
382
+ const facets = (_d = state.searchResults) === null || _d === void 0 ? void 0 : _d.data.facets;
357
383
  if (facets) {
358
384
  this.populateFiltersFromFacets(facets);
359
385
  }
@@ -365,32 +391,48 @@ const SearchcraftFiltersList = class {
365
391
  }
366
392
  }
367
393
  populateFiltersFromFacets(facets) {
368
- const newFilters = Object.entries(facets).flatMap(([facetKey, facetData]) => Object.entries(facetData.counts).map(([value, count]) => {
369
- const filterValue = `${facetKey}:${value}`;
370
- this.originalFilterCounts[filterValue] = `${count}`; // Store the original count
394
+ var _a;
395
+ const newFilters = Object.entries(((_a = facets.section) === null || _a === void 0 ? void 0 : _a.counts) || {}).map(([key, count]) => {
396
+ const filterValue = key;
397
+ this.originalFilterCounts[filterValue] = `${count}`;
371
398
  return {
372
- label: `${facetKey}: ${value.replace(/^\//, '')} (${count})`,
399
+ label: `${key.replace(/^\//, '')} (${count})`,
373
400
  value: filterValue,
374
401
  };
375
- }));
376
- this.dynamicFilters = newFilters;
402
+ });
403
+ // Update dynamic filters while preserving the initial filters
404
+ const updatedFilters = [
405
+ ...this.initialFilters,
406
+ ...newFilters.filter((filter) => !this.initialFilters.some((initial) => initial.value === filter.value)),
407
+ ];
408
+ this.dynamicFilters = updatedFilters;
409
+ // Store the initial filters only once
410
+ if (this.initialFilters.length === 0) {
411
+ this.initialFilters = [...updatedFilters];
412
+ }
413
+ }
414
+ formatLabel(label) {
415
+ return label
416
+ .replace(/-/g, ' ') // Replace dashes with spaces
417
+ .split(' ') // Split words
418
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize the first letter
419
+ .join(' '); // Join words back into a single string
377
420
  }
378
421
  render() {
379
- const checkedFilters = Array.from(this.selectedFilters).map((value) => {
380
- const count = this.originalFilterCounts[value] || '0';
381
- return {
382
- label: `${value.split(':')[1]} (${count})`,
383
- value,
384
- };
385
- });
386
- const remainingDynamicFilters = this.dynamicFilters.filter((filter) => !this.selectedFilters.has(filter.value));
387
- if (this.isRequesting) {
388
- return index.h("div", null, "Loading facets");
422
+ if (!this.query || this.resultsCount === 0) {
423
+ return null;
389
424
  }
390
- return (index.h("div", { class: 'filtersList' }, checkedFilters.map((filter) => (index.h("label", { class: 'checkboxLabel', key: filter.value }, index.h("input", { class: 'filterListCheckbox', checked: true, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), filter.label))), remainingDynamicFilters.map((filter) => {
391
- const filterLabel = filter.label.split(':')[1] || filter.label;
392
- return (index.h("label", { class: 'checkboxLabel', key: filter.value }, index.h("input", { class: 'filterListCheckbox', checked: this.selectedFilters.has(filter.value), onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), filterLabel));
393
- })));
425
+ const filtersToRender = this.initialFilters.map((initialFilter) => {
426
+ const isChecked = this.selectedFilters.has(initialFilter.value);
427
+ const dynamicChildren = this.dynamicFilters.filter((dynamicFilter) => dynamicFilter.value.startsWith(initialFilter.value) &&
428
+ dynamicFilter.value !== initialFilter.value);
429
+ return Object.assign(Object.assign({}, initialFilter), { isChecked, children: dynamicChildren });
430
+ });
431
+ return (index.h("div", { class: 'filtersList' }, filtersToRender.map((filter) => (index.h("div", { key: filter.value }, index.h("label", { class: 'checkboxLabel' }, index.h("input", { class: 'filterCheckbox', checked: filter.isChecked, onChange: (event) => this.handleFilterChange(filter.value, event.target.checked), type: 'checkbox', value: filter.value }), this.formatLabel(filter.label)), filter.isChecked &&
432
+ filter.children.map((childFilter) => {
433
+ const childLabel = childFilter.label.split('/').pop(); // Get only the part after the last '/'
434
+ return (index.h("label", { class: 'childCheckboxLabel', key: childFilter.value, style: { marginLeft: '20px' } }, index.h("input", { class: 'childFilterCheckbox', checked: this.selectedFilters.has(childFilter.value), onChange: (event) => this.handleFilterChange(childFilter.value, event.target.checked), type: 'checkbox', value: childFilter.value }), this.formatLabel(childLabel || '')));
435
+ }))))));
394
436
  }
395
437
  };
396
438
  SearchcraftFiltersList.style = SearchcraftFiltersListStyle0;
@@ -449,11 +491,11 @@ const SearchcraftInput = class {
449
491
  const placeholderStyle = {
450
492
  fontSize: validatedCustomStyles.placeholderFontSize || '16px',
451
493
  };
452
- return (index.h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
494
+ return (index.h("div", { key: 'ca2698b808ef606d890817f6b8c133503663570e', class: index$1.classNames(containerClassName, this.formClassName, 'searchcraft-input-form') }, this.rightToLeftOrientation ? (index.h(index.Fragment, null, index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
453
495
  #searchcraft-input-id::placeholder {
454
496
  font-size: ${placeholderStyle.fontSize};
455
497
  }
456
- `), this.inputCaptionValue && (index.h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (index.h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), index.h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (index.h("div", { class: 'inputWrapper' }, index.h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), index.h("input", { class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
498
+ `), this.inputCaptionValue && (index.h("searchcraft-input-caption", { inputCaptionClassName: this.inputCaptionClassName, inputCaptionValue: this.inputCaptionValue, rightToLeftOrientation: this.rightToLeftOrientation })), this.query.length > 0 && (index.h("searchcraft-clear-input-button", { isRequesting: this.isRequesting, onClearInput: this.handleClearInput, rightToLeftOrientation: this.rightToLeftOrientation })), index.h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }))) : (index.h(index.Fragment, null, index.h("searchcraft-input-icon", { error: this.error, height: this.inputIconHeight, rightToLeftOrientation: this.rightToLeftOrientation, width: this.inputIconWidth }), index.h("input", { autoComplete: 'off', class: index$1.classNames(inputClassName, 'searchcraft-input'), id: 'searchcraft-input-id', onChange: this.handleInputChange.bind(this), onKeyUp: this.handleInputKeyUp.bind(this), placeholder: this.placeholderValue, type: 'text', value: this.query, style: validatedCustomStyles }), index.h("style", null, `
457
499
  #searchcraft-input-id::placeholder {
458
500
  font-size: ${placeholderStyle.fontSize};
459
501
  }
@@ -540,6 +582,40 @@ const SearchcraftInputLabel = class {
540
582
  };
541
583
  SearchcraftInputLabel.style = SearchcraftInputLabelStyle0;
542
584
 
585
+ const searchcraftResultsInfoModuleCss = ".container{border-bottom:1px solid #D9D9D9;display:flex;justify-content:flex-start;width:100%}.resultsInfo{color:#292929;font-family:\"Brygada 1918\";font-size:18px;font-weight:600;line-height:20px;margin:0;margin-bottom:8px}";
586
+ const SearchcraftResultsInfoStyle0 = searchcraftResultsInfoModuleCss;
587
+
588
+ const SearchcraftResultsInfo = class {
589
+ constructor(hostRef) {
590
+ index.registerInstance(this, hostRef);
591
+ this.isRequesting = false;
592
+ this.resultsCount = 0;
593
+ this.responseTime = '';
594
+ this.query = '';
595
+ }
596
+ connectedCallback() {
597
+ this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
598
+ var _a, _b, _c, _d;
599
+ this.isRequesting = state.isRequesting;
600
+ this.resultsCount = ((_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.count) || 0;
601
+ this.responseTime = ((((_d = (_c = state.searchResults) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.time_taken) || 0) * 1000).toFixed(2);
602
+ this.query = state.query || ''; // Update query from store
603
+ });
604
+ }
605
+ disconnectedCallback() {
606
+ if (this.unsubscribe) {
607
+ this.unsubscribe();
608
+ }
609
+ }
610
+ render() {
611
+ if (!this.query || this.resultsCount === 0) {
612
+ return null;
613
+ }
614
+ return (index.h("div", { class: 'container' }, index.h("p", { class: 'resultsInfo' }, this.resultsCount, " results found in ", this.responseTime, "ms")));
615
+ }
616
+ };
617
+ SearchcraftResultsInfo.style = SearchcraftResultsInfoStyle0;
618
+
543
619
  const SearchcraftSearchIconSet = class {
544
620
  constructor(hostRef) {
545
621
  index.registerInstance(this, hostRef);
@@ -564,7 +640,7 @@ const SearchcraftSearchIconSet = class {
564
640
  }
565
641
  };
566
642
 
567
- const searchcraftSliderModuleCss = ".slider-container{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center}label{font-size:14px;font-weight:bold;margin-bottom:10px}.range-container{display:flex;width:100%;align-items:center}.range-slider{width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;margin:0 -1px;position:relative}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:#007bff;border-radius:50%;border:2px solid #fff;cursor:pointer;position:relative}.range-slider::-moz-range-thumb{width:20px;height:20px;background:#007bff;border-radius:50%;border:2px solid #fff;cursor:pointer}.range-slider:before{content:\"\";position:absolute;height:4px;background:#007bff;border-radius:2px;left:0;right:0;z-index:-1}.year-labels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:12px;color:#555}.year-label{min-width:30px;text-align:center}";
643
+ const searchcraftSliderModuleCss = ".slider-container{display:flex;flex-direction:column;gap:10px;font-family:Arial, sans-serif;align-items:center}label{font-size:14px;font-weight:bold;margin-bottom:10px}.range-container{display:flex;width:100%;align-items:center}.range-slider{width:100%;height:4px;background:#ddd;border-radius:2px;outline:none;margin:0 -1px;position:relative}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer;position:relative}.range-slider::-moz-range-thumb{width:20px;height:20px;background-color:#FFF;border-radius:50%;border:1px solid #E6E6E6;cursor:pointer}.range-slider:before{content:\"\";position:absolute;height:4px;background-color:#FFF;border-radius:2px;left:0;right:0;z-index:-1}.year-labels{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:15px;font-weight:600;font-family:\"Source Sans Pro\";color:#666}.year-label{min-width:30px;text-align:center}";
568
644
  const SearchcraftSliderStyle0 = searchcraftSliderModuleCss;
569
645
 
570
646
  const SearchcraftSlider = class {
@@ -572,14 +648,14 @@ const SearchcraftSlider = class {
572
648
  index.registerInstance(this, hostRef);
573
649
  this.searchStore = store.useSearchcraftStore.getState();
574
650
  this.updateYears = async () => {
575
- const query = this.searchStore.query; // Get the query from the store
576
651
  this.searchStore.setYearsRange([this.startYear, this.endYear]);
577
652
  try {
578
- if (!query || query.trim() === '') {
579
- console.warn('No query value, search request skipped.');
580
- return;
653
+ if (typeof this.query === 'string' && this.query.trim() !== '') {
654
+ await this.searchStore.search();
655
+ }
656
+ else {
657
+ console.warn('Query is missing or empty, skipping search request.');
581
658
  }
582
- await this.searchStore.search();
583
659
  }
584
660
  catch (error) {
585
661
  console.error('Search failed:', error);
@@ -597,11 +673,32 @@ const SearchcraftSlider = class {
597
673
  };
598
674
  this.minYear = 2000;
599
675
  this.maxYear = new Date().getFullYear();
600
- this.startYear = this.minYear;
601
676
  this.endYear = this.maxYear;
677
+ this.query = '';
678
+ this.startYear = this.minYear;
679
+ this.hasSearched = false;
680
+ this.resultsCount = 0;
681
+ }
682
+ componentDidLoad() {
683
+ this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
684
+ var _a, _b, _c;
685
+ if (state.query.length > 0) {
686
+ this.hasSearched = true;
687
+ this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
688
+ }
689
+ this.query = state.query;
690
+ });
691
+ }
692
+ disconnectedCallback() {
693
+ if (this.unsubscribe) {
694
+ this.unsubscribe();
695
+ }
602
696
  }
603
697
  render() {
604
- return (index.h("div", { key: 'cc50ae827183ec2cbf1ab16f4a3514fbd581cf01', class: 'slider-container' }, index.h("label", { key: '96df103d7a04aa5e0364ddf51e13af653984b8a6' }, "Filter by Year"), index.h("div", { key: 'dc0b68f7cd3b9a3e2fd37b6204e1542ee9fb0478', class: 'range-container' }, index.h("input", { key: '8ed75b7de77448d8340a76224609345309c20fe4', type: 'range', min: this.minYear, max: this.maxYear, value: this.startYear, step: '1', onInput: this.handleStartYearChange, class: 'range-slider' }), index.h("input", { key: '12a3612f9245d6ea290007d094668625907c183d', type: 'range', min: this.minYear, max: this.maxYear, value: this.endYear, step: '1', onInput: this.handleEndYearChange, class: 'range-slider' })), index.h("div", { key: '3bf225797efb2c5e1d97275e2f012faba14d2550', class: 'year-labels' }, index.h("span", { key: '524c7f49dc52d68059373ecc1e95b425892f0144', class: 'year-label' }, this.startYear), index.h("span", { key: 'e7464b4154ab8d26a969b338a5a733a206502f29', class: 'year-label' }, this.endYear))));
698
+ if (!this.query || this.resultsCount === 0) {
699
+ return null;
700
+ }
701
+ return (index.h("div", { class: 'slider-container' }, index.h("div", { class: 'range-container' }, index.h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleStartYearChange, step: '1', type: 'range', value: this.startYear }), index.h("input", { class: 'range-slider', max: this.maxYear, min: this.minYear, onInput: this.handleEndYearChange, step: '1', type: 'range', value: this.endYear })), index.h("div", { class: 'year-labels' }, index.h("span", { class: 'year-label' }, this.startYear), index.h("span", { class: 'year-label' }, this.endYear))));
605
702
  }
606
703
  };
607
704
  SearchcraftSlider.style = SearchcraftSliderStyle0;
@@ -614,7 +711,7 @@ const SearchcraftSpinnerDark = class {
614
711
  index.registerInstance(this, hostRef);
615
712
  }
616
713
  render() {
617
- return (index.h("div", { key: 'fa6235c4bf182daac64d41cd04a995aa3476b59a', class: 'spinnerContainer' }, index.h("div", { key: '68532114a4f25a5d12c8514e5c6d2984a68573af', class: 'spinnerDark' })));
714
+ return (index.h("div", { key: '60b629930c2e2795236f6768b40c95ce9390e882', class: 'spinnerContainer' }, index.h("div", { key: 'bfef3329f2e81ecf6538738ac0213da6259dd1c3', class: 'spinnerDark' })));
618
715
  }
619
716
  };
620
717
  SearchcraftSpinnerDark.style = SearchcraftSpinnerDarkStyle0;
@@ -627,18 +724,17 @@ const SearchcraftSpinnerLight = class {
627
724
  index.registerInstance(this, hostRef);
628
725
  }
629
726
  render() {
630
- return (index.h("div", { key: 'f1c941149c07dac7ee09eff1ae98dca00dcdf924', class: 'spinnerContainer' }, index.h("div", { key: '2f93e299ef12f4f382d189ab58c743ee9e981ce2', class: 'spinnerLight' })));
727
+ return (index.h("div", { key: 'ad5224c97faf7e329d2a8904488c17dfd7414b9e', class: 'spinnerContainer' }, index.h("div", { key: '6336ce7737af65eedac46ee290b20291ce5b6096', class: 'spinnerLight' })));
631
728
  }
632
729
  };
633
730
  SearchcraftSpinnerLight.style = SearchcraftSpinnerLightStyle0;
634
731
 
635
- const searchcraftToggleButtonModuleCss = ".toggle-container{display:flex;align-items:center;font-size:14px;color:#333}.toggle-wrapper{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);margin-left:10px;border:none;border-radius:16px;width:44px;height:26px;background:#ddd;position:relative;cursor:pointer}.toggle-wrapper.active{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);background:#007DB3}.toggle-wrapper .toggle-switch{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:calc(50% - 9px);left:4px;transition:transform 0.3s ease}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
732
+ const searchcraftToggleButtonModuleCss = ".toggle-wrapper{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);margin-left:10px;border:none;border-radius:16px;width:44px;height:26px;background:#ddd;position:relative;cursor:pointer}.toggle-wrapper.active{box-shadow:0px 0px 0px 1px rgba(0, 0, 0, 0.05);background:#007DB3}.toggle-wrapper .toggle-switch{width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:calc(50% - 9px);left:4px;transition:transform 0.3s ease}.toggle-wrapper .toggle-switch.active{transform:translateX(16px)}";
636
733
  const SearchcraftToggleButtonStyle0 = searchcraftToggleButtonModuleCss;
637
734
 
638
735
  const SearchcraftToggleButton = class {
639
736
  constructor(hostRef) {
640
737
  index.registerInstance(this, hostRef);
641
- // Zustand store hook
642
738
  this.searchStore = store.useSearchcraftStore.getState();
643
739
  this.handleToggle = async () => {
644
740
  this.isActive = !this.isActive;
@@ -649,7 +745,7 @@ const SearchcraftToggleButton = class {
649
745
  });
650
746
  }
651
747
  else if (this.type === 'sort') {
652
- const sort = this.isActive ? 'asc' : 'desc';
748
+ const sort = this.isActive ? 'desc' : 'asc';
653
749
  this.searchStore.setSearchParams({
654
750
  sort,
655
751
  });
@@ -663,14 +759,26 @@ const SearchcraftToggleButton = class {
663
759
  };
664
760
  this.type = 'mode';
665
761
  this.isActive = false;
762
+ this.query = '';
763
+ this.resultsCount = 0;
764
+ }
765
+ componentDidLoad() {
766
+ this.unsubscribe = store.useSearchcraftStore.subscribe((state) => {
767
+ var _a, _b, _c;
768
+ this.query = state.query || '';
769
+ this.resultsCount = ((_c = (_b = (_a = state.searchResults) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.hits) === null || _c === void 0 ? void 0 : _c.length) || 0;
770
+ });
771
+ }
772
+ disconnectedCallback() {
773
+ if (this.unsubscribe) {
774
+ this.unsubscribe();
775
+ }
666
776
  }
667
777
  render() {
668
- const label = this.type === 'mode'
669
- ? 'Exact Match'
670
- : this.type === 'sort'
671
- ? 'Sort Order'
672
- : '';
673
- return (index.h("div", { key: '8bfbd9cf161d3dc285d7309ada79e9fb68624a45', class: 'toggle-container' }, index.h("span", { key: '99b5f67e53e45ebf97fef2bb2a52e50c804dec4d' }, label), index.h("button", { key: 'c6444cfcd24ef3558d0d93ebe0d4dcd4ceb8b29e', class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, index.h("div", { key: '801f2e99c695449e161699fc874aa05ee1cf1e07', class: `toggle-switch ${this.isActive ? 'active' : ''}` }))));
778
+ if (!this.query || this.resultsCount === 0) {
779
+ return null;
780
+ }
781
+ return (index.h("button", { class: `toggle-wrapper ${this.isActive ? 'active' : ''}`, onClick: this.handleToggle, type: 'button' }, index.h("div", { class: `toggle-switch ${this.isActive ? 'active' : ''}` })));
674
782
  }
675
783
  };
676
784
  SearchcraftToggleButton.style = SearchcraftToggleButtonStyle0;
@@ -686,10 +794,11 @@ exports.searchcraft_input = SearchcraftInput;
686
794
  exports.searchcraft_input_caption = SearchcraftInputCaption;
687
795
  exports.searchcraft_input_icon = SearchcraftInputIcon;
688
796
  exports.searchcraft_input_label = SearchcraftInputLabel;
797
+ exports.searchcraft_results_info = SearchcraftResultsInfo;
689
798
  exports.searchcraft_search_icon_set = SearchcraftSearchIconSet;
690
799
  exports.searchcraft_slider = SearchcraftSlider;
691
800
  exports.searchcraft_spinner_dark = SearchcraftSpinnerDark;
692
801
  exports.searchcraft_spinner_light = SearchcraftSpinnerLight;
693
802
  exports.searchcraft_toggle_button = SearchcraftToggleButton;
694
803
 
695
- //# sourceMappingURL=searchcraft-auto-search-form_16.cjs.entry.js.map
804
+ //# sourceMappingURL=searchcraft-auto-search-form_17.cjs.entry.js.map