@everymatrix/helper-pagination
Advanced tools
Comparing version 0.1.24 to 1.0.69
@@ -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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
1
224204
44
5440