@everymatrix/helper-pagination 0.1.24 → 1.15.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
 /**
  * @name isMobile
@@ -18,7 +18,7 @@ const isMobile = (userAgent) => {
 };
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
   en: {
     firstPage: 'First',
@@ -43,6 +43,12 @@ const TRANSLATIONS = {
     previousPage: 'Previous',
     nextPage: 'Next',
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
 };
 const translate = (key, customLang) => {
@@ -50,20 +56,20 @@ const translate = (key, customLang) => {
   return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-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}}";
 
 const HelperPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.hpPageChange = index.createEvent(this, "hpPageChange", 7);
     /**
-     * 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 = '';
     /**
      * The received offset
      */
@@ -81,13 +87,21 @@ const HelperPagination = class {
      */
     this.language = 'en';
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
     /**
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * 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
      */
@@ -111,32 +125,35 @@ const HelperPagination = class {
           this.offsetInt = this.endInt * this.limitInt;
           break;
         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 });
     };
     /**
      * Handle navigation from here
      */
     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;
         }
       }
       else {
@@ -150,7 +167,6 @@ const HelperPagination = class {
           this.navigateTo('fivePagesForward');
         }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
     };
     this.setClientStyling = () => {
@@ -168,7 +184,8 @@ const HelperPagination = class {
   }
   componentWillRender() {
     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;
     this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
@@ -176,7 +193,7 @@ const HelperPagination = class {
     /**
      * Construct numbered navigation area based on current page position
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
       this.pagesArray.push('...');
     }
@@ -211,20 +228,22 @@ const HelperPagination = class {
     /**
      * Left navigation area
      */
-    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" })));
     }
     /**
      * Right navigation area
      */
-    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));
   }
 };
 HelperPagination.style = helperPaginationCss;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 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);
 });

package/dist/cjs/{index-4f0b2d1c.js → index-7c071a78.js}

@@ -234,6 +234,12 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'ref') {
+            // minifier will clean this up
+            if (newValue) {
+                newValue(elm);
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {
@@ -390,6 +396,7 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
             elm = vnode.$elm$;
+            callNodeRefs(vnode);
             // remove the vnode's element from the dom
             elm.remove();
         }
@@ -508,6 +515,12 @@ const patch = (oldVNode, newVNode) => {
         elm.data = text;
     }
 };
+const callNodeRefs = (vNode) => {
+    {
+        vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
+        vNode.$children$ && vNode.$children$.map(callNodeRefs);
+    }
+};
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4f0b2d1c.js');
+const index = require('./index-7c071a78.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   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);
   });
 };
 

package/dist/collection/components/helper-pagination/helper-pagination.css

@@ -6,7 +6,7 @@
 
 #PaginationContainer {
   width: 100%;
-  margin-top: 20px;
+  margin: 20px 0;
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
@@ -98,13 +98,13 @@ button:disabled {
 @media screen and (max-width: 720px) {
   button {
     width: 90px;
-    font-size: 12px;
+    font-size: 14px;
   }
 }
 @media screen and (max-width: 480px) {
   button {
     width: 70px;
-    font-size: 10px;
+    font-size: 14px;
   }
 
   .paginationArea {
@@ -114,7 +114,7 @@ button:disabled {
 @media screen and (max-width: 320px) {
   button {
     width: 58px;
-    font-size: 10px;
+    font-size: 12px;
   }
 
   .paginationArea {

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

@@ -4,13 +4,13 @@ import { translate } from '../../utils/locale.utils';
 export class HelperPagination {
   constructor() {
     /**
-     * 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 = '';
     /**
      * The received offset
      */
@@ -28,13 +28,21 @@ export class HelperPagination {
      */
     this.language = 'en';
     /**
-   * Client custom styling via string
-   */
+     * Client custom styling via string
+     */
     this.clientStyling = '';
     /**
      * Client custom styling via url content
      */
     this.clientStylingUrlContent = '';
+    /**
+     * 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
      */
@@ -58,32 +66,35 @@ export class HelperPagination {
           this.offsetInt = this.endInt * this.limitInt;
           break;
         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 });
     };
     /**
      * Handle navigation from here
      */
     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;
         }
       }
       else {
@@ -97,7 +108,6 @@ export class HelperPagination {
           this.navigateTo('fivePagesForward');
         }
       }
-      this.currentPage = this.offsetInt;
       this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
     };
     this.setClientStyling = () => {
@@ -115,7 +125,8 @@ export class HelperPagination {
   }
   componentWillRender() {
     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;
     this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
@@ -123,7 +134,7 @@ export class HelperPagination {
     /**
      * Construct numbered navigation area based on current page position
      */
-    if (this.currentPage === 1 || this.currentPage === 2) {
+    if (this.currentPage == 1 || this.currentPage == 2) {
       this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
       this.pagesArray.push('...');
     }
@@ -160,29 +171,43 @@ export class HelperPagination {
     /**
      * Left navigation area
      */
+    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" })));
     }
     /**
      * Right navigation area
      */
+    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));
   }
   static get is() { return "helper-pagination"; }
   static get encapsulation() { return "shadow"; }
@@ -193,41 +218,41 @@ export class HelperPagination {
     "$": ["helper-pagination.css"]
   }; }
   static get properties() { return {
-    "firstPage": {
-      "type": "boolean",
+    "nextPage": {
+      "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "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": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "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": "''"
     },
     "offset": {
       "type": "number",
@@ -285,7 +310,7 @@ export class HelperPagination {
     },
     "language": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -298,12 +323,12 @@ export class HelperPagination {
         "text": "Language"
       },
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "'en'"
     },
     "clientStyling": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -316,12 +341,12 @@ export class HelperPagination {
         "text": "Client custom styling via string"
       },
       "attribute": "client-styling",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "clientStylingUrlContent": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -334,13 +359,65 @@ export class HelperPagination {
         "text": "Client custom styling via url content"
       },
       "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
     }
   }; }
   static get states() { return {
     "offsetInt": {},
     "lastPage": {},
+    "previousPage": {},
     "limitInt": {},
     "totalInt": {},
     "pagesArray": {},

package/dist/collection/utils/locale.utils.js

@@ -1,5 +1,5 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu'];
 const TRANSLATIONS = {
   en: {
     firstPage: 'First',
@@ -24,6 +24,12 @@ const TRANSLATIONS = {
     previousPage: 'Previous',
     nextPage: 'Next',
     lastPage: 'Last'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
   }
 };
 export const translate = (key, customLang) => {