@getlupa/client 0.6.0-alpha-2 → 0.6.0-alpha-3

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

@@ -64,6 +64,9 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }): void;
+    setScreenWidth: ({ width, }: {
+        width: number;
+    }) => void;
     setColumnCount: ({ width, grid, }: {
         width: number;
         grid: ProductGrid;

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

@@ -5,6 +5,8 @@ export default class SearchResultsPageSelect extends Vue {
     lastPageLabel: string;
     firstPageLabel: string;
     options: PaginationPageSelect;
+    isMobileWidth: boolean;
+    get pageOptionsCount(): number;
     get pages(): number[];
     get showBack(): boolean;
     get lastPage(): number | undefined;

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

@@ -46,6 +46,7 @@ export declare const DEFAULT_OPTIONS_RESULTS: {
                 bottom: boolean;
             };
             display: number;
+            displayMobile: number;
         };
     };
     sort: never[];

package/dist/cjs/index.min.js

@@ -24229,7 +24229,8 @@ var DEFAULT_OPTIONS_RESULTS = {
         top: false,
         bottom: true
       },
-      display: 5
+      display: 5,
+      displayMobile: 3
     }
   },
   sort: [],
@@ -25608,7 +25609,7 @@ var toggleHierarchyParam = function toggleHierarchyParam() {
   return getMostSpecificHierarchyTerms([param].concat(_toConsumableArray(params)));
 };
 
-var searchResult$g = namespace("searchResult");
+var searchResult$h = namespace("searchResult");
 var params$c = namespace("params");
 var options$8 = namespace("options");
 
@@ -25679,13 +25680,13 @@ __decorate([Prop({
   default: false
 })], CurrentFilters.prototype, "expandable", void 0);
 
-__decorate([searchResult$g.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
+__decorate([searchResult$h.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
 
-__decorate([searchResult$g.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
+__decorate([searchResult$h.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
 
-__decorate([searchResult$g.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
+__decorate([searchResult$h.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
 
-__decorate([searchResult$g.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
+__decorate([searchResult$h.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
 
 __decorate([options$8.Getter("initialFilters")], CurrentFilters.prototype, "initialFilters", void 0);
 
@@ -29684,7 +29685,7 @@ var scrollTo = function scrollTo(elementId) {
   });
 };
 
-var searchResult$f = namespace("searchResult");
+var searchResult$g = namespace("searchResult");
 var params$b = namespace("params");
 
 var Facets = /*#__PURE__*/function (_Vue) {
@@ -29768,7 +29769,7 @@ __decorate([Prop({
 
 __decorate([params$b.Getter("filters")], Facets.prototype, "currentFilters", void 0);
 
-__decorate([searchResult$f.Getter("facets")], Facets.prototype, "facets", void 0);
+__decorate([searchResult$g.Getter("facets")], Facets.prototype, "facets", void 0);
 
 __decorate([params$b.Action("removeParams")], Facets.prototype, "removeParams", void 0);
 
@@ -30261,7 +30262,7 @@ var __vue_component__$D = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$D
 }, __vue_inject_styles__$D, __vue_script__$D, __vue_scope_id__$D, __vue_is_functional_template__$D, __vue_module_identifier__$D, false, undefined, undefined, undefined);
 
-var searchResult$e = namespace("searchResult");
+var searchResult$f = namespace("searchResult");
 
 var MobileFilterSidebar = /*#__PURE__*/function (_Vue) {
   _inherits(MobileFilterSidebar, _Vue);
@@ -30309,13 +30310,13 @@ var MobileFilterSidebar = /*#__PURE__*/function (_Vue) {
 
 __decorate([Prop()], MobileFilterSidebar.prototype, "options", void 0);
 
-__decorate([searchResult$e.Mutation("setSidebarVisibility")], MobileFilterSidebar.prototype, "setSidebarVisibility", void 0);
+__decorate([searchResult$f.Mutation("setSidebarVisibility")], MobileFilterSidebar.prototype, "setSidebarVisibility", void 0);
 
-__decorate([searchResult$e.State(function (state) {
+__decorate([searchResult$f.State(function (state) {
   return state.isMobileSidebarVisible;
 })], MobileFilterSidebar.prototype, "isMobileSidebarVisible", void 0);
 
-__decorate([searchResult$e.Getter("currentFilterCount")], MobileFilterSidebar.prototype, "currentFilterCount", void 0);
+__decorate([searchResult$f.Getter("currentFilterCount")], MobileFilterSidebar.prototype, "currentFilterCount", void 0);
 
 MobileFilterSidebar = __decorate([Component({
   name: "mobileFilerSidebar",
@@ -30384,7 +30385,7 @@ var __vue_component__$C = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$C
 }, __vue_inject_styles__$C, __vue_script__$C, __vue_scope_id__$C, __vue_is_functional_template__$C, __vue_module_identifier__$C, false, undefined, undefined, undefined);
 
-var searchResult$d = namespace("searchResult");
+var searchResult$e = namespace("searchResult");
 var params$a = namespace("params");
 
 var SearchResultsDidYouMean = /*#__PURE__*/function (_Vue) {
@@ -30437,7 +30438,7 @@ __decorate([Prop({
   default: ""
 })], SearchResultsDidYouMean.prototype, "labels", void 0);
 
-__decorate([searchResult$d.State(function (state) {
+__decorate([searchResult$e.State(function (state) {
   return state.searchResult;
 })], SearchResultsDidYouMean.prototype, "searchResult", void 0);
 
@@ -31587,7 +31588,7 @@ var __vue_component__$r = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$r
 }, __vue_inject_styles__$r, __vue_script__$r, __vue_scope_id__$r, __vue_is_functional_template__$r, __vue_module_identifier__$r, false, undefined, undefined, undefined);
 
-var searchResult$c = namespace("searchResult");
+var searchResult$d = namespace("searchResult");
 
 var SearchResultsProductAddToCart = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsProductAddToCart, _Vue);
@@ -31648,7 +31649,7 @@ __decorate([Prop({
   default: true
 })], SearchResultsProductAddToCart.prototype, "inStock", void 0);
 
-__decorate([searchResult$c.State(function (state) {
+__decorate([searchResult$d.State(function (state) {
   return state.addToCartAmount;
 })], SearchResultsProductAddToCart.prototype, "addToCartAmount", void 0);
 
@@ -32025,7 +32026,7 @@ var __vue_component__$n = /*#__PURE__*/normalizeComponent({
 
 var tracking$3 = namespace("tracking");
 var params$9 = namespace("params");
-var searchResult$b = namespace("searchResult");
+var searchResult$c = namespace("searchResult");
 var options$4 = namespace("options");
 
 var SearchResultsProductCard = /*#__PURE__*/function (_Vue) {
@@ -32193,7 +32194,7 @@ __decorate([Prop({
   default: false
 })], SearchResultsProductCard.prototype, "isAdditionalPanel", void 0);
 
-__decorate([searchResult$b.State(function (state) {
+__decorate([searchResult$c.State(function (state) {
   return state.layout;
 })], SearchResultsProductCard.prototype, "layout", void 0);
 
@@ -32901,6 +32902,7 @@ var __vue_component__$j = /*#__PURE__*/normalizeComponent({
 }, __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 params$6 = namespace("params");
+var searchResult$b = namespace("searchResult");
 
 var SearchResultsPageSelect = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsPageSelect, _Vue);
@@ -32914,12 +32916,17 @@ var SearchResultsPageSelect = /*#__PURE__*/function (_Vue) {
   }
 
   _createClass(SearchResultsPageSelect, [{
+    key: "pageOptionsCount",
+    get: function get() {
+      return this.isMobileWidth ? this.options.displayMobile : this.options.display;
+    }
+  }, {
     key: "pages",
     get: function get() {
       var currentPage = Math.min(this.options.count, this.options.selectedPage);
-      var delta = Math.floor(this.options.display / 2),
+      var delta = Math.floor(this.pageOptionsCount / 2),
           left = currentPage - delta,
-          right = currentPage + (this.options.display - delta);
+          right = currentPage + (this.pageOptionsCount - delta);
       return Array.from({
         length: this.options.count
       }, function (v, k) {
@@ -32992,6 +32999,8 @@ __decorate([Prop({
   default: {}
 })], SearchResultsPageSelect.prototype, "options", void 0);
 
+__decorate([searchResult$b.Getter("isMobileWidth")], SearchResultsPageSelect.prototype, "isMobileWidth", void 0);
+
 __decorate([params$6.Action("appendParams")], SearchResultsPageSelect.prototype, "appendParams", void 0);
 
 SearchResultsPageSelect = __decorate([Component({
@@ -33638,7 +33647,8 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
         pageSelect: {
           count: getPageCount(this.searchResult.total, this.limit),
           selectedPage: this.page,
-          display: pageSelect.display
+          display: pageSelect.display,
+          displayMobile: pageSelect.displayMobile
         },
         labels: this.options.labels
       };
@@ -34868,6 +34878,9 @@ var SearchResults = /*#__PURE__*/function (_Vue) {
         width: window.innerWidth,
         grid: this.options.grid
       });
+      this.setScreenWidth({
+        width: window.innerWidth
+      });
     }
   }]);
 
@@ -34920,6 +34933,8 @@ __decorate([searchResult$1.Action("setLoading")], SearchResults.prototype, "setL
 
 __decorate([options$1.Getter("defaultSearchResultPageSize")], SearchResults.prototype, "defaultSearchResultPageSize", void 0);
 
+__decorate([searchResult$1.Mutation("setScreenWidth")], SearchResults.prototype, "setScreenWidth", void 0);
+
 __decorate([searchResult$1.Action("setColumnCount")], SearchResults.prototype, "setColumnCount", void 0);
 
 SearchResults = __decorate([Component({
@@ -36376,6 +36391,8 @@ var setDocumentTitle = function setDocumentTitle(template) {
   document.title = addParamsToLabel(template, textToInsert);
 };
 
+var MOBILE_WIDTH = 767;
+
 var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   _inherits(SearchResultModule, _VuexModule);
 
@@ -36393,6 +36410,7 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     _this.layout = ResultsLayoutEnum.GRID;
     _this.loading = false;
     _this.isMobileSidebarVisible = false;
+    _this.screenWidth = 1000;
     return _this;
   }
 
@@ -36468,6 +36486,11 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
       var offset = (_b = this.searchResult.offset) !== null && _b !== void 0 ? _b : 0;
       return [offset + 1, Math.min(offset + limit, this.totalItems)];
     }
+  }, {
+    key: "isMobileWidth",
+    get: function get() {
+      return this.screenWidth < MOBILE_WIDTH;
+    }
   }, {
     key: "setSidebarVisibility",
     value: function setSidebarVisibility(_ref) {
@@ -36491,6 +36514,12 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     value: function load(loading) {
       this.loading = loading || false;
     }
+  }, {
+    key: "setScreenWidth",
+    value: function setScreenWidth(_ref3) {
+      var width = _ref3.width;
+      this.screenWidth = width;
+    }
   }, {
     key: "add",
     value: function add(searchResult) {
@@ -36509,9 +36538,9 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     }
   }, {
     key: "setColumnCount",
-    value: function setColumnCount(_ref3) {
-      var width = _ref3.width,
-          grid = _ref3.grid;
+    value: function setColumnCount(_ref4) {
+      var width = _ref4.width,
+          grid = _ref4.grid;
 
       if (!width || !grid) {
         return {
@@ -36583,6 +36612,8 @@ __decorate([Mutation], SearchResultModule.prototype, "save", null);
 
 __decorate([Mutation], SearchResultModule.prototype, "load", null);
 
+__decorate([Mutation], SearchResultModule.prototype, "setScreenWidth", null);
+
 __decorate([Action({
   commit: "save"
 })], SearchResultModule.prototype, "add", null);

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

@@ -10,6 +10,7 @@ export default class SearchResultModule extends VuexModule {
     layout: ResultsLayout;
     loading: boolean;
     isMobileSidebarVisible: boolean;
+    screenWidth: number;
     get facets(): FacetResult[] | undefined;
     get currentFilters(): FilterGroup | undefined;
     get filters(): FilterGroup;
@@ -21,6 +22,7 @@ export default class SearchResultModule extends VuexModule {
     get currentFilterCount(): number;
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
+    get isMobileWidth(): boolean;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;
@@ -31,6 +33,9 @@ export default class SearchResultModule extends VuexModule {
         layout?: ResultsLayout;
     }): void;
     load(loading: boolean): void;
+    setScreenWidth({ width }: {
+        width: number;
+    }): void;
     add(searchResult: SearchQueryResult): {
         searchResult: SearchQueryResult;
         pageSize: number;

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

@@ -12,6 +12,7 @@ export declare type PaginationPageSelect = {
     count: number;
     selectedPage: number;
     display: number;
+    displayMobile: number;
 };
 export declare type PaginationDisplay = {
     pageSize: boolean;

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

@@ -68,6 +68,7 @@ export declare type SearchResultsPagination = {
     pageSelection: {
         position: SearchResultsPaginationPosition;
         display: number;
+        displayMobile: number;
     };
 };
 export declare type SearchResultsPaginationPosition = {

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

@@ -64,6 +64,9 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }): void;
+    setScreenWidth: ({ width, }: {
+        width: number;
+    }) => void;
     setColumnCount: ({ width, grid, }: {
         width: number;
         grid: ProductGrid;

package/dist/es/components/search-results/products/pagination/SearchResultsPageSelect.vue.d.ts

@@ -5,6 +5,8 @@ export default class SearchResultsPageSelect extends Vue {
     lastPageLabel: string;
     firstPageLabel: string;
     options: PaginationPageSelect;
+    isMobileWidth: boolean;
+    get pageOptionsCount(): number;
     get pages(): number[];
     get showBack(): boolean;
     get lastPage(): number | undefined;

package/dist/es/constants/searchResults.const.d.ts

@@ -46,6 +46,7 @@ export declare const DEFAULT_OPTIONS_RESULTS: {
                 bottom: boolean;
             };
             display: number;
+            displayMobile: number;
         };
     };
     sort: never[];

package/dist/es/index.min.js

@@ -24225,7 +24225,8 @@ var DEFAULT_OPTIONS_RESULTS = {
         top: false,
         bottom: true
       },
-      display: 5
+      display: 5,
+      displayMobile: 3
     }
   },
   sort: [],
@@ -25604,7 +25605,7 @@ var toggleHierarchyParam = function toggleHierarchyParam() {
   return getMostSpecificHierarchyTerms([param].concat(_toConsumableArray(params)));
 };
 
-var searchResult$g = namespace("searchResult");
+var searchResult$h = namespace("searchResult");
 var params$c = namespace("params");
 var options$8 = namespace("options");
 
@@ -25675,13 +25676,13 @@ __decorate([Prop({
   default: false
 })], CurrentFilters.prototype, "expandable", void 0);
 
-__decorate([searchResult$g.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
+__decorate([searchResult$h.Getter("filters")], CurrentFilters.prototype, "currentFilters", void 0);
 
-__decorate([searchResult$g.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
+__decorate([searchResult$h.Getter("facets")], CurrentFilters.prototype, "facets", void 0);
 
-__decorate([searchResult$g.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
+__decorate([searchResult$h.Getter("displayFilters")], CurrentFilters.prototype, "displayFilters", void 0);
 
-__decorate([searchResult$g.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
+__decorate([searchResult$h.Getter("currentFilterCount")], CurrentFilters.prototype, "currentFilterCount", void 0);
 
 __decorate([options$8.Getter("initialFilters")], CurrentFilters.prototype, "initialFilters", void 0);
 
@@ -29680,7 +29681,7 @@ var scrollTo = function scrollTo(elementId) {
   });
 };
 
-var searchResult$f = namespace("searchResult");
+var searchResult$g = namespace("searchResult");
 var params$b = namespace("params");
 
 var Facets = /*#__PURE__*/function (_Vue) {
@@ -29764,7 +29765,7 @@ __decorate([Prop({
 
 __decorate([params$b.Getter("filters")], Facets.prototype, "currentFilters", void 0);
 
-__decorate([searchResult$f.Getter("facets")], Facets.prototype, "facets", void 0);
+__decorate([searchResult$g.Getter("facets")], Facets.prototype, "facets", void 0);
 
 __decorate([params$b.Action("removeParams")], Facets.prototype, "removeParams", void 0);
 
@@ -30257,7 +30258,7 @@ var __vue_component__$D = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$D
 }, __vue_inject_styles__$D, __vue_script__$D, __vue_scope_id__$D, __vue_is_functional_template__$D, __vue_module_identifier__$D, false, undefined, undefined, undefined);
 
-var searchResult$e = namespace("searchResult");
+var searchResult$f = namespace("searchResult");
 
 var MobileFilterSidebar = /*#__PURE__*/function (_Vue) {
   _inherits(MobileFilterSidebar, _Vue);
@@ -30305,13 +30306,13 @@ var MobileFilterSidebar = /*#__PURE__*/function (_Vue) {
 
 __decorate([Prop()], MobileFilterSidebar.prototype, "options", void 0);
 
-__decorate([searchResult$e.Mutation("setSidebarVisibility")], MobileFilterSidebar.prototype, "setSidebarVisibility", void 0);
+__decorate([searchResult$f.Mutation("setSidebarVisibility")], MobileFilterSidebar.prototype, "setSidebarVisibility", void 0);
 
-__decorate([searchResult$e.State(function (state) {
+__decorate([searchResult$f.State(function (state) {
   return state.isMobileSidebarVisible;
 })], MobileFilterSidebar.prototype, "isMobileSidebarVisible", void 0);
 
-__decorate([searchResult$e.Getter("currentFilterCount")], MobileFilterSidebar.prototype, "currentFilterCount", void 0);
+__decorate([searchResult$f.Getter("currentFilterCount")], MobileFilterSidebar.prototype, "currentFilterCount", void 0);
 
 MobileFilterSidebar = __decorate([Component({
   name: "mobileFilerSidebar",
@@ -30380,7 +30381,7 @@ var __vue_component__$C = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$C
 }, __vue_inject_styles__$C, __vue_script__$C, __vue_scope_id__$C, __vue_is_functional_template__$C, __vue_module_identifier__$C, false, undefined, undefined, undefined);
 
-var searchResult$d = namespace("searchResult");
+var searchResult$e = namespace("searchResult");
 var params$a = namespace("params");
 
 var SearchResultsDidYouMean = /*#__PURE__*/function (_Vue) {
@@ -30433,7 +30434,7 @@ __decorate([Prop({
   default: ""
 })], SearchResultsDidYouMean.prototype, "labels", void 0);
 
-__decorate([searchResult$d.State(function (state) {
+__decorate([searchResult$e.State(function (state) {
   return state.searchResult;
 })], SearchResultsDidYouMean.prototype, "searchResult", void 0);
 
@@ -31583,7 +31584,7 @@ var __vue_component__$r = /*#__PURE__*/normalizeComponent({
   staticRenderFns: __vue_staticRenderFns__$r
 }, __vue_inject_styles__$r, __vue_script__$r, __vue_scope_id__$r, __vue_is_functional_template__$r, __vue_module_identifier__$r, false, undefined, undefined, undefined);
 
-var searchResult$c = namespace("searchResult");
+var searchResult$d = namespace("searchResult");
 
 var SearchResultsProductAddToCart = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsProductAddToCart, _Vue);
@@ -31644,7 +31645,7 @@ __decorate([Prop({
   default: true
 })], SearchResultsProductAddToCart.prototype, "inStock", void 0);
 
-__decorate([searchResult$c.State(function (state) {
+__decorate([searchResult$d.State(function (state) {
   return state.addToCartAmount;
 })], SearchResultsProductAddToCart.prototype, "addToCartAmount", void 0);
 
@@ -32021,7 +32022,7 @@ var __vue_component__$n = /*#__PURE__*/normalizeComponent({
 
 var tracking$3 = namespace("tracking");
 var params$9 = namespace("params");
-var searchResult$b = namespace("searchResult");
+var searchResult$c = namespace("searchResult");
 var options$4 = namespace("options");
 
 var SearchResultsProductCard = /*#__PURE__*/function (_Vue) {
@@ -32189,7 +32190,7 @@ __decorate([Prop({
   default: false
 })], SearchResultsProductCard.prototype, "isAdditionalPanel", void 0);
 
-__decorate([searchResult$b.State(function (state) {
+__decorate([searchResult$c.State(function (state) {
   return state.layout;
 })], SearchResultsProductCard.prototype, "layout", void 0);
 
@@ -32897,6 +32898,7 @@ var __vue_component__$j = /*#__PURE__*/normalizeComponent({
 }, __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 params$6 = namespace("params");
+var searchResult$b = namespace("searchResult");
 
 var SearchResultsPageSelect = /*#__PURE__*/function (_Vue) {
   _inherits(SearchResultsPageSelect, _Vue);
@@ -32910,12 +32912,17 @@ var SearchResultsPageSelect = /*#__PURE__*/function (_Vue) {
   }
 
   _createClass(SearchResultsPageSelect, [{
+    key: "pageOptionsCount",
+    get: function get() {
+      return this.isMobileWidth ? this.options.displayMobile : this.options.display;
+    }
+  }, {
     key: "pages",
     get: function get() {
       var currentPage = Math.min(this.options.count, this.options.selectedPage);
-      var delta = Math.floor(this.options.display / 2),
+      var delta = Math.floor(this.pageOptionsCount / 2),
           left = currentPage - delta,
-          right = currentPage + (this.options.display - delta);
+          right = currentPage + (this.pageOptionsCount - delta);
       return Array.from({
         length: this.options.count
       }, function (v, k) {
@@ -32988,6 +32995,8 @@ __decorate([Prop({
   default: {}
 })], SearchResultsPageSelect.prototype, "options", void 0);
 
+__decorate([searchResult$b.Getter("isMobileWidth")], SearchResultsPageSelect.prototype, "isMobileWidth", void 0);
+
 __decorate([params$6.Action("appendParams")], SearchResultsPageSelect.prototype, "appendParams", void 0);
 
 SearchResultsPageSelect = __decorate([Component({
@@ -33634,7 +33643,8 @@ var SearchResultsToolbar = /*#__PURE__*/function (_Vue) {
         pageSelect: {
           count: getPageCount(this.searchResult.total, this.limit),
           selectedPage: this.page,
-          display: pageSelect.display
+          display: pageSelect.display,
+          displayMobile: pageSelect.displayMobile
         },
         labels: this.options.labels
       };
@@ -34864,6 +34874,9 @@ var SearchResults = /*#__PURE__*/function (_Vue) {
         width: window.innerWidth,
         grid: this.options.grid
       });
+      this.setScreenWidth({
+        width: window.innerWidth
+      });
     }
   }]);
 
@@ -34916,6 +34929,8 @@ __decorate([searchResult$1.Action("setLoading")], SearchResults.prototype, "setL
 
 __decorate([options$1.Getter("defaultSearchResultPageSize")], SearchResults.prototype, "defaultSearchResultPageSize", void 0);
 
+__decorate([searchResult$1.Mutation("setScreenWidth")], SearchResults.prototype, "setScreenWidth", void 0);
+
 __decorate([searchResult$1.Action("setColumnCount")], SearchResults.prototype, "setColumnCount", void 0);
 
 SearchResults = __decorate([Component({
@@ -36372,6 +36387,8 @@ var setDocumentTitle = function setDocumentTitle(template) {
   document.title = addParamsToLabel(template, textToInsert);
 };
 
+var MOBILE_WIDTH = 767;
+
 var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
   _inherits(SearchResultModule, _VuexModule);
 
@@ -36389,6 +36406,7 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     _this.layout = ResultsLayoutEnum.GRID;
     _this.loading = false;
     _this.isMobileSidebarVisible = false;
+    _this.screenWidth = 1000;
     return _this;
   }
 
@@ -36464,6 +36482,11 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
       var offset = (_b = this.searchResult.offset) !== null && _b !== void 0 ? _b : 0;
       return [offset + 1, Math.min(offset + limit, this.totalItems)];
     }
+  }, {
+    key: "isMobileWidth",
+    get: function get() {
+      return this.screenWidth < MOBILE_WIDTH;
+    }
   }, {
     key: "setSidebarVisibility",
     value: function setSidebarVisibility(_ref) {
@@ -36487,6 +36510,12 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     value: function load(loading) {
       this.loading = loading || false;
     }
+  }, {
+    key: "setScreenWidth",
+    value: function setScreenWidth(_ref3) {
+      var width = _ref3.width;
+      this.screenWidth = width;
+    }
   }, {
     key: "add",
     value: function add(searchResult) {
@@ -36505,9 +36534,9 @@ var SearchResultModule = /*#__PURE__*/function (_VuexModule) {
     }
   }, {
     key: "setColumnCount",
-    value: function setColumnCount(_ref3) {
-      var width = _ref3.width,
-          grid = _ref3.grid;
+    value: function setColumnCount(_ref4) {
+      var width = _ref4.width,
+          grid = _ref4.grid;
 
       if (!width || !grid) {
         return {
@@ -36579,6 +36608,8 @@ __decorate([Mutation], SearchResultModule.prototype, "save", null);
 
 __decorate([Mutation], SearchResultModule.prototype, "load", null);
 
+__decorate([Mutation], SearchResultModule.prototype, "setScreenWidth", null);
+
 __decorate([Action({
   commit: "save"
 })], SearchResultModule.prototype, "add", null);

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

@@ -10,6 +10,7 @@ export default class SearchResultModule extends VuexModule {
     layout: ResultsLayout;
     loading: boolean;
     isMobileSidebarVisible: boolean;
+    screenWidth: number;
     get facets(): FacetResult[] | undefined;
     get currentFilters(): FilterGroup | undefined;
     get filters(): FilterGroup;
@@ -21,6 +22,7 @@ export default class SearchResultModule extends VuexModule {
     get currentFilterCount(): number;
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
+    get isMobileWidth(): boolean;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;
@@ -31,6 +33,9 @@ export default class SearchResultModule extends VuexModule {
         layout?: ResultsLayout;
     }): void;
     load(loading: boolean): void;
+    setScreenWidth({ width }: {
+        width: number;
+    }): void;
     add(searchResult: SearchQueryResult): {
         searchResult: SearchQueryResult;
         pageSize: number;

package/dist/es/types/search-results/PaginationOptions.d.ts

@@ -12,6 +12,7 @@ export declare type PaginationPageSelect = {
     count: number;
     selectedPage: number;
     display: number;
+    displayMobile: number;
 };
 export declare type PaginationDisplay = {
     pageSize: boolean;

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

@@ -68,6 +68,7 @@ export declare type SearchResultsPagination = {
     pageSelection: {
         position: SearchResultsPaginationPosition;
         display: number;
+        displayMobile: number;
     };
 };
 export declare type SearchResultsPaginationPosition = {