@everymatrix/lottery-pagination 1.51.0

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

@@ -0,0 +1,440 @@
+import { h } from "@stencil/core";
+import { isMobile } from "../../utils/utils";
+import { translate } from "../../utils/locale.utils";
+export class LotteryPagination {
+    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;
+                    this.nextPage = true;
+                    break;
+                case 'nextPage':
+                    this.offsetInt += this.limitInt;
+                    // this.nextPage =  this.currentPage > this.endInt ? false : this.nextPage;
+                    this.nextPage = this.offsetInt / this.limitInt >= this.endInt ? false : this.nextPage;
+                    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;
+                    this.nextPage = this.offsetInt / this.limitInt >= this.endInt ? false : this.nextPage;
+                    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) => {
+            if (!isNaN(pageNumber)) {
+                if (pageNumber === 1) {
+                    this.offsetInt = pageNumber - 1;
+                    this.previousPage = false;
+                }
+                else {
+                    this.offsetInt = (pageNumber - 1) * this.limitInt;
+                    if (pageNumber > this.endInt) {
+                        this.nextPage = false;
+                    }
+                    else {
+                        this.nextPage = true;
+                    }
+                }
+                this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+            }
+            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.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 = false;
+        this.prevPage = false;
+        this.offset = 0;
+        this.limit = 10;
+        this.total = 1;
+        this.language = 'en';
+        this.clientStyling = '';
+        this.clientStylingUrlContent = '';
+        this.arrowsActive = undefined;
+        this.secondaryArrowsActive = undefined;
+        this.numberedNavActive = undefined;
+        this.isReset = false;
+        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.nextPage = this.isReset ? true : this.nextPage;
+        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) {
+            if (this.endInt > 3) {
+                this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
+                this.pagesArray.push('...');
+            }
+            else {
+                this.pagesArray = Array.from({ length: this.endInt + 1 }, (_, i) => i + 1);
+            }
+        }
+        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 ((this.endInt - this.currentPage) < 3) {
+            if (this.endInt > 4) {
+                this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+                this.pagesArray.unshift('...');
+            }
+            else {
+                this.pagesArray = Array.from({ length: this.endInt + 1 }, (_, i) => i + 1);
+            }
+        }
+    }
+    componentDidRender() {
+        this.isReset = false;
+        // start custom styling area
+        if (!this.limitStylingAppends && this.stylingContainer) {
+            if (this.clientStyling)
+                this.setClientStyling();
+            if (this.clientStylingUrlContent)
+                this.setClientStylingURL();
+            this.limitStylingAppends = true;
+        }
+        // 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 && this.currentPage !== 1 ? 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));
+    }
+    static get is() { return "lottery-pagination"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lottery-pagination.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lottery-pagination.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "nextPage": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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": "false"
+            },
+            "prevPage": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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": "false"
+            },
+            "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": "10"
+            },
+            "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
+            },
+            "isReset": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-reset",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    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": {}
+                }
+            }];
+    }
+}

package/dist/collection/index.js

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

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

@@ -0,0 +1,43 @@
+const DEFAULT_LANGUAGE = 'en';
+const TRANSLATIONS = {
+    en: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    ro: {
+        firstPage: 'Prima',
+        previousPage: 'Anterior',
+        nextPage: 'Urmatoarea',
+        lastPage: 'Ultima'
+    },
+    fr: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    ar: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Next',
+        lastPage: 'Last'
+    },
+    hu: {
+        firstPage: 'First',
+        previousPage: 'Previous',
+        nextPage: 'Következő',
+        lastPage: 'Last'
+    },
+    hr: {
+        firstPage: 'Prva',
+        previousPage: 'Prethodna',
+        nextPage: 'Slijedeća',
+        lastPage: 'Zadnja'
+    }
+};
+export const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,15 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+export const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};

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

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