@getlupa/client 0.6.0-alpha-11 → 0.6.0-alpha-14

package/dist/cjs/components/search-results/filters/facets/FacetDisplay.vue.d.ts

@@ -7,14 +7,23 @@ export default class FacetDisplay extends Vue {
     facet: FacetResult;
     currentFilters: FilterGroup;
     clearable: boolean;
+    currentFilterKeys: string[];
     isOpen: boolean;
     get facetType(): string;
     get hasItems(): boolean;
     get hasFilter(): boolean;
+    get filterQueryKey(): string | undefined;
+    get activeFilterKeys(): string;
     mounted(): void;
     beforeDestroy(): void;
     handleMouseClick(e: MouseEvent): void;
+    handleParamsChange(): void;
+    queryFacet: ({ queryKey, facetKey, }: {
+        queryKey: string;
+        facetKey: string;
+    }) => Promise<void>;
     toggleFacet(): void;
+    handleFacetQueryFilter(): void;
     handleFacetSelect(item: FacetAction): void;
     clear(): void;
 }

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;
+    currentResolutionPageSizes: number[];
     removeAllFilters: () => {
         params: QueryParams;
     };

package/dist/cjs/index.d.ts

@@ -1,5 +1,5 @@
 import { SearchBoxOptions } from "./types/search-box/SearchBoxOptions";
-import { CallbackContext, FacetStyle, SearchResultEventCallbacks, SearchResultsOptions } from "./types/search-results/SearchResultsOptions";
+import { CallbackContext, FacetFilterQuery, FacetStyle, SearchResultEventCallbacks, SearchResultsOptions } from "./types/search-results/SearchResultsOptions";
 import { SdkOptions, TrackingOptions, Environment, SortDirection } from "./types/General";
 import { ProductListOptions } from "./types/product-list/ProductListOptions";
 import { AddToCartElement, CustomDocumentElement, CustomHtmlElement, DescriptionDocumentElement, DocumentElement, DocumentElementType, ImageDocumentElement, PriceElement, RatingElement, RegularPriceDocumentElement, TitleDocumentElement } from "./types/DocumentElement";
@@ -17,5 +17,5 @@ declare const lupaSearch: {
     clearSearchResults: () => void;
     clearProductList: () => void;
 };
-export { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, DocumentElementType, SearchBoxPanelType, FacetStyle, Environment, RoutingBehavior, AnchorPosition, BadgeType, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, };
+export { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, DocumentElementType, SearchBoxPanelType, FacetStyle, Environment, RoutingBehavior, AnchorPosition, BadgeType, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, };
 export default lupaSearch;

package/dist/cjs/index.min.js

@@ -22147,7 +22147,7 @@ var getPageUrl = function getPageUrl(pathnameOverride) {
 
 var history$3 = namespace("history");
 var tracking$5 = namespace("tracking");
-var options$b = namespace("options");
+var options$c = namespace("options");
 
 var SearchBoxProduct = /*#__PURE__*/function (_Vue) {
   _inherits(SearchBoxProduct, _Vue);
@@ -22245,7 +22245,7 @@ __decorate([Prop({
   default: false
 })], SearchBoxProduct.prototype, "highlighted", void 0);
 
-__decorate([options$b.Getter("boxRoutingBehavior")], SearchBoxProduct.prototype, "boxRoutingBehavior", void 0);
+__decorate([options$c.Getter("boxRoutingBehavior")], SearchBoxProduct.prototype, "boxRoutingBehavior", void 0);
 
 __decorate([tracking$5.Action("track")], SearchBoxProduct.prototype, "trackClick", void 0);
 
@@ -23676,7 +23676,7 @@ var defaultSuggestedValue = {
 var history$1 = namespace("history");
 var params$d = namespace("params");
 var searchBox$2 = namespace("searchBox");
-var options$a = namespace("options");
+var options$b = namespace("options");
 var tracking$4 = namespace("tracking");
 
 var SearchBox = /*#__PURE__*/function (_Vue) {
@@ -23961,7 +23961,7 @@ __decorate([tracking$4.Action("track")], SearchBox.prototype, "trackClick", void
 
 __decorate([params$d.Action("setSearchResultsLink")], SearchBox.prototype, "setSearchResultsLink", void 0);
 
-__decorate([options$a.Mutation("setSearchBoxOptions")], SearchBox.prototype, "setSearchBoxOptions", void 0);
+__decorate([options$b.Mutation("setSearchBoxOptions")], SearchBox.prototype, "setSearchBoxOptions", void 0);
 
 __decorate([params$d.Action("goToResults")], SearchBox.prototype, "goToResults", void 0);
 
@@ -25609,9 +25609,9 @@ var toggleHierarchyParam = function toggleHierarchyParam() {
   return getMostSpecificHierarchyTerms([param].concat(_toConsumableArray(params)));
 };
 
-var searchResult$h = namespace("searchResult");
+var searchResult$i = namespace("searchResult");
 var params$c = namespace("params");
-var options$9 = namespace("options");
+var options$a = namespace("options");
 
 var CurrentFilters = /*#__PURE__*/function (_Vue) {
   _inherits(CurrentFilters, _Vue);
@@ -25680,15 +25680,15 @@ __decorate([Prop({
   default: false
 })], CurrentFilters.prototype, "expandable", void 0);
 
-__decorate([searchResult$h.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
+__decorate([searchResult$i.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
 
-__decorate([searchResult$h.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
+__decorate([searchResult$i.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
 
-__decorate([searchResult$h.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
+__decorate([searchResult$i.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
 
-__decorate([searchResult$h.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
+__decorate([searchResult$i.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
 
-__decorate([options$9.Getter("initialFilters")], CurrentFilters.prototype, "initialFilters", void 0);
+__decorate([options$a.Getter("initialFilters")], CurrentFilters.prototype, "initialFilters", void 0);
 
 __decorate([params$c.Action("removeParams")], CurrentFilters.prototype, "removeParams", void 0);
 
@@ -28623,7 +28623,7 @@ var _typeof = _typeof$2.exports.default;
 
 var VueSlider = /*@__PURE__*/getDefaultExportFromCjs(vueSliderComponent_umd_min.exports);
 
-var options$8 = namespace("options");
+var options$9 = namespace("options");
 
 var TermFacet = /*#__PURE__*/function (_Vue) {
   _inherits(TermFacet, _Vue);
@@ -28830,7 +28830,7 @@ __decorate([Prop({
   }
 })], TermFacet.prototype, "currentFilters", void 0);
 
-__decorate([options$8.State(function (s) {
+__decorate([options$9.State(function (s) {
   return s.searchResultOptions;
 })], TermFacet.prototype, "searchResultOptions", void 0);
 
@@ -29317,6 +29317,8 @@ var __vue_component__$J = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$J
 }, __vue_inject_styles__$J, __vue_script__$J, __vue_scope_id__$J, __vue_is_functional_template__$J, __vue_module_identifier__$J, false, undefined, undefined, undefined);
 
+var searchResult$h = namespace("searchResult");
+
 var FacetDisplay = /*#__PURE__*/function (_Vue) {
   _inherits(FacetDisplay, _Vue);
 
@@ -29364,7 +29366,23 @@ var FacetDisplay = /*#__PURE__*/function (_Vue) {
   }, {
     key: "hasFilter",
     get: function get() {
-      return Boolean(this.currentFilters[this.facet.key]);
+      var _a;
+
+      return Boolean(((_a = this.currentFilters) !== null && _a !== void 0 ? _a : {})[this.facet.key]);
+    }
+  }, {
+    key: "filterQueryKey",
+    get: function get() {
+      var _a, _b;
+
+      return (_b = (_a = this.options.facetFilterQueries) === null || _a === void 0 ? void 0 : _a[this.facet.key]) === null || _b === void 0 ? void 0 : _b.queryKey;
+    }
+  }, {
+    key: "activeFilterKeys",
+    get: function get() {
+      var _a;
+
+      return ((_a = this.currentFilterKeys) !== null && _a !== void 0 ? _a : []).join(",");
     }
   }, {
     key: "mounted",
@@ -29399,10 +29417,28 @@ var FacetDisplay = /*#__PURE__*/function (_Vue) {
         this.isOpen = false;
       }
     }
+  }, {
+    key: "handleParamsChange",
+    value: function handleParamsChange() {
+      this.handleFacetQueryFilter();
+    }
   }, {
     key: "toggleFacet",
     value: function toggleFacet() {
       this.isOpen = !this.isOpen;
+      this.handleFacetQueryFilter();
+    }
+  }, {
+    key: "handleFacetQueryFilter",
+    value: function handleFacetQueryFilter() {
+      if (!this.filterQueryKey || !this.isOpen) {
+        return;
+      }
+
+      this.queryFacet({
+        queryKey: this.filterQueryKey,
+        facetKey: this.facet.key
+      });
     }
   }, {
     key: "handleFacetSelect",
@@ -29438,6 +29474,12 @@ __decorate([Prop({
   default: false
 })], FacetDisplay.prototype, "clearable", void 0);
 
+__decorate([searchResult$h.Getter("currentFilterKeys")], FacetDisplay.prototype, "currentFilterKeys", void 0);
+
+__decorate([Watch("activeFilterKeys")], FacetDisplay.prototype, "handleParamsChange", null);
+
+__decorate([searchResult$h.Action("queryFacet")], FacetDisplay.prototype, "queryFacet", void 0);
+
 FacetDisplay = __decorate([Component({
   name: "facetDisplay",
   components: {
@@ -29946,7 +29988,7 @@ var __vue_component__$F = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$F
 }, __vue_inject_styles__$F, __vue_script__$F, __vue_scope_id__$F, __vue_is_functional_template__$F, __vue_module_identifier__$F, false, undefined, undefined, undefined);
 
-var options$7 = namespace("options");
+var options$8 = namespace("options");
 
 var CategoryFilter = /*#__PURE__*/function (_Vue) {
   _inherits(CategoryFilter, _Vue);
@@ -30082,9 +30124,9 @@ var CategoryFilter = /*#__PURE__*/function (_Vue) {
 
 __decorate([Prop()], CategoryFilter.prototype, "options", void 0);
 
-__decorate([options$7.Getter("envOptions")], CategoryFilter.prototype, "envOptions", void 0);
+__decorate([options$8.Getter("envOptions")], CategoryFilter.prototype, "envOptions", void 0);
 
-__decorate([options$7.State(function (o) {
+__decorate([options$8.State(function (o) {
   return o.searchResultOptions;
 })], CategoryFilter.prototype, "searchResultOptions", void 0);
 
@@ -31073,7 +31115,7 @@ var __vue_component__$w = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$w
 }, __vue_inject_styles__$w, __vue_script__$w, __vue_scope_id__$w, __vue_is_functional_template__$w, __vue_module_identifier__$w, false, undefined, undefined, undefined);
 
-var options$6 = namespace("options");
+var options$7 = namespace("options");
 
 var SearchResultsProductTitle = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsProductTitle, _Vue);
@@ -31126,7 +31168,7 @@ __decorate([Prop({
   default: ""
 })], SearchResultsProductTitle.prototype, "link", void 0);
 
-__decorate([options$6.State(function (o) {
+__decorate([options$7.State(function (o) {
   return o.searchResultOptions;
 })], SearchResultsProductTitle.prototype, "searchResultOptions", void 0);
 
@@ -32037,7 +32079,7 @@ var __vue_component__$n = /*#__PURE__*/normalizeComponent({
 var tracking$3 = namespace("tracking");
 var params$9 = namespace("params");
 var searchResult$c = namespace("searchResult");
-var options$5 = namespace("options");
+var options$6 = namespace("options");
 
 var SearchResultsProductCard = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsProductCard, _Vue);
@@ -32087,7 +32129,9 @@ var SearchResultsProductCard = /*#__PURE__*/function (_Vue) {
   }, {
     key: "labels",
     get: function get() {
-      return this.options.labels;
+      var _a;
+
+      return (_a = this.options.labels) !== null && _a !== void 0 ? _a : {};
     }
   }, {
     key: "link",
@@ -32208,7 +32252,7 @@ __decorate([searchResult$c.State(function (state) {
   return state.layout;
 })], SearchResultsProductCard.prototype, "layout", void 0);
 
-__decorate([options$5.Getter("searchResultsRoutingBehavior")], SearchResultsProductCard.prototype, "searchResultsRoutingBehavior", void 0);
+__decorate([options$6.Getter("searchResultsRoutingBehavior")], SearchResultsProductCard.prototype, "searchResultsRoutingBehavior", void 0);
 
 __decorate([params$9.Getter("query")], SearchResultsProductCard.prototype, "query", void 0);
 
@@ -32257,7 +32301,7 @@ var __vue_render__$m = function __vue_render__() {
     on: {
       click: _vm.handleNavigation
     }
-  }, _vm._l(_vm.imageElements, function (element) {
+  }, [_vm._l(_vm.imageElements, function (element) {
     return _c("SearchResultsProductCardElement", {
       key: element.key,
       staticClass: "lupa-search-results-product-element",
@@ -32269,7 +32313,9 @@ var __vue_render__$m = function __vue_render__() {
         link: _vm.link
       }
     });
-  }), 1), _vm._v(" "), _c("div", {
+  }), _vm._v(" "), _vm.labels.outOfStock && !_vm.isInStock ? _c("div", {
+    staticClass: "lupa-out-of-stock"
+  }, [_vm._v("\n        " + _vm._s(_vm.labels.outOfStock) + "\n      ")]) : _vm._e()], 2), _vm._v(" "), _c("div", {
     staticClass: "lupa-search-result-product-details-section"
   }, _vm._l(_vm.detailElements, function (element) {
     return _c("SearchResultsProductCardElement", {
@@ -32511,7 +32557,7 @@ var track = function track(queryKey) {
 };
 
 var params$8 = namespace("params");
-var options$4 = namespace("options");
+var options$5 = namespace("options");
 
 var AdditionalPanels$1 = /*#__PURE__*/function (_Vue) {
   _inherits(AdditionalPanels, _Vue);
@@ -32626,7 +32672,7 @@ __decorate([Prop({
 
 __decorate([params$8.Getter("query")], AdditionalPanels$1.prototype, "query", void 0);
 
-__decorate([options$4.State(function (o) {
+__decorate([options$5.State(function (o) {
   return o.searchResultOptions;
 })], AdditionalPanels$1.prototype, "searchResultOptions", void 0);
 
@@ -33311,7 +33357,7 @@ var __vue_component__$h = /*#__PURE__*/normalizeComponent({
 }, __vue_inject_styles__$h, __vue_script__$h, __vue_scope_id__$h, __vue_is_functional_template__$h, __vue_module_identifier__$h, false, undefined, undefined, undefined);
 
 var searchResult$a = namespace("searchResult");
-var options$3 = namespace("options");
+var options$4 = namespace("options");
 
 var SearchResultsLayoutSelection = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsLayoutSelection, _Vue);
@@ -33338,7 +33384,7 @@ __decorate([searchResult$a.State(function (state) {
   return state.layout;
 })], SearchResultsLayoutSelection.prototype, "layout", void 0);
 
-__decorate([options$3.Getter("classMap")], SearchResultsLayoutSelection.prototype, "classMap", void 0);
+__decorate([options$4.Getter("classMap")], SearchResultsLayoutSelection.prototype, "classMap", void 0);
 
 __decorate([searchResult$a.Action("setLayout")], SearchResultsLayoutSelection.prototype, "setLayout", void 0);
 
@@ -33592,6 +33638,7 @@ var __vue_component__$e = /*#__PURE__*/normalizeComponent({
 
 var searchResult$7 = namespace("searchResult");
 var params$4 = namespace("params");
+var options$3 = namespace("options");
 
 var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsToolbar, _Vue);
@@ -33668,11 +33715,10 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
   }, {
     key: "paginationOptions",
     get: function get() {
-      var pageSize = this.options.pagination.sizeSelection;
       var pageSelect = this.options.pagination.pageSelection;
-      var r = {
+      return {
         pageSize: {
-          sizes: pageSize.sizes,
+          sizes: this.currentResolutionPageSizes,
           selectedSize: this.limit
         },
         pageSelect: {
@@ -33683,7 +33729,6 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
         },
         labels: this.options.labels
       };
-      return r;
     }
   }, {
     key: "displayPageSelect",
@@ -33732,6 +33777,8 @@ __decorate([searchResult$7.State(function (state) {
   return state.searchResult;
 })], SearchResultsToolbar.prototype, "searchResult", void 0);
 
+__decorate([options$3.Getter("currentResolutionPageSizes")], SearchResultsToolbar.prototype, "currentResolutionPageSizes", void 0);
+
 __decorate([params$4.Action("removeAllFilters")], SearchResultsToolbar.prototype, "removeAllFilters", void 0);
 
 SearchResultsToolbar = __decorate([Component({
@@ -34823,13 +34870,11 @@ var SearchResults = /*#__PURE__*/function (_Vue) {
   }, {
     key: "handleMounted",
     value: function handleMounted() {
-      var _a, _b, _c;
-
       this.handleResize();
       var params = new URLSearchParams(window.location.search);
       this.handleUrlChange(params);
       this.addParams(parseParams(params));
-      this.setDefaultLimit((_c = (_b = (_a = this.options.pagination) === null || _a === void 0 ? void 0 : _a.sizeSelection) === null || _b === void 0 ? void 0 : _b.sizes) === null || _c === void 0 ? void 0 : _c[0]);
+      this.setDefaultLimit(this.defaultSearchResultPageSize);
     }
   }, {
     key: "handleParamsChange",
@@ -36426,8 +36471,6 @@ var setDocumentTitle = function setDocumentTitle(template) {
   document.title = addParamsToLabel(template, textToInsert);
 };
 
-var MOBILE_WIDTH = 767;
-
 var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   _inherits(SearchResultModule, _VuexModule);
 
@@ -36507,6 +36550,13 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
 
       return (_b = (_a = this.displayFilters) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
     }
+  }, {
+    key: "currentFilterKeys",
+    get: function get() {
+      var _a;
+
+      return Object.keys((_a = this.currentFilters) !== null && _a !== void 0 ? _a : {});
+    }
   }, {
     key: "hasAnyFilter",
     get: function get() {
@@ -36524,7 +36574,24 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   }, {
     key: "isMobileWidth",
     get: function get() {
-      return this.screenWidth < MOBILE_WIDTH;
+      return this.currentScreenWidth === "sm" || this.currentScreenWidth === "xs";
+    }
+  }, {
+    key: "currentScreenWidth",
+    get: function get() {
+      var width = this.screenWidth;
+
+      if (width <= S_MIN_WIDTH) {
+        return "xs";
+      } else if (width > S_MIN_WIDTH && width <= MD_MIN_WIDTH) {
+        return "sm";
+      } else if (width > MD_MIN_WIDTH && width <= L_MIN_WIDTH) {
+        return "md";
+      } else if (width > L_MIN_WIDTH && width <= XL_MIN_WIDTH) {
+        return "l";
+      } else {
+        return "xl";
+      }
     }
   }, {
     key: "setSidebarVisibility",
@@ -36544,6 +36611,62 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
       this.addToCartAmount = addToCartAmount || this.addToCartAmount;
       this.layout = layout || this.layout;
     }
+  }, {
+    key: "queryFacet",
+    value: function queryFacet(_ref3) {
+      var queryKey = _ref3.queryKey,
+          facetKey = _ref3.facetKey;
+
+      var _a, _b, _c, _d, _e;
+
+      return __awaiter$1(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+        var query, options, result, facet, facetItems, updatedResult;
+        return regenerator.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                query = {
+                  searchText: "",
+                  filters: Object.assign({}, this.currentFilters)
+                };
+                options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
+                _context.next = 4;
+                return getLupaSdk.query(queryKey, query, options);
+
+              case 4:
+                result = _context.sent;
+
+                if (result.success) {
+                  _context.next = 7;
+                  break;
+                }
+
+                return _context.abrupt("return");
+
+              case 7:
+                facet = (_b = result.facets) === null || _b === void 0 ? void 0 : _b.find(function (f) {
+                  return f.key === facetKey;
+                });
+                facetItems = (_d = (_c = facet) === null || _c === void 0 ? void 0 : _c.items) !== null && _d !== void 0 ? _d : [];
+                updatedResult = Object.assign(Object.assign({}, this.searchResult), {
+                  facets: (_e = this.facets) === null || _e === void 0 ? void 0 : _e.map(function (f) {
+                    return f.key === facetKey ? Object.assign(Object.assign({}, f), {
+                      items: facetItems
+                    }) : f;
+                  })
+                });
+                this.context.commit("save", {
+                  searchResult: updatedResult
+                });
+
+              case 11:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+    }
   }, {
     key: "load",
     value: function load(loading) {
@@ -36551,8 +36674,8 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     }
   }, {
     key: "setScreenWidth",
-    value: function setScreenWidth(_ref3) {
-      var width = _ref3.width;
+    value: function setScreenWidth(_ref4) {
+      var width = _ref4.width;
       this.screenWidth = width;
     }
   }, {
@@ -36573,9 +36696,9 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     }
   }, {
     key: "setColumnCount",
-    value: function setColumnCount(_ref4) {
-      var width = _ref4.width,
-          grid = _ref4.grid;
+    value: function setColumnCount(_ref5) {
+      var width = _ref5.width,
+          grid = _ref5.grid;
 
       if (!width || !grid) {
         return {
@@ -36645,6 +36768,8 @@ __decorate([Mutation], SearchResultModule.prototype, "setSidebarVisibility", nul
 
 __decorate([Mutation], SearchResultModule.prototype, "save", null);
 
+__decorate([Action], SearchResultModule.prototype, "queryFacet", null);
+
 __decorate([Mutation], SearchResultModule.prototype, "load", null);
 
 __decorate([Mutation], SearchResultModule.prototype, "setScreenWidth", null);
@@ -36989,9 +37114,39 @@ var OptionsModule = /*#__PURE__*/function (_VuexModule) {
   }, {
     key: "defaultSearchResultPageSize",
     get: function get() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
+
+      return (_b = (_a = this.currentResolutionPageSizes) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE;
+    }
+  }, {
+    key: "currentResolutionPageSizes",
+    get: function get() {
+      var _a, _b, _c;
 
-      return (_e = (_d = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : DEFAULT_PAGE_SIZE;
+      var pageSizes = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes;
+
+      if (Array.isArray(pageSizes)) {
+        return pageSizes;
+      }
+
+      var screenSize = this.context.rootGetters["searchResult/currentScreenWidth"];
+
+      switch (screenSize) {
+        case "xs":
+          return pageSizes.xs;
+
+        case "sm":
+          return pageSizes.sm;
+
+        case "md":
+          return pageSizes.md;
+
+        case "l":
+          return pageSizes.l;
+
+        case "xl":
+          return pageSizes.xl;
+      }
     }
   }, {
     key: "setSearchBoxOptions",

package/dist/cjs/store/modules/options.d.ts

@@ -13,6 +13,7 @@ export default class OptionsModule extends VuexModule {
     get boxRoutingBehavior(): RoutingBehavior;
     get searchResultsRoutingBehavior(): RoutingBehavior;
     get defaultSearchResultPageSize(): number;
+    get currentResolutionPageSizes(): number[];
     setSearchBoxOptions({ options }: {
         options: SearchBoxOptions;
     }): void;

package/dist/cjs/store/modules/searchResult.d.ts

@@ -1,3 +1,4 @@
+import { ScreenSize } from "@/types/General";
 import { LabeledFilter } from "@/types/search-results/Filters";
 import { ResultsLayout } from "@/types/search-results/ResultsLayout";
 import { ProductGrid } from "@/types/search-results/SearchResultsOptions";
@@ -20,9 +21,11 @@ export default class SearchResultModule extends VuexModule {
     get labeledFilters(): LabeledFilter[];
     get displayFilters(): LabeledFilter[];
     get currentFilterCount(): number;
+    get currentFilterKeys(): string[];
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
     get isMobileWidth(): boolean;
+    get currentScreenWidth(): ScreenSize;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;
@@ -32,6 +35,10 @@ export default class SearchResultModule extends VuexModule {
         addToCartAmount?: number;
         layout?: ResultsLayout;
     }): void;
+    queryFacet({ queryKey, facetKey, }: {
+        queryKey: string;
+        facetKey: string;
+    }): Promise<void>;
     load(loading: boolean): void;
     setScreenWidth({ width }: {
         width: number;

package/dist/cjs/types/General.d.ts

@@ -16,3 +16,4 @@ export declare type TrackingOptions = {
 };
 export declare type Environment = SdkEnvironment;
 export declare type SortDirection = "asc" | "desc";
+export declare type ScreenSize = "xs" | "sm" | "md" | "l" | "xl";

package/dist/cjs/types/search-results/SearchResultsOptions.d.ts

@@ -37,6 +37,7 @@ export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels &
     emptyResults: string;
     mobileFilterButton: string;
     htmlTitleTemplate: string;
+    outOfStock?: string;
 };
 export declare type SearchResultsAdditionalPanels = {
     additionalPanels?: SearchResultsAdditionalPanelOptions[];
@@ -69,9 +70,17 @@ export declare type SearchResultsPaginationLabels = {
     pageSize: string;
     showMore: string;
 };
+export declare type ResponsiveSearchResultPageSizes = {
+    xs: number[];
+    sm: number[];
+    md: number[];
+    l: number[];
+    xl: number[];
+};
+export declare type SearchResultPageSizes = number[] | ResponsiveSearchResultPageSizes;
 export declare type SearchResultsPagination = {
     sizeSelection: {
-        sizes: number[];
+        sizes: SearchResultPageSizes;
         position: SearchResultsPaginationPosition;
     };
     pageSelection: {
@@ -99,6 +108,9 @@ export declare type ResultCurrentFilterOptions = {
     };
 };
 export declare type FacetStyle = "sidebar" | "top-dropdown";
+export declare type FacetFilterQuery = {
+    queryKey: string;
+};
 export declare type ResultFacetOptions = {
     labels: {
         title: string;
@@ -130,6 +142,7 @@ export declare type ResultFacetOptions = {
         type: FacetStyle;
     };
     exclude?: string[];
+    facetFilterQueries?: Record<string, FacetFilterQuery>;
 };
 export declare type SearchResultsFilterOptions = {
     currentFilters?: ResultCurrentFilterOptions;

package/dist/es/components/search-results/filters/facets/FacetDisplay.vue.d.ts

@@ -7,14 +7,23 @@ export default class FacetDisplay extends Vue {
     facet: FacetResult;
     currentFilters: FilterGroup;
     clearable: boolean;
+    currentFilterKeys: string[];
     isOpen: boolean;
     get facetType(): string;
     get hasItems(): boolean;
     get hasFilter(): boolean;
+    get filterQueryKey(): string | undefined;
+    get activeFilterKeys(): string;
     mounted(): void;
     beforeDestroy(): void;
     handleMouseClick(e: MouseEvent): void;
+    handleParamsChange(): void;
+    queryFacet: ({ queryKey, facetKey, }: {
+        queryKey: string;
+        facetKey: string;
+    }) => Promise<void>;
     toggleFacet(): void;
+    handleFacetQueryFilter(): void;
     handleFacetSelect(item: FacetAction): void;
     clear(): void;
 }