@getlupa/client 0.10.2 → 0.10.3

package/dist/cjs/components/search-box/SearchBoxInput.vue.d.ts

@@ -20,4 +20,6 @@ export default class SearchBoxInput extends Vue {
     handleQueryChange(): void;
     handleInput(evt?: InputEvent): void;
     handleFocus(): void;
+    clear(): void;
+    focus(): void;
 }

package/dist/cjs/components/search-results/SearchResults.vue.d.ts

@@ -7,6 +7,7 @@ export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
     isProductList: boolean;
+    isContainer: boolean;
     get productsOptions(): SearchResultsProductOptions;
     currentQueryText: string;
     hasResults: boolean;

package/dist/cjs/components/search-results/SearchResultsTitle.vue.d.ts

@@ -3,6 +3,7 @@ import Vue from "vue";
 export default class SearchResultsTitle extends Vue {
     options: SearchResultsOptions;
     isProductList: boolean;
+    showSummary: boolean;
     currentQueryText: string;
     totalItems: number;
     suggestedSearchText: string;
@@ -10,5 +11,6 @@ export default class SearchResultsTitle extends Vue {
     get showProductCount(): boolean;
     get showSearchTitle(): boolean;
     get descriptionTop(): string | undefined;
+    get summaryLabel(): string;
     getLabel(label: string): string;
 }

package/dist/cjs/components/search-results/products/SearchResultsToolbar.vue.d.ts

@@ -21,6 +21,7 @@ export default class SearchResultsToolbar extends Vue {
     get displayPageSelect(): boolean;
     get searchSummaryLabel(): string;
     get showMobileFilterCount(): boolean;
+    get hasResults(): boolean;
     currentResolutionPageSizes: number[];
     removeAllFilters: () => {
         params: QueryParams;

package/dist/cjs/components/search-results/products/product-card/elements/SearchResultsProductCustom.vue.d.ts

@@ -4,7 +4,9 @@ import { CustomDocumentElement } from "@/types/DocumentElement";
 export default class SearchResultsProductCustom extends Vue {
     item: Document;
     options: CustomDocumentElement;
+    get value(): unknown;
     get text(): string;
+    get isArray(): boolean;
     get className(): string;
     get label(): string | undefined;
     get isHtml(): boolean;

package/dist/cjs/constants/development/searchBoxDev.example.const.d.ts

@@ -15,6 +15,7 @@ export declare const SEARCH_BOX_CONFIGURATION: {
         currency: string;
         priceSeparator: string;
         defaultFacetLabel: string;
+        close: string;
     };
     links: {
         searchResults: string;

package/dist/cjs/constants/global.const.d.ts

@@ -13,3 +13,4 @@ export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
 export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";
+export declare const DEFAULT_CONTAINER_STYLE = "containerStyle.css";

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;
@@ -30836,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);
@@ -30879,12 +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,
             });
         }
     }
@@ -31073,6 +31100,7 @@ var __vue_render__$U = function () {
       { staticClass: "lupa-search-box-wrapper" },
       [
         _c("SearchBoxInput", {
+          ref: "searchBoxInput",
           attrs: {
             options: _vm.inputOptions,
             suggestedValue: _vm.suggestedValue,
@@ -31112,7 +31140,7 @@ __vue_render__$U._withStripped = true;
   /* style */
   const __vue_inject_styles__$U = function (inject) {
     if (!inject) return
-    inject("data-v-d81b3ccc_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 */
@@ -33089,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) {
@@ -33099,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",
@@ -34570,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
@@ -35074,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;
     }
@@ -36932,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: {} }) })
@@ -36980,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;
@@ -37100,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 */
@@ -37874,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}'`);
     }
@@ -37884,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);
@@ -37896,6 +37958,9 @@ __decorate([
 SearchResultsTitle = __decorate([
     Component({
         name: "SearchResultsTitle",
+        components: {
+            SearchResultsSummary: __vue_component__$h,
+        },
     })
 ], SearchResultsTitle);
 var script$8 = SearchResultsTitle;
@@ -37908,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;
@@ -38218,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);
@@ -38301,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(),
@@ -38836,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
@@ -38948,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;
@@ -40110,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: {},
@@ -40193,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;
@@ -40205,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,
     });

package/dist/cjs/types/search-box/SearchBoxOptions.d.ts

@@ -14,6 +14,7 @@ export declare type SearchBoxOptionLabels = {
     currency: string;
     priceSeparator?: string;
     defaultFacetLabel?: string;
+    close?: string;
 };
 export declare type SearchBoxOptionLinks = {
     searchResults: string;