Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@everymatrix/helper-pagination

Package Overview
Dependencies
Maintainers
0
Versions
147
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@everymatrix/helper-pagination - npm Package Compare versions

Comparing version 0.1.24 to 1.0.69

dist/cjs/app-globals-3a1e7e63.js

398

dist/cjs/helper-pagination.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';

const index = require('./index-4f0b2d1c.js');
const index = require('./index-015efb63.js');

@@ -15,220 +15,216 @@ /**

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'
},
fr: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
},
ar: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
}
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) {
index.registerInstance(this, hostRef);
this.hpPageChange = index.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;
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;
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 {
this.offsetInt = (pageNumber - 1) * 10;
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('firstPage');
else if ((this.endInt - this.currentPage) < 3) {
this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
this.pagesArray.unshift('...');
}
else if (index === 0 && this.currentPage > 4) {
this.navigateTo('fivePagesBack');
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrlContent)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
else if (index === 4 && this.endInt - this.currentPage >= 2) {
this.navigateTo('fivePagesForward');
// 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 ? 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" })));
}
}
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('...');
/**
* 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));
}
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 = 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 buttonsLeftSide = index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
if (isMobile(this.userAgent)) {
buttonsLeftSide =
index.h("div", { class: "LeftItems" }, index.h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
}
/**
* Right navigation area
*/
let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
if (isMobile(this.userAgent)) {
buttonsRightSide =
index.h("div", { class: "RightItems" }, index.h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
}
return (index.h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
}
};
HelperPagination.style = helperPaginationCss;
HelperPagination.style = HelperPaginationStyle0;
exports.helper_pagination = HelperPagination;
'use strict';
const index = require('./index-4f0b2d1c.js');
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-015efb63.js');
const appGlobals = require('./app-globals-3a1e7e63.js');
/*
Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('helper-pagination.cjs.js', document.baseURI).href));
const opts = {};
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
}
return index.promiseResolve(opts);
var patchBrowser = () => {
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('helper-pagination.cjs.js', document.baseURI).href));
const opts = {};
if (importMeta !== "") {
opts.resourcesUrl = new URL(".", importMeta).href;
}
return index.promiseResolve(opts);
};
patchBrowser().then(options => {
return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
patchBrowser().then(async (options) => {
await appGlobals.globalScripts();
return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"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"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
});
exports.setNonce = index.setNonce;

@@ -5,18 +5,12 @@ 'use strict';

const index = require('./index-4f0b2d1c.js');
const index = require('./index-015efb63.js');
const appGlobals = require('./app-globals-3a1e7e63.js');
/*
Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return index.promiseResolve();
const defineCustomElements = async (win, options) => {
if (typeof window === 'undefined') return undefined;
await appGlobals.globalScripts();
return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"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"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
});
};
exports.setNonce = index.setNonce;
exports.defineCustomElements = defineCustomElements;
{
"entries": [
"./components/helper-pagination/helper-pagination.js"
"components/helper-pagination/helper-pagination.js"
],
"compiler": {
"name": "@stencil/core",
"version": "2.15.2",
"typescriptVersion": "4.5.4"
"version": "4.20.0",
"typescriptVersion": "5.5.3"
},

@@ -10,0 +10,0 @@ "collections": [],

@@ -1,366 +0,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() {
/**
* 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;
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 {
this.offsetInt = (pageNumber - 1) * 10;
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('firstPage');
else if ((this.endInt - this.currentPage) < 3) {
this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
this.pagesArray.unshift('...');
}
else if (index === 0 && this.currentPage > 4) {
this.navigateTo('fivePagesBack');
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrlContent)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
else if (index === 4 && this.endInt - this.currentPage >= 2) {
this.navigateTo('fivePagesForward');
// 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" })));
}
}
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('...');
/**
* 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.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
this.pagesArray.push('...');
this.pagesArray.unshift('...');
static get is() { return "helper-pagination"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["helper-pagination.scss"]
};
}
else if ((this.endInt - this.currentPage) < 3) {
this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
this.pagesArray.unshift('...');
static get styleUrls() {
return {
"$": ["helper-pagination.css"]
};
}
}
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 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
}
};
}
// 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)));
static get states() {
return {
"offsetInt": {},
"lastPage": {},
"previousPage": {},
"limitInt": {},
"totalInt": {},
"pagesArray": {},
"endInt": {},
"limitStylingAppends": {}
};
}
/**
* 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)));
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": {}
}
}];
}
return (h("div", { id: "PaginationContainer" },
buttonsLeftSide,
navigationArea,
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 {
"firstPage": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "First page boolean value - determines if the page is disabled or active"
},
"attribute": "first-page",
"reflect": true,
"defaultValue": "false"
},
"previousPage": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Previous page boolean value - determines if the page is disabled or active"
},
"attribute": "previous-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": "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": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Language"
},
"attribute": "language",
"reflect": false,
"defaultValue": "'en'"
},
"clientStyling": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Client custom styling via string"
},
"attribute": "client-styling",
"reflect": false,
"defaultValue": "''"
},
"clientStylingUrlContent": {
"type": "string",
"mutable": false,
"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": false,
"defaultValue": "''"
}
}; }
static get states() { return {
"offsetInt": {},
"lastPage": {},
"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": {}
}
}]; }
}
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'
},
fr: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
},
ar: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
}
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 && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
const lang = customLang;
return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
};
export function format(first, middle, last) {
return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
}

@@ -11,6 +11,6 @@ /**

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));
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));
};

@@ -1,2 +0,2 @@

import { r as registerInstance, c as createEvent, h } from './index-fe031733.js';
import { r as registerInstance, c as createEvent, h } from './index-3d52300b.js';

@@ -10,220 +10,216 @@ /**

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'
},
fr: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
},
ar: {
firstPage: 'First',
previousPage: 'Previous',
nextPage: 'Next',
lastPage: 'Last'
}
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;
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 {
this.offsetInt = (pageNumber - 1) * 10;
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('firstPage');
else if ((this.endInt - this.currentPage) < 3) {
this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
this.pagesArray.unshift('...');
}
else if (index === 0 && this.currentPage > 4) {
this.navigateTo('fivePagesBack');
}
componentDidRender() {
// start custom styling area
if (!this.limitStylingAppends && this.stylingContainer) {
if (this.clientStyling)
this.setClientStyling();
if (this.clientStylingUrlContent)
this.setClientStylingURL();
this.limitStylingAppends = true;
}
else if (index === 4 && this.endInt - this.currentPage >= 2) {
this.navigateTo('fivePagesForward');
// 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" })));
}
}
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('...');
/**
* 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.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)));
}
/**
* 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)));
}
return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
}
};
HelperPagination.style = helperPaginationCss;
HelperPagination.style = HelperPaginationStyle0;
export { HelperPagination as helper_pagination };

@@ -1,17 +0,20 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-fe031733.js';
import { p as promiseResolve, b as bootstrapLazy } from './index-3d52300b.js';
export { s as setNonce } from './index-3d52300b.js';
import { g as globalScripts } from './app-globals-0f993ce5.js';
/*
Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
Stencil Client Patch Browser v4.20.0 | MIT Licensed | https://stenciljs.com
*/
const patchBrowser = () => {
const importMeta = import.meta.url;
const opts = {};
if (importMeta !== '') {
opts.resourcesUrl = new URL('.', importMeta).href;
}
return promiseResolve(opts);
var patchBrowser = () => {
const importMeta = import.meta.url;
const opts = {};
if (importMeta !== "") {
opts.resourcesUrl = new URL(".", importMeta).href;
}
return promiseResolve(opts);
};
patchBrowser().then(options => {
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
patchBrowser().then(async (options) => {
await globalScripts();
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"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"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
});

@@ -1,17 +0,11 @@

import { p as promiseResolve, b as bootstrapLazy } from './index-fe031733.js';
import { b as bootstrapLazy } from './index-3d52300b.js';
export { s as setNonce } from './index-3d52300b.js';
import { g as globalScripts } from './app-globals-0f993ce5.js';
/*
Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
*/
const patchEsm = () => {
return promiseResolve();
const defineCustomElements = async (win, options) => {
if (typeof window === 'undefined') return undefined;
await globalScripts();
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"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"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
};
const defineCustomElements = (win, options) => {
if (typeof window === 'undefined') return Promise.resolve();
return patchEsm().then(() => {
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"firstPage":[1540,"first-page"],"previousPage":[1540,"previous-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1],"clientStyling":[1,"client-styling"],"clientStylingUrlContent":[1,"client-styling-url-content"],"offsetInt":[32],"lastPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
});
};
export { defineCustomElements };

@@ -1,1 +0,1 @@

import{p as t,b as n}from"./p-68c68be2.js";(()=>{const n=import.meta.url,e={};return""!==n&&(e.resourcesUrl=new URL(".",n).href),t(e)})().then((t=>n([["p-8258fc5c",[[1,"helper-pagination",{firstPage:[1540,"first-page"],previousPage:[1540,"previous-page"],offset:[1538],limit:[1538],total:[1538],language:[1],clientStyling:[1,"client-styling"],clientStylingUrlContent:[1,"client-styling-url-content"],offsetInt:[32],lastPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],t)));
import{p as e,b as t}from"./p-7b10b966.js";export{s as setNonce}from"./p-7b10b966.js";import{g as n}from"./p-e1255160.js";(()=>{const t=import.meta.url,n={};return""!==t&&(n.resourcesUrl=new URL(".",t).href),e(n)})().then((async e=>(await n(),t([["p-083e9b0c",[[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"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"],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32],limitStylingAppends:[32]}]]]],e))));

@@ -1,22 +0,17 @@

import { sass } from '@stencil/sass';
import { sass } from "@stencil/sass";
export const config = {
namespace: 'helper-pagination',
taskQueue: 'async',
plugins: [sass()],
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
namespace: 'helper-pagination',
taskQueue: 'async',
sourceMap: false,
minifyJs: true,
extras: {
experimentalImportInjection: true
},
{
type: 'dist-custom-elements',
},
{
type: 'docs-readme',
},
{
type: 'www',
serviceWorker: null, // disable service workers
},
],
plugins: [sass()],
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader'
}
]
};

@@ -11,2 +11,6 @@ /* eslint-disable */

/**
* Customize pagination: Activate pagination arrows
*/
"arrowsActive": boolean;
/**
* Client custom styling via string

@@ -20,6 +24,2 @@ */

/**
* First page boolean value - determines if the page is disabled or active
*/
"firstPage": boolean;
/**
* Language

@@ -33,2 +33,10 @@ */

/**
* Next page string value - determines if the next page is disabled or active
*/
"nextPage": string;
/**
* Customize pagination: Activate pagination numbered navigation
*/
"numberedNavActive": boolean;
/**
* The received offset

@@ -38,6 +46,10 @@ */

/**
* Previous page boolean value - determines if the page is disabled or active
* Previous page string value - determines if the previous page is disabled or active
*/
"previousPage": boolean;
"prevPage": string;
/**
* Customize pagination: Activate pagination secondary arrows
*/
"secondaryArrowsActive": boolean;
/**
* The received total number of pages

@@ -48,4 +60,19 @@ */

}
export interface HelperPaginationCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLHelperPaginationElement;
}
declare global {
interface HTMLHelperPaginationElementEventMap {
"hpPageChange": any;
}
interface HTMLHelperPaginationElement extends Components.HelperPagination, HTMLStencilElement {
addEventListener<K extends keyof HTMLHelperPaginationElementEventMap>(type: K, listener: (this: HTMLHelperPaginationElement, ev: HelperPaginationCustomEvent<HTMLHelperPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLHelperPaginationElementEventMap>(type: K, listener: (this: HTMLHelperPaginationElement, ev: HelperPaginationCustomEvent<HTMLHelperPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}

@@ -63,2 +90,6 @@ var HTMLHelperPaginationElement: {

/**
* Customize pagination: Activate pagination arrows
*/
"arrowsActive"?: boolean;
/**
* Client custom styling via string

@@ -72,6 +103,2 @@ */

/**
* First page boolean value - determines if the page is disabled or active
*/
"firstPage"?: boolean;
/**
* Language

@@ -85,2 +112,10 @@ */

/**
* Next page string value - determines if the next page is disabled or active
*/
"nextPage"?: string;
/**
* Customize pagination: Activate pagination numbered navigation
*/
"numberedNavActive"?: boolean;
/**
* The received offset

@@ -92,8 +127,12 @@ */

*/
"onHpPageChange"?: (event: CustomEvent<any>) => void;
"onHpPageChange"?: (event: HelperPaginationCustomEvent<any>) => void;
/**
* Previous page boolean value - determines if the page is disabled or active
* Previous page string value - determines if the previous page is disabled or active
*/
"previousPage"?: boolean;
"prevPage"?: string;
/**
* Customize pagination: Activate pagination secondary arrows
*/
"secondaryArrowsActive"?: boolean;
/**
* The received total number of pages

@@ -100,0 +139,0 @@ */

import { EventEmitter } from '../../stencil-public-runtime';
export declare class HelperPagination {
/**
* First page boolean value - determines if the page is disabled or active
*/
firstPage: boolean;
/**
* Previous page boolean value - determines if the page is disabled or active
*/
previousPage: boolean;
/**
* The received offset
*/
offset: number;
/**
* The received limit for the number of pages
*/
limit: number;
/**
* The received total number of pages
*/
total: number;
/**
* Language
*/
language: string;
/**
* Client custom styling via string
*/
clientStyling: string;
/**
* Client custom styling via url content
*/
clientStylingUrlContent: string;
/**
* Component working variable for offset
*/
private offsetInt;
/**
* Component working variable for last page
*/
private lastPage;
/**
* Component working variable for limit
*/
private limitInt;
/**
* Component working variable for total
*/
private totalInt;
/**
* In component working variable for the array of pages
*/
private pagesArray;
/**
* In component working variable for last page
*/
private endInt;
private userAgent;
currentPage: number;
/**
* Event that handles the navigation, updating the offset, limit and total values
*/
hpPageChange: EventEmitter<any>;
private limitStylingAppends;
private stylingContainer;
/**
* Navigation logic
*/
navigateTo: (navigationPage: string) => void;
/**
* Handle navigation from here
*/
paginationNavigation: (pageNumber: number, index: any) => void;
componentWillRender(): void;
componentDidRender(): void;
setClientStyling: () => void;
setClientStylingURL: () => void;
render(): any;
/**
* Next page string value - determines if the next page is disabled or active
*/
nextPage: string;
/**
* Previous page string value - determines if the previous page is disabled or active
*/
prevPage: string;
/**
* The received offset
*/
offset: number;
/**
* The received limit for the number of pages
*/
limit: number;
/**
* The received total number of pages
*/
total: number;
/**
* Language
*/
language: string;
/**
* Client custom styling via string
*/
clientStyling: string;
/**
* Client custom styling via url content
*/
clientStylingUrlContent: string;
/**
* Customize pagination: Activate pagination arrows
*/
arrowsActive: boolean;
/**
* Customize pagination: Activate pagination secondary arrows
*/
secondaryArrowsActive: boolean;
/**
* Customize pagination: Activate pagination numbered navigation
*/
numberedNavActive: boolean;
/**
* Component working variable for offset
*/
private offsetInt;
/**
* Component working variable for last page
*/
lastPage: boolean;
/**
* Component working variable for prvious page
*/
previousPage: boolean;
/**
* Component working variable for limit
*/
private limitInt;
/**
* Component working variable for total
*/
private totalInt;
/**
* In component working variable for the array of pages
*/
private pagesArray;
/**
* In component working variable for last page
*/
private endInt;
private userAgent;
currentPage: number;
/**
* Event that handles the navigation, updating the offset, limit and total values
*/
hpPageChange: EventEmitter<any>;
private limitStylingAppends;
private stylingContainer;
/**
* Navigation logic
*/
navigateTo: (navigationPage: string) => void;
/**
* Handle navigation from here
*/
paginationNavigation: (pageNumber: number, index: any) => void;
componentWillRender(): void;
componentDidRender(): void;
setClientStyling: () => void;
setClientStylingURL: () => void;
render(): any;
}

@@ -7,2 +7,12 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;

/**
* When set to `true` this component will be form-associated. See
* https://stenciljs.com/docs/next/form-associated documentation on how to
* build form-associated Stencil components that integrate into forms like
* native browser elements such as `<input>` and `<textarea>`.
*
* The {@link AttachInternals} decorator allows for access to the
* `ElementInternals` object to modify the associated form.
*/
formAssociated?: boolean;
/**
* Tag name of the web component. Ideally, the tag name must be globally unique,

@@ -66,3 +76,3 @@ * so it's recommended to choose an unique prefix for all your components within the same collection.

* Stencil uses different heuristics to determine the default name of the attribute,
* but using this property, you can override the default behaviour.
* but using this property, you can override the default behavior.
*/

@@ -112,2 +122,5 @@ attribute?: string | null;

}
export interface AttachInternalsDecorator {
(): PropertyDecorator;
}
export interface ListenDecorator {

@@ -134,3 +147,3 @@ (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;

*
* Using the `passive` option can be used to change the default behaviour.
* Using the `passive` option can be used to change the default behavior.
* Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.

@@ -140,3 +153,3 @@ */

}
export declare type ListenTargetOptions = 'body' | 'document' | 'window';
export type ListenTargetOptions = 'body' | 'document' | 'window';
export interface StateDecorator {

@@ -184,2 +197,8 @@ (): PropertyDecorator;

/**
* If the `formAssociated` option is set in options passed to the
* `@Component()` decorator then this decorator may be used to get access to the
* `ElementInternals` instance associated with the component.
*/
export declare const AttachInternals: AttachInternalsDecorator;
/**
* The `Listen()` decorator is for listening DOM events, including the ones

@@ -223,4 +242,4 @@ * dispatched from `@Events()`.

export declare const Watch: WatchDecorator;
export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
export type ErrorHandler = (err: any, element?: HTMLElement) => void;
/**

@@ -231,3 +250,5 @@ * `setMode()` is used for libraries which provide multiple "modes" for styles.

/**
* getMode
* `getMode()` is used for libraries which provide multiple "modes" for styles.
* @param ref a reference to the node to get styles for
* @returns the current mode or undefined, if not found
*/

@@ -245,2 +266,5 @@ export declare function getMode<T = string | undefined>(ref: any): T;

* if the path needs to be customized.
* @param path the path to use in calculating the asset path. this value will be
* used in conjunction with the base asset path
* @returns the base path
*/

@@ -258,9 +282,22 @@ export declare function getAssetPath(path: string): string;

* But do note that this configuration depends on how your script is bundled, or lack of
* bunding, and where your assets can be loaded from. Additionally custom bundling
* bundling, and where your assets can be loaded from. Additionally custom bundling
* will have to ensure the static assets are copied to its build directory.
* @param path the asset path to set
* @returns the set path
*/
export declare function setAssetPath(path: string): string;
/**
* getElement
* Used to specify a nonce value that corresponds with an application's
* [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a `meta` tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
* @param nonce The value to be used for the nonce attribute.
*/
export declare function setNonce(nonce: string): void;
/**
* Retrieve a Stencil element for a given reference
* @param ref the ref to get the Stencil element for
* @returns a reference to the element
*/
export declare function getElement(ref: any): HTMLStencilElement;

@@ -270,3 +307,5 @@ /**

*
* Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
* Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
*
* @param ref the node/element to force the re-render of
*/

@@ -276,2 +315,3 @@ export declare function forceUpdate(ref: any): void;

* getRenderingRef
* @returns the rendering ref
*/

@@ -287,2 +327,4 @@ export declare function getRenderingRef(): any;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-write to schedule
*/

@@ -295,2 +337,4 @@ export declare function writeTask(task: RafCallback): void;

* For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
*
* @param task the DOM-read to schedule
*/

@@ -424,3 +468,3 @@ export declare function readTask(task: RafCallback): void;

*/
interface HostAttributes {
export interface HostAttributes {
class?: string | {

@@ -435,4 +479,40 @@ [className: string]: boolean;

}
/**
* Utilities for working with functional Stencil components. An object
* conforming to this interface is passed by the Stencil runtime as the third
* argument to a functional component, allowing component authors to work with
* features like children.
*
* The children of a functional component will be passed as the second
* argument, so a functional component which uses these utils to transform its
* children might look like the following:
*
* ```ts
* export const AddClass: FunctionalComponent = (_, children, utils) => (
* utils.map(children, child => ({
* ...child,
* vattrs: {
* ...child.vattrs,
* class: `${child.vattrs.class} add-class`
* }
* }))
* );
* ```
*
* For more see the Stencil documentation, here:
* https://stenciljs.com/docs/functional-components
*/
export interface FunctionalUtilities {
/**
* Utility for reading the children of a functional component at runtime.
* Since the Stencil runtime uses a different interface for children it is
* not recommended to read the children directly, and is preferable to use
* this utility to, for instance, perform a side effect for each child.
*/
forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
/**
* Utility for transforming the children of a functional component. Given an
* array of children and a callback this will return a list of the results of
* passing each child to the supplied callback.
*/
map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];

@@ -443,2 +523,10 @@ }

}
/**
* A Child VDOM node
*
* This has most of the same properties as {@link VNode} but friendlier names
* (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
* order to provide a friendlier public interface for users of the
* {@link FunctionalUtilities}).
*/
export interface ChildNode {

@@ -490,2 +578,5 @@ vtag?: string | number | Function;

export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
/**
* A virtual DOM node
*/
export interface VNode {

@@ -698,2 +789,3 @@ $flags$: number;

media?: string;
ping?: string;
rel?: string;

@@ -725,3 +817,2 @@ target?: string;

interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
disabled?: boolean;

@@ -742,2 +833,5 @@ form?: string;

value?: string | string[] | number;
popoverTargetAction?: string;
popoverTargetElement?: Element | null;
popoverTarget?: string;
}

@@ -764,2 +858,3 @@ interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {

interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {
onCancel?: (event: Event) => void;
onClose?: (event: Event) => void;

@@ -824,2 +919,4 @@ open?: boolean;

alt?: string;
crossOrigin?: string;
crossorigin?: string;
decoding?: 'async' | 'auto' | 'sync';

@@ -846,8 +943,6 @@ importance?: 'low' | 'auto' | 'high';

alt?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoComplete?: string;
autocomplete?: string;
autoFocus?: boolean;
autofocus?: boolean | string;
capture?: string;

@@ -884,2 +979,4 @@ checked?: boolean;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
pattern?: string;

@@ -903,6 +1000,7 @@ placeholder?: string;

width?: number | string;
popoverTargetAction?: string;
popoverTargetElement?: Element | null;
popoverTarget?: string;
}
interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
autofocus?: boolean | string;
challenge?: string;

@@ -920,3 +1018,2 @@ disabled?: boolean;

htmlFor?: string;
htmlfor?: string;
}

@@ -1032,3 +1129,2 @@ interface LiHTMLAttributes<T> extends HTMLAttributes<T> {

htmlFor?: string;
htmlfor?: string;
name?: string;

@@ -1058,3 +1154,2 @@ }

interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
disabled?: boolean;

@@ -1070,2 +1165,3 @@ form?: string;

interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
height?: number;
media?: string;

@@ -1076,2 +1172,3 @@ sizes?: string;

type?: string;
width?: number;
}

@@ -1092,4 +1189,4 @@ interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {

interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
autoFocus?: boolean;
autofocus?: boolean | string;
autoComplete?: string;
autocomplete?: string;
cols?: number;

@@ -1103,2 +1200,4 @@ disabled?: boolean;

name?: string;
onSelect?: (event: Event) => void;
onselect?: (event: Event) => void;
placeholder?: string;

@@ -1146,2 +1245,4 @@ readOnly?: boolean;

accessKey?: string;
autoFocus?: boolean;
autofocus?: boolean | string;
class?: string | {

@@ -1158,2 +1259,3 @@ [className: string]: boolean;

id?: string;
inert?: boolean;
lang?: string;

@@ -1167,2 +1269,3 @@ spellcheck?: 'true' | 'false' | any;

title?: string;
popover?: string | null;
inputMode?: string;

@@ -1184,4 +1287,4 @@ inputmode?: string;

vocab?: string;
autoCapitalize?: any;
autocapitalize?: any;
autoCapitalize?: string;
autocapitalize?: string;
autoCorrect?: string;

@@ -1254,3 +1357,3 @@ autocorrect?: string;

'color-interpolation'?: number | string;
'color-interpolation-filters'?: 'auto' | 's-rGB' | 'linear-rGB' | 'inherit';
'color-interpolation-filters'?: 'auto' | 'sRGB' | 'linearRGB';
'color-profile'?: number | string;

@@ -1478,8 +1581,8 @@ 'color-rendering'?: number | string;

onPasteCapture?: (event: ClipboardEvent) => void;
onCompositionEnd?: (event: CompositionEvent) => void;
onCompositionEndCapture?: (event: CompositionEvent) => void;
onCompositionStart?: (event: CompositionEvent) => void;
onCompositionStartCapture?: (event: CompositionEvent) => void;
onCompositionUpdate?: (event: CompositionEvent) => void;
onCompositionUpdateCapture?: (event: CompositionEvent) => void;
onCompositionend?: (event: CompositionEvent) => void;
onCompositionendCapture?: (event: CompositionEvent) => void;
onCompositionstart?: (event: CompositionEvent) => void;
onCompositionstartCapture?: (event: CompositionEvent) => void;
onCompositionupdate?: (event: CompositionEvent) => void;
onCompositionupdateCapture?: (event: CompositionEvent) => void;
onFocus?: (event: FocusEvent) => void;

@@ -1495,4 +1598,4 @@ onFocusCapture?: (event: FocusEvent) => void;

onChangeCapture?: (event: Event) => void;
onInput?: (event: Event) => void;
onInputCapture?: (event: Event) => void;
onInput?: (event: InputEvent) => void;
onInputCapture?: (event: InputEvent) => void;
onReset?: (event: Event) => void;

@@ -1587,4 +1690,10 @@ onResetCapture?: (event: Event) => void;

onAnimationIterationCapture?: (event: AnimationEvent) => void;
onTransitionCancel?: (event: TransitionEvent) => void;
onTransitionCancelCapture?: (event: TransitionEvent) => void;
onTransitionEnd?: (event: TransitionEvent) => void;
onTransitionEndCapture?: (event: TransitionEvent) => void;
onTransitionRun?: (event: TransitionEvent) => void;
onTransitionRunCapture?: (event: TransitionEvent) => void;
onTransitionStart?: (event: TransitionEvent) => void;
onTransitionStartCapture?: (event: TransitionEvent) => void;
}

@@ -1591,0 +1700,0 @@ }

@@ -1,3 +0,1 @@

module.exports = require('../dist/cjs/loader.cjs.js');
module.exports.applyPolyfills = function() { return Promise.resolve() };
module.exports = require('../dist/cjs/loader.cjs.js');

@@ -1,3 +0,1 @@

module.exports = require('../dist/cjs/loader.cjs.js');
module.exports.applyPolyfills = function() { return Promise.resolve() };
module.exports = require('../dist/cjs/loader.cjs.js');

@@ -11,3 +11,15 @@ export * from '../dist/types/components';

}
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
/**
* @deprecated
*/
export declare function applyPolyfills(): Promise<void>;
/**
* Used to specify a nonce value that corresponds with an application's CSP.
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
* Alternatively, the nonce value can be set on a meta tag in the DOM head
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
* will result in the same behavior.
*/
export declare function setNonce(nonce: string): void;

@@ -1,3 +0,1 @@

export * from '../dist/esm/polyfills/index.js';
export * from '../dist/esm/loader.js';
export * from '../dist/esm/loader.js';

@@ -1,4 +0,2 @@

(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
export * from '../dist/esm/polyfills/index.js';
export * from '../dist/esm/loader.js';
export * from '../dist/esm/loader.js';
{
"name": "helper-pagination-loader",
"private": true,
"typings": "./index.d.ts",

@@ -4,0 +5,0 @@ "module": "./index.js",

{
"name": "@everymatrix/helper-pagination",
"version": "0.1.24",
"version": "1.0.69",
"main": "./dist/index.cjs.js",

@@ -11,3 +11,10 @@ "module": "./dist/index.js",

"collection:main": "./dist/collection/index.js",
"unpkg": "./dist/helper-pagination/helper-pagination.js",
"unpkg": "./dist/helper-pagination/helper-pagination.esm.js",
"exports": {
".": {
"import": "./dist/esm/helper-pagination.js",
"require": "./dist/cjs/helper-pagination.cjs"
},
"./dist/cjs/helper-pagination.cjs.js": "./dist/cjs/helper-pagination.cjs.js"
},
"files": [

@@ -14,0 +21,0 @@ "dist/",

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc