@everymatrix/helper-pagination - npm Package Compare versions

Comparing version 1.13.4 to 1.15.0

dist/cjs/helper-pagination.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
@@ -22,3 +22,3 @@ /**
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
@@ -48,2 +48,8 @@ en: {
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
@@ -56,3 +62,3 @@ };
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -64,9 +70,9 @@ const HelperPagination = class {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -89,4 +95,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -98,2 +104,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -121,16 +135,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -142,8 +157,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -162,3 +179,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -181,4 +197,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -190,3 +207,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -226,6 +243,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        index.h("div", { class: "LeftItems" }, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
@@ -235,8 +253,9 @@ /**
      */
-    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
     }
-    return (index.h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
@@ -243,0 +262,0 @@ };

dist/cjs/helper-pagination.cjs.js

 'use strict';
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
@@ -18,3 +18,3 @@ /*
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
@@ -18,3 +18,3 @@ /*
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/collection/components/helper-pagination/helper-pagination.js

@@ -7,9 +7,9 @@ import { Component, h, Event, Prop, State } from '@stencil/core';
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -32,4 +32,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -41,2 +41,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -64,16 +72,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -85,8 +94,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -105,3 +116,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -124,4 +134,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -133,3 +144,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -171,9 +182,16 @@ this.pagesArray.push('...');
      */
+    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') },
+      h("span", { class: "NavigationButton" }, translate('firstPage', this.language)),
+      h("span", { class: "NavigationIcon" }));
     let buttonsLeftSide = h("div", { class: "LeftItems" },
-      h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)),
-      h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+      this.secondaryArrowsActive && buttonSecondaryLeftSide,
+      h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
+        h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
+        h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
         h("div", { class: "LeftItems" },
-          h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+          h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
+            h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
+            h("span", { class: "NavigationIcon" })));
     }
@@ -183,14 +201,21 @@ /**
      */
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') },
+      h("span", { class: "NavigationButton" }, translate('lastPage', this.language)),
+      h("span", { class: "NavigationIcon" }));
     let buttonsRightSide = h("div", { class: "RightItems" },
-      h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)),
-      h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+      h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
+        h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
+        h("span", { class: "NavigationIcon" })),
+      this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
         h("div", { class: "RightItems" },
-          h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+          h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
+            h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
+            h("span", { class: "NavigationIcon" })));
     }
-    return (h("div", { id: "PaginationContainer" },
-      buttonsLeftSide,
-      navigationArea,
-      buttonsRightSide));
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el },
+      this.arrowsActive && buttonsLeftSide,
+      this.numberedNavActive && navigationArea,
+      this.arrowsActive && buttonsRightSide));
   }
@@ -206,8 +231,8 @@ static get is() { return "helper-pagination"; }
   static get properties() { return {
-    "firstPage": {
-      "type": "boolean",
+    "nextPage": {
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
@@ -219,14 +244,14 @@ },
         "tags": [],
-        "text": "First page boolean value - determines if the page is disabled or active"
+        "text": "Next page string value - determines if the next page is disabled or active"
       },
-      "attribute": "first-page",
+      "attribute": "next-page",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "''"
     },
-    "previousPage": {
-      "type": "boolean",
+    "prevPage": {
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
@@ -238,7 +263,7 @@ },
         "tags": [],
-        "text": "Previous page boolean value - determines if the page is disabled or active"
+        "text": "Previous page string value - determines if the previous page is disabled or active"
       },
-      "attribute": "previous-page",
+      "attribute": "prev-page",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "''"
     },
@@ -301,3 +326,3 @@ "offset": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
@@ -315,3 +340,3 @@ "original": "string",
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'en'"
@@ -321,3 +346,3 @@ },
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
@@ -335,3 +360,3 @@ "original": "string",
       "attribute": "client-styling",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
@@ -341,3 +366,3 @@ },
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
@@ -355,4 +380,55 @@ "original": "string",
       "attribute": "client-styling-url-content",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
+    },
+    "arrowsActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination arrows"
+      },
+      "attribute": "arrows-active",
+      "reflect": true
+    },
+    "secondaryArrowsActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination secondary arrows"
+      },
+      "attribute": "secondary-arrows-active",
+      "reflect": true
+    },
+    "numberedNavActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination numbered navigation"
+      },
+      "attribute": "numbered-nav-active",
+      "reflect": true
     }
@@ -363,2 +439,3 @@ }; }
     "lastPage": {},
+    "previousPage": {},
     "limitInt": {},
@@ -365,0 +442,0 @@ "totalInt": {},

dist/collection/utils/locale.utils.js

 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
@@ -27,2 +27,8 @@ en: {
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
@@ -29,0 +35,0 @@ };

dist/components/helper-pagination.js

@@ -17,3 +17,3 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
@@ -43,2 +43,8 @@ en: {
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
@@ -51,3 +57,3 @@ };
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -61,9 +67,9 @@ const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -86,4 +92,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -95,2 +101,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -118,16 +132,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -139,8 +154,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -159,3 +176,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -178,4 +194,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -187,3 +204,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -223,6 +240,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
@@ -232,21 +250,26 @@ /**
      */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
   static get style() { return helperPaginationCss; }
 }, [1, "helper-pagination", {
-    "firstPage": [1540, "first-page"],
-    "previousPage": [1540, "previous-page"],
+    "nextPage": [1537, "next-page"],
+    "prevPage": [1537, "prev-page"],
     "offset": [1538],
     "limit": [1538],
     "total": [1538],
-    "language": [1],
-    "clientStyling": [1, "client-styling"],
-    "clientStylingUrlContent": [1, "client-styling-url-content"],
+    "language": [1537],
+    "clientStyling": [1537, "client-styling"],
+    "clientStylingUrlContent": [1537, "client-styling-url-content"],
+    "arrowsActive": [1540, "arrows-active"],
+    "secondaryArrowsActive": [1540, "secondary-arrows-active"],
+    "numberedNavActive": [1540, "numbered-nav-active"],
     "offsetInt": [32],
     "lastPage": [32],
+    "previousPage": [32],
     "limitInt": [32],
@@ -253,0 +276,0 @@ "totalInt": [32],

dist/esm/helper-pagination.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h } from './index-fe031733.js';
+import { r as registerInstance, c as createEvent, h } from './index-b281577e.js';
 
@@ -17,3 +17,3 @@ /**
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
@@ -43,2 +43,8 @@ en: {
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
@@ -51,3 +57,3 @@ };
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
 
@@ -59,9 +65,9 @@ const HelperPagination = class {
     /**
-     * First page boolean value - determines if the page is disabled or active
+     * Next page string value - determines if the next page is disabled or active
      */
-    this.firstPage = false;
+    this.nextPage = '';
     /**
-     * Previous page boolean value - determines if the page is disabled or active
+     * Previous page string value - determines if the previous page is disabled or active
      */
-    this.previousPage = false;
+    this.prevPage = '';
     /**
@@ -84,4 +90,4 @@ * The received offset
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
@@ -93,2 +99,10 @@ /**
     /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
      * In component working variable for the array of pages
@@ -116,16 +130,17 @@ */
         case 'previousPage':
-          this.offsetInt -= 10;
+          this.offsetInt -= this.limitInt;
           break;
         case 'nextPage':
-          this.offsetInt += 10;
+          this.offsetInt += this.limitInt;
           break;
         case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
           break;
         case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
           break;
       }
+      this.previousPage = !this.offsetInt ? false : true;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -137,8 +152,10 @@ };
     this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
       if (!isNaN(pageNumber)) {
         if (pageNumber === 1) {
           this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
         }
         else {
-          this.offsetInt = (pageNumber - 1) * 10;
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
         }
@@ -157,3 +174,2 @@ }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
@@ -176,4 +192,5 @@ };
     this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
     this.limitInt = this.limit;
+    this.currentPage = (this.offsetInt / this.limitInt) + 1;
+    this.limitInt = this.limit;
     this.totalInt = this.total;
@@ -185,3 +202,3 @@ this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
@@ -221,6 +238,7 @@ this.pagesArray.push('...');
      */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     if (isMobile(this.userAgent)) {
       buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+        h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
@@ -230,8 +248,9 @@ /**
      */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
     if (isMobile(this.userAgent)) {
       buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+        h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
     }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
   }
@@ -238,0 +257,0 @@ };

dist/esm/helper-pagination.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-fe031733.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-b281577e.js';
 
@@ -16,3 +16,3 @@ /*
 patchBrowser().then(options => {
-  return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
 });

dist/esm/loader.js

@@ -1,2 +0,2 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-fe031733.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-b281577e.js';
 
@@ -13,3 +13,3 @@ /*
   return patchEsm().then(() => {
-  return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/helper-pagination/helper-pagination.esm.js

@@ -1,1 +0,1 @@
-import{p as t,b as n}from"./p-68c68be2.js";(()=>{const n=import.meta.url,e={};return""!==n&&(e.resourcesUrl=new URL(".",n).href),t(e)})().then((t=>n([["p-8258fc5c",[[1,"helper-pagination",{firstPage:[1540,"first-page"],previousPage:[1540,"previous-page"],offset:[1538],limit:[1538],total:[1538],language:[1],clientStyling:[1,"client-styling"],clientStylingUrlContent:[1,"client-styling-url-content"],offsetInt:[32],lastPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],t)));
+import{p as e,b as t}from"./p-eab215a1.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((e=>t([["p-c5036ea6",[[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],clientStyling:[1537,"client-styling"],clientStylingUrlContent:[1537,"client-styling-url-content"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e)));

dist/types/components.d.ts

@@ -11,2 +11,6 @@ /* eslint-disable */
         /**
+          * Customize pagination: Activate pagination arrows
+         */
+        "arrowsActive": boolean;
+        /**
           * Client custom styling via string
@@ -20,6 +24,2 @@ */
         /**
-          * First page boolean value - determines if the page is disabled or active
-         */
-        "firstPage": boolean;
-        /**
           * Language
@@ -33,2 +33,10 @@ */
         /**
+          * Next page string value - determines if the next page is disabled or active
+         */
+        "nextPage": string;
+        /**
+          * Customize pagination: Activate pagination numbered navigation
+         */
+        "numberedNavActive": boolean;
+        /**
           * The received offset
@@ -38,6 +46,10 @@ */
         /**
-          * Previous page boolean value - determines if the page is disabled or active
+          * Previous page string value - determines if the previous page is disabled or active
          */
-        "previousPage": boolean;
+        "prevPage": string;
         /**
+          * Customize pagination: Activate pagination secondary arrows
+         */
+        "secondaryArrowsActive": boolean;
+        /**
           * The received total number of pages
@@ -62,2 +74,6 @@ */
         /**
+          * Customize pagination: Activate pagination arrows
+         */
+        "arrowsActive"?: boolean;
+        /**
           * Client custom styling via string
@@ -71,6 +87,2 @@ */
         /**
-          * First page boolean value - determines if the page is disabled or active
-         */
-        "firstPage"?: boolean;
-        /**
           * Language
@@ -84,2 +96,10 @@ */
         /**
+          * Next page string value - determines if the next page is disabled or active
+         */
+        "nextPage"?: string;
+        /**
+          * Customize pagination: Activate pagination numbered navigation
+         */
+        "numberedNavActive"?: boolean;
+        /**
           * The received offset
@@ -93,6 +113,10 @@ */
         /**
-          * Previous page boolean value - determines if the page is disabled or active
+          * Previous page string value - determines if the previous page is disabled or active
          */
-        "previousPage"?: boolean;
+        "prevPage"?: string;
         /**
+          * Customize pagination: Activate pagination secondary arrows
+         */
+        "secondaryArrowsActive"?: boolean;
+        /**
           * The received total number of pages
@@ -99,0 +123,0 @@ */

dist/types/components/helper-pagination/helper-pagination.d.ts

 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class HelperPagination {
   /**
-   * First page boolean value - determines if the page is disabled or active
+   * Next page string value - determines if the next page is disabled or active
    */
-  firstPage: boolean;
+  nextPage: string;
   /**
-   * Previous page boolean value - determines if the page is disabled or active
+   * Previous page string value - determines if the previous page is disabled or active
    */
-  previousPage: boolean;
+  prevPage: string;
   /**
@@ -28,4 +28,4 @@ * The received offset
   /**
- * Client custom styling via string
- */
+   * Client custom styling via string
+   */
   clientStyling: string;
@@ -37,2 +37,14 @@ /**
   /**
+   * Customize pagination: Activate pagination arrows
+   */
+  arrowsActive: boolean;
+  /**
+   * Customize pagination: Activate pagination secondary arrows
+   */
+  secondaryArrowsActive: boolean;
+  /**
+   * Customize pagination: Activate pagination numbered navigation
+   */
+  numberedNavActive: boolean;
+  /**
    * Component working variable for offset
@@ -44,4 +56,8 @@ */
    */
-  private lastPage;
+  lastPage: boolean;
   /**
+   * Component working variable for prvious page
+   */
+  previousPage: boolean;
+  /**
    * Component working variable for limit
@@ -48,0 +64,0 @@ */

package.json

 {
   "name": "@everymatrix/helper-pagination",
-  "version": "1.13.4",
+  "version": "1.15.0",
   "main": "./dist/index.cjs.js",
@@ -11,3 +11,3 @@ "module": "./dist/index.js",
   "collection:main": "./dist/collection/index.js",
-  "unpkg": "./dist/helper-pagination/helper-pagination.js",
+  "unpkg": "./dist/helper-pagination/helper-pagination.esm.js",
   "files": [
@@ -14,0 +14,0 @@ "dist/",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

366366

increased by2.97%

Lines of code

6252

increased by3.56%

Number of medium supply chain risk alerts

2

decreased by-33.33%

No dependency changes