@getlupa/client 1.6.6 → 1.8.0-alpha.0

package/dist/lupaSearch.iife.js

@@ -81,11 +81,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   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) => {
@@ -2115,7 +2115,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           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;
         }
       }
@@ -2132,7 +2132,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
   }
   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;
@@ -5378,7 +5378,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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) {
@@ -6324,7 +6324,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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 "";
     }
@@ -6373,7 +6373,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     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 "";
     }
@@ -7062,7 +7062,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     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)
       });
     });
   };
@@ -7107,9 +7107,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   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()]));
@@ -8953,6 +8953,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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,
@@ -8967,12 +8971,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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, {
@@ -9007,7 +9012,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               isInStock: isInStock.value
             }, null, 8, ["item", "element", "labels", "link", "isInStock"])
           ])) : createCommentVNode("", true)
-        ], 10, _hoisted_1$_);
+        ], 16, _hoisted_1$_);
       };
     }
   });
@@ -13519,6 +13524,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
         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 : [];
@@ -13575,12 +13584,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       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])
@@ -13642,7 +13650,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               ], 2);
             }), 128))
           ], 2)
-        ], 2);
+        ], 16);
       };
     }
   });
@@ -13683,7 +13691,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         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,
@@ -13969,7 +13977,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           "queryKey",
           "idKey",
           "titleKey",
-          "routingBehavior"
+          "routingBehavior",
+          "customDocumentHtmlAttributes"
         ]);
       });
       const similarQueriesLabels = computed(() => {
@@ -27412,6 +27421,328 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       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: {},
@@ -27546,6 +27877,23 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     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) {
@@ -27683,7 +28031,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     clearSearchContainer,
     clearRecommendations,
     chat,
-    clearChat
+    clearChat,
+    preconfiguredSearchContainer,
+    getSearchBoxComponent: SearchContainerConfigurationService.getSearchBoxComponent,
+    getSearchResultsComponent: SearchContainerConfigurationService.getSearchResultsComponent
   };
   if (typeof window !== "undefined") {
     window.getLupa = lupaSearch;