@getlupa/client 1.14.3 → 1.14.5

package/dist/lupaSearch.umd.js

@@ -8843,6 +8843,34 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
+  const generateGridTemplate = (elements) => {
+    const indexedElements = elements.map((el, index) => __spreadProps2(__spreadValues2({}, el), { index }));
+    if (!indexedElements.length || !indexedElements.every((el) => el.gridArea === "left" || el.gridArea === "right")) {
+      return void 0;
+    }
+    let leftElements = indexedElements.filter((el) => el.gridArea === "left");
+    let rightElements = indexedElements.filter((el) => el.gridArea === "right");
+    if (!leftElements.length && !rightElements.length) {
+      return "";
+    } else if (!leftElements.length) {
+      leftElements = rightElements;
+    } else if (!rightElements.length) {
+      rightElements = leftElements;
+    }
+    const totalRows = Math.max(leftElements.length, rightElements.length);
+    const gridTemplate = [];
+    for (let row = 0; row < totalRows; row++) {
+      const leftIndex = row < leftElements.length ? row : leftElements.length - 1;
+      const rightIndex = row < rightElements.length ? row : rightElements.length - 1;
+      const leftElement = leftElements[leftIndex];
+      const rightElement = rightElements[rightIndex];
+      const leftColumn = `${leftElement.gridArea}${leftElement.index}`;
+      const rightColumn = `${rightElement.gridArea}${rightElement.index}`;
+      const gridRow = `${leftColumn} ${rightColumn}`;
+      gridTemplate.push(`"${gridRow}"`);
+    }
+    return gridTemplate.join(" ");
+  };
   const _hoisted_1$19 = ["innerHTML"];
   const _hoisted_2$Q = {
     key: 1,
@@ -9041,6 +9069,7 @@ var __async = (__this, __arguments, generator) => {
         });
       };
       const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
+      watch(() => props.panel.limit, getSuggestionsDebounced);
       return (_ctx, _cache) => {
         return openBlock(), createBlock(_sfc_main$1h, {
           items: searchResult.value,
@@ -18161,6 +18190,25 @@ and ensure you are accounting for this risk.
         var _a;
         return Boolean((_a = hoverImages.value) == null ? void 0 : _a.length);
       });
+      const widthOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.width) != null ? _b : void 0;
+      });
+      const heightOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.height) != null ? _b : void 0;
+      });
+      const objectFitOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.objectFit) != null ? _b : void 0;
+      });
+      const styleOverride = computed(() => {
+        return {
+          width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+          height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+          objectFit: objectFitOverride.value ? objectFitOverride.value : void 0
+        };
+      });
       const replaceWithPlaceholder = (e2) => {
         replaceImageWithPlaceholder(e2, placeholder.value);
       };
@@ -18225,6 +18273,7 @@ and ensure you are accounting for this risk.
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", {
           class: normalizeClass({ [_ctx.wrapperClass]: Boolean(_ctx.wrapperClass), "lupa-images-hover": isHover.value }),
+          style: normalizeStyle(styleOverride.value),
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave
         }, [
@@ -18235,6 +18284,7 @@ and ensure you are accounting for this risk.
             default: withCtx(() => [
               (openBlock(), createElementBlock("img", mergeProps({
                 class: ["lupa-images-hover-image", { [_ctx.imageClass]: true, "lupa-images-hover-image": isHover.value }],
+                style: styleOverride.value,
                 src: finalUrl.value
               }, { alt: imageAlt.value ? imageAlt.value : void 0 }, {
                 onError: replaceWithPlaceholder,
@@ -18245,9 +18295,10 @@ and ensure you are accounting for this risk.
           })) : (openBlock(), createElementBlock("img", mergeProps({
             key: 1,
             class: ["lupa-images-main-image", { [_ctx.imageClass]: true }],
+            style: styleOverride.value,
             src: finalMainImageUrl.value
           }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_2$P))
-        ], 34);
+        ], 38);
       };
     }
   });
@@ -18511,6 +18562,7 @@ and ensure you are accounting for this risk.
     const layout = ref(ResultsLayoutEnum.GRID);
     const loading = ref(false);
     const isMobileSidebarVisible = ref(false);
+    const relatedCategoryChildren = ref([]);
     const optionsStore = useOptionsStore();
     const paramsStore = useParamsStore();
     const screenStore = useScreenStore();
@@ -18652,6 +18704,9 @@ and ensure you are accounting for this risk.
       const hasExactMatch = items.some((item) => getNormalizedString(item.title) === searchInput);
       return hasExactMatch ? items.filter((item) => getNormalizedString(item.title) === searchInput) : items;
     };
+    const setRelatedCategoryChildren = (children) => {
+      relatedCategoryChildren.value = [...children];
+    };
     return {
       isMobileSidebarVisible,
       searchResult,
@@ -18672,6 +18727,7 @@ and ensure you are accounting for this risk.
       itemRange,
       isPageEmpty,
       hideFiltersOnExactMatchForKeys,
+      relatedCategoryChildren,
       setSidebarState,
       queryFacet,
       add: add2,
@@ -18680,7 +18736,8 @@ and ensure you are accounting for this risk.
       setLayout,
       setLoading,
       clearSearchResult,
-      filterVisibleFilterValues
+      filterVisibleFilterValues,
+      setRelatedCategoryChildren
     };
   });
   const _hoisted_1$11 = { class: "lupa-search-box-add-to-cart-wrapper" };
@@ -19097,9 +19154,8 @@ and ensure you are accounting for this risk.
     }
   }));
   const _hoisted_1$V = ["href"];
-  const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
-  const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-  const _hoisted_4$p = {
+  const _hoisted_2$I = { class: "lupa-search-box-product-details-section" };
+  const _hoisted_3$w = {
     key: 0,
     class: "lupa-search-box-product-add-to-cart-section"
   };
@@ -19127,6 +19183,25 @@ and ensure you are accounting for this risk.
         var _a, _b;
         return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE)) != null ? _b : [];
       });
+      const mainImageElement = computed(() => {
+        return imageElements.value[0];
+      });
+      const widthOverride = computed(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.width) != null ? _c : void 0;
+      });
+      const heightOverride = computed(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.height) != null ? _c : void 0;
+      });
+      const imageStyleOverride = computed(() => {
+        var _a;
+        return ((_a = mainImageElement.value) == null ? void 0 : _a.dimensions) ? {
+          width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+          height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+          minWidth: widthOverride.value ? `${widthOverride.value + 10}px` : void 0
+        } : {};
+      });
       const detailElements = computed(() => {
         var _a, _b;
         return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
@@ -19165,7 +19240,10 @@ and ensure you are accounting for this risk.
           "data-cy": "lupa-search-box-product",
           onClick: handleClick
         }), [
-          createBaseVNode("div", _hoisted_2$I, [
+          createBaseVNode("div", {
+            class: "lupa-search-box-product-image-section",
+            style: normalizeStyle(imageStyleOverride.value)
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
               return openBlock(), createBlock(_sfc_main$16, {
                 class: "lupa-search-box-product-element",
@@ -19176,8 +19254,8 @@ and ensure you are accounting for this risk.
                 link: link.value
               }, null, 8, ["item", "element", "labels", "link"]);
             }), 128))
-          ]),
-          createBaseVNode("div", _hoisted_3$w, [
+          ], 4),
+          createBaseVNode("div", _hoisted_2$I, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
               var _a;
               return openBlock(), createBlock(_sfc_main$16, {
@@ -19201,7 +19279,7 @@ and ensure you are accounting for this risk.
               ]), 1032, ["item", "element", "labels", "link"]);
             }), 128))
           ]),
-          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
             createVNode(_sfc_main$16, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
@@ -19459,6 +19537,7 @@ and ensure you are accounting for this risk.
         });
       };
       const getItemsDebounced = debounce$1(getItems, props.debounce);
+      watch(() => props.panel.limit, getItemsDebounced);
       return (_ctx, _cache) => {
         var _a, _b;
         return openBlock(), createBlock(_sfc_main$_, {
@@ -19591,7 +19670,7 @@ and ensure you are accounting for this risk.
     key: 0,
     class: "lupa-panel-title lupa-panel-title-top-results"
   };
-  const _hoisted_4$o = {
+  const _hoisted_4$p = {
     key: 1,
     class: "lupa-panel-title"
   };
@@ -19647,6 +19726,13 @@ and ensure you are accounting for this risk.
       const displayPanels = computed(
         () => props.isSearchContainer ? panels.value.filter((p2) => p2.type === SearchBoxPanelType.SUGGESTION) : panels.value
       );
+      const gridTemplate = computed(() => generateGridTemplate(panels.value));
+      const styleOverrides = computed(() => {
+        return {
+          display: expandOnSinglePanel.value ? "block" : "grid",
+          gridTemplateAreas: gridTemplate.value ? gridTemplate.value : "left right"
+        };
+      });
       const getInput = (panel) => {
         var _a, _b;
         if (panel.type === SearchBoxPanelType.SUGGESTION || !panel.searchBySuggestion) {
@@ -19673,6 +19759,9 @@ and ensure you are accounting for this risk.
         searchBoxStore.resetHighlightIndex();
       });
       const handleNavigation = (e2) => {
+        if (!props.focused) {
+          return;
+        }
         switch (e2.key) {
           case "ArrowDown":
             e2.preventDefault();
@@ -19760,7 +19849,7 @@ and ensure you are accounting for this risk.
             }, toDisplayString(labels.value.closePanel), 1)) : createCommentVNode("", true),
             createBaseVNode("div", {
               class: "lupa-main-panel",
-              style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+              style: normalizeStyle(styleOverrides.value),
               "data-cy": "lupa-main-panel"
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
@@ -19771,10 +19860,11 @@ and ensure you are accounting for this risk.
                     "lupa-panel-" + panel.type + "-index",
                     panel.customClassName ? panel.customClassName : ""
                   ]),
+                  style: normalizeStyle(panel.gridArea ? { gridArea: `${panel.gridArea}${index}` } : {}),
                   "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),
-                  ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                  ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$p, 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,
@@ -19796,7 +19886,7 @@ and ensure you are accounting for this risk.
                       key: "0"
                     } : void 0
                   ]), 1064, ["panel", "search-box-options", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-                ], 10, _hoisted_2$G);
+                ], 14, _hoisted_2$G);
               }), 128))
             ], 4),
             !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1j, {
@@ -19860,6 +19950,7 @@ and ensure you are accounting for this risk.
       const inputValue = ref("");
       const suggestedValue = ref(defaultSuggestedValue);
       const opened = ref(props.isSearchContainer);
+      const focused = ref(false);
       const searchBoxInput = ref(null);
       const { highlightedDocument } = storeToRefs(searchBoxStore);
       const searchValue = computed(() => {
@@ -19918,6 +20009,9 @@ and ensure you are accounting for this risk.
         const elementClass = (_b = (_a2 = e2.target) == null ? void 0 : _a2.className) != null ? _b : "";
         const hasLupaClass = typeof elementClass.includes == "function" && elementClass.includes("lupa-search-box");
         const isOutsideElement = el && !el.contains(e2.target) && !hasLupaClass;
+        if (isOutsideElement && props.options.keepOpen) {
+          focused.value = false;
+        }
         if (!isOutsideElement || props.options.keepOpen) {
           return;
         }
@@ -19926,11 +20020,12 @@ and ensure you are accounting for this risk.
       };
       const close = () => {
         opened.value = false;
+        focused.value = false;
         suggestedValue.value = defaultSuggestedValue;
       };
       const handleKeyDown = (e2) => {
         var _a2, _b;
-        if (!opened.value) {
+        if (!focused.value) {
           return;
         }
         switch (e2.key) {
@@ -19950,6 +20045,7 @@ and ensure you are accounting for this risk.
       const handleInput = (value) => {
         var _a2;
         opened.value = true;
+        focused.value = true;
         inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
         suggestedValue.value = defaultSuggestedValue;
         searchBoxStore.resetHighlightIndex();
@@ -20077,12 +20173,14 @@ and ensure you are accounting for this risk.
           }
         });
       };
+      watch(() => props.options.debounce, handleCurrentValueSearch);
       const resetValues = () => {
         inputValue.value = "";
         suggestedValue.value = defaultSuggestedValue;
       };
       const handleProductClick = () => {
         opened.value = false;
+        focused.value = false;
       };
       const slotProps = (props2) => {
         return __spreadValues2({}, props2);
@@ -20099,15 +20197,17 @@ and ensure you are accounting for this risk.
               ref_key: "searchBoxInput",
               ref: searchBoxInput,
               onInput: handleInput,
-              onFocus: _cache[0] || (_cache[0] = ($event) => opened.value = true),
+              onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
+              onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
               onSearch: handleSearch,
-              onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
+              onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
             }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
             opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$W, {
               key: 0,
               options: panelOptions.value,
               inputValue: inputValue.value,
               isSearchContainer: _ctx.isSearchContainer,
+              focused: focused.value,
               onFetched: handleItemsFetch,
               onItemSelect: handleItemSelect,
               onGoToResults: handleSearch,
@@ -20121,7 +20221,7 @@ and ensure you are accounting for this risk.
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["options", "inputValue", "isSearchContainer"])) : createCommentVNode("", true)
+            ]), 1032, ["options", "inputValue", "isSearchContainer", "focused"])) : createCommentVNode("", true)
           ])
         ]);
       };
@@ -20203,7 +20303,7 @@ and ensure you are accounting for this risk.
     key: 1,
     "data-cy": "did-you-mean-label"
   };
-  const _hoisted_4$n = { key: 1 };
+  const _hoisted_4$o = { key: 1 };
   const _sfc_main$U = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsDidYouMean",
     props: {
@@ -20254,7 +20354,7 @@ and ensure you are accounting for this risk.
                   class: "lupa-did-you-mean lupa-highlighted-search-text",
                   "data-cy": "did-you-mean-value",
                   onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-                }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$n, toDisplayString(label) + " ", 1))
+                }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$o, toDisplayString(label) + " ", 1))
               ]);
             }), 128))
           ])) : createCommentVNode("", true)
@@ -20304,7 +20404,7 @@ and ensure you are accounting for this risk.
     key: 1,
     class: "lupa-results-total-count"
   };
-  const _hoisted_4$m = { class: "lupa-results-total-count-number" };
+  const _hoisted_4$n = { class: "lupa-results-total-count-number" };
   const _hoisted_5$g = ["innerHTML"];
   const _sfc_main$S = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsTitle",
@@ -20350,7 +20450,7 @@ and ensure you are accounting for this risk.
             queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
             showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
               createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
-              createBaseVNode("span", _hoisted_4$m, toDisplayString(unref(totalItems)), 1),
+              createBaseVNode("span", _hoisted_4$n, toDisplayString(unref(totalItems)), 1),
               createTextVNode(")")
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
@@ -20408,7 +20508,7 @@ and ensure you are accounting for this risk.
     key: 0,
     class: "filter-values"
   };
-  const _hoisted_4$l = { class: "lupa-current-filter-list" };
+  const _hoisted_4$m = { class: "lupa-current-filter-list" };
   const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     __name: "CurrentFilters",
     props: {
@@ -20492,7 +20592,7 @@ and ensure you are accounting for this risk.
             }, null, 2)) : createCommentVNode("", true)
           ]),
           !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$r, [
-            createBaseVNode("div", _hoisted_4$l, [
+            createBaseVNode("div", _hoisted_4$m, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(currentDisplayFilters.value, (filter2) => {
                 return openBlock(), createBlock(_sfc_main$R, {
                   key: filter2.key + "_" + filter2.value,
@@ -20560,7 +20660,7 @@ and ensure you are accounting for this risk.
   };
   const _hoisted_2$z = { class: "lupa-category-back" };
   const _hoisted_3$q = ["href"];
-  const _hoisted_4$k = ["href"];
+  const _hoisted_4$l = ["href"];
   const _hoisted_5$f = { class: "lupa-child-category-list" };
   const _sfc_main$O = /* @__PURE__ */ defineComponent({
     __name: "CategoryFilter",
@@ -20571,6 +20671,7 @@ and ensure you are accounting for this risk.
       const props = __props;
       const categoryChildren = ref([]);
       const optionStore = useOptionsStore();
+      const searchResultsStore = useSearchResultStore();
       const { envOptions, searchResultOptions } = storeToRefs(optionStore);
       const hasBackButton = computed(() => {
         var _a;
@@ -20607,6 +20708,7 @@ and ensure you are accounting for this risk.
           return;
         }
         categoryChildren.value = result2.items;
+        searchResultsStore.setRelatedCategoryChildren(categoryChildren.value);
         (_c = (_b = searchResultOptions.value.callbacks) == null ? void 0 : _b.onCategoryFilterResults) == null ? void 0 : _c.call(_b, {
           queryKey: props.options.queryKey,
           hasResults: result2.total > 0
@@ -20665,7 +20767,7 @@ and ensure you are accounting for this risk.
               href: parentUrlLink.value,
               class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
               onClick: handleNavigationParent
-            }, toDisplayString(parentTitle.value), 11, _hoisted_4$k)
+            }, toDisplayString(parentTitle.value), 11, _hoisted_4$l)
           ], 2),
           createBaseVNode("div", _hoisted_5$f, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
@@ -20686,7 +20788,7 @@ and ensure you are accounting for this risk.
   };
   const _hoisted_2$y = ["placeholder"];
   const _hoisted_3$p = { class: "lupa-terms-list" };
-  const _hoisted_4$j = ["onClick"];
+  const _hoisted_4$k = ["onClick"];
   const _hoisted_5$e = { class: "lupa-term-checkbox-wrapper" };
   const _hoisted_6$9 = { class: "lupa-term-checkbox-label" };
   const _hoisted_7$6 = { class: "lupa-term-label" };
@@ -20794,7 +20896,7 @@ and ensure you are accounting for this risk.
                   createBaseVNode("span", _hoisted_7$6, toDisplayString(item.title), 1),
                   _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_8$2, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
                 ])
-              ], 10, _hoisted_4$j);
+              ], 10, _hoisted_4$k);
             }), 128))
           ]),
           displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -21794,7 +21896,7 @@ and ensure you are accounting for this risk.
     key: 1,
     class: "lupa-stats-facet-summary-input"
   };
-  const _hoisted_4$i = {
+  const _hoisted_4$j = {
     key: 0,
     class: "lupa-stats-range-label"
   };
@@ -21989,7 +22091,7 @@ and ensure you are accounting for this risk.
         return openBlock(), createElementBlock("div", _hoisted_1$I, [
           !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$x, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$o, [
             createBaseVNode("div", null, [
-              rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
+              rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_4$j, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
               createBaseVNode("div", _hoisted_5$d, [
                 withDirectives(createBaseVNode("input", {
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -22056,7 +22158,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$H = { class: "lupa-term-checkbox-wrapper" };
   const _hoisted_2$w = { class: "lupa-term-checkbox-label" };
   const _hoisted_3$n = { class: "lupa-term-label" };
-  const _hoisted_4$h = {
+  const _hoisted_4$i = {
     key: 0,
     class: "lupa-term-count"
   };
@@ -22117,7 +22219,7 @@ and ensure you are accounting for this risk.
             ]),
             createBaseVNode("div", _hoisted_2$w, [
               createBaseVNode("span", _hoisted_3$n, toDisplayString(_ctx.item.title) + toDisplayString(" "), 1),
-              _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$h, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
+              _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_4$i, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
             ])
           ]),
           showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, [
@@ -22629,7 +22731,7 @@ and ensure you are accounting for this risk.
   };
   const _hoisted_2$r = ["onClick"];
   const _hoisted_3$l = { class: "lupa-mobile-sidebar-content" };
-  const _hoisted_4$g = { class: "lupa-sidebar-top" };
+  const _hoisted_4$h = { class: "lupa-sidebar-top" };
   const _hoisted_5$b = { class: "lupa-sidebar-title" };
   const _hoisted_6$7 = {
     key: 0,
@@ -22673,7 +22775,7 @@ and ensure you are accounting for this risk.
             onClick: withModifiers(handleMobileToggle, ["stop"])
           }, null, 8, _hoisted_2$r),
           createBaseVNode("div", _hoisted_3$l, [
-            createBaseVNode("div", _hoisted_4$g, [
+            createBaseVNode("div", _hoisted_4$h, [
               createBaseVNode("div", _hoisted_5$b, [
                 createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
                 isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_6$7, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
@@ -22701,7 +22803,7 @@ and ensure you are accounting for this risk.
     key: 1,
     class: "lupa-search-results-breadcrumb-text"
   };
-  const _hoisted_4$f = { key: 2 };
+  const _hoisted_4$g = { key: 2 };
   const _sfc_main$D = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsBreadcrumbs",
     props: {
@@ -22742,7 +22844,7 @@ and ensure you are accounting for this risk.
                   return handleNavigation(e2, (_a = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a : "");
                 }
               }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$q)) : (openBlock(), createElementBlock("span", _hoisted_3$k, toDisplayString(getLabel(breadcrumb.label)), 1)),
-              index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, " / ")) : createCommentVNode("", true)
+              index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$g, " / ")) : createCommentVNode("", true)
             ]);
           }), 128))
         ]);
@@ -22848,7 +22950,7 @@ and ensure you are accounting for this risk.
     class: "lupa-page-number-separator"
   };
   const _hoisted_3$j = ["onClick"];
-  const _hoisted_4$e = {
+  const _hoisted_4$f = {
     key: 0,
     class: "lupa-page-number-separator"
   };
@@ -22954,7 +23056,7 @@ and ensure you are accounting for this risk.
             }, toDisplayString(page), 11, _hoisted_3$j);
           }), 128)),
           showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-            showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$e, "...")) : createCommentVNode("", true),
+            showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$f, "...")) : createCommentVNode("", true),
             createBaseVNode("div", {
               class: "lupa-page-number lupa-page-number-last",
               onClick: _cache[2] || (_cache[2] = () => {
@@ -22979,7 +23081,7 @@ and ensure you are accounting for this risk.
   };
   const _hoisted_2$o = { id: "lupa-select" };
   const _hoisted_3$i = { class: "lupa-select-label" };
-  const _hoisted_4$d = ["aria-label"];
+  const _hoisted_4$e = ["aria-label"];
   const _hoisted_5$a = ["value"];
   const _sfc_main$y = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsPageSize",
@@ -23026,7 +23128,7 @@ and ensure you are accounting for this risk.
                   value: option
                 }, toDisplayString(prefixLabel.value) + toDisplayString(option), 9, _hoisted_5$a);
               }), 128))
-            ], 40, _hoisted_4$d)
+            ], 40, _hoisted_4$e)
           ])
         ]);
       };
@@ -23038,7 +23140,7 @@ and ensure you are accounting for this risk.
   };
   const _hoisted_2$n = { id: "lupa-select" };
   const _hoisted_3$h = { class: "lupa-select-label" };
-  const _hoisted_4$c = ["aria-label"];
+  const _hoisted_4$d = ["aria-label"];
   const _hoisted_5$9 = ["value"];
   const _sfc_main$x = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsSort",
@@ -23106,7 +23208,7 @@ and ensure you are accounting for this risk.
                   value: option.key
                 }, toDisplayString(option.label), 9, _hoisted_5$9);
               }), 128))
-            ], 40, _hoisted_4$c), [
+            ], 40, _hoisted_4$d), [
               [vModelSelect, selectedKey.value]
             ])
           ])
@@ -23120,7 +23222,7 @@ and ensure you are accounting for this risk.
     class: "lupa-toolbar-right-title"
   };
   const _hoisted_3$g = { key: 2 };
-  const _hoisted_4$b = { key: 4 };
+  const _hoisted_4$c = { key: 4 };
   const _hoisted_5$8 = { key: 6 };
   const _hoisted_6$6 = { class: "lupa-toolbar-right" };
   const _hoisted_7$3 = {
@@ -23244,7 +23346,7 @@ and ensure you are accounting for this risk.
               label: searchSummaryLabel.value,
               clearable: unref(hasAnyFilter) && showFilterClear.value,
               onClear: handleClearAll
-            }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$b)),
+            }, null, 8, ["label", "clearable"])) : (openBlock(), createElementBlock("div", _hoisted_4$c)),
             displayPageSelect.value ? (openBlock(), createBlock(_sfc_main$z, {
               key: 5,
               options: paginationOptions.value.pageSelect,
@@ -23293,7 +23395,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$r = ["title", "innerHTML"];
   const _hoisted_2$l = ["title"];
   const _hoisted_3$f = ["href", "innerHTML"];
-  const _hoisted_4$a = ["title"];
+  const _hoisted_4$b = ["title"];
   const _hoisted_5$7 = {
     key: 0,
     class: "lupa-search-results-product-title-text"
@@ -23361,7 +23463,7 @@ and ensure you are accounting for this risk.
             class: "lupa-search-results-product-title-text lupa-title-link",
             onClick: handleNavigation
           }, toDisplayString(title.value), 9, _hoisted_6$5)) : createCommentVNode("", true)
-        ], 12, _hoisted_4$a));
+        ], 12, _hoisted_4$b));
       };
     }
   });
@@ -23404,7 +23506,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$p = { id: "lupa-search-results-rating" };
   const _hoisted_2$k = { class: "lupa-ratings" };
   const _hoisted_3$e = { class: "lupa-ratings-base" };
-  const _hoisted_4$9 = ["innerHTML"];
+  const _hoisted_4$a = ["innerHTML"];
   const _hoisted_5$6 = { class: "lupa-rating-wrapper" };
   const _hoisted_6$4 = ["innerHTML"];
   const _hoisted_7$2 = ["href"];
@@ -23448,7 +23550,7 @@ and ensure you are accounting for this risk.
                   key: index,
                   innerHTML: star,
                   class: "lupa-rating lupa-rating-not-highlighted"
-                }, null, 8, _hoisted_4$9);
+                }, null, 8, _hoisted_4$a);
               }), 128))
             ]),
             createBaseVNode("div", _hoisted_5$6, [
@@ -23582,7 +23684,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$m = ["innerHTML"];
   const _hoisted_2$i = { key: 0 };
   const _hoisted_3$c = { key: 1 };
-  const _hoisted_4$8 = { class: "lupa-search-box-custom-label" };
+  const _hoisted_4$9 = { class: "lupa-search-box-custom-label" };
   const _hoisted_5$5 = { class: "lupa-search-box-custom-text" };
   const _sfc_main$o = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsProductCustom",
@@ -23627,7 +23729,7 @@ and ensure you are accounting for this risk.
           class: className.value
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$i, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$c, [
-            createBaseVNode("div", _hoisted_4$8, toDisplayString(label.value), 1),
+            createBaseVNode("div", _hoisted_4$9, toDisplayString(label.value), 1),
             createBaseVNode("div", _hoisted_5$5, toDisplayString(text.value), 1)
           ]))
         ], 16));
@@ -23673,7 +23775,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$k = { id: "lupa-search-results-rating" };
   const _hoisted_2$h = ["innerHTML"];
   const _hoisted_3$b = { class: "lupa-ratings" };
-  const _hoisted_4$7 = ["href"];
+  const _hoisted_4$8 = ["href"];
   const _sfc_main$m = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsProductSingleStarRating",
     props: {
@@ -23711,7 +23813,7 @@ and ensure you are accounting for this risk.
           createBaseVNode("a", {
             href: ratingLink.value,
             class: "lupa-total-ratings"
-          }, toDisplayString(totalRatings.value), 9, _hoisted_4$7)
+          }, toDisplayString(totalRatings.value), 9, _hoisted_4$8)
         ]);
       };
     }
@@ -24039,7 +24141,7 @@ and ensure you are accounting for this risk.
     class: "lupa-similar-query-label",
     "data-cy": "lupa-similar-query-label"
   };
-  const _hoisted_4$6 = ["onClick"];
+  const _hoisted_4$7 = ["onClick"];
   const _hoisted_5$4 = ["innerHTML"];
   const _hoisted_6$3 = { key: 0 };
   const _hoisted_7$1 = {
@@ -24092,7 +24194,7 @@ and ensure you are accounting for this risk.
                     innerHTML: getSimilarQueryContent(similarQuery.displayQuery)
                   }, null, 8, _hoisted_5$4),
                   similarQuery.count ? (openBlock(), createElementBlock("span", _hoisted_6$3, " (" + toDisplayString(similarQuery.count) + ")", 1)) : createCommentVNode("", true)
-                ], 8, _hoisted_4$6)
+                ], 8, _hoisted_4$7)
               ]),
               createBaseVNode("div", _hoisted_7$1, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(similarQuery.items, (product, index2) => {
@@ -24315,7 +24417,7 @@ and ensure you are accounting for this risk.
     class: "lupa-empty-results",
     "data-cy": "lupa-no-results-in-page"
   };
-  const _hoisted_4$5 = {
+  const _hoisted_4$6 = {
     key: 3,
     class: "lupa-empty-results",
     "data-cy": "lupa-no-results"
@@ -24507,7 +24609,7 @@ and ensure you are accounting for this risk.
               location: "bottom",
               sdkOptions: _ctx.options.options
             }, null, 8, ["options", "sdkOptions"])
-          ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+          ], 64)) : !unref(loading) && unref(currentQueryText) ? (openBlock(), createElementBlock("div", _hoisted_4$6, [
             createTextVNode(toDisplayString(_ctx.options.labels.emptyResults) + " ", 1),
             createBaseVNode("span", null, toDisplayString(unref(currentQueryText)), 1)
           ])) : createCommentVNode("", true),
@@ -24536,6 +24638,7 @@ and ensure you are accounting for this risk.
     class: "lupa-category-back"
   };
   const _hoisted_3$6 = ["href"];
+  const _hoisted_4$5 = { class: "lupa-child-category-list" };
   const _sfc_main$d = /* @__PURE__ */ defineComponent({
     __name: "CategoryTopFilters",
     props: {
@@ -24543,6 +24646,8 @@ and ensure you are accounting for this risk.
     },
     setup(__props) {
       const props = __props;
+      const searchResultsStore = useSearchResultStore();
+      const { relatedCategoryChildren } = storeToRefs(searchResultsStore);
       const hasBackButton = computed(() => {
         var _a, _b;
         return Boolean((_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title);
@@ -24558,12 +24663,19 @@ and ensure you are accounting for this risk.
       const hasEventRouting = computed(() => {
         return props.options.routingBehavior === "event";
       });
+      const categoryOptions = computed(() => {
+        return props.options.categories;
+      });
       const handleNavigationBack = (event) => {
         if (!backUrlLink.value) {
           return;
         }
         handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
       };
+      const getCategoryKey = (item) => {
+        var _a, _b, _c, _d, _e, _f;
+        return (item == null ? void 0 : item[(_c = (_b = (_a = categoryOptions.value) == null ? void 0 : _a.keys) == null ? void 0 : _b.titleKey) != null ? _c : ""]) + (item == null ? void 0 : item[(_f = (_e = (_d = categoryOptions.value) == null ? void 0 : _d.keys) == null ? void 0 : _e.urlKey) != null ? _f : ""]);
+      };
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", {
           class: normalizeClass(["lupa-category-top-mobile-filters", { "lupa-has-back-button": hasBackButton.value }])
@@ -24576,6 +24688,15 @@ and ensure you are accounting for this risk.
                 onClick: handleNavigationBack
               }, toDisplayString(backTitle.value), 9, _hoisted_3$6)
             ])) : createCommentVNode("", true),
+            createBaseVNode("div", _hoisted_4$5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(relatedCategoryChildren), (child) => {
+                return openBlock(), createBlock(_sfc_main$P, {
+                  key: getCategoryKey(child),
+                  item: child,
+                  options: categoryOptions.value
+                }, null, 8, ["item", "options"]);
+              }), 128))
+            ]),
             createVNode(_sfc_main$w, {
               class: "lupa-toolbar-mobile",
               "pagination-location": "top",