@getlupa/client 1.6.6 → 1.8.0-alpha.0

package/dist/lupaSearch.mjs

@@ -79,11 +79,11 @@ const hyphenateRE = /\B([A-Z])/g;
 const hyphenate = cacheStringFunction(
   (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
 );
-const capitalize$1 = cacheStringFunction(
+const capitalize$2 = cacheStringFunction(
   (str) => str.charAt(0).toUpperCase() + str.slice(1)
 );
 const toHandlerKey = cacheStringFunction(
-  (str) => str ? `on${capitalize$1(str)}` : ``
+  (str) => str ? `on${capitalize$2(str)}` : ``
 );
 const hasChanged = (value, oldValue) => !Object.is(value, oldValue);
 const invokeArrayFns = (fns, arg) => {
@@ -2113,7 +2113,7 @@ function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false
         false
         /* do not include inferred name to avoid breaking existing code */
       );
-      if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize$1(camelize(name)))) {
+      if (selfName && (selfName === name || selfName === camelize(name) || selfName === capitalize$2(camelize(name)))) {
         return Component;
       }
     }
@@ -2130,7 +2130,7 @@ function resolveAsset(type, name, warnMissing = true, maybeSelfReference = false
   }
 }
 function resolve(registry, name) {
-  return registry && (registry[name] || registry[camelize(name)] || registry[capitalize$1(camelize(name))]);
+  return registry && (registry[name] || registry[camelize(name)] || registry[capitalize$2(camelize(name))]);
 }
 function renderList(source, renderItem, cache, index) {
   let ret;
@@ -5376,7 +5376,7 @@ function autoPrefix(style, rawName) {
   if (name !== "filter" && name in style) {
     return prefixCache[rawName] = name;
   }
-  name = capitalize$1(name);
+  name = capitalize$2(name);
   for (let i = 0; i < prefixes.length; i++) {
     const prefixed = prefixes[i] + name;
     if (prefixed in style) {
@@ -6322,7 +6322,7 @@ const getNormalizedString = (str) => {
   const transformedStr = typeof str === "string" ? str : str.toString();
   return transformedStr.normalize === void 0 ? transformedStr.toLocaleLowerCase() : transformedStr.toLocaleLowerCase().normalize("NFKD").replace(/[^\w\s.-_/]/g, "");
 };
-const capitalize = (str) => {
+const capitalize$1 = (str) => {
   if (!str) {
     return "";
   }
@@ -6371,7 +6371,7 @@ const normalizeFloat = (value) => {
   }
   return +((_a = value == null ? void 0 : value.replace(/[^0-9,.]/g, "")) == null ? void 0 : _a.replace(",", "."));
 };
-const escapeHtml = (value) => {
+const escapeHtml$1 = (value) => {
   if (!value) {
     return "";
   }
@@ -7060,7 +7060,7 @@ const getLabeledFilters = (filters, facets) => {
   return filters.map((f2) => {
     var _a, _b;
     return __spreadProps2(__spreadValues2({}, f2), {
-      label: (_b = (_a = facets == null ? void 0 : facets.find((ft) => ft.key === f2.key)) == null ? void 0 : _a.label) != null ? _b : capitalize(f2.key)
+      label: (_b = (_a = facets == null ? void 0 : facets.find((ft) => ft.key === f2.key)) == null ? void 0 : _a.label) != null ? _b : capitalize$1(f2.key)
     });
   });
 };
@@ -7105,9 +7105,9 @@ const pick = (obj, keys) => {
 const getHint = (suggestion, inputValue) => {
   var _a;
   if (!inputValue) {
-    return escapeHtml(suggestion);
+    return escapeHtml$1(suggestion);
   }
-  return (_a = suggestion == null ? void 0 : suggestion.replace(inputValue, `<strong>${escapeHtml(inputValue)}</strong>`)) != null ? _a : "";
+  return (_a = suggestion == null ? void 0 : suggestion.replace(inputValue, `<strong>${escapeHtml$1(inputValue)}</strong>`)) != null ? _a : "";
 };
 const reverseKeyValue = (obj) => {
   return Object.fromEntries(Object.entries(obj).map(([k, v]) => [v, k.toLowerCase()]));
@@ -8951,6 +8951,10 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       var _a;
       return (_a = props.panelOptions.elements) == null ? void 0 : _a.find((e) => e.type === DocumentElementType.ADDTOCART);
     });
+    const customDocumentHtmlAttributes = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.panelOptions).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.item)) != null ? _c : {};
+    });
     const handleClick = (event) => {
       emit2("product-click", {
         item: props.item,
@@ -8965,12 +8969,13 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       isInStock.value = props.panelOptions.isInStock ? yield props.panelOptions.isInStock(props.item) : true;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("a", {
-        class: normalizeClass(["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }]),
+      return openBlock(), createElementBlock("a", mergeProps({
+        class: ["lupa-search-box-product", { "lupa-search-box-product-highlighted": _ctx.highlighted }],
+        href: link.value
+      }, customDocumentHtmlAttributes.value, {
         "data-cy": "lupa-search-box-product",
-        href: link.value,
         onClick: handleClick
-      }, [
+      }), [
         createBaseVNode("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
             return openBlock(), createBlock(_sfc_main$13, {
@@ -9005,7 +9010,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
             isInStock: isInStock.value
           }, null, 8, ["item", "element", "labels", "link", "isInStock"])
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$_);
+      ], 16, _hoisted_1$_);
     };
   }
 });
@@ -13517,6 +13522,10 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
       }
       return (_b = (_a = props.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.htmlTitleTemplate;
     });
+    const customDocumentHtmlAttributes = computed(() => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = props.options).customDocumentHtmlAttributes) == null ? void 0 : _b.call(_a, props.product)) != null ? _c : {};
+    });
     const getGroupElements = (group) => {
       var _a, _b;
       return (_b = (_a = props.options.elements) == null ? void 0 : _a.filter((e) => e.group === group)) != null ? _b : [];
@@ -13573,12 +13582,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       var _a;
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createElementBlock("div", mergeProps({
         id: "lupa-search-result-product-card",
         "data-cy": "lupa-search-result-product-card",
-        class: normalizeClass(["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]),
-        onClick: handleClick
-      }, [
+        class: ["lupa-search-result-product-card", !isInStock.value ? "lupa-out-of-stock" : ""]
+      }, customDocumentHtmlAttributes.value, { onClick: handleClick }), [
         createVNode(_sfc_main$w, { options: badgesOptions.value }, null, 8, ["options"]),
         createBaseVNode("div", {
           class: normalizeClass(["lupa-search-result-product-contents", listLayoutClass.value])
@@ -13640,7 +13648,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ], 2);
           }), 128))
         ], 2)
-      ], 2);
+      ], 16);
     };
   }
 });
@@ -13681,7 +13689,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return (_b = (_a = props.labels.similarQuery) == null ? void 0 : _a.replace("{1}", "")) != null ? _b : "";
     });
     const getSimilarQueryContent = (displayQuery) => {
-      return escapeHtml(displayQuery);
+      return escapeHtml$1(displayQuery);
     };
     const goToResults = ({
       searchText,
@@ -13967,7 +13975,8 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
         "queryKey",
         "idKey",
         "titleKey",
-        "routingBehavior"
+        "routingBehavior",
+        "customDocumentHtmlAttributes"
       ]);
     });
     const similarQueriesLabels = computed(() => {
@@ -27410,6 +27419,328 @@ const attatchShadowDom = ({
     shadow.appendChild(style);
   }
 };
+const displayDiscountedPriceSection = (doc2, options) => {
+  var _a, _b;
+  const discountPrice = doc2[(_a = options.fields.discountPriceKey) != null ? _a : ""];
+  const regularPrice = doc2[(_b = options.fields.regularPriceKey) != null ? _b : ""];
+  return discountPrice && regularPrice && discountPrice < regularPrice;
+};
+const displayRegularPriceSection = (doc2, options) => {
+  var _a, _b;
+  const discountPrice = doc2[(_a = options.fields.discountPriceKey) != null ? _a : ""];
+  const regularPrice = doc2[(_b = options.fields.regularPriceKey) != null ? _b : ""];
+  const anyPrice = discountPrice || regularPrice;
+  return anyPrice && !displayDiscountedPriceSection(doc2, options);
+};
+const escapeHtml = (source) => {
+  if (!source) {
+    return source;
+  }
+  return `${source}`.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+};
+const toMaxDecimalPlaces = (value, maxDecimal = 2) => {
+  if (!value) {
+    return 0;
+  }
+  try {
+    return +parseFloat(`${value}`).toFixed(maxDecimal);
+  } catch (e) {
+    return `${value}`;
+  }
+};
+const capitalize = (value) => {
+  if (!value) {
+    return "";
+  }
+  return value.charAt(0).toLocaleUpperCase() + value.slice(1);
+};
+const getAlphanumeric = (value) => {
+  if (!value) {
+    return "";
+  }
+  return value.replace(/[\W_]/g, " ");
+};
+const getAdditionalElements = (fields) => {
+  return fields.map((key) => ({
+    type: "custom",
+    key,
+    label: capitalize(getAlphanumeric(key)),
+    className: "lupa-custom",
+    display: (doc2) => Boolean(doc2[key])
+  }));
+};
+const addFieldIfKeyExists = (field, key, config) => {
+  if (key) {
+    return config;
+  }
+  return { key: field, type: "customHtml", display: () => false };
+};
+const getSearchBoxComponent = ({
+  searchBoxOptions,
+  labels,
+  panelOptions,
+  redirections,
+  placeholderImage
+}) => {
+  var _a, _b;
+  const panels = [
+    ...(panelOptions == null ? void 0 : panelOptions.suggestionPanel) ? [
+      {
+        type: SearchBoxPanelType.SUGGESTION,
+        queryKey: searchBoxOptions.suggestionQueryKey,
+        highlight: true,
+        limit: 8,
+        labels: {
+          topResultsTitle: labels.searchBox.topSuggestionsTitle
+        }
+      }
+    ] : [],
+    ...(panelOptions == null ? void 0 : panelOptions.docPanel) ? [
+      {
+        type: SearchBoxPanelType.DOCUMENT,
+        queryKey: searchBoxOptions.documentQueryKey,
+        limit: 5,
+        elements: [
+          {
+            type: "image",
+            placeholder: placeholderImage,
+            key: searchBoxOptions.fields.imageKey,
+            baseUrl: searchBoxOptions.fields.baseImageUrl
+          },
+          {
+            type: "title",
+            key: searchBoxOptions.fields.titleKey,
+            maxLines: 2
+          },
+          {
+            type: "regularPrice",
+            key: searchBoxOptions.fields.regularPriceKey,
+            display: (doc2) => searchBoxOptions.fields.regularPriceKey && searchBoxOptions.fields.discountPriceKey && parseFloat(doc2[searchBoxOptions.fields.regularPriceKey]) > parseFloat(doc2[searchBoxOptions.fields.discountPriceKey])
+          },
+          {
+            type: "price",
+            key: searchBoxOptions.fields.discountPriceKey
+          }
+        ]
+      }
+    ] : []
+  ];
+  return {
+    inputSelector: searchBoxOptions.inputSelector,
+    options: {
+      environment: (_a = searchBoxOptions.environment) != null ? _a : "production",
+      customUrl: searchBoxOptions.customUrl,
+      customBaseUrl: searchBoxOptions.customBaseUrl,
+      customPayload: searchBoxOptions.customPayload,
+      customHeaders: searchBoxOptions.customHeaders
+    },
+    showTotalCount: true,
+    expandOnSinglePanel: true,
+    minInputLength: (_b = searchBoxOptions.fields.minInputLength) != null ? _b : 0,
+    debounce: 250,
+    labels: labels.searchBox,
+    links: {
+      searchResults: ""
+    },
+    panels,
+    redirections,
+    history: {
+      labels: {
+        clear: labels.searchBox.clearHistory
+      }
+    }
+  };
+};
+const getSearchResultsComponent = ({
+  searchResultOptions,
+  labels,
+  redirections,
+  placeholderImage,
+  configuratorOverrides,
+  callbacks,
+  additionalFields
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const filters = searchResultOptions.showFacets ? {
+    currentFilters: {
+      visibility: {
+        mobileSidebar: true,
+        mobileToolbar: true
+      },
+      labels: {
+        title: "",
+        clearAll: (_a = labels.facets) == null ? void 0 : _a.clearAll
+      }
+    },
+    facets: {
+      labels: {
+        title: labels.facets.facetTitle,
+        showAll: labels.facets.showAll,
+        facetFilter: labels.facets.facetFilter,
+        facetClear: labels.facets.facetClear
+      },
+      filterable: {
+        minValues: 5
+      },
+      hierarchy: {
+        maxInitialLevel: 2,
+        topLevelValueCountLimit: 5,
+        filterable: true
+      },
+      stats: {
+        slider: true,
+        inputs: true,
+        labels: {
+          from: "",
+          to: ""
+        }
+      },
+      facetValueCountLimit: 8,
+      showDocumentCount: true,
+      style: {
+        type: "sidebar"
+      }
+    }
+  } : {};
+  const columns = (_g = searchResultOptions.gridConfiguration) != null ? _g : {
+    xl: (_b = searchResultOptions.maxColumns) != null ? _b : 4,
+    l: (_c = searchResultOptions.maxColumns) != null ? _c : 3,
+    md: (_d = searchResultOptions.maxColumns) != null ? _d : 3,
+    sm: (_e = searchResultOptions.maxColumns) != null ? _e : 2,
+    xs: (_f = searchResultOptions.maxColumns) != null ? _f : 1
+  };
+  const badges = searchResultOptions.showRelevance ? {
+    badges: {
+      anchor: "tr",
+      elements: [
+        {
+          key: "",
+          type: "customHtml",
+          className: "relevance",
+          html: (doc2) => `${toMaxDecimalPlaces(escapeHtml(doc2._relevance), 3)}`,
+          display: (doc2) => Boolean(doc2._relevance !== void 0)
+        }
+      ]
+    }
+  } : {};
+  return __spreadValues(__spreadProps(__spreadValues({
+    options: {
+      environment: (_h = searchResultOptions.environment) != null ? _h : "production",
+      customUrl: searchResultOptions.customUrl,
+      customBaseUrl: searchResultOptions.customBaseUrl,
+      customPayload: searchResultOptions.customPayload,
+      customHeaders: searchResultOptions.customHeaders,
+      onError: searchResultOptions.errorHandler
+    },
+    queryKey: searchResultOptions.queryKey,
+    containerSelector: searchResultOptions.containerSelector,
+    searchTitlePosition: "search-results-top",
+    titleKey: searchResultOptions.fields.titleKey,
+    labels: labels.searchResults,
+    grid: {
+      columns
+    },
+    pagination: {
+      sizeSelection: {
+        position: {
+          top: true,
+          bottom: false
+        },
+        sizes: [12, 24, 36, 48]
+      },
+      pageSelection: {
+        position: {
+          top: false,
+          bottom: true
+        },
+        displayMobile: 3,
+        display: 5
+      }
+    },
+    filters,
+    toolbar: {
+      layoutSelector: false,
+      itemSummary: true,
+      clearFilters: false
+    },
+    isInStock: () => {
+      return true;
+    }
+  }, badges), {
+    links: {
+      details: searchResultOptions.fields.productUrl ? `{${searchResultOptions.fields.productUrl}}` : void 0
+    },
+    callbacks,
+    routingBehavior: callbacks ? "event" : "direct-link",
+    idKey: "id",
+    elements: [
+      {
+        type: "image",
+        placeholder: placeholderImage,
+        key: searchResultOptions.fields.imageKey,
+        baseUrl: searchResultOptions.fields.baseImageUrl,
+        display: () => searchResultOptions.fields.imageKey
+      },
+      addFieldIfKeyExists("_emphasis", (_i = searchResultOptions.fields) == null ? void 0 : _i.emphasizedField, {
+        type: "custom",
+        className: "lupa-custom-emphasis",
+        key: searchResultOptions.fields.emphasizedField,
+        display: () => true
+      }),
+      {
+        type: "title",
+        key: searchResultOptions.fields.titleKey,
+        maxLines: (_j = searchResultOptions.maxLines) != null ? _j : 2,
+        display: (doc2) => searchResultOptions.fields.titleKey && Boolean(doc2[searchResultOptions.fields.titleKey])
+      },
+      ...getAdditionalElements(additionalFields),
+      addFieldIfKeyExists("_discountPrice", searchResultOptions.fields.discountPriceKey, {
+        key: searchResultOptions.fields.discountPriceKey,
+        type: "customHtml",
+        className: "lupa-price lupa-price-discounted",
+        display: (doc2) => displayDiscountedPriceSection(doc2, searchResultOptions),
+        html: (doc2) => {
+          var _a2, _b2, _c2, _d2;
+          const currency = escapeHtml(searchResultOptions.fields.currency || "€");
+          const discountPrice = (_b2 = parseFloat(
+            doc2[(_a2 = searchResultOptions.fields.discountPriceKey) != null ? _a2 : ""]
+          )) == null ? void 0 : _b2.toFixed(2);
+          const regularPrice = (_d2 = parseFloat(
+            doc2[(_c2 = searchResultOptions.fields.regularPriceKey) != null ? _c2 : ""]
+          )) == null ? void 0 : _d2.toFixed(2);
+          const discount = `<span class="lupa-discount">${escapeHtml(
+            discountPrice
+          )} ${currency}</span>`;
+          const regular = `<span class="lupa-regular">${escapeHtml(
+            regularPrice
+          )} ${currency}</span>`;
+          return discount + regular;
+        }
+      }),
+      addFieldIfKeyExists("_regularPrice", searchResultOptions.fields.regularPriceKey, {
+        key: searchResultOptions.fields.regularPriceKey,
+        type: "customHtml",
+        className: "lupa-price lupa-price-single",
+        display: (doc2) => displayRegularPriceSection(doc2, searchResultOptions),
+        html: (doc2) => {
+          var _a2, _b2, _c2, _d2;
+          const currency = escapeHtml(searchResultOptions.fields.currency || "€");
+          const price = (_d2 = parseFloat(
+            (_c2 = doc2[(_a2 = searchResultOptions.fields.regularPriceKey) != null ? _a2 : ""]) != null ? _c2 : doc2[(_b2 = searchResultOptions.fields.discountPriceKey) != null ? _b2 : ""]
+          )) == null ? void 0 : _d2.toFixed(2);
+          return `<span class="lupa-final">${escapeHtml(price)} ${currency}</span>`;
+        }
+      })
+    ],
+    breadcrumbs: [],
+    sort: [],
+    redirections
+  }), configuratorOverrides);
+};
+const SearchContainerConfigurationService = {
+  getSearchBoxComponent,
+  getSearchResultsComponent
+};
 const app = {
   box: {},
   results: {},
@@ -27544,6 +27875,23 @@ const searchContainer = (options, mountOptions) => {
   }
   app.searchContainer[options.trigger] = instance;
 };
+const preconfiguredSearchContainer = (preconfiguredSearchContainerOptions, mountOptions) => {
+  const searchBox2 = SearchContainerConfigurationService.getSearchBoxComponent(
+    preconfiguredSearchContainerOptions
+  );
+  const searchResults2 = SearchContainerConfigurationService.getSearchResultsComponent(
+    preconfiguredSearchContainerOptions
+  );
+  searchContainer(
+    {
+      trigger: preconfiguredSearchContainerOptions.trigger,
+      searchBox: searchBox2,
+      searchResults: searchResults2,
+      options: preconfiguredSearchContainerOptions.configuration
+    },
+    mountOptions
+  );
+};
 const recommendations = (options, mountOptions) => {
   const existingInstance = app.recommendations[options.containerSelector];
   if (existingInstance) {
@@ -27681,7 +28029,10 @@ const lupaSearch = {
   clearSearchContainer,
   clearRecommendations,
   chat,
-  clearChat
+  clearChat,
+  preconfiguredSearchContainer,
+  getSearchBoxComponent: SearchContainerConfigurationService.getSearchBoxComponent,
+  getSearchResultsComponent: SearchContainerConfigurationService.getSearchResultsComponent
 };
 if (typeof window !== "undefined") {
   window.getLupa = lupaSearch;