@everymatrix/bonus-pagination-nav 1.43.4 → 1.45.0

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

@@ -1,359 +1,334 @@
-import { Component, Event, h, Listen, Prop, State } from '@stencil/core';
+import { h } from "@stencil/core";
 import { translate, TRANSLATIONS } from "../../utils/locale.utils";
 export class BonusPaginationNav {
-  constructor() {
-    /**
-     * The received length of dataset
-     */
-    this.total = 1;
-    /**
-     * The received limit for the number of pages
-     */
-    this.limit = 10;
-    /**
-     * The offset of dataset
-     */
-    this.offset = 0;
-    /**
-     * The table id, use to identify which table listen the page change message
-     * when there is more than 1 table on same page
-     */
-    this.tableId = 'default';
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Translation via url
-     */
-    this.translationUrl = '';
-    /**
-     * Customize pagination: Activate pagination arrows
-     */
-    this.arrowsActive = true;
-    /**
-     * Customize pagination: Activate pagination secondary arrows
-     */
-    this.secondaryArrowsActive = true;
-    /**
-     * Customize pagination: Activate pagination numbered navigation
-     */
-    this.displayPageNumbers = true;
-    this.endPageIndex = 0;
-    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 });
+    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;
     }
-  }
-  goTo(step) {
-    if (step == '...' || step == 0 || step > this.endPageIndex + 1) {
-      return;
+    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 });
     }
-    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);
+    renderPageList() {
+        return h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
+            return (h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
+                    this.goTo(page);
+                } }, page));
+        }));
     }
-    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('...');
-      }
+    renderStylingWrapper() {
+        return h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
     }
-  }
-  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", { class: 'PageNavigationWrapper' },
-      this.displayRangeOfTotal && this.total > 0 && h("span", { class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
-        values: {
-          start: startOffset,
-          end: endOffset,
-          total: this.total
+    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);
         }
-      })),
-      h("div", { class: 'PageNavigation' },
-        this.arrowsActive &&
-          h("div", { class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
-              this.goTo(1);
-            } }, translate('firstPage', this.language)),
-        this.secondaryArrowsActive &&
-          h("span", { 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", { class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
-              this.goTo(this.currentPage + 1);
-            } }, translate('nextPage', this.language)),
-        this.arrowsActive &&
-          h("div", { 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
+        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
+            }];
     }
-  }; }
-  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
-    }]; }
 }