@getlupa/client 1.26.0 → 1.26.2

package/dist/lupaSearch.iife.js

@@ -19528,6 +19528,7 @@ var __async = (__this, __arguments, generator) => {
     const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
     const docResults = ref({});
     const suggestionResults = ref({});
+    const loadingResultsByQueryKey = ref({});
     const highlightedIndex = ref(-1);
     const inputValue = ref("");
     const resultInputValue = ref("");
@@ -19591,16 +19592,22 @@ var __async = (__this, __arguments, generator) => {
         title: panel.titleKey ? doc2[panel.titleKey] : ""
       };
     });
+    const anyPanelLoading = computed(
+      () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+    );
     const querySuggestions = (_0) => __async2(null, [_0], function* ({
       queryKey,
       publicQuery,
       options: options2
     }) {
-      var _a25;
+      var _a25, _b25, _c;
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
         const context = getLupaTrackingContext();
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+          [queryKey]: true
+        });
         const result2 = yield LupaSearchSdk.suggestions(
           queryKey,
           __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19614,7 +19621,7 @@ var __async = (__this, __arguments, generator) => {
         }
         highlightChange({ action: "clear" });
         suggestionResults.value = __spreadProps2(__spreadValues2({}, suggestionResults.value), {
-          [queryKey]: flattenSuggestions(result2.items, (_a25 = publicQuery.searchText) != null ? _a25 : "")
+          [queryKey]: flattenSuggestions(result2.items, (_b25 = publicQuery.searchText) != null ? _b25 : "")
         });
         inputValue.value = publicQuery.searchText;
         resultInputValue.value = publicQuery.searchText;
@@ -19628,6 +19635,10 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { suggestions: void 0 };
+      } finally {
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_c = loadingResultsByQueryKey.value) != null ? _c : {}), {
+          [queryKey]: false
+        });
       }
     });
     const emitSearchResultsCallback = () => {
@@ -19648,9 +19659,13 @@ var __async = (__this, __arguments, generator) => {
       publicQuery,
       options: options2
     }) {
+      var _a25, _b25;
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+          [queryKey]: true
+        });
         const context = getLupaTrackingContext();
         const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
         if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19669,6 +19684,10 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { queryKey, result: { items: [] } };
+      } finally {
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_b25 = loadingResultsByQueryKey.value) != null ? _b25 : {}), {
+          [queryKey]: false
+        });
       }
     });
     const highlightChange = ({ action }) => {
@@ -19699,6 +19718,7 @@ var __async = (__this, __arguments, generator) => {
       highlightedItem,
       highlightedDocument,
       hasAnyResults,
+      anyPanelLoading,
       querySuggestions,
       queryDocuments,
       highlightChange,
@@ -20592,7 +20612,9 @@ var __async = (__this, __arguments, generator) => {
       items: {},
       highlight: { type: Boolean },
       queryKey: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {},
+      panelOptions: {}
     },
     emits: ["suggestionSelect"],
     setup(__props, { emit: __emit }) {
@@ -20607,7 +20629,7 @@ var __async = (__this, __arguments, generator) => {
       });
       const emit2 = __emit;
       const searchBoxStore = useSearchBoxStore();
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20653,6 +20675,7 @@ var __async = (__this, __arguments, generator) => {
         });
       });
       return (_ctx, _cache) => {
+        var _a25, _b25, _c;
         return openBlock(), createElementBlock("div", _hoisted_1$1k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
             return openBlock(), createBlock(_sfc_main$1D, {
@@ -20668,7 +20691,11 @@ var __async = (__this, __arguments, generator) => {
               "data-cy": "lupa-suggestion",
               onSelect: handleSelect
             }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-          }), 128))
+          }), 128)),
+          ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+            key: 0,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true)
         ]);
       };
     }
@@ -20691,6 +20718,7 @@ var __async = (__this, __arguments, generator) => {
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
+      searchBoxOptions: {},
       options: {},
       inputValue: {},
       debounce: {},
@@ -20735,8 +20763,10 @@ var __async = (__this, __arguments, generator) => {
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
           labels: _ctx.labels,
+          "search-box-options": _ctx.searchBoxOptions,
+          "panel-options": _ctx.panel,
           onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-        }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+        }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
       };
     }
   });
@@ -30559,7 +30589,7 @@ and ensure you are accounting for this risk.
     };
     const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
       var _a25, _b25, _c, _d;
-      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+      const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
       const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
       const result2 = yield LupaSearchSdk.query(queryKey, query, options);
       if (!result2.success) {
@@ -31503,7 +31533,8 @@ and ensure you are accounting for this risk.
       items: {},
       inputValue: {},
       panelOptions: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {}
     },
     emits: ["product-click"],
     setup(__props, { emit: __emit }) {
@@ -31514,7 +31545,7 @@ and ensure you are accounting for this risk.
       const optionsStore = useOptionsStore();
       const { boxRoutingBehavior } = storeToRefs(optionsStore);
       const emit2 = __emit;
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31592,7 +31623,7 @@ and ensure you are accounting for this risk.
         }
       };
       return (_ctx, _cache) => {
-        var _a25, _b25, _c;
+        var _a25, _b25, _c, _d, _e, _f;
         return openBlock(), createElementBlock("div", {
           id: "lupa-search-box-products",
           class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31622,11 +31653,15 @@ and ensure you are accounting for this risk.
             key: 2,
             innerHTML: _ctx.panelOptions.appendCustomHtml
           }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 3,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true),
+          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+            key: 4,
             class: "lupa-search-box-expand",
             onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-          }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+          }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ], 2);
       };
@@ -31840,9 +31875,10 @@ and ensure you are accounting for this risk.
         var _a25, _b25;
         return openBlock(), createBlock(_sfc_main$1i, {
           items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-          panelOptions: _ctx.panel,
+          "panel-options": _ctx.panel,
           labels: _ctx.labels,
-          inputValue: _ctx.inputValue,
+          "input-value": _ctx.inputValue,
+          "search-box-options": _ctx.searchBoxOptions,
           onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
         }, createSlots({
           default: withCtx(() => {
@@ -31865,7 +31901,7 @@ and ensure you are accounting for this risk.
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+        ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
       };
     }
   });
@@ -32004,7 +32040,7 @@ and ensure you are accounting for this risk.
       const panels = computed(() => props.options.panels);
       const sdkOptions = computed(() => props.options.options);
       const searchBoxStore = useSearchBoxStore();
-      const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+      const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
       const emit2 = __emit;
       const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
       const displayResults = computed(() => {
@@ -32192,7 +32228,7 @@ and ensure you are accounting for this risk.
                 ], 14, _hoisted_1$12);
               }), 128))
             ], 4),
-            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
               key: 1,
               options: _ctx.options
             }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33374,7 +33410,7 @@ and ensure you are accounting for this risk.
       facet: {},
       currentFilters: {}
     },
-    emits: ["select"],
+    emits: ["select", "showMoreClicked", "filterFocused"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
@@ -33438,6 +33474,9 @@ and ensure you are accounting for this risk.
       };
       const toggleShowAll = () => {
         showAll.value = !showAll.value;
+        if (showAll.value) {
+          emit2("showMoreClicked", facet.value.key);
+        }
       };
       const isChecked = (item) => {
         var _a25, _b25;
@@ -33467,8 +33506,9 @@ and ensure you are accounting for this risk.
             class: "lupa-term-filter",
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-            placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_2$E)), [
+            placeholder: _ctx.options.labels.facetFilter,
+            onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+          }, null, 40, _hoisted_2$E)), [
             [vModelText, termFilter.value]
           ]) : createCommentVNode("", true),
           createBaseVNode("div", _hoisted_3$u, [
@@ -35083,7 +35123,9 @@ and ensure you are accounting for this risk.
               facet: facet.value,
               currentFilters: currentFilters.value[facet.value.key],
               options: _ctx.options,
-              onSelect: handleFacetSelect
+              onSelect: handleFacetSelect,
+              onShowMoreClicked: handleFacetQueryFilter,
+              onFilterFocused: handleFacetQueryFilter
             }, null, 40, ["facet", "currentFilters", "options"])),
             _ctx.clearable ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -41757,6 +41799,7 @@ and ensure you are accounting for this risk.
         customBaseUrl: searchResultOptions.customBaseUrl,
         customPayload: searchResultOptions.customPayload,
         customHeaders: searchResultOptions.customHeaders,
+        customRelatedQueriesUrl: searchResultOptions.customRelatedQueriesUrl,
         onError: searchResultOptions.errorHandler
       },
       queryKey: searchResultOptions.queryKey,

package/dist/lupaSearch.js

@@ -19528,6 +19528,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
   const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
   const docResults = ref({});
   const suggestionResults = ref({});
+  const loadingResultsByQueryKey = ref({});
   const highlightedIndex = ref(-1);
   const inputValue = ref("");
   const resultInputValue = ref("");
@@ -19591,16 +19592,22 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       title: panel.titleKey ? doc2[panel.titleKey] : ""
     };
   });
+  const anyPanelLoading = computed(
+    () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+  );
   const querySuggestions = (_0) => __async2(null, [_0], function* ({
     queryKey,
     publicQuery,
     options: options2
   }) {
-    var _a25;
+    var _a25, _b25, _c;
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
       const context = getLupaTrackingContext();
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: true
+      });
       const result2 = yield LupaSearchSdk.suggestions(
         queryKey,
         __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19614,7 +19621,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       }
       highlightChange({ action: "clear" });
       suggestionResults.value = __spreadProps2(__spreadValues2({}, suggestionResults.value), {
-        [queryKey]: flattenSuggestions(result2.items, (_a25 = publicQuery.searchText) != null ? _a25 : "")
+        [queryKey]: flattenSuggestions(result2.items, (_b25 = publicQuery.searchText) != null ? _b25 : "")
       });
       inputValue.value = publicQuery.searchText;
       resultInputValue.value = publicQuery.searchText;
@@ -19628,6 +19635,10 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { suggestions: void 0 };
+    } finally {
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_c = loadingResultsByQueryKey.value) != null ? _c : {}), {
+        [queryKey]: false
+      });
     }
   });
   const emitSearchResultsCallback = () => {
@@ -19648,9 +19659,13 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     publicQuery,
     options: options2
   }) {
+    var _a25, _b25;
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: true
+      });
       const context = getLupaTrackingContext();
       const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
       if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19669,6 +19684,10 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { queryKey, result: { items: [] } };
+    } finally {
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_b25 = loadingResultsByQueryKey.value) != null ? _b25 : {}), {
+        [queryKey]: false
+      });
     }
   });
   const highlightChange = ({ action }) => {
@@ -19699,6 +19718,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     highlightedItem,
     highlightedDocument,
     hasAnyResults,
+    anyPanelLoading,
     querySuggestions,
     queryDocuments,
     highlightChange,
@@ -20592,7 +20612,9 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     items: {},
     highlight: { type: Boolean },
     queryKey: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {},
+    panelOptions: {}
   },
   emits: ["suggestionSelect"],
   setup(__props, { emit: __emit }) {
@@ -20607,7 +20629,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     });
     const emit2 = __emit;
     const searchBoxStore = useSearchBoxStore();
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20653,6 +20675,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
+      var _a25, _b25, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$1k, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1D, {
@@ -20668,7 +20691,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-suggestion",
             onSelect: handleSelect
           }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-        }), 128))
+        }), 128)),
+        ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+          key: 0,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -20691,6 +20718,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
+    searchBoxOptions: {},
     options: {},
     inputValue: {},
     debounce: {},
@@ -20735,8 +20763,10 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
         labels: _ctx.labels,
+        "search-box-options": _ctx.searchBoxOptions,
+        "panel-options": _ctx.panel,
         onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-      }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+      }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
     };
   }
 });
@@ -30559,7 +30589,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
   };
   const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
     var _a25, _b25, _c, _d;
-    const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+    const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
     const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
     const result2 = yield LupaSearchSdk.query(queryKey, query, options);
     if (!result2.success) {
@@ -31503,7 +31533,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     items: {},
     inputValue: {},
     panelOptions: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {}
   },
   emits: ["product-click"],
   setup(__props, { emit: __emit }) {
@@ -31514,7 +31545,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const optionsStore = useOptionsStore();
     const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const emit2 = __emit;
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31592,7 +31623,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a25, _b25, _c;
+      var _a25, _b25, _c, _d, _e, _f;
       return openBlock(), createElementBlock("div", {
         id: "lupa-search-box-products",
         class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31622,11 +31653,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           key: 2,
           innerHTML: _ctx.panelOptions.appendCustomHtml
         }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+        ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
           key: 3,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true),
+        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          key: 4,
           class: "lupa-search-box-expand",
           onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-        }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+        }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -31840,9 +31875,10 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       var _a25, _b25;
       return openBlock(), createBlock(_sfc_main$1i, {
         items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-        panelOptions: _ctx.panel,
+        "panel-options": _ctx.panel,
         labels: _ctx.labels,
-        inputValue: _ctx.inputValue,
+        "input-value": _ctx.inputValue,
+        "search-box-options": _ctx.searchBoxOptions,
         onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
       }, createSlots({
         default: withCtx(() => {
@@ -31865,7 +31901,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+      ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
     };
   }
 });
@@ -32004,7 +32040,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
     const emit2 = __emit;
     const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
     const displayResults = computed(() => {
@@ -32192,7 +32228,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
               ], 14, _hoisted_1$12);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 1,
             options: _ctx.options
           }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33374,7 +33410,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     facet: {},
     currentFilters: {}
   },
-  emits: ["select"],
+  emits: ["select", "showMoreClicked", "filterFocused"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
@@ -33438,6 +33474,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
     const toggleShowAll = () => {
       showAll.value = !showAll.value;
+      if (showAll.value) {
+        emit2("showMoreClicked", facet.value.key);
+      }
     };
     const isChecked = (item) => {
       var _a25, _b25;
@@ -33467,8 +33506,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           class: "lupa-term-filter",
           "data-cy": "lupa-term-filter",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-          placeholder: _ctx.options.labels.facetFilter
-        }, null, 8, _hoisted_2$E)), [
+          placeholder: _ctx.options.labels.facetFilter,
+          onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+        }, null, 40, _hoisted_2$E)), [
           [vModelText, termFilter.value]
         ]) : createCommentVNode("", true),
         createBaseVNode("div", _hoisted_3$u, [
@@ -35083,7 +35123,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             facet: facet.value,
             currentFilters: currentFilters.value[facet.value.key],
             options: _ctx.options,
-            onSelect: handleFacetSelect
+            onSelect: handleFacetSelect,
+            onShowMoreClicked: handleFacetQueryFilter,
+            onFilterFocused: handleFacetQueryFilter
           }, null, 40, ["facet", "currentFilters", "options"])),
           _ctx.clearable ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -41757,6 +41799,7 @@ const getSearchResultsComponent = ({
       customBaseUrl: searchResultOptions.customBaseUrl,
       customPayload: searchResultOptions.customPayload,
       customHeaders: searchResultOptions.customHeaders,
+      customRelatedQueriesUrl: searchResultOptions.customRelatedQueriesUrl,
       onError: searchResultOptions.errorHandler
     },
     queryKey: searchResultOptions.queryKey,

package/dist/lupaSearch.mjs

@@ -19526,6 +19526,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
   const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
   const docResults = ref({});
   const suggestionResults = ref({});
+  const loadingResultsByQueryKey = ref({});
   const highlightedIndex = ref(-1);
   const inputValue = ref("");
   const resultInputValue = ref("");
@@ -19589,16 +19590,22 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       title: panel.titleKey ? doc2[panel.titleKey] : ""
     };
   });
+  const anyPanelLoading = computed(
+    () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+  );
   const querySuggestions = (_0) => __async2(null, [_0], function* ({
     queryKey,
     publicQuery,
     options: options2
   }) {
-    var _a25;
+    var _a25, _b25, _c;
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
       const context = getLupaTrackingContext();
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: true
+      });
       const result2 = yield LupaSearchSdk.suggestions(
         queryKey,
         __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19612,7 +19619,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       }
       highlightChange({ action: "clear" });
       suggestionResults.value = __spreadProps2(__spreadValues2({}, suggestionResults.value), {
-        [queryKey]: flattenSuggestions(result2.items, (_a25 = publicQuery.searchText) != null ? _a25 : "")
+        [queryKey]: flattenSuggestions(result2.items, (_b25 = publicQuery.searchText) != null ? _b25 : "")
       });
       inputValue.value = publicQuery.searchText;
       resultInputValue.value = publicQuery.searchText;
@@ -19626,6 +19633,10 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { suggestions: void 0 };
+    } finally {
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_c = loadingResultsByQueryKey.value) != null ? _c : {}), {
+        [queryKey]: false
+      });
     }
   });
   const emitSearchResultsCallback = () => {
@@ -19646,9 +19657,13 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     publicQuery,
     options: options2
   }) {
+    var _a25, _b25;
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: true
+      });
       const context = getLupaTrackingContext();
       const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
       if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19667,6 +19682,10 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { queryKey, result: { items: [] } };
+    } finally {
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_b25 = loadingResultsByQueryKey.value) != null ? _b25 : {}), {
+        [queryKey]: false
+      });
     }
   });
   const highlightChange = ({ action }) => {
@@ -19697,6 +19716,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     highlightedItem,
     highlightedDocument,
     hasAnyResults,
+    anyPanelLoading,
     querySuggestions,
     queryDocuments,
     highlightChange,
@@ -20590,7 +20610,9 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     items: {},
     highlight: { type: Boolean },
     queryKey: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {},
+    panelOptions: {}
   },
   emits: ["suggestionSelect"],
   setup(__props, { emit: __emit }) {
@@ -20605,7 +20627,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     });
     const emit2 = __emit;
     const searchBoxStore = useSearchBoxStore();
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20651,6 +20673,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
+      var _a25, _b25, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$1k, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1D, {
@@ -20666,7 +20689,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-suggestion",
             onSelect: handleSelect
           }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-        }), 128))
+        }), 128)),
+        ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+          key: 0,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -20689,6 +20716,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
+    searchBoxOptions: {},
     options: {},
     inputValue: {},
     debounce: {},
@@ -20733,8 +20761,10 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
         labels: _ctx.labels,
+        "search-box-options": _ctx.searchBoxOptions,
+        "panel-options": _ctx.panel,
         onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-      }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+      }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
     };
   }
 });
@@ -30557,7 +30587,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
   };
   const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
     var _a25, _b25, _c, _d;
-    const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+    const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
     const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
     const result2 = yield LupaSearchSdk.query(queryKey, query, options);
     if (!result2.success) {
@@ -31501,7 +31531,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     items: {},
     inputValue: {},
     panelOptions: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {}
   },
   emits: ["product-click"],
   setup(__props, { emit: __emit }) {
@@ -31512,7 +31543,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const optionsStore = useOptionsStore();
     const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const emit2 = __emit;
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31590,7 +31621,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a25, _b25, _c;
+      var _a25, _b25, _c, _d, _e, _f;
       return openBlock(), createElementBlock("div", {
         id: "lupa-search-box-products",
         class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31620,11 +31651,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           key: 2,
           innerHTML: _ctx.panelOptions.appendCustomHtml
         }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+        ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
           key: 3,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true),
+        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          key: 4,
           class: "lupa-search-box-expand",
           onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-        }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+        }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -31838,9 +31873,10 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       var _a25, _b25;
       return openBlock(), createBlock(_sfc_main$1i, {
         items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-        panelOptions: _ctx.panel,
+        "panel-options": _ctx.panel,
         labels: _ctx.labels,
-        inputValue: _ctx.inputValue,
+        "input-value": _ctx.inputValue,
+        "search-box-options": _ctx.searchBoxOptions,
         onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
       }, createSlots({
         default: withCtx(() => {
@@ -31863,7 +31899,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+      ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
     };
   }
 });
@@ -32002,7 +32038,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
     const emit2 = __emit;
     const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
     const displayResults = computed(() => {
@@ -32190,7 +32226,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
               ], 14, _hoisted_1$12);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 1,
             options: _ctx.options
           }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33372,7 +33408,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     facet: {},
     currentFilters: {}
   },
-  emits: ["select"],
+  emits: ["select", "showMoreClicked", "filterFocused"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
@@ -33436,6 +33472,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
     const toggleShowAll = () => {
       showAll.value = !showAll.value;
+      if (showAll.value) {
+        emit2("showMoreClicked", facet.value.key);
+      }
     };
     const isChecked = (item) => {
       var _a25, _b25;
@@ -33465,8 +33504,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           class: "lupa-term-filter",
           "data-cy": "lupa-term-filter",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-          placeholder: _ctx.options.labels.facetFilter
-        }, null, 8, _hoisted_2$E)), [
+          placeholder: _ctx.options.labels.facetFilter,
+          onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+        }, null, 40, _hoisted_2$E)), [
           [vModelText, termFilter.value]
         ]) : createCommentVNode("", true),
         createBaseVNode("div", _hoisted_3$u, [
@@ -35081,7 +35121,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             facet: facet.value,
             currentFilters: currentFilters.value[facet.value.key],
             options: _ctx.options,
-            onSelect: handleFacetSelect
+            onSelect: handleFacetSelect,
+            onShowMoreClicked: handleFacetQueryFilter,
+            onFilterFocused: handleFacetQueryFilter
           }, null, 40, ["facet", "currentFilters", "options"])),
           _ctx.clearable ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -41755,6 +41797,7 @@ const getSearchResultsComponent = ({
       customBaseUrl: searchResultOptions.customBaseUrl,
       customPayload: searchResultOptions.customPayload,
       customHeaders: searchResultOptions.customHeaders,
+      customRelatedQueriesUrl: searchResultOptions.customRelatedQueriesUrl,
       onError: searchResultOptions.errorHandler
     },
     queryKey: searchResultOptions.queryKey,

package/dist/lupaSearch.umd.js

@@ -19530,6 +19530,7 @@ var __async = (__this, __arguments, generator) => {
     const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
     const docResults = ref({});
     const suggestionResults = ref({});
+    const loadingResultsByQueryKey = ref({});
     const highlightedIndex = ref(-1);
     const inputValue = ref("");
     const resultInputValue = ref("");
@@ -19593,16 +19594,22 @@ var __async = (__this, __arguments, generator) => {
         title: panel.titleKey ? doc2[panel.titleKey] : ""
       };
     });
+    const anyPanelLoading = computed(
+      () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+    );
     const querySuggestions = (_0) => __async2(null, [_0], function* ({
       queryKey,
       publicQuery,
       options: options2
     }) {
-      var _a25;
+      var _a25, _b25, _c;
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
         const context = getLupaTrackingContext();
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+          [queryKey]: true
+        });
         const result2 = yield LupaSearchSdk.suggestions(
           queryKey,
           __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19616,7 +19623,7 @@ var __async = (__this, __arguments, generator) => {
         }
         highlightChange({ action: "clear" });
         suggestionResults.value = __spreadProps2(__spreadValues2({}, suggestionResults.value), {
-          [queryKey]: flattenSuggestions(result2.items, (_a25 = publicQuery.searchText) != null ? _a25 : "")
+          [queryKey]: flattenSuggestions(result2.items, (_b25 = publicQuery.searchText) != null ? _b25 : "")
         });
         inputValue.value = publicQuery.searchText;
         resultInputValue.value = publicQuery.searchText;
@@ -19630,6 +19637,10 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { suggestions: void 0 };
+      } finally {
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_c = loadingResultsByQueryKey.value) != null ? _c : {}), {
+          [queryKey]: false
+        });
       }
     });
     const emitSearchResultsCallback = () => {
@@ -19650,9 +19661,13 @@ var __async = (__this, __arguments, generator) => {
       publicQuery,
       options: options2
     }) {
+      var _a25, _b25;
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+          [queryKey]: true
+        });
         const context = getLupaTrackingContext();
         const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
         if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19671,6 +19686,10 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { queryKey, result: { items: [] } };
+      } finally {
+        loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_b25 = loadingResultsByQueryKey.value) != null ? _b25 : {}), {
+          [queryKey]: false
+        });
       }
     });
     const highlightChange = ({ action }) => {
@@ -19701,6 +19720,7 @@ var __async = (__this, __arguments, generator) => {
       highlightedItem,
       highlightedDocument,
       hasAnyResults,
+      anyPanelLoading,
       querySuggestions,
       queryDocuments,
       highlightChange,
@@ -20594,7 +20614,9 @@ var __async = (__this, __arguments, generator) => {
       items: {},
       highlight: { type: Boolean },
       queryKey: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {},
+      panelOptions: {}
     },
     emits: ["suggestionSelect"],
     setup(__props, { emit: __emit }) {
@@ -20609,7 +20631,7 @@ var __async = (__this, __arguments, generator) => {
       });
       const emit2 = __emit;
       const searchBoxStore = useSearchBoxStore();
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20655,6 +20677,7 @@ var __async = (__this, __arguments, generator) => {
         });
       });
       return (_ctx, _cache) => {
+        var _a25, _b25, _c;
         return openBlock(), createElementBlock("div", _hoisted_1$1k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
             return openBlock(), createBlock(_sfc_main$1D, {
@@ -20670,7 +20693,11 @@ var __async = (__this, __arguments, generator) => {
               "data-cy": "lupa-suggestion",
               onSelect: handleSelect
             }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-          }), 128))
+          }), 128)),
+          ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+            key: 0,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true)
         ]);
       };
     }
@@ -20693,6 +20720,7 @@ var __async = (__this, __arguments, generator) => {
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
+      searchBoxOptions: {},
       options: {},
       inputValue: {},
       debounce: {},
@@ -20737,8 +20765,10 @@ var __async = (__this, __arguments, generator) => {
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
           labels: _ctx.labels,
+          "search-box-options": _ctx.searchBoxOptions,
+          "panel-options": _ctx.panel,
           onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-        }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+        }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
       };
     }
   });
@@ -30561,7 +30591,7 @@ and ensure you are accounting for this risk.
     };
     const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
       var _a25, _b25, _c, _d;
-      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+      const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
       const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
       const result2 = yield LupaSearchSdk.query(queryKey, query, options);
       if (!result2.success) {
@@ -31505,7 +31535,8 @@ and ensure you are accounting for this risk.
       items: {},
       inputValue: {},
       panelOptions: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {}
     },
     emits: ["product-click"],
     setup(__props, { emit: __emit }) {
@@ -31516,7 +31547,7 @@ and ensure you are accounting for this risk.
       const optionsStore = useOptionsStore();
       const { boxRoutingBehavior } = storeToRefs(optionsStore);
       const emit2 = __emit;
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31594,7 +31625,7 @@ and ensure you are accounting for this risk.
         }
       };
       return (_ctx, _cache) => {
-        var _a25, _b25, _c;
+        var _a25, _b25, _c, _d, _e, _f;
         return openBlock(), createElementBlock("div", {
           id: "lupa-search-box-products",
           class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31624,11 +31655,15 @@ and ensure you are accounting for this risk.
             key: 2,
             innerHTML: _ctx.panelOptions.appendCustomHtml
           }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 3,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true),
+          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+            key: 4,
             class: "lupa-search-box-expand",
             onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-          }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+          }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ], 2);
       };
@@ -31842,9 +31877,10 @@ and ensure you are accounting for this risk.
         var _a25, _b25;
         return openBlock(), createBlock(_sfc_main$1i, {
           items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-          panelOptions: _ctx.panel,
+          "panel-options": _ctx.panel,
           labels: _ctx.labels,
-          inputValue: _ctx.inputValue,
+          "input-value": _ctx.inputValue,
+          "search-box-options": _ctx.searchBoxOptions,
           onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
         }, createSlots({
           default: withCtx(() => {
@@ -31867,7 +31903,7 @@ and ensure you are accounting for this risk.
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+        ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
       };
     }
   });
@@ -32006,7 +32042,7 @@ and ensure you are accounting for this risk.
       const panels = computed(() => props.options.panels);
       const sdkOptions = computed(() => props.options.options);
       const searchBoxStore = useSearchBoxStore();
-      const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+      const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
       const emit2 = __emit;
       const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
       const displayResults = computed(() => {
@@ -32194,7 +32230,7 @@ and ensure you are accounting for this risk.
                 ], 14, _hoisted_1$12);
               }), 128))
             ], 4),
-            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
               key: 1,
               options: _ctx.options
             }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33376,7 +33412,7 @@ and ensure you are accounting for this risk.
       facet: {},
       currentFilters: {}
     },
-    emits: ["select"],
+    emits: ["select", "showMoreClicked", "filterFocused"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
@@ -33440,6 +33476,9 @@ and ensure you are accounting for this risk.
       };
       const toggleShowAll = () => {
         showAll.value = !showAll.value;
+        if (showAll.value) {
+          emit2("showMoreClicked", facet.value.key);
+        }
       };
       const isChecked = (item) => {
         var _a25, _b25;
@@ -33469,8 +33508,9 @@ and ensure you are accounting for this risk.
             class: "lupa-term-filter",
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-            placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_2$E)), [
+            placeholder: _ctx.options.labels.facetFilter,
+            onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+          }, null, 40, _hoisted_2$E)), [
             [vModelText, termFilter.value]
           ]) : createCommentVNode("", true),
           createBaseVNode("div", _hoisted_3$u, [
@@ -35085,7 +35125,9 @@ and ensure you are accounting for this risk.
               facet: facet.value,
               currentFilters: currentFilters.value[facet.value.key],
               options: _ctx.options,
-              onSelect: handleFacetSelect
+              onSelect: handleFacetSelect,
+              onShowMoreClicked: handleFacetQueryFilter,
+              onFilterFocused: handleFacetQueryFilter
             }, null, 40, ["facet", "currentFilters", "options"])),
             _ctx.clearable ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -41759,6 +41801,7 @@ and ensure you are accounting for this risk.
         customBaseUrl: searchResultOptions.customBaseUrl,
         customPayload: searchResultOptions.customPayload,
         customHeaders: searchResultOptions.customHeaders,
+        customRelatedQueriesUrl: searchResultOptions.customRelatedQueriesUrl,
         onError: searchResultOptions.errorHandler
       },
       queryKey: searchResultOptions.queryKey,

package/dist/types/PreconfiguredSearchContainerOptions.d.ts

@@ -33,6 +33,7 @@ export type SearchResultDemoOptions = {
     environment?: string;
     customUrl?: string;
     customBaseUrl?: string;
+    customRelatedQueriesUrl?: string;
     customPayload?: Record<string, unknown>;
     customHeaders?: Record<string, string>;
     gridConfiguration?: Record<string, number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "main": "dist/lupaSearch.js",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.8.1",
-    "@getlupa/vue": "0.25.4",
+    "@getlupa/vue": "0.26.0",
     "@rushstack/eslint-patch": "^1.12.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/jsdom": "^21.1.7",