@getlupa/vue 0.0.14 → 0.1.0

package/dist/lupaSearch.js

@@ -2989,16 +2989,16 @@ const useSearchBoxStore = defineStore("searchBox", () => {
     resetHighlightIndex
   };
 });
-const _hoisted_1$11 = { id: "lupa-search-box-input-container" };
-const _hoisted_2$H = { class: "lupa-input-clear" };
-const _hoisted_3$t = { id: "lupa-search-box-input" };
-const _hoisted_4$l = ["value"];
+const _hoisted_1$12 = { id: "lupa-search-box-input-container" };
+const _hoisted_2$I = { class: "lupa-input-clear" };
+const _hoisted_3$u = { id: "lupa-search-box-input" };
+const _hoisted_4$m = ["value"];
 const _hoisted_5$c = ["placeholder"];
 const _hoisted_6$6 = {
   key: 0,
   class: "lupa-close-label"
 };
-const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -3075,19 +3075,19 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
     };
     __expose({ focus });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$11, [
-        vue.createElementVNode("div", _hoisted_2$H, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$12, [
+        vue.createElementVNode("div", _hoisted_2$I, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["lupa-input-clear-content", { "lupa-input-clear-filled": inputValue.value }]),
             onClick: clear
           }, null, 2)
         ]),
-        vue.createElementVNode("div", _hoisted_3$t, [
+        vue.createElementVNode("div", _hoisted_3$u, [
           vue.createElementVNode("input", {
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$l),
+          }, null, 8, _hoisted_4$m),
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -3115,7 +3115,7 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -3147,9 +3147,9 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$10 = { class: "lupa-search-box-history-item" };
-const _hoisted_2$G = { class: "lupa-search-box-history-item-content" };
-const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$11 = { class: "lupa-search-box-history-item" };
+const _hoisted_2$H = { class: "lupa-search-box-history-item-content" };
+const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -3165,8 +3165,8 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
       emit("click", { query: props.item });
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$10, [
-        vue.createElementVNode("div", _hoisted_2$G, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$11, [
+        vue.createElementVNode("div", _hoisted_2$H, [
           vue.createElementVNode("div", {
             class: vue.normalizeClass(["lupa-search-box-history-item-text", { "lupa-search-box-history-item-highlighted": _ctx.highlighted }]),
             onClick: click2
@@ -3180,11 +3180,11 @@ const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$$ = {
+const _hoisted_1$10 = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -3225,9 +3225,9 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$$, [
+      return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$10, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(history), (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$17, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$18, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -3243,18 +3243,18 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$_ = ["innerHTML"];
-const _hoisted_2$F = {
+const _hoisted_1$$ = ["innerHTML"];
+const _hoisted_2$G = {
   key: 1,
   "data-cy": "lupa-suggestion-value",
   class: "lupa-suggestion-value"
 };
-const _hoisted_3$s = {
+const _hoisted_3$t = {
   key: 2,
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$k = {
+const _hoisted_4$l = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -3262,7 +3262,7 @@ const _hoisted_5$b = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
-const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestion",
   props: {
     suggestion: {},
@@ -3298,20 +3298,20 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
           class: "lupa-suggestion-value",
           "data-cy": "lupa-suggestion-value",
           innerHTML: _ctx.suggestion.displayHighlight
-        }, null, 8, _hoisted_1$_)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$F, vue.toDisplayString(_ctx.suggestion.display), 1)),
-        _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, [
-          vue.createElementVNode("span", _hoisted_4$k, vue.toDisplayString(facetLabel.value), 1),
+        }, null, 8, _hoisted_1$$)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$G, vue.toDisplayString(_ctx.suggestion.display), 1)),
+        _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$t, [
+          vue.createElementVNode("span", _hoisted_4$l, vue.toDisplayString(facetLabel.value), 1),
           vue.createElementVNode("span", _hoisted_5$b, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
     };
   }
 });
-const _hoisted_1$Z = {
+const _hoisted_1$_ = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
-const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestions",
   props: {
     items: {},
@@ -3371,9 +3371,9 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
       });
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$15, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$16, {
             key: getSuggestionKey(item),
             class: vue.normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
             suggestion: item,
@@ -3401,7 +3401,7 @@ const debounce$1 = (func, timeout) => {
     }, timeout);
   };
 };
-const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
@@ -3442,7 +3442,7 @@ const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
     };
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$14, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$15, {
         items: searchResult.value,
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
@@ -3520,8 +3520,8 @@ const useDynamicDataStore = defineStore("dynamicData", () => {
   });
   return { dynamicDataIdMap, loading, enhanceSearchResultsWithDynamicData };
 });
-const _hoisted_1$Y = ["src"];
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$Z = ["src"];
+const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "ProductImage",
   props: {
     item: {},
@@ -3569,12 +3569,12 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           class: vue.normalizeClass((_b = _ctx.imageClass) != null ? _b : ""),
           src: finalUrl.value,
           onError: replaceWithPlaceholder
-        }, null, 42, _hoisted_1$Y)
+        }, null, 42, _hoisted_1$Z)
       ], 2);
     };
   }
 });
-const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductImage",
   props: {
     item: {},
@@ -3582,7 +3582,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$13, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-box-image-wrapper",
@@ -3591,12 +3591,12 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$X = ["innerHTML"];
-const _hoisted_2$E = {
+const _hoisted_1$Y = ["innerHTML"];
+const _hoisted_2$F = {
   key: 1,
   class: "lupa-search-box-product-title"
 };
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductTitle",
   props: {
     item: {},
@@ -3616,18 +3616,18 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: "lupa-search-box-product-title",
         innerHTML: title.value
-      }, null, 8, _hoisted_1$X)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$E, [
+      }, null, 8, _hoisted_1$Y)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$F, [
         vue.createElementVNode("strong", null, vue.toDisplayString(title.value), 1)
       ]));
     };
   }
 });
-const _hoisted_1$W = ["innerHTML"];
-const _hoisted_2$D = {
+const _hoisted_1$X = ["innerHTML"];
+const _hoisted_2$E = {
   key: 1,
   class: "lupa-search-box-product-description"
 };
-const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductDescription",
   props: {
     item: {},
@@ -3647,12 +3647,12 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: "lupa-search-box-product-description",
         innerHTML: description.value
-      }, null, 8, _hoisted_1$W)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, vue.toDisplayString(description.value), 1));
+      }, null, 8, _hoisted_1$X)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$E, vue.toDisplayString(description.value), 1));
     };
   }
 });
-const _hoisted_1$V = { class: "lupa-search-box-product-price" };
-const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$W = { class: "lupa-search-box-product-price" };
+const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
     item: {},
@@ -3670,14 +3670,14 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
       );
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
         vue.createElementVNode("strong", null, vue.toDisplayString(price.value), 1)
       ]);
     };
   }
 });
-const _hoisted_1$U = { class: "lupa-search-box-product-regular-price" };
-const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$V = { class: "lupa-search-box-product-regular-price" };
+const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
     item: {},
@@ -3695,16 +3695,16 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
       );
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$U, vue.toDisplayString(price.value), 1);
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$V, vue.toDisplayString(price.value), 1);
     };
   }
 });
-const _hoisted_1$T = ["innerHTML"];
-const _hoisted_2$C = { key: 0 };
-const _hoisted_3$r = { key: 1 };
-const _hoisted_4$j = { class: "lupa-search-box-custom-label" };
+const _hoisted_1$U = ["innerHTML"];
+const _hoisted_2$D = { key: 0 };
+const _hoisted_3$s = { key: 1 };
+const _hoisted_4$k = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$a = { class: "lupa-search-box-custom-text" };
-const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
     item: {},
@@ -3730,20 +3730,20 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
         key: 0,
         class: [className.value, "lupa-search-box-product-custom"],
         innerHTML: text.value
-      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$T)) : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$U)) : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: 1,
         class: [className.value, "lupa-search-box-product-custom"]
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
-        !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$C, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$r, [
-          vue.createElementVNode("div", _hoisted_4$j, vue.toDisplayString(label.value), 1),
+        !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$D, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$s, [
+          vue.createElementVNode("div", _hoisted_4$k, vue.toDisplayString(label.value), 1),
           vue.createElementVNode("div", _hoisted_5$a, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
   }
 });
-const _hoisted_1$S = ["innerHTML"];
-const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_1$T = ["innerHTML"];
+const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
     item: {},
@@ -3763,19 +3763,255 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: className.value,
         innerHTML: text.value
-      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$S);
+      }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), null, 16, _hoisted_1$T);
+    };
+  }
+});
+var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
+  ResultsLayoutEnum2["GRID"] = "Grid";
+  ResultsLayoutEnum2["LIST"] = "List";
+  return ResultsLayoutEnum2;
+})(ResultsLayoutEnum || {});
+const RESULT_ROOT_ID = "lupa-search-results";
+const SHADOW_ROOT_ID = "lupa-shadow-id";
+const CONTAINER_ROOT_ID = "lupa-search-container";
+const scrollToSearchResults = (timeout = 500) => {
+  if (timeout) {
+    setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
+  } else {
+    scrollTo(RESULT_ROOT_ID);
+  }
+};
+const scrollTo = (elementId) => {
+  var _a, _b;
+  let el = document.getElementById(elementId);
+  const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
+  if (!el) {
+    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
+  }
+  if (!el) {
+    return;
+  }
+  const searchContainer = shadowRoot ? shadowRoot.getElementById(CONTAINER_ROOT_ID) : void 0;
+  const container = searchContainer != null ? searchContainer : window;
+  container.scrollTo({
+    top: el.offsetTop,
+    behavior: "smooth"
+  });
+};
+const disableBodyScroll = () => {
+  const scrollY = window.scrollY;
+  document.body.style.position = "fixed";
+  document.body.style.top = `-${scrollY}px`;
+};
+const enableBodyScroll = () => {
+  const scrollY = document.body.style.top;
+  document.body.style.position = "";
+  document.body.style.top = "";
+  window.scrollTo(0, parseInt(scrollY || "0") * -1);
+};
+const setDocumentTitle = (template, textToInsert = "") => {
+  document.title = addParamsToLabel(template, textToInsert);
+};
+const useSearchResultStore = defineStore("searchResult", () => {
+  const searchResult = vue.ref({});
+  const columnCount = vue.ref(2);
+  const addToCartAmount = vue.ref(1);
+  const layout = vue.ref(ResultsLayoutEnum.GRID);
+  const loading = vue.ref(false);
+  const isMobileSidebarVisible = vue.ref(false);
+  const optionsStore = useOptionsStore();
+  const paramsStore = useParamsStore();
+  const facets = vue.computed(() => searchResult.value.facets);
+  const filters = vue.computed(() => searchResult.value.filters);
+  const currentQueryText = vue.computed(() => searchResult.value.searchText);
+  const totalItems = vue.computed(() => searchResult.value.total);
+  const hasResults = vue.computed(() => totalItems.value > 0);
+  const labeledFilters = vue.computed(
+    () => getLabeledFilters(unfoldFilters(filters.value), facets.value)
+  );
+  const displayFilters = vue.computed(() => {
+    var _a, _b;
+    const initialFilters = optionsStore.initialFilters;
+    return (_b = (_a = labeledFilters.value) == null ? void 0 : _a.filter((f2) => !(initialFilters == null ? void 0 : initialFilters[f2.key]))) != null ? _b : [];
+  });
+  const currentFilterCount = vue.computed(() => {
+    var _a, _b;
+    return (_b = (_a = displayFilters.value) == null ? void 0 : _a.length) != null ? _b : 0;
+  });
+  const currentFilterKeys = vue.computed(() => {
+    var _a;
+    return Object.keys((_a = filters.value) != null ? _a : {});
+  });
+  const hasAnyFilter = vue.computed(() => {
+    var _a;
+    return Object.keys((_a = filters.value) != null ? _a : {}).length > 0;
+  });
+  const itemRange = vue.computed(() => {
+    var _a, _b;
+    const limit = (_a = paramsStore.limit) != null ? _a : 0;
+    const offset = (_b = searchResult.value.offset) != null ? _b : 0;
+    return [offset + 1, Math.min(offset + limit, totalItems.value)];
+  });
+  const isPageEmpty = vue.computed(
+    () => {
+      var _a;
+      return hasResults.value && ((_a = searchResult.value.offset) != null ? _a : 0) >= totalItems.value;
+    }
+  );
+  const setSidebarState = ({ visible }) => {
+    if (visible) {
+      disableBodyScroll();
+    } else {
+      enableBodyScroll();
+    }
+    isMobileSidebarVisible.value = visible;
+  };
+  const queryFacet = (_0) => __async(exports, [_0], function* ({ queryKey, facetKey }) {
+    var _a, _b, _c, _d;
+    const query = { searchText: "", filters: __spreadValues({}, filters.value) };
+    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
+    const result = yield LupaSearchSdk.query(queryKey, query, options);
+    if (!result.success) {
+      return;
+    }
+    const facet = (_b = result.facets) == null ? void 0 : _b.find((f2) => f2.key === facetKey);
+    const facetItems = (_c = facet == null ? void 0 : facet.items) != null ? _c : [];
+    const updatedResult = __spreadProps(__spreadValues({}, searchResult.value), {
+      facets: (_d = facets.value) == null ? void 0 : _d.map((f2) => f2.key === facetKey ? __spreadProps(__spreadValues({}, f2), { items: facetItems }) : f2)
+    });
+    searchResult.value = updatedResult;
+  });
+  const add = (newSearchResult) => {
+    var _a, _b;
+    if (!newSearchResult) {
+      return {
+        searchResult: searchResult.value,
+        pageSize: searchResult.value.limit || 0
+      };
+    }
+    if (typeof document !== "undefined") {
+      setDocumentTitle(
+        (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
+        newSearchResult.searchText
+      );
+    }
+    searchResult.value = newSearchResult;
+    return { searchResult: newSearchResult };
+  };
+  const setColumnCount = ({ width, grid }) => {
+    if (!width || !grid) {
+      return;
+    }
+    if (width <= S_MIN_WIDTH) {
+      columnCount.value = grid.columns.xs;
+    } else if (width > S_MIN_WIDTH && width <= MD_MIN_WIDTH) {
+      columnCount.value = grid.columns.sm;
+    } else if (width > MD_MIN_WIDTH && width <= L_MIN_WIDTH) {
+      columnCount.value = grid.columns.md;
+    } else if (width > L_MIN_WIDTH && width <= XL_MIN_WIDTH) {
+      columnCount.value = grid.columns.l;
+    } else {
+      columnCount.value = grid.columns.xl;
+    }
+  };
+  const setAddToCartAmount = (newAddToCartAmount) => {
+    if (!newAddToCartAmount) {
+      return;
+    }
+    addToCartAmount.value = newAddToCartAmount;
+  };
+  const setLayout = (newLayout) => {
+    if (!newLayout) {
+      return;
+    }
+    layout.value = newLayout;
+  };
+  const setLoading = (state) => {
+    loading.value = state || false;
+  };
+  return {
+    isMobileSidebarVisible,
+    searchResult,
+    columnCount,
+    addToCartAmount,
+    facets,
+    filters,
+    loading,
+    layout,
+    currentQueryText,
+    totalItems,
+    hasResults,
+    labeledFilters,
+    displayFilters,
+    currentFilterCount,
+    currentFilterKeys,
+    hasAnyFilter,
+    itemRange,
+    isPageEmpty,
+    setSidebarState,
+    queryFacet,
+    add,
+    setColumnCount,
+    setAddToCartAmount,
+    setLayout,
+    setLoading
+  };
+});
+const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
+const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+const _hoisted_3$r = ["onClick", "disabled"];
+const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchBoxProductAddToCart",
+  props: {
+    item: {},
+    options: {},
+    inStock: { type: Boolean }
+  },
+  emits: ["productEvent"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const inStockValue = vue.computed(() => {
+      var _a;
+      return (_a = props.inStock) != null ? _a : true;
+    });
+    const searchResultStore = useSearchResultStore();
+    const { addToCartAmount } = storeToRefs(searchResultStore);
+    const loading = vue.ref(false);
+    const label = vue.computed(() => {
+      return props.options.labels.addToCart;
+    });
+    const handleClick = () => __async(this, null, function* () {
+      loading.value = true;
+      yield props.options.action(props.item, addToCartAmount.value);
+      emit("productEvent", { type: "addToCart" });
+      loading.value = false;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$S, [
+        vue.createElementVNode("div", _hoisted_2$C, [
+          vue.createElementVNode("button", {
+            onClick: vue.withModifiers(handleClick, ["stop", "prevent"]),
+            class: vue.normalizeClass(loading.value ? "lupa-add-to-cart-loading" : "lupa-add-to-cart"),
+            "data-cy": "lupa-add-to-cart",
+            type: "button",
+            disabled: !inStockValue.value || loading.value
+          }, vue.toDisplayString(label.value), 11, _hoisted_3$r)
+        ])
+      ]);
     };
   }
 });
 const __default__$4 = {
   components: {
-    SearchBoxProductImage: _sfc_main$11,
-    SearchBoxProductTitle: _sfc_main$10,
-    SearchBoxProductDescription: _sfc_main$$,
-    SearchBoxProductPrice: _sfc_main$_,
-    SearchBoxProductRegularPrice: _sfc_main$Z,
-    SearchBoxProductCustom: _sfc_main$Y,
-    SearchBoxProductCustomHtml: _sfc_main$X
+    SearchBoxProductImage: _sfc_main$12,
+    SearchBoxProductTitle: _sfc_main$11,
+    SearchBoxProductDescription: _sfc_main$10,
+    SearchBoxProductPrice: _sfc_main$$,
+    SearchBoxProductRegularPrice: _sfc_main$_,
+    SearchBoxProductCustom: _sfc_main$Z,
+    SearchBoxProductCustomHtml: _sfc_main$Y,
+    SearchBoxProductAddToCart: _sfc_main$X
   }
 };
 const _sfc_main$W = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
@@ -3783,7 +4019,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
   props: {
     item: {},
     element: {},
-    labels: {}
+    labels: {},
+    isInStock: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -3805,6 +4042,8 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
           return "search-box-product-custom";
         case DocumentElementType.CUSTOM_HTML:
           return "search-box-product-custom-html";
+        case DocumentElementType.ADDTOCART:
+          return "search-box-product-add-to-cart";
       }
       return "search-box-product-title";
     });
@@ -3828,8 +4067,9 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         item: enhancedItem.value,
         options: _ctx.element,
         labels: _ctx.labels,
-        class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value })
-      }, null, 8, ["item", "options", "labels", "class"])) : vue.createCommentVNode("", true);
+        class: vue.normalizeClass({ "lupa-loading-dynamic-data": isLoadingDynamicData.value }),
+        inStock: _ctx.isInStock
+      }, null, 8, ["item", "options", "labels", "class", "inStock"])) : vue.createCommentVNode("", true);
     };
   }
 }));
@@ -3891,6 +4131,10 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$R = ["href"];
 const _hoisted_2$B = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$q = { class: "lupa-search-box-product-details-section" };
+const _hoisted_4$j = {
+  key: 0,
+  class: "lupa-search-box-product-add-to-cart-section"
+};
 const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProduct",
   props: {
@@ -3906,6 +4150,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     const historyStore = useHistoryStore();
     const trackingStore = useTrackingStore();
     const optionsStore = useOptionsStore();
+    const isInStock = vue.ref(true);
     const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const link = vue.computed(() => {
       var _a, _b;
@@ -3917,7 +4162,9 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
     });
     const detailElements = vue.computed(() => {
       var _a, _b;
-      return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e) => e.type !== DocumentElementType.IMAGE)) != null ? _b : [];
+      return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
+        (e) => e.type !== DocumentElementType.IMAGE && e.type !== DocumentElementType.ADDTOCART
+      )) != null ? _b : [];
     });
     const id = vue.computed(() => {
       if (props.panelOptions.idKey) {
@@ -3935,6 +4182,10 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
       });
       return title2;
     });
+    const addToCartElement = vue.computed(() => {
+      var _a;
+      return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
+    });
     const handleClick = (event) => {
       var _a;
       if (props.panelOptions.titleKey) {
@@ -3964,6 +4215,12 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
       emit("product-click");
       handleRoutingEvent(link.value, event, boxRoutingBehavior.value === "event");
     };
+    vue.onMounted(() => {
+      checkIfIsInStock();
+    });
+    const checkIfIsInStock = () => __async(this, null, function* () {
+      isInStock.value = props.panelOptions.isInStock ? yield props.panelOptions.isInStock(props.item) : true;
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("a", {
         class: vue.normalizeClass(["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }]),
@@ -3994,7 +4251,17 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
               link: link.value
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
-        ])
+        ]),
+        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$j, [
+          vue.createVNode(_sfc_main$W, {
+            class: "lupa-search-box-product-element",
+            item: _ctx.item,
+            element: addToCartElement.value,
+            labels: _ctx.labels,
+            link: link.value,
+            isInStock: isInStock.value
+          }, null, 8, ["item", "element", "labels", "link", "isInStock"])
+        ])) : vue.createCommentVNode("", true)
       ], 10, _hoisted_1$R);
     };
   }
@@ -4128,7 +4395,7 @@ const _hoisted_3$p = {
 };
 const __default__$3 = {
   components: {
-    SearchBoxSuggestionsWrapper: _sfc_main$13,
+    SearchBoxSuggestionsWrapper: _sfc_main$14,
     SearchBoxProductsWrapper: _sfc_main$T
   }
 };
@@ -4278,13 +4545,13 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             ], 10, _hoisted_2$A);
           }), 128))
         ]),
-        vue.createVNode(_sfc_main$18, {
+        vue.createVNode(_sfc_main$19, {
           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"])
       ], 512)) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$p, [
-        vue.createVNode(_sfc_main$16, {
+        vue.createVNode(_sfc_main$17, {
           ref: "panel",
           options: _ctx.options.history,
           history: history.value,
@@ -4545,7 +4812,7 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
       var _a2;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$O, [
         vue.createElementVNode("div", _hoisted_2$z, [
-          vue.createVNode(_sfc_main$19, {
+          vue.createVNode(_sfc_main$1a, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -4579,197 +4846,6 @@ const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
-  ResultsLayoutEnum2["GRID"] = "Grid";
-  ResultsLayoutEnum2["LIST"] = "List";
-  return ResultsLayoutEnum2;
-})(ResultsLayoutEnum || {});
-const RESULT_ROOT_ID = "lupa-search-results";
-const SHADOW_ROOT_ID = "lupa-shadow-id";
-const CONTAINER_ROOT_ID = "lupa-search-container";
-const scrollToSearchResults = (timeout = 500) => {
-  if (timeout) {
-    setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
-  } else {
-    scrollTo(RESULT_ROOT_ID);
-  }
-};
-const scrollTo = (elementId) => {
-  var _a, _b;
-  let el = document.getElementById(elementId);
-  const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
-  if (!el) {
-    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
-  }
-  if (!el) {
-    return;
-  }
-  const searchContainer = shadowRoot ? shadowRoot.getElementById(CONTAINER_ROOT_ID) : void 0;
-  const container = searchContainer != null ? searchContainer : window;
-  container.scrollTo({
-    top: el.offsetTop,
-    behavior: "smooth"
-  });
-};
-const disableBodyScroll = () => {
-  const scrollY = window.scrollY;
-  document.body.style.position = "fixed";
-  document.body.style.top = `-${scrollY}px`;
-};
-const enableBodyScroll = () => {
-  const scrollY = document.body.style.top;
-  document.body.style.position = "";
-  document.body.style.top = "";
-  window.scrollTo(0, parseInt(scrollY || "0") * -1);
-};
-const setDocumentTitle = (template, textToInsert = "") => {
-  document.title = addParamsToLabel(template, textToInsert);
-};
-const useSearchResultStore = defineStore("searchResult", () => {
-  const searchResult = vue.ref({});
-  const columnCount = vue.ref(2);
-  const addToCartAmount = vue.ref(1);
-  const layout = vue.ref(ResultsLayoutEnum.GRID);
-  const loading = vue.ref(false);
-  const isMobileSidebarVisible = vue.ref(false);
-  const optionsStore = useOptionsStore();
-  const paramsStore = useParamsStore();
-  const facets = vue.computed(() => searchResult.value.facets);
-  const filters = vue.computed(() => searchResult.value.filters);
-  const currentQueryText = vue.computed(() => searchResult.value.searchText);
-  const totalItems = vue.computed(() => searchResult.value.total);
-  const hasResults = vue.computed(() => totalItems.value > 0);
-  const labeledFilters = vue.computed(
-    () => getLabeledFilters(unfoldFilters(filters.value), facets.value)
-  );
-  const displayFilters = vue.computed(() => {
-    var _a, _b;
-    const initialFilters = optionsStore.initialFilters;
-    return (_b = (_a = labeledFilters.value) == null ? void 0 : _a.filter((f2) => !(initialFilters == null ? void 0 : initialFilters[f2.key]))) != null ? _b : [];
-  });
-  const currentFilterCount = vue.computed(() => {
-    var _a, _b;
-    return (_b = (_a = displayFilters.value) == null ? void 0 : _a.length) != null ? _b : 0;
-  });
-  const currentFilterKeys = vue.computed(() => {
-    var _a;
-    return Object.keys((_a = filters.value) != null ? _a : {});
-  });
-  const hasAnyFilter = vue.computed(() => {
-    var _a;
-    return Object.keys((_a = filters.value) != null ? _a : {}).length > 0;
-  });
-  const itemRange = vue.computed(() => {
-    var _a, _b;
-    const limit = (_a = paramsStore.limit) != null ? _a : 0;
-    const offset = (_b = searchResult.value.offset) != null ? _b : 0;
-    return [offset + 1, Math.min(offset + limit, totalItems.value)];
-  });
-  const isPageEmpty = vue.computed(
-    () => {
-      var _a;
-      return hasResults.value && ((_a = searchResult.value.offset) != null ? _a : 0) >= totalItems.value;
-    }
-  );
-  const setSidebarState = ({ visible }) => {
-    if (visible) {
-      disableBodyScroll();
-    } else {
-      enableBodyScroll();
-    }
-    isMobileSidebarVisible.value = visible;
-  };
-  const queryFacet = (_0) => __async(exports, [_0], function* ({ queryKey, facetKey }) {
-    var _a, _b, _c, _d;
-    const query = { searchText: "", filters: __spreadValues({}, filters.value) };
-    const options = (_a = optionsStore.envOptions) != null ? _a : { environment: "production" };
-    const result = yield LupaSearchSdk.query(queryKey, query, options);
-    if (!result.success) {
-      return;
-    }
-    const facet = (_b = result.facets) == null ? void 0 : _b.find((f2) => f2.key === facetKey);
-    const facetItems = (_c = facet == null ? void 0 : facet.items) != null ? _c : [];
-    const updatedResult = __spreadProps(__spreadValues({}, searchResult.value), {
-      facets: (_d = facets.value) == null ? void 0 : _d.map((f2) => f2.key === facetKey ? __spreadProps(__spreadValues({}, f2), { items: facetItems }) : f2)
-    });
-    searchResult.value = updatedResult;
-  });
-  const add = (newSearchResult) => {
-    var _a, _b;
-    if (!newSearchResult) {
-      return {
-        searchResult: searchResult.value,
-        pageSize: searchResult.value.limit || 0
-      };
-    }
-    if (typeof document !== "undefined") {
-      setDocumentTitle(
-        (_b = (_a = optionsStore.searchResultOptions) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate,
-        newSearchResult.searchText
-      );
-    }
-    searchResult.value = newSearchResult;
-    return { searchResult: newSearchResult };
-  };
-  const setColumnCount = ({ width, grid }) => {
-    if (!width || !grid) {
-      return;
-    }
-    if (width <= S_MIN_WIDTH) {
-      columnCount.value = grid.columns.xs;
-    } else if (width > S_MIN_WIDTH && width <= MD_MIN_WIDTH) {
-      columnCount.value = grid.columns.sm;
-    } else if (width > MD_MIN_WIDTH && width <= L_MIN_WIDTH) {
-      columnCount.value = grid.columns.md;
-    } else if (width > L_MIN_WIDTH && width <= XL_MIN_WIDTH) {
-      columnCount.value = grid.columns.l;
-    } else {
-      columnCount.value = grid.columns.xl;
-    }
-  };
-  const setAddToCartAmount = (newAddToCartAmount) => {
-    if (!newAddToCartAmount) {
-      return;
-    }
-    addToCartAmount.value = newAddToCartAmount;
-  };
-  const setLayout = (newLayout) => {
-    if (!newLayout) {
-      return;
-    }
-    layout.value = newLayout;
-  };
-  const setLoading = (state) => {
-    loading.value = state || false;
-  };
-  return {
-    isMobileSidebarVisible,
-    searchResult,
-    columnCount,
-    addToCartAmount,
-    facets,
-    filters,
-    loading,
-    layout,
-    currentQueryText,
-    totalItems,
-    hasResults,
-    labeledFilters,
-    displayFilters,
-    currentFilterCount,
-    currentFilterKeys,
-    hasAnyFilter,
-    itemRange,
-    isPageEmpty,
-    setSidebarState,
-    queryFacet,
-    add,
-    setColumnCount,
-    setAddToCartAmount,
-    setLayout,
-    setLoading
-  };
-});
 const createPublicQuery = (queryParams, sortOptions, defaultPageSize) => {
   var _a;
   const publicQuery = {};
@@ -7935,7 +8011,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$13, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-results-image-wrapper",
@@ -15898,4 +15974,5 @@ exports.SearchBox = _sfc_main$R;
 exports.SearchContainer = _sfc_main$1;
 exports.SearchResults = _sfc_main$4;
 exports.getInitialSearchResults = getInitialSearchResults;
+exports.initPinia = initPinia;
 exports.setupTracking = setupTracking;