@everymatrix/lottery-pagination 1.51.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotteryPagination = require('./lottery-pagination-e934e1e8.js');
+require('./index-249d3d4d.js');
+
+
+
+exports.LotteryPagination = lotteryPagination.LotteryPagination;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-249d3d4d.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-pagination.cjs",[[1,"lottery-pagination",{"nextPage":[1540,"next-page"],"prevPage":[1540,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"isReset":[1540,"is-reset"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/lottery-pagination-e934e1e8.js

@@ -0,0 +1,247 @@
+'use strict';
+
+const index = require('./index-249d3d4d.js');
+
+/**
+ * @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
+ */
+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));
+};
+
+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'
+    }
+};
+const translate = (key, customLang) => {
+    const lang = customLang;
+    return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const lotteryPaginationCss = "@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:var(--emw--color-background, #009993);border-color:var(--emw--color-typography, #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:var(--emw--button-text-color, #000);cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:var(--emw--color-background, #009993);border-color:var(--emw--color-typography, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:var(--emw--color-background, #009993);border-color:var(--emw--color-typography, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));opacity:0.8}button{width:100px;height:32px;border:1px solid var(--emw--color-gray-transparency-30, #524e52);border-radius:5px;background:var(--emw--color-gray-transparency-30, #524e52);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--color-primary-variant, #004D4A);border-color:var(--emw--color-primary-variant, #004D4A)}button:disabled{background-color:var(--emw--color-gray-transparency-80, #ccc);border-color:var(--emw--color-gray-transparency-80, #ccc);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255));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:var(--emw--color-background, #009993);border-color:var(--emw--color-typography, #009993);color:var(--emw--color-gray-transparency-100, rgb(255, 255, 255))}}";
+const LotteryPaginationStyle0 = lotteryPaginationCss;
+
+const LotteryPagination = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hpPageChange = index.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;
+                    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 = index.h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index$1) => {
+            return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index$1) }, index.h("span", null, item))));
+        }));
+        /**
+         * Left navigation area
+         */
+        let buttonSecondaryLeftSide = index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+        let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("button", { disabled: this.prevPage && this.currentPage !== 1 ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        if (isMobile(this.userAgent)) {
+            buttonsLeftSide =
+                index.h("div", { class: "LeftItems" }, index.h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        }
+        /**
+         * Right navigation area
+         */
+        let buttonSecondaryRightSide = index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
+        let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
+        if (isMobile(this.userAgent)) {
+            buttonsRightSide =
+                index.h("div", { class: "RightItems" }, index.h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
+        }
+        return (index.h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
+    }
+};
+LotteryPagination.style = LotteryPaginationStyle0;
+
+exports.LotteryPagination = LotteryPagination;

package/dist/cjs/lottery-pagination.cjs.entry.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const lotteryPagination = require('./lottery-pagination-e934e1e8.js');
+require('./index-249d3d4d.js');
+
+
+
+exports.lottery_pagination = lotteryPagination.LotteryPagination;

package/dist/cjs/lottery-pagination.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-249d3d4d.js');
+const appGlobals = require('./app-globals-3a1e7e63.js');
+
+/*
+ Stencil Client Patch Browser v4.22.3 | MIT Licensed | https://stenciljs.com
+ */
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('lottery-pagination.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["lottery-pagination.cjs",[[1,"lottery-pagination",{"nextPage":[1540,"next-page"],"prevPage":[1540,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"isReset":[1540,"is-reset"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "components/lottery-pagination/lottery-pagination.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.22.3",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1 @@
+export { LotteryPagination } from './lottery-pagination';

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

@@ -0,0 +1,136 @@
+@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: var(--emw--color-background, #009993);
+  border-color: var(--emw--color-typography, #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: var(--emw--button-text-color, #000);
+  cursor: pointer;
+  pointer-events: all;
+}
+
+.PaginationItem.ActiveItem button {
+  background: var(--emw--color-background, #009993);
+  border-color: var(--emw--color-typography, #009993);
+  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+}
+
+.PaginationItem.ActiveItem button:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.PaginationItem button:hover,
+.PaginationItem button:active {
+  background: var(--emw--color-background, #009993);
+  border-color: var(--emw--color-typography, #009993);
+  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  opacity: 0.8;
+}
+
+button {
+  width: 100px;
+  height: 32px;
+  border: 1px solid var(--emw--color-gray-transparency-30, #524e52);
+  border-radius: 5px;
+  background: var(--emw--color-gray-transparency-30, #524e52);
+  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  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: var(--emw--color-primary-variant, #004D4A);
+  border-color: var(--emw--color-primary-variant, #004D4A);
+}
+
+button:disabled {
+  background-color: var(--emw--color-gray-transparency-80, #ccc);
+  border-color: var(--emw--color-gray-transparency-80, #ccc);
+  color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  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;
+  }
+}
+/* fix for issue on hover/visited for mobile devices */
+@media (hover: none) {
+  .paginationItem button:hover {
+    background: inherit;
+    border-color: inherit;
+    color: inherit;
+    opacity: 1;
+  }
+  .paginationItem.activeItem button:hover {
+    background: var(--emw--color-background, #009993);
+    border-color: var(--emw--color-typography, #009993);
+    color: var(--emw--color-gray-transparency-100, rgb(255, 255, 255));
+  }
+}