@getlupa/client 1.17.0 → 1.17.4

package/dist/lupaSearch.mjs

@@ -7834,7 +7834,7 @@ const getAmount = (price, separator = ".") => {
   }
   return (_b = value.toFixed(2)) == null ? void 0 : _b.replace(".", separator);
 };
-const formatPrice = (price, currency = "€", separator = ",") => {
+const formatPrice = (price, currency = "€", separator = ",", currencyTemplate = "") => {
   if (price !== 0 && !price) {
     return "";
   }
@@ -7842,16 +7842,24 @@ const formatPrice = (price, currency = "€", separator = ",") => {
   if (!amount) {
     return "";
   }
+  if (currencyTemplate) {
+    return addParamsToLabel(currencyTemplate, amount);
+  }
   return `${amount} ${currency}`;
 };
-const formatPriceSummary = ([min, max], currency, separator = ",") => {
+const formatPriceSummary = ([min, max], currency, separator = ",", currencyTemplate = "") => {
   if (min !== void 0 && max !== void 0) {
-    return `${formatPrice(min, currency, separator)} - ${formatPrice(max, currency, separator)}`;
+    return `${formatPrice(min, currency, separator, currencyTemplate)} - ${formatPrice(
+      max,
+      currency,
+      separator,
+      currencyTemplate
+    )}`;
   }
   if (min !== void 0) {
-    return `> ${formatPrice(min, currency, separator)}`;
+    return `> ${formatPrice(min, currency, separator, currencyTemplate)}`;
   }
-  return `< ${formatPrice(max, currency, separator)}`;
+  return `< ${formatPrice(max, currency, separator, currencyTemplate)}`;
 };
 const formatRange = (filter2) => {
   var _a, _b;
@@ -7881,7 +7889,12 @@ const unfoldRangeFilter = (key, filter2, price = {}) => {
     return [
       {
         key,
-        value: formatPriceSummary([gt, lt], price.currency, price.separator),
+        value: formatPriceSummary(
+          [gt, lt],
+          price.currency,
+          price.separator,
+          price.currencyTemplate
+        ),
         type: "range"
       }
     ];
@@ -14487,6 +14500,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
   },
   emits: ["go-to-results"],
   setup(__props, { emit: emit2 }) {
+    const props = __props;
     const historyStore = useHistoryStore();
     const searchBoxStore = useSearchBoxStore();
     const { highlightedIndex } = storeToRefs(searchBoxStore);
@@ -14502,6 +14516,14 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     onBeforeMount(() => {
       window.removeEventListener("keydown", handleKeyDown);
     });
+    const historyLimit = computed(() => {
+      var _a;
+      return (_a = props.options.historyLimit) != null ? _a : 5;
+    });
+    const limitedHistory = computed(() => {
+      var _a;
+      return ((_a = history.value) != null ? _a : []).slice(0, historyLimit.value);
+    });
     const remove2 = ({ item }) => {
       historyStore.remove({ item });
     };
@@ -14522,7 +14544,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$1g, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(limitedHistory.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1t, {
             key: item,
             item,
@@ -24079,11 +24101,12 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const price = computed(() => {
-      var _a, _b;
+      var _a, _b, _c;
       return formatPrice(
         props.item[props.options.key],
         (_a = props.labels) == null ? void 0 : _a.currency,
-        (_b = props.labels) == null ? void 0 : _b.priceSeparator
+        (_b = props.labels) == null ? void 0 : _b.priceSeparator,
+        (_c = props.labels) == null ? void 0 : _c.currencyTemplate
       );
     });
     return (_ctx, _cache) => {
@@ -24106,11 +24129,12 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       return props.options.className;
     });
     const price = computed(() => {
-      var _a, _b;
+      var _a, _b, _c;
       return formatPrice(
         props.item[props.options.key],
         (_a = props.labels) == null ? void 0 : _a.currency,
-        (_b = props.labels) == null ? void 0 : _b.priceSeparator
+        (_b = props.labels) == null ? void 0 : _b.priceSeparator,
+        (_c = props.labels) == null ? void 0 : _c.currencyTemplate
       );
     });
     return (_ctx, _cache) => {
@@ -24274,12 +24298,17 @@ const useSearchResultStore = defineStore("searchResult", () => {
     var _a, _b, _c;
     return (_c = (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.labels) == null ? void 0 : _b.priceSeparator) != null ? _c : "";
   });
+  const currencyTemplate = computed(() => {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.labels) == null ? void 0 : _b.currencyTemplate) != null ? _c : "";
+  });
   const labeledFilters = computed(
     () => getLabeledFilters(
       unfoldFilters(filters.value, {
         keys: priceKeys.value,
         currency: currency.value,
-        separator: priceSeparator.value
+        separator: priceSeparator.value,
+        currencyTemplate: currencyTemplate.value
       }),
       facets2.value
     )
@@ -24827,11 +24856,12 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
       return 0;
     });
     const discountStringValue = computed(() => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c, _d, _e, _f;
       return props.badge.discountType === "percentage" ? discountValue.value.toFixed(0) : formatPrice(
         discountValue.value,
         (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.labels) == null ? void 0 : _b.currency,
-        (_d = (_c = searchResultOptions.value) == null ? void 0 : _c.labels) == null ? void 0 : _d.priceSeparator
+        (_d = (_c = searchResultOptions.value) == null ? void 0 : _c.labels) == null ? void 0 : _d.priceSeparator,
+        (_f = (_e = searchResultOptions.value) == null ? void 0 : _e.labels) == null ? void 0 : _f.currencyTemplate
       );
     });
     const hasDiscount = computed(() => {
@@ -25219,6 +25249,9 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
       }
       emit2("product-click");
       handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
+      if (props.panelOptions.programmaticNavigation) {
+        window.location.assign(link);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Z, [
@@ -25839,6 +25872,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const suggestedValue = ref(defaultSuggestedValue);
     const opened = ref(props.isSearchContainer);
     const focused = ref(false);
+    const openedAt = ref(null);
     const searchBoxInput = ref(null);
     const { highlightedDocument } = storeToRefs(searchBoxStore);
     const searchValue = computed(() => {
@@ -25875,7 +25909,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     });
     const goToResultsDebounced = debounce$1(paramsStore.goToResults, (_a = props.options.debounce) != null ? _a : 300);
     onMounted(() => {
-      var _a2;
+      var _a2, _b, _c;
       window.addEventListener("keydown", handleKeyDown);
       window.addEventListener("click", handleMouseClick);
       paramsStore.setSearchResultsLink(props.options.links.searchResults);
@@ -25886,6 +25920,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       if (props.isSearchContainer && searchBoxInput.value) {
         (_a2 = searchBoxInput.value) == null ? void 0 : _a2.focus();
       }
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onMounted) {
+        (_c = props.options.callbacks) == null ? void 0 : _c.onMounted();
+      }
     });
     onBeforeUnmount(() => {
       window.removeEventListener("keydown", handleKeyDown);
@@ -25893,11 +25930,14 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       unbindSearchTriggers(searchTriggers.value, handleCurrentValueSearch);
     });
     const handleMouseClick = (e2) => {
-      var _a2, _b;
+      var _a2, _b, _c, _d;
       const el = document.getElementById("lupa-search-box");
       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 (openedAt.value && Date.now() - (openedAt == null ? void 0 : openedAt.value) < 500) {
+        return;
+      }
       if (isOutsideElement && props.options.keepOpen) {
         focused.value = false;
       }
@@ -25906,11 +25946,18 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       }
       opened.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_c = props.options.callbacks) == null ? void 0 : _c.onClosed) {
+        (_d = props.options.callbacks) == null ? void 0 : _d.onClosed();
+      }
     };
     const close = () => {
+      var _a2, _b;
       opened.value = false;
       focused.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onClosed) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onClosed();
+      }
     };
     const handleKeyDown = (e2) => {
       var _a2, _b;
@@ -25929,15 +25976,22 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           handleSearch();
           resetValues();
           break;
+        case "Escape":
+          opened.value = false;
+          focused.value = false;
+          break;
       }
     };
     const handleInput = (value) => {
-      var _a2;
+      var _a2, _b;
       opened.value = true;
       focused.value = true;
       inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
       suggestedValue.value = defaultSuggestedValue;
       searchBoxStore.resetHighlightIndex();
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onSearchBoxInput) {
+        props.options.callbacks.onSearchBoxInput(value);
+      }
       trackSearchQuery(value);
       if (props.isSearchContainer) {
         goToResultsDebounced({
@@ -26070,6 +26124,13 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       });
     };
     watch(() => props.options.debounce, handleCurrentValueSearch);
+    watch(opened, () => {
+      if (opened.value) {
+        openedAt.value = Date.now();
+      } else {
+        openedAt.value = null;
+      }
+    });
     const resetValues = () => {
       inputValue.value = "";
       suggestedValue.value = defaultSuggestedValue;
@@ -26081,6 +26142,20 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const slotProps = (props2) => {
       return __spreadValues2({}, props2);
     };
+    const onFocus = () => {
+      var _a2, _b;
+      opened.value = true;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onFocused) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onFocused();
+      }
+    };
+    const onBlur = () => {
+      var _a2, _b;
+      focused.value = false;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onBlurred) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onBlurred();
+      }
+    };
     return (_ctx, _cache) => {
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$W, [
@@ -26093,10 +26168,10 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
             ref_key: "searchBoxInput",
             ref: searchBoxInput,
             onInput: handleInput,
-            onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
-            onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
+            onBlur,
+            onFocus,
             onSearch: handleSearch,
-            onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
+            onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
           opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$11, {
             key: 0,
@@ -27852,6 +27927,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       var _a;
       return (_a = searchResultOptions.value) == null ? void 0 : _a.labels.currency;
     });
+    const currencyTemplate = computed(() => {
+      var _a;
+      return (_a = searchResultOptions.value) == null ? void 0 : _a.labels.currencyTemplate;
+    });
     const priceKeys = computed(() => {
       var _a, _b;
       return (_b = (_a = searchResultOptions.value) == null ? void 0 : _a.priceKeys) != null ? _b : [];
@@ -27934,7 +28013,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     });
     const statsSummary = computed(() => {
       const [min, max] = sliderRange.value;
-      return isPrice.value ? formatPriceSummary([min, max], currency.value, separator.value) : formatRange({ gte: min, lte: max });
+      return isPrice.value ? formatPriceSummary([min, max], currency.value, separator.value, currencyTemplate.value) : formatRange({ gte: min, lte: max });
     });
     const separator = computed(() => {
       var _a, _b, _c;
@@ -29587,11 +29666,12 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const price = computed(() => {
-      var _a, _b;
+      var _a, _b, _c;
       return formatPrice(
         props.item[props.options.key],
         (_a = props.labels) == null ? void 0 : _a.currency,
-        (_b = props.labels) == null ? void 0 : _b.priceSeparator
+        (_b = props.labels) == null ? void 0 : _b.priceSeparator,
+        (_c = props.labels) == null ? void 0 : _c.currencyTemplate
       );
     });
     return (_ctx, _cache) => {
@@ -29612,11 +29692,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
       return props.options.className;
     });
     const price = computed(() => {
-      var _a, _b;
+      var _a, _b, _c;
       return formatPrice(
         props.item[props.options.key],
         (_a = props.labels) == null ? void 0 : _a.currency,
-        (_b = props.labels) == null ? void 0 : _b.priceSeparator
+        (_b = props.labels) == null ? void 0 : _b.priceSeparator,
+        (_c = props.labels) == null ? void 0 : _c.currencyTemplate
       );
     });
     return (_ctx, _cache) => {
@@ -39559,6 +39640,33 @@ const attatchShadowDom = ({
     shadow.appendChild(style);
   }
 };
+const createDomPing = () => {
+  let intervalId = null;
+  let remaining = 0;
+  return (intervalMs = 100, count = 50) => {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+    }
+    remaining = count;
+    const flush = () => {
+      if (remaining-- <= 0) {
+        if (intervalId !== null) {
+          clearInterval(intervalId);
+          intervalId = null;
+        }
+        return;
+      }
+      const el = document.createElement("div");
+      el.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;";
+      el.setAttribute("data-nudge", Date.now().toString());
+      document.body.appendChild(el);
+      document.body.removeChild(el);
+    };
+    flush();
+    intervalId = window.setInterval(flush, intervalMs);
+  };
+};
+const startDomPing = createDomPing();
 const getMountElement = (element, mountingBehavior = "replace", mountToParent) => {
   const parent = element == null ? void 0 : element.parentElement;
   if (mountingBehavior === "replace") {
@@ -39614,6 +39722,58 @@ const app = {
   recommendations: {},
   chat: {}
 };
+const addSearchBoxDomPingIfConfigured = (options, mountOptions) => {
+  var _a;
+  if (!((_a = mountOptions == null ? void 0 : mountOptions.domPing) == null ? void 0 : _a.count)) {
+    return options;
+  }
+  const newOptions = __spreadProps(__spreadValues({}, options), {
+    callbacks: {
+      onMounted: () => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onMounted) == null ? void 0 : _b.call(_a2);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      },
+      onBlurred: () => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onBlurred) == null ? void 0 : _b.call(_a2);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      },
+      onFocused: () => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onFocused) == null ? void 0 : _b.call(_a2);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      },
+      onSearchBoxInput: (...args) => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onSearchBoxInput) == null ? void 0 : _b.call(_a2, ...args);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      }
+    }
+  });
+  return newOptions;
+};
+const addSearchResultsDomPingIfConfigured = (options, mountOptions) => {
+  var _a;
+  if (!((_a = mountOptions == null ? void 0 : mountOptions.domPing) == null ? void 0 : _a.count)) {
+    return options;
+  }
+  const newOptions = __spreadProps(__spreadValues({}, options), {
+    callbacks: {
+      onMounted: () => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onMounted) == null ? void 0 : _b.call(_a2);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      },
+      onUrlQueryChange: (...args) => {
+        var _a2, _b;
+        (_b = (_a2 = options.callbacks) == null ? void 0 : _a2.onUrlQueryChange) == null ? void 0 : _b.call(_a2, ...args);
+        startDomPing(mountOptions.domPing.intervalMs, mountOptions.domPing.count);
+      }
+    }
+  });
+  return newOptions;
+};
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
   if (existingInstance) {
@@ -39643,9 +39803,10 @@ const searchBox = (options, mountOptions) => {
   if (!canMount(mountOptions == null ? void 0 : mountOptions.allowedMountUrls)) {
     return;
   }
+  const transformedOptions = addSearchBoxDomPingIfConfigured(options, mountOptions);
   const inputs = (_a = options.inputSelector) == null ? void 0 : _a.split(",");
   for (const input2 of inputs) {
-    applySearchBox(__spreadProps(__spreadValues({}, options), { inputSelector: input2.trim() }), mountOptions);
+    applySearchBox(__spreadProps(__spreadValues({}, transformedOptions), { inputSelector: input2.trim() }), mountOptions);
   }
 };
 const searchResults = (options, mountOptions) => {
@@ -39663,12 +39824,13 @@ const searchResults = (options, mountOptions) => {
     }
     return;
   }
+  const transformedOptions = addSearchResultsDomPingIfConfigured(options, mountOptions);
   const instance = createVue(
     options.containerSelector,
     mountOptions == null ? void 0 : mountOptions.mountingBehavior,
     _sfc_main$3,
     {
-      searchResultsOptions: options
+      searchResultsOptions: transformedOptions
     }
   );
   if (!instance) {
@@ -40108,6 +40270,7 @@ const mountSearchBox = (configuration, options, optionOverrides, fetch2 = true,
   }
   const resolvedConfiguration = JSON.parse(configuration.searchBox);
   const allowedMountUrls = resolvedConfiguration.allowedMountUrls;
+  const domPing = resolvedConfiguration.domPing;
   const visible = yield waitForElementToBeVisible(
     resolvedConfiguration.inputSelector,
     0,
@@ -40123,7 +40286,7 @@ const mountSearchBox = (configuration, options, optionOverrides, fetch2 = true,
     resolvedConfiguration,
     (_a = optionOverrides == null ? void 0 : optionOverrides.searchBox) != null ? _a : {}
   );
-  searchBox(__spreadProps(__spreadValues({}, mergedOptions), { options }), { fetch: fetch2, allowedMountUrls });
+  searchBox(__spreadProps(__spreadValues({}, mergedOptions), { options }), { fetch: fetch2, allowedMountUrls, domPing });
 });
 const mountSearchResults = (configuration, options, optionOverrides, fetch2 = true, remount = false) => __async(void 0, null, function* () {
   var _a;
@@ -40132,6 +40295,7 @@ const mountSearchResults = (configuration, options, optionOverrides, fetch2 = tr
   }
   const resolvedConfiguration = JSON.parse(configuration.searchResults);
   const allowedMountUrls = resolvedConfiguration.allowedMountUrls;
+  const domPing = resolvedConfiguration.domPing;
   const visible = yield waitForElementToBeVisible(
     resolvedConfiguration.containerSelector,
     0,
@@ -40147,7 +40311,7 @@ const mountSearchResults = (configuration, options, optionOverrides, fetch2 = tr
     resolvedConfiguration,
     (_a = optionOverrides == null ? void 0 : optionOverrides.searchResults) != null ? _a : {}
   );
-  searchResults(__spreadProps(__spreadValues({}, mergedOptions), { options }), { fetch: fetch2, allowedMountUrls });
+  searchResults(__spreadProps(__spreadValues({}, mergedOptions), { options }), { fetch: fetch2, allowedMountUrls, domPing });
 });
 const mountProductList = (configuration, options, optionOverrides, fetch2 = true, remount = false) => __async(void 0, null, function* () {
   var _a;