@getlupa/client 1.8.8 → 1.9.1

package/dist/lupaSearch.umd.js

@@ -6546,7 +6546,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       itemId: (_b = data.itemId) != null ? _b : "",
       name: data.type,
       userId: getUserKey(),
-      sessionId: getSessionKey()
+      sessionId: getSessionKey(),
+      filters: data.filters
     };
     LupaSearchSdk.track(queryKey, eventData, options);
   };
@@ -6650,9 +6651,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       return;
     }
     trackAnalyticsEvent(data);
-    if (!hasSearchQuery) {
-      return;
-    }
     trackLupaEvent(queryKey, data, options);
   };
   const DEFAULT_SEARCH_BOX_OPTIONS$1 = {
@@ -6929,6 +6927,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
     SearchBoxPanelType2["SUGGESTION"] = "suggestion";
     SearchBoxPanelType2["DOCUMENT"] = "document";
+    SearchBoxPanelType2["RELATED_SOURCE"] = "related-source";
     return SearchBoxPanelType2;
   })(SearchBoxPanelType || {});
   var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
@@ -7845,12 +7844,12 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$P = { class: "lupa-input-clear" };
   const _hoisted_3$A = { id: "lupa-search-box-input" };
   const _hoisted_4$s = ["value"];
-  const _hoisted_5$g = ["aria-label", "placeholder"];
+  const _hoisted_5$h = ["aria-label", "placeholder"];
   const _hoisted_6$9 = {
     key: 0,
     class: "lupa-close-label"
   };
-  const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1l = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxInput",
     props: {
       options: {},
@@ -7958,7 +7957,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               placeholder: labels.value.placeholder,
               onInput: handleInput,
               onFocus: handleFocus
-            }), null, 16, _hoisted_5$g), [
+            }), null, 16, _hoisted_5$h), [
               [vModelText, inputValue.value]
             ])
           ]),
@@ -7973,7 +7972,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxMoreResults",
     props: {
       labels: {},
@@ -8007,7 +8006,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   });
   const _hoisted_1$1b = { class: "lupa-search-box-history-item" };
   const _hoisted_2$O = { class: "lupa-search-box-history-item-content" };
-  const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1j = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxHistoryItem",
     props: {
       item: {},
@@ -8042,7 +8041,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 0,
     class: "lupa-search-box-history-panel"
   };
-  const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxHistoryPanel",
     props: {
       options: {}
@@ -8085,7 +8084,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       return (_ctx, _cache) => {
         return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$1a, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
-            return openBlock(), createBlock(_sfc_main$1i, {
+            return openBlock(), createBlock(_sfc_main$1j, {
               key: item,
               item,
               highlighted: index === highlightIndex.value,
@@ -8102,7 +8101,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   });
   const _hoisted_1$19 = { class: "lupa-search-box-no-results" };
-  const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxNoResults",
     props: {
       labels: {}
@@ -8128,11 +8127,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
-  const _hoisted_5$f = {
+  const _hoisted_5$g = {
     class: "lupa-suggestion-facet-value",
     "data-cy": "lupa-suggestion-facet-value"
   };
-  const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestion",
     props: {
       suggestion: {},
@@ -8171,7 +8170,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           }, null, 8, _hoisted_1$18)) : (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
             createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-            createBaseVNode("span", _hoisted_5$f, toDisplayString(_ctx.suggestion.facet.title), 1)
+            createBaseVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
       };
@@ -8181,7 +8180,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     id: "lupa-search-box-suggestions",
     "data-cy": "lupa-search-box-suggestions"
   };
-  const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestions",
     props: {
       items: {},
@@ -8243,7 +8242,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$17, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$1f, {
+            return openBlock(), createBlock(_sfc_main$1g, {
               key: getSuggestionKey(item),
               class: normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
               suggestion: item,
@@ -8271,7 +8270,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }, timeout);
     };
   };
-  const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
@@ -8312,7 +8311,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$1e, {
+        return openBlock(), createBlock(_sfc_main$1f, {
           items: searchResult.value,
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
@@ -8398,7 +8397,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     return (_c = (_b = (_a = parts == null ? void 0 : parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""))) == null ? void 0 : _a.filter((part) => part !== "")) == null ? void 0 : _b.join("/")) != null ? _c : "";
   };
   const _hoisted_1$16 = ["src"];
-  const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     __name: "ProductImage",
     props: {
       item: {},
@@ -8456,7 +8455,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductImage",
     props: {
       item: {},
@@ -8464,7 +8463,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$1c, {
+        return openBlock(), createBlock(_sfc_main$1d, {
           item: _ctx.item,
           options: _ctx.options,
           "wrapper-class": "lupa-search-box-image-wrapper",
@@ -8478,7 +8477,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-search-box-product-title"
   };
-  const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1b = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductTitle",
     props: {
       item: {},
@@ -8509,7 +8508,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-search-box-product-description"
   };
-  const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1a = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductDescription",
     props: {
       item: {},
@@ -8534,7 +8533,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   });
   const _hoisted_1$13 = { class: "lupa-search-box-product-price" };
-  const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductPrice",
     props: {
       item: {},
@@ -8559,7 +8558,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   });
   const _hoisted_1$12 = { class: "lupa-search-box-product-regular-price" };
-  const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductRegularPrice",
     props: {
       item: {},
@@ -8585,8 +8584,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$K = { key: 0 };
   const _hoisted_3$y = { key: 1 };
   const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-  const _hoisted_5$e = { class: "lupa-search-box-custom-text" };
-  const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+  const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+  const _sfc_main$17 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
     props: {
       item: {},
@@ -8618,14 +8617,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
             createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-            createBaseVNode("div", _hoisted_5$e, toDisplayString(text.value), 1)
+            createBaseVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
           ]))
         ], 16));
       };
     }
   });
   const _hoisted_1$10 = ["innerHTML"];
-  const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$16 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustomHtml",
     props: {
       item: {},
@@ -8842,7 +8841,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_1$$ = { class: "lupa-search-box-add-to-cart-wrapper" };
   const _hoisted_2$J = { class: "lupa-search-box-product-addtocart" };
   const _hoisted_3$x = ["onClick", "disabled"];
-  const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductAddToCart",
     props: {
       item: {},
@@ -8885,17 +8884,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   });
   const __default__$4 = {
     components: {
-      SearchBoxProductImage: _sfc_main$1b,
-      SearchBoxProductTitle: _sfc_main$1a,
-      SearchBoxProductDescription: _sfc_main$19,
-      SearchBoxProductPrice: _sfc_main$18,
-      SearchBoxProductRegularPrice: _sfc_main$17,
-      SearchBoxProductCustom: _sfc_main$16,
-      SearchBoxProductCustomHtml: _sfc_main$15,
-      SearchBoxProductAddToCart: _sfc_main$14
+      SearchBoxProductImage: _sfc_main$1c,
+      SearchBoxProductTitle: _sfc_main$1b,
+      SearchBoxProductDescription: _sfc_main$1a,
+      SearchBoxProductPrice: _sfc_main$19,
+      SearchBoxProductRegularPrice: _sfc_main$18,
+      SearchBoxProductCustom: _sfc_main$17,
+      SearchBoxProductCustomHtml: _sfc_main$16,
+      SearchBoxProductAddToCart: _sfc_main$15
     }
   };
-  const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$4), {
+  const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$4), {
     __name: "SearchBoxProductElement",
     props: {
       item: {},
@@ -8961,7 +8960,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 0,
     class: "lupa-search-box-product-add-to-cart-section"
   };
-  const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProduct",
     props: {
       item: {},
@@ -9019,7 +9018,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }), [
           createBaseVNode("div", _hoisted_2$I, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
-              return openBlock(), createBlock(_sfc_main$13, {
+              return openBlock(), createBlock(_sfc_main$14, {
                 class: "lupa-search-box-product-element",
                 item: _ctx.item,
                 element,
@@ -9031,7 +9030,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           ]),
           createBaseVNode("div", _hoisted_3$w, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
-              return openBlock(), createBlock(_sfc_main$13, {
+              return openBlock(), createBlock(_sfc_main$14, {
                 class: "lupa-search-box-product-element",
                 item: _ctx.item,
                 element,
@@ -9042,7 +9041,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             }), 128))
           ]),
           addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
-            createVNode(_sfc_main$13, {
+            createVNode(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element: addToCartElement.value,
@@ -9066,6 +9065,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   };
   const useTrackingStore = defineStore("tracking", () => {
     const optionsStore = useOptionsStore();
+    const searchResultStore = useSearchResultStore();
     const trackSearch = ({
       queryKey,
       query,
@@ -9103,7 +9103,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       track(
         queryKey,
         __spreadProps2(__spreadValues2({}, data), {
-          analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0
+          analytics: data.analytics ? __spreadProps2(__spreadValues2({}, data.analytics), { items: mappedItems }) : void 0,
+          filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0
         }),
         options
       );
@@ -9111,7 +9112,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     return { trackSearch, trackResults, trackEvent };
   });
   const _hoisted_1$Z = { id: "lupa-search-box-products" };
-  const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProducts",
     props: {
       items: {},
@@ -9184,7 +9185,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               itemClicked: handleProductClick
             });
           }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
-            return openBlock(), createBlock(_sfc_main$12, {
+            return openBlock(), createBlock(_sfc_main$13, {
               key: index,
               item,
               panelOptions: _ctx.panelOptions,
@@ -9198,7 +9199,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductsWrapper",
     props: {
       panel: {},
@@ -9250,7 +9251,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const getItemsDebounced = debounce$1(getItems, props.debounce);
       return (_ctx, _cache) => {
         var _a, _b;
-        return openBlock(), createBlock(_sfc_main$11, {
+        return openBlock(), createBlock(_sfc_main$12, {
           items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
           panelOptions: _ctx.panel,
           labels: _ctx.labels,
@@ -9268,6 +9269,96 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
+  const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+    __name: "SearchBoxRelatedSourceWrapper",
+    props: {
+      panel: {},
+      inputValue: {},
+      options: {},
+      labels: {},
+      debounce: {}
+    },
+    emits: ["fetched"],
+    setup(__props, { emit: emit2 }) {
+      const props = __props;
+      const searchBoxStore = useSearchBoxStore();
+      const mounted = ref(false);
+      const { docResults } = storeToRefs(searchBoxStore);
+      const searchResult = ref(null);
+      const options = computed(() => props.options);
+      const relatedSourceIds = computed(() => {
+        var _a, _b, _c;
+        const queryKey = (_a = props.panel.sourceIds) == null ? void 0 : _a.queryKey;
+        if (!queryKey) {
+          return [];
+        }
+        const currentDocumentItems = (_c = (_b = docResults == null ? void 0 : docResults.value[queryKey]) == null ? void 0 : _b.items) != null ? _c : [];
+        const allFieldValues = currentDocumentItems.map((item) => item[props.panel.sourceIds.field]).flat();
+        const uniqueFieldValues = Array.from(new Set(allFieldValues));
+        return uniqueFieldValues;
+      });
+      const relatedSourceIdsString = computed(() => relatedSourceIds.value.join(","));
+      onMounted(() => {
+        getItemsDebounced();
+        mounted.value = true;
+      });
+      watch(relatedSourceIdsString, () => {
+        if (mounted) {
+          getItemsDebounced();
+        }
+      });
+      const fetchRelatedItems = () => __async(this, null, function* () {
+        var _a, _b;
+        if (!((_a = props.panel.target) == null ? void 0 : _a.queryKey) || !relatedSourceIds.value.length) {
+          return { items: [], success: true, searchText: "", total: 0 };
+        }
+        try {
+          const result = yield LupaSearchSdk.queryByIds(
+            (_b = props.panel.target) == null ? void 0 : _b.queryKey,
+            relatedSourceIds.value,
+            options.value
+          );
+          if (!result.success) {
+            return { items: [], success: true, searchText: "", total: 0 };
+          }
+          return result;
+        } catch (err) {
+          console.error(err);
+          if (options == null ? void 0 : options.value.onError) {
+            options.value.onError(err);
+          }
+          return { items: [], success: true, searchText: "", total: 0 };
+        }
+      });
+      const getItems = () => __async(this, null, function* () {
+        searchResult.value = yield fetchRelatedItems();
+      });
+      const getItemsDebounced = debounce$1(getItems, props.debounce);
+      const documentPanelOptions = computed(() => {
+        return __spreadProps2(__spreadValues2({}, props.panel), {
+          type: SearchBoxPanelType.DOCUMENT
+        });
+      });
+      return (_ctx, _cache) => {
+        var _a, _b;
+        return openBlock(), createBlock(_sfc_main$12, {
+          items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
+          panelOptions: documentPanelOptions.value,
+          labels: _ctx.labels,
+          inputValue: _ctx.inputValue,
+          onProductClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("product-click"))
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.productCard ? {
+            name: "productCard",
+            fn: withCtx((props2) => [
+              renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+      };
+    }
+  });
   const _hoisted_1$Y = {
     key: 0,
     id: "lupa-search-box-panel"
@@ -9275,16 +9366,21 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$H = ["data-cy"];
   const _hoisted_3$v = {
     key: 0,
-    class: "lupa-panel-title"
+    class: "lupa-panel-title lupa-panel-title-top-results"
   };
   const _hoisted_4$o = {
+    key: 1,
+    class: "lupa-panel-title"
+  };
+  const _hoisted_5$e = {
     key: 1,
     id: "lupa-search-box-panel"
   };
   const __default__$3 = {
     components: {
-      SearchBoxSuggestionsWrapper: _sfc_main$1d,
-      SearchBoxProductsWrapper: _sfc_main$10
+      SearchBoxSuggestionsWrapper: _sfc_main$1e,
+      SearchBoxProductsWrapper: _sfc_main$11,
+      SearchBoxRelatedSourceWrapper: _sfc_main$10
     }
   };
   const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValues2({}, __default__$3), {
@@ -9378,6 +9474,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         switch (type) {
           case "suggestion":
             return "SearchBoxSuggestionsWrapper";
+          case "related-source":
+            return "SearchBoxRelatedSourceWrapper";
           default:
             return "SearchBoxProductsWrapper";
         }
@@ -9403,6 +9501,21 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
         return (panel == null ? void 0 : panel.count) > 0 && (panel == null ? void 0 : panel.input.length) < 1;
       };
+      const showPanelTitle = (queryKey) => {
+        const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
+        return (panel == null ? void 0 : panel.count) > 0;
+      };
+      const canShowPanel = (panel) => {
+        var _a, _b, _c;
+        if (!((_a = panel.visibility) == null ? void 0 : _a.showWhenKeyHasNoResults)) {
+          return true;
+        }
+        const resultCountFromRelatedPanel = (_c = (_b = panelItemCounts.value.find((v) => {
+          var _a2;
+          return v.queryKey === ((_a2 = panel.visibility) == null ? void 0 : _a2.showWhenKeyHasNoResults);
+        })) == null ? void 0 : _b.count) != null ? _c : 0;
+        return resultCountFromRelatedPanel < 1;
+      };
       return (_ctx, _cache) => {
         var _a;
         return openBlock(), createElementBlock("div", {
@@ -9416,7 +9529,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               "data-cy": "lupa-main-panel"
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-                var _a2, _b;
+                var _a2, _b, _c, _d;
                 return openBlock(), createElementBlock("div", {
                   key: index,
                   class: normalizeClass([
@@ -9426,8 +9539,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
                   "data-cy": "lupa-panel-" + panel.type + "-index"
                 }, [
                   ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$v, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
-                  panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                    key: 1,
+                  ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                  panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                    key: 2,
                     panel,
                     options: sdkOptions.value,
                     debounce: _ctx.options.debounce,
@@ -9448,18 +9562,18 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
                 ], 10, _hoisted_2$H);
               }), 128))
             ], 4),
-            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1g, {
+            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1h, {
               key: 0,
               labels: labels.value
             }, null, 8, ["labels"])) : createCommentVNode("", true),
-            unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1j, {
+            unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1k, {
               key: 1,
               labels: labels.value,
               showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
               onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
             }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
-            createVNode(_sfc_main$1h, {
+          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+            createVNode(_sfc_main$1i, {
               options: _ctx.options.history,
               history: history.value,
               onGoToResults: handleGoToResults,
@@ -9729,7 +9843,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         var _a2;
         return openBlock(), createElementBlock("div", _hoisted_1$X, [
           createBaseVNode("div", _hoisted_2$G, [
-            createVNode(_sfc_main$1k, {
+            createVNode(_sfc_main$1l, {
               options: inputOptions.value,
               suggestedValue: suggestedValue.value,
               "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -13024,7 +13138,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     },
     setup(__props) {
       return (_ctx, _cache) => {
-        return openBlock(), createBlock(_sfc_main$1c, {
+        return openBlock(), createBlock(_sfc_main$1d, {
           item: _ctx.item,
           options: _ctx.options,
           "wrapper-class": "lupa-search-results-image-wrapper",
@@ -21536,7 +21650,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-chat-spinner-main"
   };
   const _hoisted_5 = { class: "lupasearch-chat-input" };
-  const _sfc_main$1l = /* @__PURE__ */ defineComponent({
+  const _sfc_main$1m = /* @__PURE__ */ defineComponent({
     __name: "ChatContainer",
     props: {
       options: {}
@@ -28014,7 +28128,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1l, {
+    const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1m, {
       options
     });
     if (!instance) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.8.8",
+  "version": "1.9.1",
   "main": "dist/lupaSearch.js",
   "module": "dist/index.mjs",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.3.4",
-    "@getlupa/vue": "0.8.6",
+    "@getlupa/vue": "0.9.1",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",