@getlupa/vue 0.8.5 → 0.9.0

package/dist/lupaSearch.js

@@ -1900,7 +1900,8 @@ const trackLupaEvent = (queryKey, data = {}, options) => {
     itemId: (_b = data.itemId) != null ? _b : "",
     name: data.type,
     userId: getUserKey(),
-    sessionId: getSessionKey()
+    sessionId: getSessionKey(),
+    filters: data.filters
   };
   LupaSearchSdk.track(queryKey, eventData, options);
 };
@@ -2004,9 +2005,6 @@ const track = (queryKey, data = {}, options) => {
     return;
   }
   trackAnalyticsEvent(data);
-  if (!hasSearchQuery) {
-    return;
-  }
   trackLupaEvent(queryKey, data, options);
 };
 const DEFAULT_SEARCH_BOX_OPTIONS = {
@@ -2283,6 +2281,7 @@ var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
 var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
   SearchBoxPanelType2["SUGGESTION"] = "suggestion";
   SearchBoxPanelType2["DOCUMENT"] = "document";
+  SearchBoxPanelType2["RELATED_SOURCE"] = "related-source";
   return SearchBoxPanelType2;
 })(SearchBoxPanelType || {});
 var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
@@ -3199,12 +3198,12 @@ const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
 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__ */ vue.defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -3312,7 +3311,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$g), [
+          }), null, 16, _hoisted_5$h), [
             [vue.vModelText, inputValue.value]
           ])
         ]),
@@ -3327,7 +3326,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -3361,7 +3360,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
 });
 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__ */ vue.defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -3396,7 +3395,7 @@ const _hoisted_1$1a = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -3439,7 +3438,7 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1a, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(history), (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$1i, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$1j, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -3456,7 +3455,7 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$19 = { class: "lupa-search-box-no-results" };
-const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxNoResults",
   props: {
     labels: {}
@@ -3482,11 +3481,11 @@ const _hoisted_4$r = {
   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__ */ vue.defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestion",
   props: {
     suggestion: {},
@@ -3525,7 +3524,7 @@ const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
         }, null, 8, _hoisted_1$18)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
           vue.createElementVNode("span", _hoisted_4$r, vue.toDisplayString(facetLabel.value), 1),
-          vue.createElementVNode("span", _hoisted_5$f, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
+          vue.createElementVNode("span", _hoisted_5$g, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
     };
@@ -3535,7 +3534,7 @@ const _hoisted_1$17 = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
-const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestions",
   props: {
     items: {},
@@ -3597,7 +3596,7 @@ const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$17, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$1f, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$1g, {
             key: getSuggestionKey(item),
             class: vue.normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
             suggestion: item,
@@ -3625,7 +3624,7 @@ const debounce$1 = (func, timeout) => {
     }, timeout);
   };
 };
-const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
@@ -3666,7 +3665,7 @@ const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
     };
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1e, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1f, {
         items: searchResult.value,
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
@@ -3752,7 +3751,7 @@ const joinUrlParts = (...parts) => {
   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__ */ vue.defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
   __name: "ProductImage",
   props: {
     item: {},
@@ -3810,7 +3809,7 @@ const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductImage",
   props: {
     item: {},
@@ -3818,7 +3817,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1c, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-box-image-wrapper",
@@ -3832,7 +3831,7 @@ const _hoisted_2$M = {
   key: 1,
   class: "lupa-search-box-product-title"
 };
-const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductTitle",
   props: {
     item: {},
@@ -3863,7 +3862,7 @@ const _hoisted_2$L = {
   key: 1,
   class: "lupa-search-box-product-description"
 };
-const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductDescription",
   props: {
     item: {},
@@ -3888,7 +3887,7 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$13 = { class: "lupa-search-box-product-price" };
-const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
     item: {},
@@ -3913,7 +3912,7 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$12 = { class: "lupa-search-box-product-regular-price" };
-const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
     item: {},
@@ -3939,8 +3938,8 @@ const _hoisted_1$11 = ["innerHTML"];
 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__ */ vue.defineComponent({
+const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
     item: {},
@@ -3972,14 +3971,14 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$K, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
           vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(label.value), 1),
-          vue.createElementVNode("div", _hoisted_5$e, vue.toDisplayString(text.value), 1)
+          vue.createElementVNode("div", _hoisted_5$f, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
   }
 });
 const _hoisted_1$10 = ["innerHTML"];
-const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
     item: {},
@@ -4196,7 +4195,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
 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__ */ vue.defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductAddToCart",
   props: {
     item: {},
@@ -4239,17 +4238,17 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
 });
 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__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   __name: "SearchBoxProductElement",
   props: {
     item: {},
@@ -4315,7 +4314,7 @@ const _hoisted_4$p = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProduct",
   props: {
     item: {},
@@ -4373,7 +4372,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       }), [
         vue.createElementVNode("div", _hoisted_2$I, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(imageElements.value, (element) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4385,7 +4384,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
         ]),
         vue.createElementVNode("div", _hoisted_3$w, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(detailElements.value, (element) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4396,7 +4395,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$p, [
-          vue.createVNode(_sfc_main$13, {
+          vue.createVNode(_sfc_main$14, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
             element: addToCartElement.value,
@@ -4420,6 +4419,7 @@ const getSearchTrackingData = (searchText, type) => {
 };
 const useTrackingStore = defineStore("tracking", () => {
   const optionsStore = useOptionsStore();
+  const searchResultStore = useSearchResultStore();
   const trackSearch = ({
     queryKey,
     query,
@@ -4457,7 +4457,8 @@ const useTrackingStore = defineStore("tracking", () => {
     track(
       queryKey,
       __spreadProps(__spreadValues({}, data), {
-        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
+        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0,
+        filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0
       }),
       options
     );
@@ -4465,7 +4466,7 @@ const useTrackingStore = defineStore("tracking", () => {
   return { trackSearch, trackResults, trackEvent };
 });
 const _hoisted_1$Z = { id: "lupa-search-box-products" };
-const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProducts",
   props: {
     items: {},
@@ -4538,7 +4539,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             itemClicked: handleProductClick
           });
         }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$13, {
             key: index,
             item,
             panelOptions: _ctx.panelOptions,
@@ -4552,7 +4553,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductsWrapper",
   props: {
     panel: {},
@@ -4604,7 +4605,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     const getItemsDebounced = debounce$1(getItems, props.debounce);
     return (_ctx, _cache) => {
       var _a, _b;
-      return vue.openBlock(), vue.createBlock(_sfc_main$11, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: _ctx.panel,
         labels: _ctx.labels,
@@ -4622,6 +4623,95 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchBoxRelatedSourceWrapper",
+  props: {
+    panel: {},
+    inputValue: {},
+    options: {},
+    labels: {},
+    debounce: {}
+  },
+  emits: ["fetched"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const searchBoxStore = useSearchBoxStore();
+    const { docResults } = storeToRefs(searchBoxStore);
+    const searchResult = vue.ref(null);
+    const options = vue.computed(() => props.options);
+    const relatedSourceIds = vue.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 inputValueProp = vue.computed(() => props.inputValue);
+    vue.onMounted(() => {
+      getItemsDebounced();
+    });
+    vue.watch(relatedSourceIds, () => {
+      getItemsDebounced();
+    });
+    vue.watch(inputValueProp, () => {
+      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 = vue.computed(() => {
+      return __spreadProps(__spreadValues({}, props.panel), {
+        type: SearchBoxPanelType.DOCUMENT
+      });
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return vue.openBlock(), vue.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"))
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.$slots.productCard ? {
+          name: "productCard",
+          fn: vue.withCtx((props2) => [
+            vue.renderSlot(_ctx.$slots, "productCard", vue.normalizeProps(vue.guardReactiveProps(props2)))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+    };
+  }
+});
 const _hoisted_1$Y = {
   key: 0,
   id: "lupa-search-box-panel"
@@ -4629,16 +4719,21 @@ const _hoisted_1$Y = {
 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__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
@@ -4732,6 +4827,8 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       switch (type) {
         case "suggestion":
           return "SearchBoxSuggestionsWrapper";
+        case "related-source":
+          return "SearchBoxRelatedSourceWrapper";
         default:
           return "SearchBoxProductsWrapper";
       }
@@ -4757,6 +4854,17 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       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 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 vue.openBlock(), vue.createElementBlock("div", {
@@ -4770,7 +4878,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             "data-cy": "lupa-main-panel"
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayPanels.value, (panel, index) => {
-              var _a2, _b;
+              var _a2, _b, _c, _d;
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
                 class: vue.normalizeClass([
@@ -4780,8 +4888,9 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$v, vue.toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : vue.createCommentVNode("", true),
-                panel.queryKey ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
-                  key: 1,
+                ((_c = panel.labels) == null ? void 0 : _c.title) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
+                panel.queryKey && canShowPanel(panel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
+                  key: 2,
                   panel,
                   options: sdkOptions.value,
                   debounce: _ctx.options.debounce,
@@ -4802,18 +4911,18 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
               ], 10, _hoisted_2$H);
             }), 128))
           ], 4),
-          !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1g, {
+          !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1h, {
             key: 0,
             labels: labels.value
           }, null, 8, ["labels"])) : vue.createCommentVNode("", true),
-          vue.unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (vue.openBlock(), vue.createBlock(_sfc_main$1j, {
+          vue.unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true)
-        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
-          vue.createVNode(_sfc_main$1h, {
+        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$e, [
+          vue.createVNode(_sfc_main$1i, {
             options: _ctx.options.history,
             history: history.value,
             onGoToResults: handleGoToResults,
@@ -4922,13 +5031,16 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
       suggestedValue.value = defaultSuggestedValue;
     };
     const handleKeyDown = (e) => {
+      var _a2, _b;
       if (!opened.value) {
         return;
       }
       switch (e.key) {
         case "Tab":
-          e.preventDefault();
-          selectSuggestion(__spreadProps(__spreadValues({}, suggestedValue.value), { override: true }));
+          if ((_b = (_a2 = suggestedValue == null ? void 0 : suggestedValue.value) == null ? void 0 : _a2.item) == null ? void 0 : _b.suggestion) {
+            e.preventDefault();
+            selectSuggestion(__spreadProps(__spreadValues({}, suggestedValue.value), { override: true }));
+          }
           break;
         case "Enter":
           e.preventDefault();
@@ -5080,7 +5192,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
       var _a2;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
         vue.createElementVNode("div", _hoisted_2$G, [
-          vue.createVNode(_sfc_main$1k, {
+          vue.createVNode(_sfc_main$1l, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -8391,7 +8503,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1c, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-results-image-wrapper",