@everymatrix/lottery-game-page 0.1.26 → 1.0.69

package/dist/esm/helper-pagination.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-d1baacd4.js';
+import { r as registerInstance, c as createEvent, h } from './index-8248702b.js';
 
 /**
  * @name isMobile
@@ -7,210 +7,218 @@ import { r as registerInstance, c as createEvent, h } from './index-d1baacd4.js'
  * @returns {Boolean} true or false
  */
 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));
+    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));
 };
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu', 'hr'];
 const TRANSLATIONS = {
-  en: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ro: {
-    firstPage: 'Prima',
-    previousPage: 'Anterior',
-    nextPage: 'Urmatoarea',
-    lastPage: 'Ultima'
-  },
+    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'
+    }
 };
 const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+    const lang = customLang;
+    return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
 };
 
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin:20px 0;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:14px}}@media screen and (max-width: 480px){button{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
+const HelperPaginationStyle0 = helperPaginationCss;
 
 const HelperPagination = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hpPageChange = createEvent(this, "hpPageChange", 7);
-    /**
-     * First page boolean value - determines if the page is disabled or active
-     */
-    this.firstPage = false;
-    /**
-     * Previous page boolean value - determines if the page is disabled or active
-     */
-    this.previousPage = false;
-    /**
-     * 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 = '';
-    /**
-     * 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 -= 10;
-          break;
-        case 'nextPage':
-          this.offsetInt += 10;
-          break;
-        case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
-          break;
-        case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
-          break;
-      }
-      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;
-        }
-        else {
-          this.offsetInt = (pageNumber - 1) * 10;
-        }
-      }
-      else {
-        if (index === 0 && this.currentPage <= 4) {
-          this.navigateTo('firstPage');
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hpPageChange = createEvent(this, "hpPageChange", 7);
+        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('fivePagesBack');
+        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 === 4 && this.endInt - this.currentPage >= 2) {
-          this.navigateTo('fivePagesForward');
+        else if ((this.endInt - this.currentPage) < 3) {
+            this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
+            this.pagesArray.unshift('...');
         }
-      }
-      this.currentPage = this.offsetInt;
-      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.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 (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) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
-      this.pagesArray.unshift('...');
-    }
-  }
-  componentDidRender() {
-    // 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 buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
+    componentDidRender() {
+        // 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
     }
-    /**
-     * Right navigation area
-     */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
+    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));
     }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
-  }
 };
-HelperPagination.style = helperPaginationCss;
+HelperPagination.style = HelperPaginationStyle0;
 
 export { HelperPagination as helper_pagination };