@everymatrix/helper-pagination 1.44.0 → 1.45.0

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

@@ -1,443 +1,400 @@
-import { Component, h, Event, Prop, State } from '@stencil/core';
+import { h } from "@stencil/core";
 import { isMobile } from "../../utils/utils";
-import { translate } from '../../utils/locale.utils';
+import { translate } from "../../utils/locale.utils";
 export class HelperPagination {
-  constructor() {
-    /**
-     * Next page string value - determines if the next page is disabled or active
-     */
-    this.nextPage = '';
-    /**
-     * Previous page string value - determines if the previous page is disabled or active
-     */
-    this.prevPage = '';
-    /**
-     * The received offset
-     */
-    this.offset = 0;
-    /**
-     * The received limit for the number of pages
-     */
-    this.limit = 1;
-    /**
-     * The received total number of pages
-     */
-    this.total = 1;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-     * Client custom styling via string
-     */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    /**
-     * Component working variable for last page
-     */
-    this.lastPage = false;
-    /**
-     * Component working variable for prvious page
-     */
-    this.previousPage = false;
-    /**
-     * In component working variable for the array of pages
-     */
-    this.pagesArray = [];
-    /**
-     * In component working variable for last page
-     */
-    this.endInt = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.currentPage = 1;
-    this.limitStylingAppends = false;
-    /**
-     * Navigation logic
-     */
-    this.navigateTo = (navigationPage) => {
-      switch (navigationPage) {
-        case 'firstPage':
-          this.offsetInt = 0;
-          break;
-        case 'lastPage':
-          this.offsetInt = this.endInt * this.limitInt;
-          break;
-        case 'previousPage':
-          this.offsetInt -= this.limitInt;
-          break;
-        case 'nextPage':
-          this.offsetInt += this.limitInt;
-          break;
-        case 'fivePagesBack':
-          this.offsetInt -= this.limitInt * 5;
-          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
-          break;
-        case 'fivePagesForward':
-          this.offsetInt += this.limitInt * 5;
-          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
-          break;
-      }
-      this.previousPage = !this.offsetInt ? false : true;
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    /**
-     * Handle navigation from here
-     */
-    this.paginationNavigation = (pageNumber, index) => {
-      this.previousPage = true;
-      if (!isNaN(pageNumber)) {
-        if (pageNumber === 1) {
-          this.offsetInt = pageNumber - 1;
-          this.previousPage = false;
-        }
-        else {
-          this.offsetInt = (pageNumber - 1) * this.limitInt;
+    constructor() {
+        this.userAgent = window.navigator.userAgent;
+        this.currentPage = 1;
+        /**
+         * Navigation logic
+         */
+        this.navigateTo = (navigationPage) => {
+            switch (navigationPage) {
+                case 'firstPage':
+                    this.offsetInt = 0;
+                    break;
+                case 'lastPage':
+                    this.offsetInt = this.endInt * this.limitInt;
+                    break;
+                case 'previousPage':
+                    this.offsetInt -= this.limitInt;
+                    break;
+                case 'nextPage':
+                    this.offsetInt += this.limitInt;
+                    break;
+                case 'fivePagesBack':
+                    this.offsetInt -= this.limitInt * 5;
+                    this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
+                    break;
+                case 'fivePagesForward':
+                    this.offsetInt += this.limitInt * 5;
+                    this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
+                    break;
+            }
+            this.previousPage = !this.offsetInt ? false : true;
+            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+        };
+        /**
+         * Handle navigation from here
+         */
+        this.paginationNavigation = (pageNumber, index) => {
+            this.previousPage = true;
+            if (!isNaN(pageNumber)) {
+                if (pageNumber === 1) {
+                    this.offsetInt = pageNumber - 1;
+                    this.previousPage = false;
+                }
+                else {
+                    this.offsetInt = (pageNumber - 1) * this.limitInt;
+                }
+            }
+            else {
+                if (index === 0 && this.currentPage <= 4) {
+                    this.navigateTo('firstPage');
+                }
+                else if (index === 0 && this.currentPage > 4) {
+                    this.navigateTo('fivePagesBack');
+                }
+                else if (index === 4 && this.endInt - this.currentPage >= 2) {
+                    this.navigateTo('fivePagesForward');
+                }
+            }
+            this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+        };
+        this.setClientStyling = () => {
+            let sheet = document.createElement('style');
+            sheet.innerHTML = this.clientStyling;
+            this.stylingContainer.prepend(sheet);
+        };
+        this.setClientStylingURL = () => {
+            let cssFile = document.createElement('style');
+            setTimeout(() => {
+                cssFile.innerHTML = this.clientStylingUrlContent;
+                this.stylingContainer.prepend(cssFile);
+            }, 1);
+        };
+        this.nextPage = '';
+        this.prevPage = '';
+        this.offset = 0;
+        this.limit = 1;
+        this.total = 1;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.arrowsActive = undefined;
+        this.secondaryArrowsActive = undefined;
+        this.numberedNavActive = undefined;
+        this.offsetInt = undefined;
+        this.lastPage = false;
+        this.previousPage = false;
+        this.limitInt = undefined;
+        this.totalInt = undefined;
+        this.pagesArray = [];
+        this.endInt = 0;
+        this.limitStylingAppends = false;
+    }
+    componentWillRender() {
+        this.offsetInt = this.offset;
+        this.limitInt = this.limit;
+        this.currentPage = (this.offsetInt / this.limitInt) + 1;
+        this.limitInt = this.limit;
+        this.totalInt = this.total;
+        this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
+        this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
+        /**
+         * 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 (index === 0 && this.currentPage <= 4) {
-          this.navigateTo('firstPage');
+        else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
+            this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
+            this.pagesArray.push('...');
+            this.pagesArray.unshift('...');
         }
-        else if (index === 0 && this.currentPage > 4) {
-          this.navigateTo('fivePagesBack');
+        else if ((this.endInt - this.currentPage) < 3) {
+            this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+            this.pagesArray.unshift('...');
         }
-        else if (index === 4 && this.endInt - this.currentPage >= 2) {
-          this.navigateTo('fivePagesForward');
+    }
+    componentDidRender() {
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
         }
-      }
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  componentWillRender() {
-    this.offsetInt = this.offset;
-    this.limitInt = this.limit;
-    this.currentPage = (this.offsetInt / this.limitInt) + 1;
-    this.limitInt = this.limit;
-    this.totalInt = this.total;
-    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
-    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
-    /**
-     * 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('...');
+        // end custom styling area
     }
-    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
-      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-      this.pagesArray.push('...');
-      this.pagesArray.unshift('...');
+    render() {
+        /**
+         * Center navigation area
+         */
+        let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
+            return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
+        }));
+        /**
+         * Left navigation area
+         */
+        let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
+        let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+        if (isMobile(this.userAgent)) {
+            buttonsLeftSide =
+                h("div", { class: "LeftItems" }, h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
+        }
+        /**
+         * Right navigation area
+         */
+        let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
+        let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
+        if (isMobile(this.userAgent)) {
+            buttonsRightSide =
+                h("div", { class: "RightItems" }, h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
+        }
+        return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
     }
-    else if ((this.endInt - this.currentPage) < 3) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
-      this.pagesArray.unshift('...');
+    static get is() { return "helper-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["helper-pagination.scss"]
+        };
     }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
+    static get styleUrls() {
+        return {
+            "$": ["helper-pagination.css"]
+        };
     }
-    // end custom styling area
-  }
-  render() {
-    /**
-     * Center navigation area
-     */
-    let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
-      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') },
-        h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) },
-          h("span", null, item))));
-    }));
-    /**
-     * Left navigation area
-     */
-    let buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') },
-      h("span", { class: "NavigationButton" }, translate('firstPage', this.language)),
-      h("span", { class: "NavigationIcon" }));
-    let buttonsLeftSide = h("div", { class: "LeftItems" },
-      this.secondaryArrowsActive && buttonSecondaryLeftSide,
-      h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
-        h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
-        h("span", { class: "NavigationIcon" })));
-    if (isMobile(this.userAgent)) {
-      buttonsLeftSide =
-        h("div", { class: "LeftItems" },
-          h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
-            h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
-            h("span", { class: "NavigationIcon" })));
+    static get properties() {
+        return {
+            "nextPage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Next page string value - determines if the next page is disabled or active"
+                },
+                "attribute": "next-page",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "prevPage": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Previous page string value - determines if the previous page is disabled or active"
+                },
+                "attribute": "prev-page",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The received offset"
+                },
+                "attribute": "offset",
+                "reflect": true,
+                "defaultValue": "0"
+            },
+            "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": "1"
+            },
+            "total": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The received total number of pages"
+                },
+                "attribute": "total",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "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'"
+            },
+            "clientStyling": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via string"
+                },
+                "attribute": "client-styling",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "clientStylingUrlContent": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Client custom styling via url content"
+                },
+                "attribute": "client-styling-url-content",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "arrowsActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination arrows"
+                },
+                "attribute": "arrows-active",
+                "reflect": true
+            },
+            "secondaryArrowsActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination secondary arrows"
+                },
+                "attribute": "secondary-arrows-active",
+                "reflect": true
+            },
+            "numberedNavActive": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Customize pagination: Activate pagination numbered navigation"
+                },
+                "attribute": "numbered-nav-active",
+                "reflect": true
+            }
+        };
     }
-    /**
-     * Right navigation area
-     */
-    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') },
-      h("span", { class: "NavigationButton" }, translate('lastPage', this.language)),
-      h("span", { class: "NavigationIcon" }));
-    let buttonsRightSide = h("div", { class: "RightItems" },
-      h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
-        h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
-        h("span", { class: "NavigationIcon" })),
-      this.secondaryArrowsActive && buttonSecondaryRightSide);
-    if (isMobile(this.userAgent)) {
-      buttonsRightSide =
-        h("div", { class: "RightItems" },
-          h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
-            h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
-            h("span", { class: "NavigationIcon" })));
+    static get states() {
+        return {
+            "offsetInt": {},
+            "lastPage": {},
+            "previousPage": {},
+            "limitInt": {},
+            "totalInt": {},
+            "pagesArray": {},
+            "endInt": {},
+            "limitStylingAppends": {}
+        };
     }
-    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el },
-      this.arrowsActive && buttonsLeftSide,
-      this.numberedNavActive && navigationArea,
-      this.arrowsActive && buttonsRightSide));
-  }
-  static get is() { return "helper-pagination"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["helper-pagination.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["helper-pagination.css"]
-  }; }
-  static get properties() { return {
-    "nextPage": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Next page string value - determines if the next page is disabled or active"
-      },
-      "attribute": "next-page",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "prevPage": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Previous page string value - determines if the previous page is disabled or active"
-      },
-      "attribute": "prev-page",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "offset": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The received offset"
-      },
-      "attribute": "offset",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "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": "1"
-    },
-    "total": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The received total number of pages"
-      },
-      "attribute": "total",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "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'"
-    },
-    "clientStyling": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via string"
-      },
-      "attribute": "client-styling",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "clientStylingUrlContent": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Client custom styling via url content"
-      },
-      "attribute": "client-styling-url-content",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "arrowsActive": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Customize pagination: Activate pagination arrows"
-      },
-      "attribute": "arrows-active",
-      "reflect": true
-    },
-    "secondaryArrowsActive": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Customize pagination: Activate pagination secondary arrows"
-      },
-      "attribute": "secondary-arrows-active",
-      "reflect": true
-    },
-    "numberedNavActive": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Customize pagination: Activate pagination numbered navigation"
-      },
-      "attribute": "numbered-nav-active",
-      "reflect": true
+    static get events() {
+        return [{
+                "method": "hpPageChange",
+                "name": "hpPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event that handles the navigation, updating the offset, limit and total values"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
     }
-  }; }
-  static get states() { return {
-    "offsetInt": {},
-    "lastPage": {},
-    "previousPage": {},
-    "limitInt": {},
-    "totalInt": {},
-    "pagesArray": {},
-    "endInt": {},
-    "limitStylingAppends": {}
-  }; }
-  static get events() { return [{
-      "method": "hpPageChange",
-      "name": "hpPageChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event that handles the navigation, updating the offset, limit and total values"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
 }