@everymatrix/bonus-pagination-nav 1.47.3 → 1.48.0

package/dist/bonus-pagination-nav/bonus-pagination-nav.esm.js

@@ -1 +1 @@
-import{p as a,b as e}from"./p-57809f35.js";export{s as setNonce}from"./p-57809f35.js";import{g as t}from"./p-e1255160.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-f71ef42b",[[0,"bonus-pagination-nav",{total:[1538],limit:[1538],offset:[1538],tableId:[1537,"table-id"],language:[1537],translationUrl:[513,"translation-url"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],displayPageNumbers:[1540,"display-page-numbers"],displayRangeOfTotal:[1540,"display-range-of-total"],endPageIndex:[32],pagesArray:[32],currentPage:[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]],a))));
+import{p as a,b as e}from"./p-57809f35.js";export{s as setNonce}from"./p-57809f35.js";import{g as t}from"./p-e1255160.js";(()=>{const e=import.meta.url,t={};return""!==e&&(t.resourcesUrl=new URL(".",e).href),a(t)})().then((async a=>(await t(),e([["p-d98a7643",[[0,"bonus-pagination-nav",{total:[1538],limit:[1538],offset:[1538],tableId:[1537,"table-id"],language:[1537],translationUrl:[513,"translation-url"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],displayPageNumbers:[1540,"display-page-numbers"],displayRangeOfTotal:[1540,"display-range-of-total"],navItemAccount:[1538,"nav-item-account"],endPageIndex:[32],pagesArray:[32],currentPage:[32],showAsEllipsisMid:[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]],a))));

package/dist/bonus-pagination-nav/p-d98a7643.entry.js

@@ -0,0 +1 @@
+import{r as t,c as e,h as a}from"./p-57809f35.js";const i=["pt-br","en","es-mx","hu","hr"],s={en:{firstPage:"|<",lastPage:">|",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},hu:{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},hr:{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},"pt-br":{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},"es-mx":{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"}},r=(t,e,a)=>{const r=e;let h=s[void 0!==r&&i.includes(r)?r:"en"][t];if(void 0!==a)for(const[t,e]of Object.entries(a.values)){const a=new RegExp(`{${t}}`,"g");h=h.replace(a,e)}return h},h=class{constructor(a){t(this,a),this.reloadPageEmitter=e(this,"reloadPageByType",7),this.total=1,this.limit=10,this.offset=0,this.tableId="default",this.language="en",this.translationUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!0,this.displayPageNumbers=!0,this.displayRangeOfTotal=void 0,this.navItemAccount=5,this.endPageIndex=0,this.pagesArray=void 0,this.currentPage=1,this.showAsEllipsisMid=!this.arrowsActive}pageLimitChangedHandler(t){this.limit=t.detail.limit?t.detail.limit:this.limit,this.currentPage=1,this.offset=0,this.updatePageStatus(),"pageLimitChanged"==t.type&&this.reloadPageEmitter.emit({offset:0,limit:this.limit,tableId:this.tableId})}goTo(t){"..."==t||0==t||parseInt(t.toString(),10)>this.endPageIndex+1||(this.currentPage=t,this.reloadPageEmitter.emit({offset:(this.currentPage-1)*this.limit,limit:this.limit,tableId:this.tableId}))}renderPageList(){return a("ul",{class:"PaginationArea"},this.pagesArray.map((t=>a("li",{class:"PageItem "+(this.currentPage==t?"Active":""),onClick:()=>{this.goTo(t)}},t))))}renderStylingWrapper(){return a("general-styling-wrapper",{targetTranslations:s,translationUrl:this.translationUrl})}generateNavItemsByType(t,e){if(this.endPageIndex<t)return Array.from({length:this.endPageIndex+1},((t,e)=>e+1));let a=[],i=Math.floor(t/2);const s=this.endPageIndex+1;return e?this.currentPage<i||this.currentPage>s-i+1?(a=Array.from({length:i},((t,e)=>e+1)),a.push("..."),a=a.concat(Array.from({length:i},((t,e)=>this.endPageIndex-1+e)))):this.currentPage==i?(a=Array.from({length:i+1},((t,e)=>e+1)),a.push("..."),a=a.concat(Array.from({length:i-1},((t,e)=>this.endPageIndex+e)))):this.currentPage==s-i+1?(a=Array.from({length:i-1},((t,e)=>e+1)),a.push("..."),a=a.concat(Array.from({length:i+1},((t,e)=>this.endPageIndex-2+e)))):(a=[1,"..."],a=a.concat([this.currentPage-1],[this.currentPage],[this.currentPage+1]),a=a.concat(["...",s])):this.currentPage<i-1?(a=Array.from({length:t-1},((t,e)=>e+1)),a.push("...")):this.endPageIndex-this.currentPage<i+1?(a=Array.from({length:t-1},((t,e)=>this.endPageIndex-i+e)),a.unshift("...")):(a=Array.from({length:i+1},((t,e)=>this.currentPage+e-1)),a.push("..."),a.unshift("...")),a}updatePageStatus(){this.endPageIndex=Math.ceil(this.total/this.limit)-1,this.endPageIndex=this.endPageIndex<0?this.endPageIndex=0:this.endPageIndex,this.pagesArray=this.generateNavItemsByType(this.navItemAccount,this.showAsEllipsisMid)}componentWillRender(){this.currentPage=Math.floor(this.offset/this.limit)+1,this.updatePageStatus()}render(){return a("div",{key:"aa8d14788833b1b0e13ea20943935b03a3b043ac",class:"PageNavigationWrapper"},this.displayRangeOfTotal&&this.total>0&&a("span",{key:"a018261b6c598116829d878b8120aee7ae2576c4",class:"PageOfMessage"},r("pageOfTotal",this.language,{values:{start:(this.currentPage-1)*this.limit+1,end:this.currentPage*this.limit>this.total?this.total:this.currentPage*this.limit,total:this.total}})),a("div",{key:"64fc17d0b992b30a4b8d712e47442ee6a2d44b82",class:"PageNavigation"},this.arrowsActive&&a("div",{key:"f5f3b562fbdfb9e4b39ffd9755e5dba41e6231ba",class:"PageArrow FirstPage "+(1==this.currentPage?"Disabled":""),onClick:()=>{this.goTo(1)}},r("firstPage",this.language)),this.secondaryArrowsActive&&a("span",{key:"39222e258f6c63502bfd3914c673d804edc96b53",class:"PageArrow PrePage "+(1==this.currentPage?"Disabled":""),onClick:()=>{this.goTo(this.currentPage-1)}},r("prePage",this.language)),this.displayPageNumbers&&this.renderPageList(),this.secondaryArrowsActive&&a("span",{key:"d6f9a1394debdae49702713ccc59bea710ccd7ae",class:"PageArrow NextPage "+(this.currentPage==this.endPageIndex+1?"Disabled":""),onClick:()=>{this.goTo(this.currentPage+1)}},r("nextPage",this.language)),this.arrowsActive&&a("div",{key:"d2bb76f9d40fcfc3dbc6bb5fbfe6d237e77f0ee6",class:"PageArrow LastPage "+(this.currentPage==this.endPageIndex+1?"Disabled":""),onClick:()=>{this.goTo(this.endPageIndex+1)}}," ",r("lastPage",this.language)," "),this.renderStylingWrapper()))}};h.style=":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row;height:100%;align-content:center}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";export{h as bonus_pagination_nav}

package/dist/cjs/bonus-pagination-nav.cjs.entry.js

@@ -55,7 +55,7 @@ const translate = (key, customLang, values) => {
     return translation;
 };
 
-const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
+const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row;height:100%;align-content:center}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
 const BonusPaginationNavStyle0 = bonusPaginationNavCss;
 
 const BonusPaginationNav = class {
@@ -72,9 +72,11 @@ const BonusPaginationNav = class {
         this.secondaryArrowsActive = true;
         this.displayPageNumbers = true;
         this.displayRangeOfTotal = undefined;
+        this.navItemAccount = 5;
         this.endPageIndex = 0;
         this.pagesArray = undefined;
         this.currentPage = 1;
+        this.showAsEllipsisMid = !this.arrowsActive;
     }
     pageLimitChangedHandler(event) {
         this.limit = event.detail.limit ? event.detail.limit : this.limit;
@@ -104,31 +106,74 @@ const BonusPaginationNav = class {
     renderStylingWrapper() {
         return index.h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
     }
-    updatePageStatus() {
-        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
-        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
-        this.pagesArray = [];
-        if (this.endPageIndex < 5) {
-            this.pagesArray = Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+    /**
+     *
+     * @param maxNavItemsCount
+     * @param ellipsisMid
+     * @private
+     */
+    generateNavItemsByType(maxNavItemsCount, ellipsisMid) {
+        if (this.endPageIndex < maxNavItemsCount) {
+            return Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+        }
+        let pageArray = [];
+        /**
+         * Construct numbered navigation area based on current page position
+         * if ellipsisMid => 1, 2, 3 ... 8,9,10  / 1 ... 5,6,7,...10
+         * else => 1, 2, ... / ... 2, 3,4... / ... 9, 10
+         */
+        let halfOfMaxPageCount = Math.floor(maxNavItemsCount / 2);
+        const firstPageNo = 1, lastPageNo = this.endPageIndex + 1;
+        if (ellipsisMid) {
+            //Assume navItemAccount = 7, and totalPage = 10, in this case, we got  halfOfMaxPageCount = 3,
+            if (this.currentPage < halfOfMaxPageCount || this.currentPage > (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: (1, 2, 9, 10)
+                //Nav show as   ( 1, 2, 3, ..., 8, 9, 10)
+                pageArray = Array.from({ length: halfOfMaxPageCount }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount }, (_, i) => (this.endPageIndex - 1) + i));
+            }
+            else if (this.currentPage == halfOfMaxPageCount) {
+                //current page: 3 (=halfOfMaxPageCount)
+                //Nav show as  ( 1, 2, 3, 4, ..., 9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => (this.endPageIndex) + i));
+            }
+            else if (this.currentPage == (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: 8, (the page index after this.total - halfOfMaxPageCount  )  Nav show as   ( 1, 2, ... ,7, 8,9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => (this.endPageIndex - 2) + i));
+            }
+            else {
+                //current page: > 3 and < 7, let's say is 5 Nav show as   ( 1, ..., 4, 5, 6, ... ,10)
+                pageArray = [firstPageNo, '...'];
+                pageArray = pageArray.concat([this.currentPage - 1], [this.currentPage], [this.currentPage + 1]);
+                pageArray = pageArray.concat(['...', lastPageNo]);
+            }
         }
         else {
-            /**
-             * Construct numbered navigation area based on current page position
-             */
-            if (this.currentPage == 1 || this.currentPage == 2) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-                this.pagesArray.push('...');
+            if (this.currentPage < (halfOfMaxPageCount - 1)) { // when current page is in first half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => i + 1);
+                pageArray.push('...');
             }
-            else if (this.currentPage >= 3 && ((this.endPageIndex - this.currentPage) >= 2)) {
-                this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-                this.pagesArray.push('...');
-                this.pagesArray.unshift('...');
+            else if ((this.endPageIndex - this.currentPage) < (halfOfMaxPageCount + 1)) { // when current page is in last half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => this.endPageIndex - halfOfMaxPageCount + i);
+                pageArray.unshift('...');
             }
-            else if ((this.endPageIndex - this.currentPage) < 3) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
-                this.pagesArray.unshift('...');
+            else {
+                pageArray = Array.from({ length: (halfOfMaxPageCount + 1) }, (_, i) => this.currentPage + i - 1);
+                pageArray.push('...');
+                pageArray.unshift('...');
             }
         }
+        return pageArray;
+    }
+    updatePageStatus() {
+        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
+        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
+        this.pagesArray = this.generateNavItemsByType(this.navItemAccount, this.showAsEllipsisMid);
     }
     componentWillRender() {
         this.currentPage = Math.floor(this.offset / this.limit) + 1;
@@ -137,23 +182,23 @@ const BonusPaginationNav = class {
     render() {
         const startOffset = (this.currentPage - 1) * this.limit + 1;
         const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
-        return index.h("div", { key: 'a6817c12f1e1e9960f8e91cfd5c5e2fa1ea72f7f', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && index.h("span", { key: '8f7a16c5835147e2a83808f882a66a2463e3998e', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
+        return index.h("div", { key: 'aa8d14788833b1b0e13ea20943935b03a3b043ac', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && index.h("span", { key: 'a018261b6c598116829d878b8120aee7ae2576c4', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
             values: {
                 start: startOffset,
                 end: endOffset,
                 total: this.total
             }
-        })), index.h("div", { key: 'ddc20a86777c2fde667ad8b75ab86f3bc72ccfdb', class: 'PageNavigation' }, this.arrowsActive &&
-            index.h("div", { key: 'ce2a45b8c0d6e32cfa3f1c5cc8b3c9ac58acc409', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+        })), index.h("div", { key: '64fc17d0b992b30a4b8d712e47442ee6a2d44b82', class: 'PageNavigation' }, this.arrowsActive &&
+            index.h("div", { key: 'f5f3b562fbdfb9e4b39ffd9755e5dba41e6231ba', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(1);
                 } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
-            index.h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+            index.h("span", { key: '39222e258f6c63502bfd3914c673d804edc96b53', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage - 1);
                 } }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
-            index.h("span", { key: 'a6ed748ce3e2555ac3d9d4bae174ad5bad0fabec', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
+            index.h("span", { key: 'd6f9a1394debdae49702713ccc59bea710ccd7ae', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage + 1);
                 } }, translate('nextPage', this.language)), this.arrowsActive &&
-            index.h("div", { key: '60a81a86f11e2bb07ee93b61d6f367a11b0e2b6c', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
+            index.h("div", { key: 'd2bb76f9d40fcfc3dbc6bb5fbfe6d237e77f0ee6', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.endPageIndex + 1);
                 } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
     }

package/dist/cjs/bonus-pagination-nav.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bonus-pagination-nav.cjs",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["bonus-pagination-nav.cjs",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bonus-pagination-nav.cjs",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
+  return index.bootstrapLazy([["bonus-pagination-nav.cjs",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/bonus-pagination-nav/bonus-pagination-nav.css

@@ -5,6 +5,8 @@
 .PageNavigationWrapper {
   display: flex;
   flex-direction: row;
+  height: 100%;
+  align-content: center;
 }
 .PageNavigationWrapper .PageOfMessage {
   margin: 5px;

package/dist/collection/components/bonus-pagination-nav/bonus-pagination-nav.js

@@ -12,9 +12,11 @@ export class BonusPaginationNav {
         this.secondaryArrowsActive = true;
         this.displayPageNumbers = true;
         this.displayRangeOfTotal = undefined;
+        this.navItemAccount = 5;
         this.endPageIndex = 0;
         this.pagesArray = undefined;
         this.currentPage = 1;
+        this.showAsEllipsisMid = !this.arrowsActive;
     }
     pageLimitChangedHandler(event) {
         this.limit = event.detail.limit ? event.detail.limit : this.limit;
@@ -44,31 +46,74 @@ export class BonusPaginationNav {
     renderStylingWrapper() {
         return h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
     }
-    updatePageStatus() {
-        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
-        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
-        this.pagesArray = [];
-        if (this.endPageIndex < 5) {
-            this.pagesArray = Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+    /**
+     *
+     * @param maxNavItemsCount
+     * @param ellipsisMid
+     * @private
+     */
+    generateNavItemsByType(maxNavItemsCount, ellipsisMid) {
+        if (this.endPageIndex < maxNavItemsCount) {
+            return Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+        }
+        let pageArray = [];
+        /**
+         * Construct numbered navigation area based on current page position
+         * if ellipsisMid => 1, 2, 3 ... 8,9,10  / 1 ... 5,6,7,...10
+         * else => 1, 2, ... / ... 2, 3,4... / ... 9, 10
+         */
+        let halfOfMaxPageCount = Math.floor(maxNavItemsCount / 2);
+        const firstPageNo = 1, lastPageNo = this.endPageIndex + 1;
+        if (ellipsisMid) {
+            //Assume navItemAccount = 7, and totalPage = 10, in this case, we got  halfOfMaxPageCount = 3,
+            if (this.currentPage < halfOfMaxPageCount || this.currentPage > (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: (1, 2, 9, 10)
+                //Nav show as   ( 1, 2, 3, ..., 8, 9, 10)
+                pageArray = Array.from({ length: halfOfMaxPageCount }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount }, (_, i) => (this.endPageIndex - 1) + i));
+            }
+            else if (this.currentPage == halfOfMaxPageCount) {
+                //current page: 3 (=halfOfMaxPageCount)
+                //Nav show as  ( 1, 2, 3, 4, ..., 9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => (this.endPageIndex) + i));
+            }
+            else if (this.currentPage == (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: 8, (the page index after this.total - halfOfMaxPageCount  )  Nav show as   ( 1, 2, ... ,7, 8,9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => (this.endPageIndex - 2) + i));
+            }
+            else {
+                //current page: > 3 and < 7, let's say is 5 Nav show as   ( 1, ..., 4, 5, 6, ... ,10)
+                pageArray = [firstPageNo, '...'];
+                pageArray = pageArray.concat([this.currentPage - 1], [this.currentPage], [this.currentPage + 1]);
+                pageArray = pageArray.concat(['...', lastPageNo]);
+            }
         }
         else {
-            /**
-             * Construct numbered navigation area based on current page position
-             */
-            if (this.currentPage == 1 || this.currentPage == 2) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-                this.pagesArray.push('...');
+            if (this.currentPage < (halfOfMaxPageCount - 1)) { // when current page is in first half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => i + 1);
+                pageArray.push('...');
             }
-            else if (this.currentPage >= 3 && ((this.endPageIndex - this.currentPage) >= 2)) {
-                this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-                this.pagesArray.push('...');
-                this.pagesArray.unshift('...');
+            else if ((this.endPageIndex - this.currentPage) < (halfOfMaxPageCount + 1)) { // when current page is in last half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => this.endPageIndex - halfOfMaxPageCount + i);
+                pageArray.unshift('...');
             }
-            else if ((this.endPageIndex - this.currentPage) < 3) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
-                this.pagesArray.unshift('...');
+            else {
+                pageArray = Array.from({ length: (halfOfMaxPageCount + 1) }, (_, i) => this.currentPage + i - 1);
+                pageArray.push('...');
+                pageArray.unshift('...');
             }
         }
+        return pageArray;
+    }
+    updatePageStatus() {
+        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
+        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
+        this.pagesArray = this.generateNavItemsByType(this.navItemAccount, this.showAsEllipsisMid);
     }
     componentWillRender() {
         this.currentPage = Math.floor(this.offset / this.limit) + 1;
@@ -77,23 +122,23 @@ export class BonusPaginationNav {
     render() {
         const startOffset = (this.currentPage - 1) * this.limit + 1;
         const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
-        return h("div", { key: 'a6817c12f1e1e9960f8e91cfd5c5e2fa1ea72f7f', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { key: '8f7a16c5835147e2a83808f882a66a2463e3998e', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
+        return h("div", { key: 'aa8d14788833b1b0e13ea20943935b03a3b043ac', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { key: 'a018261b6c598116829d878b8120aee7ae2576c4', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
             values: {
                 start: startOffset,
                 end: endOffset,
                 total: this.total
             }
-        })), h("div", { key: 'ddc20a86777c2fde667ad8b75ab86f3bc72ccfdb', class: 'PageNavigation' }, this.arrowsActive &&
-            h("div", { key: 'ce2a45b8c0d6e32cfa3f1c5cc8b3c9ac58acc409', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+        })), h("div", { key: '64fc17d0b992b30a4b8d712e47442ee6a2d44b82', class: 'PageNavigation' }, this.arrowsActive &&
+            h("div", { key: 'f5f3b562fbdfb9e4b39ffd9755e5dba41e6231ba', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(1);
                 } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
-            h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+            h("span", { key: '39222e258f6c63502bfd3914c673d804edc96b53', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage - 1);
                 } }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
-            h("span", { key: 'a6ed748ce3e2555ac3d9d4bae174ad5bad0fabec', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
+            h("span", { key: 'd6f9a1394debdae49702713ccc59bea710ccd7ae', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage + 1);
                 } }, translate('nextPage', this.language)), this.arrowsActive &&
-            h("div", { key: '60a81a86f11e2bb07ee93b61d6f367a11b0e2b6c', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
+            h("div", { key: 'd2bb76f9d40fcfc3dbc6bb5fbfe6d237e77f0ee6', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.endPageIndex + 1);
                 } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
     }
@@ -288,6 +333,24 @@ export class BonusPaginationNav {
                 },
                 "attribute": "display-range-of-total",
                 "reflect": true
+            },
+            "navItemAccount": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The Nav Items count for the pagination, default: 5\nthe value should be Odd, 5, 7"
+                },
+                "attribute": "nav-item-account",
+                "reflect": true,
+                "defaultValue": "5"
             }
         };
     }
@@ -295,7 +358,8 @@ export class BonusPaginationNav {
         return {
             "endPageIndex": {},
             "pagesArray": {},
-            "currentPage": {}
+            "currentPage": {},
+            "showAsEllipsisMid": {}
         };
     }
     static get events() {

package/dist/esm/bonus-pagination-nav.entry.js

@@ -51,7 +51,7 @@ const translate = (key, customLang, values) => {
     return translation;
 };
 
-const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
+const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row;height:100%;align-content:center}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
 const BonusPaginationNavStyle0 = bonusPaginationNavCss;
 
 const BonusPaginationNav = class {
@@ -68,9 +68,11 @@ const BonusPaginationNav = class {
         this.secondaryArrowsActive = true;
         this.displayPageNumbers = true;
         this.displayRangeOfTotal = undefined;
+        this.navItemAccount = 5;
         this.endPageIndex = 0;
         this.pagesArray = undefined;
         this.currentPage = 1;
+        this.showAsEllipsisMid = !this.arrowsActive;
     }
     pageLimitChangedHandler(event) {
         this.limit = event.detail.limit ? event.detail.limit : this.limit;
@@ -100,31 +102,74 @@ const BonusPaginationNav = class {
     renderStylingWrapper() {
         return h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
     }
-    updatePageStatus() {
-        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
-        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
-        this.pagesArray = [];
-        if (this.endPageIndex < 5) {
-            this.pagesArray = Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+    /**
+     *
+     * @param maxNavItemsCount
+     * @param ellipsisMid
+     * @private
+     */
+    generateNavItemsByType(maxNavItemsCount, ellipsisMid) {
+        if (this.endPageIndex < maxNavItemsCount) {
+            return Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
+        }
+        let pageArray = [];
+        /**
+         * Construct numbered navigation area based on current page position
+         * if ellipsisMid => 1, 2, 3 ... 8,9,10  / 1 ... 5,6,7,...10
+         * else => 1, 2, ... / ... 2, 3,4... / ... 9, 10
+         */
+        let halfOfMaxPageCount = Math.floor(maxNavItemsCount / 2);
+        const firstPageNo = 1, lastPageNo = this.endPageIndex + 1;
+        if (ellipsisMid) {
+            //Assume navItemAccount = 7, and totalPage = 10, in this case, we got  halfOfMaxPageCount = 3,
+            if (this.currentPage < halfOfMaxPageCount || this.currentPage > (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: (1, 2, 9, 10)
+                //Nav show as   ( 1, 2, 3, ..., 8, 9, 10)
+                pageArray = Array.from({ length: halfOfMaxPageCount }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount }, (_, i) => (this.endPageIndex - 1) + i));
+            }
+            else if (this.currentPage == halfOfMaxPageCount) {
+                //current page: 3 (=halfOfMaxPageCount)
+                //Nav show as  ( 1, 2, 3, 4, ..., 9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => (this.endPageIndex) + i));
+            }
+            else if (this.currentPage == (lastPageNo - halfOfMaxPageCount + 1)) {
+                //current page: 8, (the page index after this.total - halfOfMaxPageCount  )  Nav show as   ( 1, 2, ... ,7, 8,9,10)
+                pageArray = Array.from({ length: halfOfMaxPageCount - 1 }, (_, i) => i + 1);
+                pageArray.push('...');
+                pageArray = pageArray.concat(Array.from({ length: halfOfMaxPageCount + 1 }, (_, i) => (this.endPageIndex - 2) + i));
+            }
+            else {
+                //current page: > 3 and < 7, let's say is 5 Nav show as   ( 1, ..., 4, 5, 6, ... ,10)
+                pageArray = [firstPageNo, '...'];
+                pageArray = pageArray.concat([this.currentPage - 1], [this.currentPage], [this.currentPage + 1]);
+                pageArray = pageArray.concat(['...', lastPageNo]);
+            }
         }
         else {
-            /**
-             * Construct numbered navigation area based on current page position
-             */
-            if (this.currentPage == 1 || this.currentPage == 2) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-                this.pagesArray.push('...');
+            if (this.currentPage < (halfOfMaxPageCount - 1)) { // when current page is in first half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => i + 1);
+                pageArray.push('...');
             }
-            else if (this.currentPage >= 3 && ((this.endPageIndex - this.currentPage) >= 2)) {
-                this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-                this.pagesArray.push('...');
-                this.pagesArray.unshift('...');
+            else if ((this.endPageIndex - this.currentPage) < (halfOfMaxPageCount + 1)) { // when current page is in last half of nav
+                pageArray = Array.from({ length: (maxNavItemsCount - 1) }, (_, i) => this.endPageIndex - halfOfMaxPageCount + i);
+                pageArray.unshift('...');
             }
-            else if ((this.endPageIndex - this.currentPage) < 3) {
-                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
-                this.pagesArray.unshift('...');
+            else {
+                pageArray = Array.from({ length: (halfOfMaxPageCount + 1) }, (_, i) => this.currentPage + i - 1);
+                pageArray.push('...');
+                pageArray.unshift('...');
             }
         }
+        return pageArray;
+    }
+    updatePageStatus() {
+        this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
+        this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
+        this.pagesArray = this.generateNavItemsByType(this.navItemAccount, this.showAsEllipsisMid);
     }
     componentWillRender() {
         this.currentPage = Math.floor(this.offset / this.limit) + 1;
@@ -133,23 +178,23 @@ const BonusPaginationNav = class {
     render() {
         const startOffset = (this.currentPage - 1) * this.limit + 1;
         const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
-        return h("div", { key: 'a6817c12f1e1e9960f8e91cfd5c5e2fa1ea72f7f', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { key: '8f7a16c5835147e2a83808f882a66a2463e3998e', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
+        return h("div", { key: 'aa8d14788833b1b0e13ea20943935b03a3b043ac', class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { key: 'a018261b6c598116829d878b8120aee7ae2576c4', class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
             values: {
                 start: startOffset,
                 end: endOffset,
                 total: this.total
             }
-        })), h("div", { key: 'ddc20a86777c2fde667ad8b75ab86f3bc72ccfdb', class: 'PageNavigation' }, this.arrowsActive &&
-            h("div", { key: 'ce2a45b8c0d6e32cfa3f1c5cc8b3c9ac58acc409', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+        })), h("div", { key: '64fc17d0b992b30a4b8d712e47442ee6a2d44b82', class: 'PageNavigation' }, this.arrowsActive &&
+            h("div", { key: 'f5f3b562fbdfb9e4b39ffd9755e5dba41e6231ba', class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(1);
                 } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
-            h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
+            h("span", { key: '39222e258f6c63502bfd3914c673d804edc96b53', class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage - 1);
                 } }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
-            h("span", { key: 'a6ed748ce3e2555ac3d9d4bae174ad5bad0fabec', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
+            h("span", { key: 'd6f9a1394debdae49702713ccc59bea710ccd7ae', class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.currentPage + 1);
                 } }, translate('nextPage', this.language)), this.arrowsActive &&
-            h("div", { key: '60a81a86f11e2bb07ee93b61d6f367a11b0e2b6c', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
+            h("div", { key: 'd2bb76f9d40fcfc3dbc6bb5fbfe6d237e77f0ee6', class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
                     this.goTo(this.endPageIndex + 1);
                 } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
     }

package/dist/esm/bonus-pagination-nav.js

@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["bonus-pagination-nav",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
+  return bootstrapLazy([["bonus-pagination-nav",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
 });

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bonus-pagination-nav",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
+  return bootstrapLazy([["bonus-pagination-nav",[[0,"bonus-pagination-nav",{"total":[1538],"limit":[1538],"offset":[1538],"tableId":[1537,"table-id"],"language":[1537],"translationUrl":[513,"translation-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"displayPageNumbers":[1540,"display-page-numbers"],"displayRangeOfTotal":[1540,"display-range-of-total"],"navItemAccount":[1538,"nav-item-account"],"endPageIndex":[32],"pagesArray":[32],"currentPage":[32],"showAsEllipsisMid":[32]},[[8,"paginationReset","pageLimitChangedHandler"],[8,"pageLimitChanged","pageLimitChangedHandler"]]]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components/bonus-pagination-nav/bonus-pagination-nav.d.ts

@@ -41,14 +41,27 @@ export declare class BonusPaginationNav {
      * If show the page of message, eg: `1-20 of 100`
      */
     displayRangeOfTotal: boolean;
+    /**
+     * The Nav Items count for the pagination, default: 5
+     * the value should be Odd, 5, 7
+     */
+    navItemAccount: number;
     endPageIndex: number;
     pagesArray: Array<string | number>;
     reloadPageEmitter: EventEmitter;
     currentPage: number;
+    showAsEllipsisMid: boolean;
     pageLimitChangedHandler(event: CustomEvent): void;
     goTo(step: number | string): void;
     renderPageList(): any;
     renderStylingWrapper(): any;
+    /**
+     *
+     * @param maxNavItemsCount
+     * @param ellipsisMid
+     * @private
+     */
+    private generateNavItemsByType;
     private updatePageStatus;
     componentWillRender(): void;
     render(): any;

package/dist/types/components.d.ts

@@ -27,6 +27,10 @@ export namespace Components {
           * The received limit for the number of pages
          */
         "limit": number;
+        /**
+          * The Nav Items count for the pagination, default: 5 the value should be Odd, 5, 7
+         */
+        "navItemAccount": number;
         /**
           * The offset of dataset
          */
@@ -97,6 +101,10 @@ declare namespace LocalJSX {
           * The received limit for the number of pages
          */
         "limit"?: number;
+        /**
+          * The Nav Items count for the pagination, default: 5 the value should be Odd, 5, 7
+         */
+        "navItemAccount"?: number;
         /**
           * The offset of dataset
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/bonus-pagination-nav",
-  "version": "1.47.3",
+  "version": "1.48.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/bonus-pagination-nav/p-f71ef42b.entry.js

@@ -1 +0,0 @@
-import{r as t,c as a,h as e}from"./p-57809f35.js";const i=["pt-br","en","es-mx","hu","hr"],s={en:{firstPage:"|<",lastPage:">|",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},hu:{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},hr:{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},"pt-br":{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"},"es-mx":{firstPage:"First",lastPage:"Last",prePage:"<",nextPage:">",pageOfTotal:"{start}-{end} of {total}"}},r=(t,a,e)=>{const r=a;let h=s[void 0!==r&&i.includes(r)?r:"en"][t];if(void 0!==e)for(const[t,a]of Object.entries(e.values)){const e=new RegExp(`{${t}}`,"g");h=h.replace(e,a)}return h},h=class{constructor(e){t(this,e),this.reloadPageEmitter=a(this,"reloadPageByType",7),this.total=1,this.limit=10,this.offset=0,this.tableId="default",this.language="en",this.translationUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!0,this.displayPageNumbers=!0,this.displayRangeOfTotal=void 0,this.endPageIndex=0,this.pagesArray=void 0,this.currentPage=1}pageLimitChangedHandler(t){this.limit=t.detail.limit?t.detail.limit:this.limit,this.currentPage=1,this.offset=0,this.updatePageStatus(),"pageLimitChanged"==t.type&&this.reloadPageEmitter.emit({offset:0,limit:this.limit,tableId:this.tableId})}goTo(t){"..."==t||0==t||parseInt(t.toString(),10)>this.endPageIndex+1||(this.currentPage=t,this.reloadPageEmitter.emit({offset:(this.currentPage-1)*this.limit,limit:this.limit,tableId:this.tableId}))}renderPageList(){return e("ul",{class:"PaginationArea"},this.pagesArray.map((t=>e("li",{class:"PageItem "+(this.currentPage==t?"Active":""),onClick:()=>{this.goTo(t)}},t))))}renderStylingWrapper(){return e("general-styling-wrapper",{targetTranslations:s,translationUrl:this.translationUrl})}updatePageStatus(){this.endPageIndex=Math.ceil(this.total/this.limit)-1,this.endPageIndex=this.endPageIndex<0?this.endPageIndex=0:this.endPageIndex,this.pagesArray=[],this.endPageIndex<5?this.pagesArray=Array.from({length:this.endPageIndex+1},((t,a)=>a+1)):1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((t,a)=>a+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endPageIndex-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((t,a)=>this.currentPage+a-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endPageIndex-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((t,a)=>this.endPageIndex-2+a)),this.pagesArray.unshift("..."))}componentWillRender(){this.currentPage=Math.floor(this.offset/this.limit)+1,this.updatePageStatus()}render(){return e("div",{key:"a6817c12f1e1e9960f8e91cfd5c5e2fa1ea72f7f",class:"PageNavigationWrapper"},this.displayRangeOfTotal&&this.total>0&&e("span",{key:"8f7a16c5835147e2a83808f882a66a2463e3998e",class:"PageOfMessage"},r("pageOfTotal",this.language,{values:{start:(this.currentPage-1)*this.limit+1,end:this.currentPage*this.limit>this.total?this.total:this.currentPage*this.limit,total:this.total}})),e("div",{key:"ddc20a86777c2fde667ad8b75ab86f3bc72ccfdb",class:"PageNavigation"},this.arrowsActive&&e("div",{key:"ce2a45b8c0d6e32cfa3f1c5cc8b3c9ac58acc409",class:"PageArrow FirstPage "+(1==this.currentPage?"Disabled":""),onClick:()=>{this.goTo(1)}},r("firstPage",this.language)),this.secondaryArrowsActive&&e("span",{key:"82dce028e4283dcac511b3b62823e87f2085f4b5",class:"PageArrow PrePage "+(1==this.currentPage?"Disabled":""),onClick:()=>{this.goTo(this.currentPage-1)}},r("prePage",this.language)),this.displayPageNumbers&&this.renderPageList(),this.secondaryArrowsActive&&e("span",{key:"a6ed748ce3e2555ac3d9d4bae174ad5bad0fabec",class:"PageArrow NextPage "+(this.currentPage==this.endPageIndex+1?"Disabled":""),onClick:()=>{this.goTo(this.currentPage+1)}},r("nextPage",this.language)),this.arrowsActive&&e("div",{key:"60a81a86f11e2bb07ee93b61d6f367a11b0e2b6c",class:"PageArrow LastPage "+(this.currentPage==this.endPageIndex+1?"Disabled":""),onClick:()=>{this.goTo(this.endPageIndex+1)}}," ",r("lastPage",this.language)," "),this.renderStylingWrapper()))}};h.style=":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";export{h as bonus_pagination_nav}