@everymatrix/bonus-pagination-nav 1.0.69

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5f4d615c.js');
+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);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/bonus-pagination-nav/bonus-pagination-nav.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.20.0",
+    "typescriptVersion": "5.5.3"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,51 @@
+: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;
+}

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

@@ -0,0 +1,334 @@
+import { h } from "@stencil/core";
+import { translate, TRANSLATIONS } from "../../utils/locale.utils";
+export class BonusPaginationNav {
+    constructor() {
+        this.total = 1;
+        this.limit = 10;
+        this.offset = 0;
+        this.tableId = 'default';
+        this.language = 'en';
+        this.translationUrl = '';
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = true;
+        this.displayPageNumbers = true;
+        this.displayRangeOfTotal = undefined;
+        this.endPageIndex = 0;
+        this.pagesArray = undefined;
+        this.currentPage = 1;
+    }
+    pageLimitChangedHandler(event) {
+        this.limit = event.detail.limit ? event.detail.limit : this.limit;
+        //reset offset = 0, this.currentPage = 1 when page limit changed
+        this.currentPage = 1;
+        this.offset = 0;
+        this.updatePageStatus();
+        if (event.type == 'pageLimitChanged') {
+            this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
+        }
+    }
+    goTo(step) {
+        if (step == '...' || step == 0 || parseInt(step.toString(), 10) > (this.endPageIndex + 1)) {
+            return;
+        }
+        this.currentPage = step;
+        let offset = (this.currentPage - 1) * this.limit;
+        this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
+    }
+    renderPageList() {
+        return h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
+            return (h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
+                    this.goTo(page);
+                } }, page));
+        }));
+    }
+    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);
+        }
+        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('...');
+            }
+            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) < 3) {
+                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
+                this.pagesArray.unshift('...');
+            }
+        }
+    }
+    componentWillRender() {
+        this.currentPage = Math.floor(this.offset / this.limit) + 1;
+        this.updatePageStatus();
+    }
+    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, {
+            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: () => {
+                    this.goTo(1);
+                } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
+            h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', 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: () => {
+                    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: () => {
+                    this.goTo(this.endPageIndex + 1);
+                } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
+    }
+    static get is() { return "bonus-pagination-nav"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bonus-pagination-nav.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bonus-pagination-nav.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "total": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The received length of dataset"
+                },
+                "attribute": "total",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "limit": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The received limit for the number of pages"
+                },
+                "attribute": "limit",
+                "reflect": true,
+                "defaultValue": "10"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The offset of dataset"
+                },
+                "attribute": "offset",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "tableId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The table id, use to identify which table listen the page change message\nwhen there is more than 1 table on same page"
+                },
+                "attribute": "table-id",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language"
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "'en'"
+            },
+            "translationUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Translation via url"
+                },
+                "attribute": "translation-url",
+                "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,
+                "defaultValue": "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,
+                "defaultValue": "true"
+            },
+            "displayPageNumbers": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination numbered navigation"
+                },
+                "attribute": "display-page-numbers",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "displayRangeOfTotal": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If show the page of message, eg: `1-20 of 100`"
+                },
+                "attribute": "display-range-of-total",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "endPageIndex": {},
+            "pagesArray": {},
+            "currentPage": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "reloadPageEmitter",
+                "name": "reloadPageByType",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "paginationReset",
+                "method": "pageLimitChangedHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "pageLimitChanged",
+                "method": "pageLimitChangedHandler",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1 @@
+export { BonusPaginationNav } from './bonus-pagination-nav';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

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

@@ -0,0 +1,65 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
+export const TRANSLATIONS = {
+    "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}',
+    }
+};
+export const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    return translation;
+};
+export const getTranslations = (url) => {
+    // fetch url, get the data, replace the TRANSLATIONS content
+    return new Promise((resolve) => {
+        fetch(url)
+            .then((res) => res.json())
+            .then((data) => {
+            Object.keys(data).forEach((item) => {
+                for (let key in data[item]) {
+                    TRANSLATIONS[item][key] = data[item][key];
+                }
+            });
+            resolve(true);
+        });
+    });
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/esm/app-globals-0f993ce5.js

@@ -0,0 +1,3 @@
+const globalScripts = () => {};
+
+export { globalScripts as g };

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

@@ -0,0 +1,159 @@
+import { r as registerInstance, c as createEvent, h } from './index-332d0149.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
+const TRANSLATIONS = {
+    "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}',
+    }
+};
+const translate = (key, customLang, values) => {
+    const lang = customLang;
+    let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    if (values !== undefined) {
+        for (const [key, value] of Object.entries(values.values)) {
+            const regex = new RegExp(`{${key}}`, 'g');
+            translation = translation.replace(regex, value);
+        }
+    }
+    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 BonusPaginationNavStyle0 = bonusPaginationNavCss;
+
+const BonusPaginationNav = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.reloadPageEmitter = createEvent(this, "reloadPageByType", 7);
+        this.total = 1;
+        this.limit = 10;
+        this.offset = 0;
+        this.tableId = 'default';
+        this.language = 'en';
+        this.translationUrl = '';
+        this.arrowsActive = true;
+        this.secondaryArrowsActive = true;
+        this.displayPageNumbers = true;
+        this.displayRangeOfTotal = undefined;
+        this.endPageIndex = 0;
+        this.pagesArray = undefined;
+        this.currentPage = 1;
+    }
+    pageLimitChangedHandler(event) {
+        this.limit = event.detail.limit ? event.detail.limit : this.limit;
+        //reset offset = 0, this.currentPage = 1 when page limit changed
+        this.currentPage = 1;
+        this.offset = 0;
+        this.updatePageStatus();
+        if (event.type == 'pageLimitChanged') {
+            this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
+        }
+    }
+    goTo(step) {
+        if (step == '...' || step == 0 || parseInt(step.toString(), 10) > (this.endPageIndex + 1)) {
+            return;
+        }
+        this.currentPage = step;
+        let offset = (this.currentPage - 1) * this.limit;
+        this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
+    }
+    renderPageList() {
+        return h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
+            return (h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
+                    this.goTo(page);
+                } }, page));
+        }));
+    }
+    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);
+        }
+        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('...');
+            }
+            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) < 3) {
+                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
+                this.pagesArray.unshift('...');
+            }
+        }
+    }
+    componentWillRender() {
+        this.currentPage = Math.floor(this.offset / this.limit) + 1;
+        this.updatePageStatus();
+    }
+    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, {
+            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: () => {
+                    this.goTo(1);
+                } }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
+            h("span", { key: '82dce028e4283dcac511b3b62823e87f2085f4b5', 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: () => {
+                    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: () => {
+                    this.goTo(this.endPageIndex + 1);
+                } }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
+    }
+};
+BonusPaginationNav.style = BonusPaginationNavStyle0;
+
+export { BonusPaginationNav as bonus_pagination_nav };