@getlupa/client 0.10.1 → 0.10.3

package/dist/cjs/index.min.js

@@ -10984,7 +10984,7 @@ let SearchBoxInput = class SearchBoxInput extends Vue$1 {
         if (target) {
             this.inputValue = target.value;
         }
-        this.$emit("input", this.inputValue.replace(/\s+$/, ""));
+        this.$emit("input", this.inputValue);
     }
     handleFocus() {
         this.$emit("focus");
@@ -10992,6 +10992,13 @@ let SearchBoxInput = class SearchBoxInput extends Vue$1 {
             this.handleInput();
         }
     }
+    clear() {
+        this.$emit("input", "");
+    }
+    focus() {
+        var _a, _b;
+        (_b = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.mainInput) === null || _b === void 0 ? void 0 : _b.focus();
+    }
 };
 __decorate([
     Prop()
@@ -11161,6 +11168,14 @@ var __vue_render__$1b = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { attrs: { id: "lupa-search-box-input-container" } }, [
+    _c("div", { staticClass: "lupa-input-clear" }, [
+      _c("div", {
+        staticClass: "lupa-input-clear-content",
+        class: { "lupa-input-clear-filled": _vm.inputValue },
+        on: { click: _vm.clear },
+      }),
+    ]),
+    _vm._v(" "),
     _c("div", { attrs: { id: "lupa-search-box-input" } }, [
       _c("input", {
         staticClass: "lupa-hint",
@@ -11182,6 +11197,7 @@ var __vue_render__$1b = function () {
                 expression: "inputValue",
               },
             ],
+            ref: "mainInput",
             staticClass: "lupa-search-box-input-field",
             attrs: {
               autocomplete: "off",
@@ -11221,7 +11237,13 @@ var __vue_render__$1b = function () {
               },
             },
           },
-          [_c("span", { staticClass: "lupa-close-action" }, [_vm._v("×")])]
+          [
+            _vm.labels.close
+              ? _c("span", { staticClass: "lupa-close-label" }, [
+                  _vm._v(_vm._s(_vm.labels.close)),
+                ])
+              : _vm._e(),
+          ]
         )
       : _vm._e(),
   ])
@@ -11232,7 +11254,7 @@ __vue_render__$1b._withStripped = true;
   /* style */
   const __vue_inject_styles__$1b = function (inject) {
     if (!inject) return
-    inject("data-v-ccec518c_0", { source: "\n.lupa-search-box-input-field,\n.lupa-hint {\n  width: 100%;\n}\n.lupa-search-box-input-field {\n  position: relative !important;\n  background: transparent !important;\n}\n.lupa-hint {\n  opacity: 0.5;\n  position: absolute !important;\n  pointer-events: none;\n}\n", map: undefined, media: undefined });
+    inject("data-v-219ea03b_0", { source: "\n.lupa-search-box-input-field,\n.lupa-hint {\n  width: 100%;\n}\n.lupa-search-box-input-field {\n  position: relative !important;\n  background: transparent !important;\n}\n.lupa-hint {\n  opacity: 0.5;\n  position: absolute !important;\n  pointer-events: none;\n}\n.lupa-input-clear {\n  display: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -11966,7 +11988,8 @@ const MAX_FACET_VALUES = 5000;
 const CURRENCY_KEY_INDICATOR = "price";
 const DEFAULT_PAGE_SIZE = 12;
 const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
-const LUPA_ROUTING_EVENT = "lupaRedirect";
+const LUPA_ROUTING_EVENT = "lupaRedirect";
+const DEFAULT_CONTAINER_STYLE = "containerStyle.css";
 
 const formatRange = (filter) => {
     var _a, _b;
@@ -12214,7 +12237,7 @@ const getRelativePath = (link) => {
     }
     catch (_a) {
         // Invalid url, let's return original string
-        return link;
+        return (link === null || link === void 0 ? void 0 : link.endsWith("/")) ? link.slice(0, link.length - 1) : link;
     }
 };
 // Checks if url links match absolutely, or if their relative parts are equal
@@ -12272,7 +12295,18 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
         }
         return "";
     }
+    get title() {
+        if (!this.panelOptions.titleKey) {
+            return "";
+        }
+        const title = this.item[this.panelOptions.titleKey] || "";
+        this.addHistory({
+            item: title,
+        });
+        return title;
+    }
     handleClick(event) {
+        var _a;
         if (this.panelOptions.titleKey) {
             this.addHistory({
                 item: this.item[this.panelOptions.titleKey] || "",
@@ -12289,7 +12323,7 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
                 type: "itemClick",
                 analytics: {
                     type: "autocomplete_product_click",
-                    label: this.link,
+                    label: (_a = this.title) !== null && _a !== void 0 ? _a : this.link,
                 },
             },
         });
@@ -13332,8 +13366,9 @@ let SearchBoxMainPanel = class SearchBoxMainPanel extends Vue$1 {
         this.sdkOptions = this.options.options;
     }
     get displayResults() {
-        var _a;
-        return ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.options.minInputLength;
+        var _a, _b;
+        return (((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            ((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.length) >= this.options.minInputLength);
     }
     get displayHistory() {
         var _a;
@@ -13532,7 +13567,7 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-d48b96f0_0", { source: "#lupa-search-box-panel {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n}\n.lupa-more-results {\n  text-align: center;\n}", map: undefined, media: undefined });
+    inject("data-v-947d134e_0", { source: "#lupa-search-box-panel {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n}\n.lupa-more-results {\n  text-align: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -30824,12 +30859,16 @@ let SearchBox = class SearchBox extends Vue$1 {
         return (_a = this.options.searchTriggers) !== null && _a !== void 0 ? _a : [];
     }
     mounted() {
+        var _a, _b;
         window.addEventListener("keydown", this.handleKeyDown);
         window.addEventListener("click", this.handleMouseClick);
         this.setSearchResultsLink(this.options.links.searchResults);
         this.saveOptions({ options: this.options });
         this.setSearchBoxOptions({ options: this.options });
         bindSearchTriggers(this.searchTriggers, this.handleCurrentValueSearch);
+        if (this.isSearchContainer) {
+            (_b = (_a = this.$refs) === null || _a === void 0 ? void 0 : _a.searchBoxInput) === null || _b === void 0 ? void 0 : _b.focus();
+        }
     }
     beforeDestroy() {
         window.removeEventListener("keydown", this.handleKeyDown);
@@ -30867,11 +30906,12 @@ let SearchBox = class SearchBox extends Vue$1 {
     }
     handleInput(value) {
         this.opened = true;
-        this.inputValue = value;
+        this.inputValue = value.replace(/\s+$/, "");
         this.suggestedValue = defaultSuggestedValue;
+        this.trackSearchQuery(value);
         if (this.isSearchContainer) {
             this.goToResultsDebounced({
-                searchText: this.searchValue,
+                searchText: value,
             });
         }
     }
@@ -30961,11 +31001,22 @@ let SearchBox = class SearchBox extends Vue$1 {
                 type: "itemClick",
                 analytics: {
                     type: "autocomplete_product_click",
-                    label: doc.doc.url || doc.id,
+                    label: doc.title || doc.id,
                 },
             },
         });
     }
+    trackSearchQuery(query) {
+        if (!query) {
+            return;
+        }
+        this.trackSearch({
+            queryKey: this.suggestedValue.queryKey,
+            query: {
+                searchText: query,
+            },
+        });
+    }
     trackSuggestionClick(suggestion) {
         var _a;
         if (suggestion ||
@@ -30980,7 +31031,7 @@ let SearchBox = class SearchBox extends Vue$1 {
                 searchQuery: this.inputValue,
                 type: "suggestionClick",
                 analytics: {
-                    type: "autocomplete_keyword_click",
+                    type: "autocomplete_suggestion_click",
                     label: suggestion || this.searchValue,
                 },
             },
@@ -31012,6 +31063,9 @@ __decorate([
 __decorate([
     tracking$4.Action("track")
 ], SearchBox.prototype, "trackClick", void 0);
+__decorate([
+    tracking$4.Action("trackSearch")
+], SearchBox.prototype, "trackSearch", void 0);
 __decorate([
     params$e.Action("setSearchResultsLink")
 ], SearchBox.prototype, "setSearchResultsLink", void 0);
@@ -31046,6 +31100,7 @@ var __vue_render__$U = function () {
       { staticClass: "lupa-search-box-wrapper" },
       [
         _c("SearchBoxInput", {
+          ref: "searchBoxInput",
           attrs: {
             options: _vm.inputOptions,
             suggestedValue: _vm.suggestedValue,
@@ -31085,7 +31140,7 @@ __vue_render__$U._withStripped = true;
   /* style */
   const __vue_inject_styles__$U = function (inject) {
     if (!inject) return
-    inject("data-v-ed058b02_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
+    inject("data-v-49023ab6_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -33062,6 +33117,7 @@ __vue_render__$L._withStripped = true;
   );
 
 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) {
@@ -33072,12 +33128,19 @@ const scrollToSearchResults = (timeout = 500) => {
     }
 };
 const scrollTo = (elementId) => {
-    const el = document.getElementById(elementId);
+    var _a, _b;
+    let el = document.getElementById(elementId);
+    const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+    if (!el) {
+        el = (_b = shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.getElementById(elementId)) !== null && _b !== void 0 ? _b : null;
+    }
     if (!el) {
         return;
     }
-    const serchContainer = document.getElementById(CONTAINER_ROOT_ID);
-    const container = serchContainer !== null && serchContainer !== void 0 ? serchContainer : window;
+    const searchContainer = shadowRoot
+        ? shadowRoot.getElementById(CONTAINER_ROOT_ID)
+        : undefined;
+    const container = searchContainer !== null && searchContainer !== void 0 ? searchContainer : window;
     container.scrollTo({
         top: el.offsetTop,
         behavior: "smooth",
@@ -34543,6 +34606,7 @@ var __vue_render__$x = function () {
         {
           staticClass: "lupa-search-results-product-title",
           style: "-webkit-line-clamp: " + _vm.maxLines,
+          attrs: { title: _vm.title },
         },
         [
           !_vm.options.link
@@ -35047,9 +35111,17 @@ __vue_render__$s._withStripped = true;
   );
 
 let SearchResultsProductCustom = class SearchResultsProductCustom extends Vue$1 {
-    get text() {
+    get value() {
         return this.item[this.options.key];
     }
+    get text() {
+        return this.isArray
+            ? this.item[this.options.key].join(", ")
+            : this.item[this.options.key];
+    }
+    get isArray() {
+        return Array.isArray(this.value);
+    }
     get className() {
         return this.options.className;
     }
@@ -35367,10 +35439,14 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
         });
     }
     get id() {
-        if (this.options.idKey) {
-            return this.product[this.options.idKey];
-        }
-        return "";
+        return this.options.idKey
+            ? this.product[this.options.idKey]
+            : "";
+    }
+    get title() {
+        return this.options.titleKey
+            ? this.product[this.options.titleKey]
+            : "";
     }
     handleClick() {
         var _a, _b;
@@ -35380,6 +35456,10 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 itemId: this.id,
                 searchQuery: this.query,
                 type: "itemClick",
+                analytics: {
+                    type: "search_product_click",
+                    label: this.title || this.id || this.link,
+                },
             },
         });
         (_b = (_a = this.searchResultOptions.callbacks) === null || _a === void 0 ? void 0 : _a.onProductClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -35396,8 +35476,8 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 type: item.type,
                 analytics: item.type === "addToCart"
                     ? {
-                        type: "add_to_cart",
-                        label: this.link,
+                        type: "search_add_to_cart",
+                        label: this.title || this.id || this.link,
                     }
                     : undefined,
             },
@@ -35567,7 +35647,7 @@ __vue_render__$o._withStripped = true;
 
 const initAnalyticsTracking = (analyticsOptions) => {
     try {
-        if ((analyticsOptions === null || analyticsOptions === void 0 ? void 0 : analyticsOptions.enabled) && analyticsOptions.type === "ua") {
+        if (analyticsOptions === null || analyticsOptions === void 0 ? void 0 : analyticsOptions.enabled) {
             window.sessionStorage.setItem(TRACKING_ANALYTICS_KEY, JSON.stringify(analyticsOptions));
         }
         else {
@@ -35712,25 +35792,66 @@ const sendGa = (name, ...args) => {
     });
 };
 const trackAnalyticsEvent = (data) => {
-    var _a;
+    var _a, _b, _c;
     try {
         const options = JSON.parse((_a = window.sessionStorage.getItem(TRACKING_ANALYTICS_KEY)) !== null && _a !== void 0 ? _a : "{}");
-        if (!data.analytics || !options.enabled) {
+        if (!data.analytics ||
+            !options.enabled ||
+            ((_b = options.ignoreEvents) === null || _b === void 0 ? void 0 : _b.includes((_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type))) {
             return;
         }
-        const ga = window.ga;
-        if (!ga) {
-            console.error("Google Analytics object not found");
-            return;
+        switch (options.type) {
+            case "ua":
+                sendUaAnalyticsEvent(data, options);
+                break;
+            case "ga4":
+                sendGa4AnalyticsEvent(data, options);
+                break;
+            case "debug":
+                processDebugEvent(data);
+                break;
+            default:
+                sendUaAnalyticsEvent(data, options);
         }
-        sendGa("send", "event", options.parentEventName, data.analytics.type, data.analytics.label);
     }
-    catch (_b) {
+    catch (_d) {
         console.error("Unable to send an event to google analytics");
     }
 };
+const sendUaAnalyticsEvent = (data, options) => {
+    var _a, _b, _c, _d;
+    const ga = window.ga;
+    if (!ga) {
+        console.error("Google Analytics object not found");
+        return;
+    }
+    sendGa("send", "event", options.parentEventName, (_b = (_a = data.analytics) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "", (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "");
+};
+const sendGa4AnalyticsEvent = (data, options) => {
+    var _a, _b, _c, _d;
+    if (!window || !window.dataLayer) {
+        console.error("dataLayer object not found.");
+        return;
+    }
+    const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const params = {
+        search_text: data.searchQuery,
+        item_title: sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined,
+    };
+    window.dataLayer.push(Object.assign({ event: (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : options.parentEventName }, params));
+};
+const processDebugEvent = (data) => {
+    var _a, _b, _c;
+    const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const params = {
+        event: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.type,
+        search_text: data.searchQuery,
+        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+    };
+    console.debug("Analytics debug event:", params);
+};
 const track = (queryKey, data = {}, options) => {
-    if (!isTrackingEnabled()) {
+    if (!isTrackingEnabled() || !data.searchQuery) {
         return;
     }
     trackLupaEvent(queryKey, data, options);
@@ -36856,6 +36977,9 @@ let SearchResultsToolbar = class SearchResultsToolbar extends Vue$1 {
         var _a, _b, _c;
         return Boolean((_c = (_b = (_a = this.options.filters) === null || _a === void 0 ? void 0 : _a.currentFilters) === null || _b === void 0 ? void 0 : _b.mobileSidebar) === null || _c === void 0 ? void 0 : _c.showFilterCount);
     }
+    get hasResults() {
+        return this.searchResult.total > 0;
+    }
 };
 __decorate([
     Prop({ default: () => ({ labels: {} }) })
@@ -36904,65 +37028,72 @@ var __vue_render__$f = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { attrs: { id: "lupa-search-results-toolbar" } }, [
-    _c(
-      "div",
-      { staticClass: "lupa-toolbar-left" },
-      [
-        _vm.showLayoutSelection
-          ? _c("SearchResultsLayoutSelection")
-          : _c("div"),
-        _vm._v(" "),
-        _vm.showItemSummary
-          ? _c("SearchResultsSummary", {
-              attrs: {
-                label: _vm.searchSummaryLabel,
-                clearable: _vm.hasAnyFilter && _vm.showFilterClear,
-              },
-              on: { clear: _vm.handleClearAll },
-            })
-          : _c("div"),
-        _vm._v(" "),
-        _vm.displayPageSelect
-          ? _c("SearchResultsPageSelect", {
-              attrs: {
-                options: _vm.paginationOptions.pageSelect,
-                "last-page-label": _vm.paginationOptions.labels.showMore,
-                "first-page-label": _vm.paginationOptions.labels.showLess,
-              },
-            })
-          : _c("div"),
-      ],
-      1
-    ),
-    _vm._v(" "),
-    _c(
-      "div",
-      { staticClass: "lupa-toolbar-right" },
-      [
-        _c("SearchResultsMobileToggle", {
-          attrs: {
-            label: _vm.options.labels.mobileFilterButton,
-            "show-filter-count": _vm.showMobileFilterCount,
-          },
-        }),
-        _vm._v(" "),
-        _vm.paginationDisplay.pageSize
-          ? _c("SearchResultsPageSize", {
-              attrs: {
-                options: _vm.paginationOptions.pageSize,
-                label: _vm.paginationOptions.labels.pageSize,
-              },
-            })
-          : _c("div"),
-        _vm._v(" "),
-        _vm.sortOptions
-          ? _c("SearchResultsSort", { attrs: { options: _vm.sortOptions } })
-          : _c("div"),
-      ],
-      1
-    ),
-  ])
+  return _c(
+    "div",
+    {
+      class: { "lupa-filter-no-results": !_vm.hasResults },
+      attrs: { id: "lupa-search-results-toolbar" },
+    },
+    [
+      _c(
+        "div",
+        { staticClass: "lupa-toolbar-left" },
+        [
+          _vm.showLayoutSelection
+            ? _c("SearchResultsLayoutSelection")
+            : _c("div"),
+          _vm._v(" "),
+          _vm.showItemSummary
+            ? _c("SearchResultsSummary", {
+                attrs: {
+                  label: _vm.searchSummaryLabel,
+                  clearable: _vm.hasAnyFilter && _vm.showFilterClear,
+                },
+                on: { clear: _vm.handleClearAll },
+              })
+            : _c("div"),
+          _vm._v(" "),
+          _vm.displayPageSelect
+            ? _c("SearchResultsPageSelect", {
+                attrs: {
+                  options: _vm.paginationOptions.pageSelect,
+                  "last-page-label": _vm.paginationOptions.labels.showMore,
+                  "first-page-label": _vm.paginationOptions.labels.showLess,
+                },
+              })
+            : _c("div"),
+        ],
+        1
+      ),
+      _vm._v(" "),
+      _c(
+        "div",
+        { staticClass: "lupa-toolbar-right" },
+        [
+          _c("SearchResultsMobileToggle", {
+            attrs: {
+              label: _vm.options.labels.mobileFilterButton,
+              "show-filter-count": _vm.showMobileFilterCount,
+            },
+          }),
+          _vm._v(" "),
+          _vm.paginationDisplay.pageSize
+            ? _c("SearchResultsPageSize", {
+                attrs: {
+                  options: _vm.paginationOptions.pageSize,
+                  label: _vm.paginationOptions.labels.pageSize,
+                },
+              })
+            : _c("div"),
+          _vm._v(" "),
+          _vm.sortOptions
+            ? _c("SearchResultsSort", { attrs: { options: _vm.sortOptions } })
+            : _c("div"),
+        ],
+        1
+      ),
+    ]
+  )
 };
 var __vue_staticRenderFns__$f = [];
 __vue_render__$f._withStripped = true;
@@ -37024,7 +37155,7 @@ __vue_render__$e._withStripped = true;
   /* style */
   const __vue_inject_styles__$e = function (inject) {
     if (!inject) return
-    inject("data-v-ef12587c_0", { source: ".lupa-spinner {\n  color: #555555;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  padding-top: 100px;\n  padding-right: 72px;\n}\n.lupa-spinner div {\n  transform-origin: 40px 40px;\n  animation: lupa-spinner 1.2s linear infinite;\n}\n.lupa-spinner div:after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 3px;\n  left: 37px;\n  width: 6px;\n  height: 18px;\n  border-radius: 20%;\n  background: #555555;\n}\n.lupa-spinner div:nth-child(1) {\n  transform: rotate(0deg);\n  animation-delay: -1.1s;\n}\n.lupa-spinner div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: -1s;\n}\n.lupa-spinner div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: -0.9s;\n}\n.lupa-spinner div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: -0.8s;\n}\n.lupa-spinner div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: -0.7s;\n}\n.lupa-spinner div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: -0.6s;\n}\n.lupa-spinner div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: -0.5s;\n}\n.lupa-spinner div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: -0.4s;\n}\n.lupa-spinner div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: -0.3s;\n}\n.lupa-spinner div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: -0.2s;\n}\n.lupa-spinner div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: -0.1s;\n}\n.lupa-spinner div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 0s;\n}\n@keyframes lupa-spinner {\n0% {\n    opacity: 1;\n}\n100% {\n    opacity: 0;\n}\n}\n.lupa-spinner-wrapper {\n  width: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-3353d3a1_0", { source: ".lupa-spinner {\n  color: #555555;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  width: 100%;\n  padding-top: 100px;\n  padding-right: 72px;\n}\n.lupa-spinner div {\n  transform-origin: 40px 40px;\n  animation: lupa-spinner 1.2s linear infinite;\n}\n.lupa-spinner div:after {\n  content: \" \";\n  display: block;\n  position: absolute;\n  top: 3px;\n  left: 37px;\n  width: 6px;\n  height: 18px;\n  border-radius: 20%;\n  background: #555555;\n}\n.lupa-spinner div:nth-child(1) {\n  transform: rotate(0deg);\n  animation-delay: -1.1s;\n}\n.lupa-spinner div:nth-child(2) {\n  transform: rotate(30deg);\n  animation-delay: -1s;\n}\n.lupa-spinner div:nth-child(3) {\n  transform: rotate(60deg);\n  animation-delay: -0.9s;\n}\n.lupa-spinner div:nth-child(4) {\n  transform: rotate(90deg);\n  animation-delay: -0.8s;\n}\n.lupa-spinner div:nth-child(5) {\n  transform: rotate(120deg);\n  animation-delay: -0.7s;\n}\n.lupa-spinner div:nth-child(6) {\n  transform: rotate(150deg);\n  animation-delay: -0.6s;\n}\n.lupa-spinner div:nth-child(7) {\n  transform: rotate(180deg);\n  animation-delay: -0.5s;\n}\n.lupa-spinner div:nth-child(8) {\n  transform: rotate(210deg);\n  animation-delay: -0.4s;\n}\n.lupa-spinner div:nth-child(9) {\n  transform: rotate(240deg);\n  animation-delay: -0.3s;\n}\n.lupa-spinner div:nth-child(10) {\n  transform: rotate(270deg);\n  animation-delay: -0.2s;\n}\n.lupa-spinner div:nth-child(11) {\n  transform: rotate(300deg);\n  animation-delay: -0.1s;\n}\n.lupa-spinner div:nth-child(12) {\n  transform: rotate(330deg);\n  animation-delay: 0s;\n}\n@keyframes lupa-spinner {\n0% {\n    opacity: 1;\n}\n100% {\n    opacity: 0;\n}\n}\n.lupa-spinner-wrapper {\n  width: 100%;\n  overflow: hidden;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -37397,6 +37528,7 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
             "labels",
             "queryKey",
             "idKey",
+            "titleKey",
             "routingBehavior",
         ]);
     }
@@ -37797,6 +37929,10 @@ let SearchResultsTitle = class SearchResultsTitle extends Vue$1 {
         var _a, _b;
         return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.descriptionTop;
     }
+    get summaryLabel() {
+        var _a, _b;
+        return (_b = (_a = this.options.labels) === null || _a === void 0 ? void 0 : _a.itemCount) !== null && _b !== void 0 ? _b : "";
+    }
     getLabel(label) {
         return addParamsToLabel(label, `'${this.currentQueryText}'`);
     }
@@ -37807,6 +37943,9 @@ __decorate([
 __decorate([
     Prop({ default: false })
 ], SearchResultsTitle.prototype, "isProductList", void 0);
+__decorate([
+    Prop({ default: false })
+], SearchResultsTitle.prototype, "showSummary", void 0);
 __decorate([
     searchResult$2.Getter("currentQueryText")
 ], SearchResultsTitle.prototype, "currentQueryText", void 0);
@@ -37819,6 +37958,9 @@ __decorate([
 SearchResultsTitle = __decorate([
     Component({
         name: "SearchResultsTitle",
+        components: {
+            SearchResultsSummary: __vue_component__$h,
+        },
     })
 ], SearchResultsTitle);
 var script$8 = SearchResultsTitle;
@@ -37831,36 +37973,44 @@ var __vue_render__$8 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", [
-    _vm.showSearchTitle
-      ? _c(
-          "h1",
-          {
-            staticClass: "lupa-result-page-title",
-            attrs: { "data-cy": "lupa-result-page-title" },
-          },
-          [
-            _vm._v("\n    " + _vm._s(_vm.options.labels.searchResults)),
-            _vm.queryText
-              ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
-              : _vm._e(),
-            _vm._v(" "),
-            _vm.showProductCount
-              ? _c("span", { staticClass: "lupa-results-total-count" }, [
-                  _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
-                ])
-              : _vm._e(),
-          ]
-        )
-      : _vm._e(),
-    _vm._v(" "),
-    _vm.descriptionTop
-      ? _c("div", {
-          staticClass: "lupa-result-page-description-top",
-          domProps: { innerHTML: _vm._s(_vm.descriptionTop) },
-        })
-      : _vm._e(),
-  ])
+  return _c(
+    "div",
+    [
+      _vm.showSearchTitle
+        ? _c(
+            "h1",
+            {
+              staticClass: "lupa-result-page-title",
+              attrs: { "data-cy": "lupa-result-page-title" },
+            },
+            [
+              _vm._v("\n    " + _vm._s(_vm.options.labels.searchResults)),
+              _vm.queryText
+                ? _c("span", [_vm._v("'" + _vm._s(_vm.queryText) + "'")])
+                : _vm._e(),
+              _vm._v(" "),
+              _vm.showProductCount
+                ? _c("span", { staticClass: "lupa-results-total-count" }, [
+                    _vm._v("(" + _vm._s(_vm.totalItems) + ")"),
+                  ])
+                : _vm._e(),
+            ]
+          )
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.showSummary
+        ? _c("SearchResultsSummary", { attrs: { label: _vm.summaryLabel } })
+        : _vm._e(),
+      _vm._v(" "),
+      _vm.descriptionTop
+        ? _c("div", {
+            staticClass: "lupa-result-page-description-top",
+            domProps: { innerHTML: _vm._s(_vm.descriptionTop) },
+          })
+        : _vm._e(),
+    ],
+    1
+  )
 };
 var __vue_staticRenderFns__$8 = [];
 __vue_render__$8._withStripped = true;
@@ -38083,7 +38233,11 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.query(getPublicQuery(publicQuery, this.initialFilters, this.isProductList));
     }
     query(publicQuery) {
-        this.trackSearch({ queryKey: this.options.queryKey, query: publicQuery });
+        this.trackSearch({
+            queryKey: this.options.queryKey,
+            query: publicQuery,
+            type: "search_form_submit",
+        });
         const context = getLupaTrackingContext();
         const limit = publicQuery.limit || this.defaultSearchResultPageSize;
         const query = Object.assign(Object.assign(Object.assign({}, publicQuery), context), { limit });
@@ -38137,6 +38291,9 @@ __decorate([
 __decorate([
     Prop({ default: false })
 ], SearchResults.prototype, "isProductList", void 0);
+__decorate([
+    Prop({ default: false })
+], SearchResults.prototype, "isContainer", void 0);
 __decorate([
     searchResult$1.Getter("currentQueryText")
 ], SearchResults.prototype, "currentQueryText", void 0);
@@ -38220,6 +38377,29 @@ var __vue_render__$6 = function () {
     "div",
     { staticClass: "lupa-search-result-wrapper" },
     [
+      _vm.isContainer
+        ? [
+            _c(
+              "div",
+              { staticClass: "lupa-container-title-summary-mobile" },
+              [
+                _c("SearchResultsDidYouMean", {
+                  attrs: { labels: _vm.didYouMeanLabels },
+                }),
+                _vm._v(" "),
+                _c("SearchResultsTitle", {
+                  attrs: {
+                    "show-summary": true,
+                    options: _vm.options,
+                    "is-product-list": _vm.isProductList,
+                  },
+                }),
+              ],
+              1
+            ),
+          ]
+        : _vm._e(),
+      _vm._v(" "),
       _vm.isTitleResultTopPosition
         ? _c("CategoryTopFilters", { attrs: { options: _vm.options } })
         : _vm._e(),
@@ -38755,7 +38935,10 @@ var __vue_render__$1 = function () {
           _vm._v(" "),
           _c("SearchResults", {
             ref: "searchResults",
-            attrs: { options: _vm.fullSearchResultsOptions },
+            attrs: {
+              options: _vm.fullSearchResultsOptions,
+              "is-container": true,
+            },
           }),
         ],
         1
@@ -38867,13 +39050,19 @@ var __vue_render__ = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _vm.isOpen
-    ? _c("SearchContainer", {
-        ref: "productList",
-        attrs: { options: _vm.containerOptions },
-        on: { "hook:mounted": _vm.focus, close: _vm.close },
-      })
-    : _vm._e()
+  return _c(
+    "div",
+    [
+      _vm.isOpen
+        ? _c("SearchContainer", {
+            ref: "productList",
+            attrs: { options: _vm.containerOptions },
+            on: { "hook:mounted": _vm.focus, close: _vm.close },
+          })
+        : _vm._e(),
+    ],
+    1
+  )
 };
 var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
@@ -39349,6 +39538,7 @@ let SearchBoxModule = class SearchBoxModule extends VuexModule {
             link: generateLink((_b = panel.links) === null || _b === void 0 ? void 0 : _b.details, doc),
             queryKey: panel.queryKey,
             id: panel.idKey ? doc[panel.idKey] : "",
+            title: panel.titleKey ? doc[panel.titleKey] : "",
         };
     }
     saveSuggestions({ queryKey, suggestions, inputValue, }) {
@@ -39825,11 +40015,6 @@ let ParamsModule = class ParamsModule extends VuexModule {
             const routing = (_a = this.context.rootGetters["options/boxRoutingBehavior"]) !== null && _a !== void 0 ? _a : "direct-link";
             redirectToResultsPage(this.searchResultsLink, searchText, facet, routing);
         }
-        this.context.dispatch("tracking/track", {
-            data: {
-                analytics: { type: "search_form_submit", label: searchText },
-            },
-        }, { root: true });
     }
     appendParams({ params, paramsToRemove, encode = true, save = true, searchResultsLink, }) {
         if (!(params === null || params === void 0 ? void 0 : params.length)) {
@@ -39980,22 +40165,23 @@ const getSearchTrackingData = (searchText, type) => {
     };
 };
 let TrackingModule = class TrackingModule extends VuexModule {
-    trackSearch({ queryKey, query, }) {
+    trackSearch({ queryKey, query, type = "search_query", }) {
         var _a, _b;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
         const hasFilters = Object.keys((_b = query.filters) !== null && _b !== void 0 ? _b : {}).length > 0;
         if (hasFilters) {
-            const data = getSearchTrackingData(query.searchText, "filters");
+            const data = getSearchTrackingData(query.searchText, "search_filters");
             track(queryKey, data, options);
+            return;
         }
-        const data = getSearchTrackingData(query.searchText, "search");
+        const data = getSearchTrackingData(query.searchText, type);
         track(queryKey, data, options);
     }
     trackResults({ queryKey, results, }) {
         var _a;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
         if (results.total < 1) {
-            const data = getSearchTrackingData(results.searchText, "zero_results");
+            const data = getSearchTrackingData(results.searchText, "search_zero_results");
             track(queryKey, data, options);
         }
     }
@@ -40032,6 +40218,30 @@ var store = new Vuex.Store({
     },
 });
 
+const attatchShadowDom = ({ host, manager, styleUrl, }) => {
+    const link = document.createElement("link");
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.href = styleUrl;
+    // Fonts only work when added in host document head
+    const linkNode = document.createElement("link");
+    linkNode.type = "text/css";
+    linkNode.rel = "stylesheet";
+    linkNode.href =
+        "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap";
+    document.head.appendChild(linkNode);
+    // Add font for material icons
+    const linkNode2 = document.createElement("link");
+    linkNode2.type = "text/css";
+    linkNode2.rel = "stylesheet";
+    linkNode2.href =
+        "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,1,-50..200";
+    document.head.appendChild(linkNode2);
+    const shadow = host.attachShadow({ mode: "open" });
+    shadow.appendChild(manager);
+    shadow.appendChild(link);
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const app = {
     box: {},
@@ -40115,6 +40325,7 @@ const productList = (options, mountOptions) => {
     app.productList[options.containerSelector] = instance;
 };
 const searchContainer = (options, mountOptions) => {
+    var _a;
     const existingInstance = app.productList[options.trigger];
     if (existingInstance) {
         existingInstance.productListOptions = options;
@@ -40127,13 +40338,21 @@ const searchContainer = (options, mountOptions) => {
         return;
     }
     Vue$1.use(Vuex);
-    const id = `lupa-search-container-manager`;
-    const managerElement = document.createElement("div");
-    managerElement.setAttribute("id", id);
-    document.body.appendChild(managerElement);
+    const id = "lupa-search-container-manager";
+    const shadowId = "lupa-shadow-id";
+    const host = document.createElement("div");
+    const manager = document.createElement("div");
+    host.setAttribute("id", shadowId);
+    manager.setAttribute("id", id);
+    attatchShadowDom({
+        host,
+        manager,
+        styleUrl: (_a = options.styleLink) !== null && _a !== void 0 ? _a : DEFAULT_CONTAINER_STYLE,
+    });
+    document.body.appendChild(host);
     const SearchContainerEntryComponent = Vue$1.component("SearchContainerEntry", __vue_component__);
     const instance = new SearchContainerEntryComponent({
-        el: `#${id}`,
+        el: manager,
         propsData: { searchContainerOptions: options },
         store,
     });