@getlupa/client 0.6.0-alpha-12 → 0.6.0-alpha-13

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.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);
 
@@ -25611,7 +25611,7 @@ var toggleHierarchyParam = function toggleHierarchyParam() {
 
 var searchResult$h = 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);
@@ -25688,7 +25688,7 @@ __decorate([searchResult$h.Getter("displayFilters")], CurrentFilters.prototype,
 
 __decorate([searchResult$h.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);
 
@@ -29946,7 +29946,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 +30082,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 +31073,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 +31126,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 +32037,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);
@@ -32210,7 +32210,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);
 
@@ -32515,7 +32515,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);
@@ -32630,7 +32630,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);
 
@@ -33315,7 +33315,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);
@@ -33342,7 +33342,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);
 
@@ -33596,6 +33596,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);
@@ -33672,11 +33673,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: {
@@ -33687,7 +33687,6 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
         },
         labels: this.options.labels
       };
-      return r;
     }
   }, {
     key: "displayPageSelect",
@@ -33736,6 +33735,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({
@@ -34827,13 +34828,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",
@@ -36430,8 +36429,6 @@ var setDocumentTitle = function setDocumentTitle(template) {
   document.title = addParamsToLabel(template, textToInsert);
 };
 
-var MOBILE_WIDTH = 767;
-
 var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   _inherits(SearchResultModule, _VuexModule);
 
@@ -36528,7 +36525,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",
@@ -36993,9 +37007,39 @@ var OptionsModule = /*#__PURE__*/function (_VuexModule) {
   }, {
     key: "defaultSearchResultPageSize",
     get: function get() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
 
-      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;
+      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;
+
+      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";
@@ -23,6 +24,7 @@ export default class SearchResultModule extends VuexModule {
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
     get isMobileWidth(): boolean;
+    get currentScreenWidth(): ScreenSize;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;

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

@@ -70,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: {

package/dist/es/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/es/index.min.js

@@ -22143,7 +22143,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);
@@ -22241,7 +22241,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);
 
@@ -23672,7 +23672,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) {
@@ -23957,7 +23957,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);
 
@@ -25607,7 +25607,7 @@ var toggleHierarchyParam = function toggleHierarchyParam() {
 
 var searchResult$h = 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);
@@ -25684,7 +25684,7 @@ __decorate([searchResult$h.Getter("displayFilters")], CurrentFilters.prototype,
 
 __decorate([searchResult$h.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);
 
@@ -28619,7 +28619,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);
@@ -28826,7 +28826,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);
 
@@ -29942,7 +29942,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);
@@ -30078,9 +30078,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);
 
@@ -31069,7 +31069,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);
@@ -31122,7 +31122,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);
 
@@ -32033,7 +32033,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);
@@ -32206,7 +32206,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);
 
@@ -32511,7 +32511,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 +32626,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 +33311,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 +33338,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 +33592,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 +33669,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 +33683,6 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
         },
         labels: this.options.labels
       };
-      return r;
     }
   }, {
     key: "displayPageSelect",
@@ -33732,6 +33731,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 +34824,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 +36425,6 @@ var setDocumentTitle = function setDocumentTitle(template) {
   document.title = addParamsToLabel(template, textToInsert);
 };
 
-var MOBILE_WIDTH = 767;
-
 var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   _inherits(SearchResultModule, _VuexModule);
 
@@ -36524,7 +36521,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",
@@ -36989,9 +37003,39 @@ var OptionsModule = /*#__PURE__*/function (_VuexModule) {
   }, {
     key: "defaultSearchResultPageSize",
     get: function get() {
-      var _a, _b, _c, _d, _e;
+      var _a, _b;
 
-      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;
+      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;
+
+      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/es/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/es/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";
@@ -23,6 +24,7 @@ export default class SearchResultModule extends VuexModule {
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
     get isMobileWidth(): boolean;
+    get currentScreenWidth(): ScreenSize;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;

package/dist/es/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";