@everymatrix/helper-pagination 1.98.27 → 1.98.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/helper-pagination.cjs.entry.js +49 -9
- package/dist/cjs/helper-pagination.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/helper-pagination/helper-pagination.css +21 -16
- package/dist/collection/components/helper-pagination/helper-pagination.js +83 -8
- package/dist/esm/helper-pagination.entry.js +49 -9
- package/dist/esm/helper-pagination.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/helper-pagination/helper-pagination.entry.js +1 -1
- package/dist/helper-pagination/helper-pagination.esm.js +1 -1
- package/dist/types/components/helper-pagination/helper-pagination.d.ts +3 -0
- package/dist/types/components.d.ts +4 -0
- package/package.json +1 -1
|
@@ -179,7 +179,7 @@ const translate = (key, customLang) => {
|
|
|
179
179
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
180
180
|
};
|
|
181
181
|
|
|
182
|
-
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
|
|
182
|
+
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 a:not(:first-child),.RightItems a:not(:last-child){margin:0 10px}.LeftItems a,.RightItems a{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 a{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 a{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem a[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.PaginationItem a:hover,.PaginationItem a:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}a{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-decoration:none;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}a:hover,a:active{background:#004D4A;border-color:#004D4A}a[aria-disabled=true]{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){a{width:90px;font-size:14px}}@media screen and (max-width: 480px){a{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){a{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem a:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem a:hover{background:#009993;border-color:#009993;color:#fff}}";
|
|
183
183
|
const HelperPaginationStyle0 = helperPaginationCss;
|
|
184
184
|
|
|
185
185
|
const HelperPagination = class {
|
|
@@ -258,6 +258,8 @@ const HelperPagination = class {
|
|
|
258
258
|
this.arrowsActive = true;
|
|
259
259
|
this.secondaryArrowsActive = false;
|
|
260
260
|
this.numberedNavActive = false;
|
|
261
|
+
this.pageQueryParam = undefined;
|
|
262
|
+
this.page = 1;
|
|
261
263
|
this.offsetInt = 0;
|
|
262
264
|
this.lastPage = false;
|
|
263
265
|
this.previousPage = false;
|
|
@@ -318,32 +320,70 @@ const HelperPagination = class {
|
|
|
318
320
|
disconnectedCallback() {
|
|
319
321
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
320
322
|
}
|
|
323
|
+
pageHref(page) {
|
|
324
|
+
if (!this.pageQueryParam)
|
|
325
|
+
return '#';
|
|
326
|
+
const url = new URL(window.location.href);
|
|
327
|
+
url.searchParams.set(this.pageQueryParam, String(page + this.page - 1));
|
|
328
|
+
return `${url.search}${url.hash}`;
|
|
329
|
+
}
|
|
321
330
|
render() {
|
|
322
331
|
/**
|
|
323
332
|
* Center navigation area
|
|
324
333
|
*/
|
|
325
334
|
let navigationArea = index.h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index$1) => {
|
|
326
|
-
|
|
335
|
+
const page = typeof item === 'number' ? item : index$1 === 0
|
|
336
|
+
? Math.max(1, this.currentPage - 5)
|
|
337
|
+
: Math.min(this.endInt + 1, this.currentPage + 5);
|
|
338
|
+
return (index.h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, index.h("a", { href: this.pageHref(page), "aria-current": item === this.currentPage ? 'page' : undefined, "aria-disabled": item === this.currentPage ? 'true' : undefined, tabIndex: item === this.currentPage ? -1 : undefined, onClick: event => {
|
|
339
|
+
event.preventDefault();
|
|
340
|
+
if (item !== this.currentPage)
|
|
341
|
+
this.paginationNavigation(item, index$1);
|
|
342
|
+
} }, index.h("span", null, item))));
|
|
327
343
|
}));
|
|
328
344
|
/**
|
|
329
345
|
* Left navigation area
|
|
330
346
|
*/
|
|
331
|
-
let buttonSecondaryLeftSide = index.h("
|
|
332
|
-
|
|
347
|
+
let buttonSecondaryLeftSide = index.h("a", { href: this.prevPage ? this.pageHref(1) : '#', "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
348
|
+
event.preventDefault();
|
|
349
|
+
if (this.prevPage)
|
|
350
|
+
this.navigateTo('firstPage');
|
|
351
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), index.h("span", { class: "NavigationIcon" }));
|
|
352
|
+
let buttonsLeftSide = index.h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, index.h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
353
|
+
event.preventDefault();
|
|
354
|
+
if (this.prevPage)
|
|
355
|
+
this.navigateTo('previousPage');
|
|
356
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
|
|
333
357
|
if (isMobile(this.userAgent)) {
|
|
334
358
|
buttonsLeftSide =
|
|
335
|
-
index.h("div", { class: "LeftItems" }, index.h("
|
|
359
|
+
index.h("div", { class: "LeftItems" }, index.h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
360
|
+
event.preventDefault();
|
|
361
|
+
if (this.prevPage)
|
|
362
|
+
this.navigateTo('previousPage');
|
|
363
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), index.h("span", { class: "NavigationIcon" })));
|
|
336
364
|
}
|
|
337
365
|
/**
|
|
338
366
|
* Right navigation area
|
|
339
367
|
*/
|
|
340
|
-
let buttonSecondaryRightSide = index.h("
|
|
341
|
-
|
|
368
|
+
let buttonSecondaryRightSide = index.h("a", { href: this.nextPage ? this.pageHref(this.endInt + 1) : '#', "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
369
|
+
event.preventDefault();
|
|
370
|
+
if (this.nextPage)
|
|
371
|
+
this.navigateTo('lastPage');
|
|
372
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), index.h("span", { class: "NavigationIcon" }));
|
|
373
|
+
let buttonsRightSide = index.h("div", { class: "RightItems" }, index.h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
374
|
+
event.preventDefault();
|
|
375
|
+
if (this.nextPage)
|
|
376
|
+
this.navigateTo('nextPage');
|
|
377
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
|
|
342
378
|
if (isMobile(this.userAgent)) {
|
|
343
379
|
buttonsRightSide =
|
|
344
|
-
index.h("div", { class: "RightItems" }, index.h("
|
|
380
|
+
index.h("div", { class: "RightItems" }, index.h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
381
|
+
event.preventDefault();
|
|
382
|
+
if (this.nextPage)
|
|
383
|
+
this.navigateTo('nextPage');
|
|
384
|
+
} }, index.h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), index.h("span", { class: "NavigationIcon" })));
|
|
345
385
|
}
|
|
346
|
-
return (index.h("
|
|
386
|
+
return (index.h("nav", { id: "PaginationContainer", class: "PaginationContainer", "aria-label": "Blog pagination", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
|
|
347
387
|
}
|
|
348
388
|
static get watchers() { return {
|
|
349
389
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
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],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"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]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
22
|
+
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],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"pageQueryParam":[1,"page-query-param"],"page":[2],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
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],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"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]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
11
|
+
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],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"pageQueryParam":[1,"page-query-param"],"page":[2],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
align-items: center;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
.LeftItems
|
|
15
|
+
.LeftItems a:not(:first-child), .RightItems a:not(:last-child) {
|
|
16
16
|
margin: 0 10px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.LeftItems
|
|
19
|
+
.LeftItems a, .RightItems a {
|
|
20
20
|
padding: 0;
|
|
21
21
|
background-color: #009993;
|
|
22
22
|
border-color: #009993;
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
padding: 0;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.PaginationArea li
|
|
36
|
+
.PaginationArea li a {
|
|
37
37
|
width: 24px;
|
|
38
38
|
height: 24px;
|
|
39
39
|
display: flex;
|
|
@@ -47,26 +47,31 @@
|
|
|
47
47
|
pointer-events: all;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.PaginationItem.ActiveItem
|
|
50
|
+
.PaginationItem.ActiveItem a {
|
|
51
51
|
background: #009993;
|
|
52
52
|
border-color: #009993;
|
|
53
53
|
color: #fff;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.PaginationItem.ActiveItem
|
|
56
|
+
.PaginationItem.ActiveItem a[aria-disabled=true] {
|
|
57
57
|
pointer-events: none;
|
|
58
58
|
cursor: not-allowed;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
-
.PaginationItem
|
|
62
|
-
.PaginationItem
|
|
61
|
+
.PaginationItem a:hover,
|
|
62
|
+
.PaginationItem a:active {
|
|
63
63
|
background: #009993;
|
|
64
64
|
border-color: #009993;
|
|
65
65
|
color: #fff;
|
|
66
66
|
opacity: 0.8;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
a {
|
|
70
|
+
display: inline-flex;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
align-items: center;
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
text-decoration: none;
|
|
70
75
|
width: 100px;
|
|
71
76
|
height: 32px;
|
|
72
77
|
border: 1px solid #524e52;
|
|
@@ -82,13 +87,13 @@ button {
|
|
|
82
87
|
letter-spacing: 0;
|
|
83
88
|
}
|
|
84
89
|
|
|
85
|
-
|
|
86
|
-
|
|
90
|
+
a:hover,
|
|
91
|
+
a:active {
|
|
87
92
|
background: #004D4A;
|
|
88
93
|
border-color: #004D4A;
|
|
89
94
|
}
|
|
90
95
|
|
|
91
|
-
|
|
96
|
+
a[aria-disabled=true] {
|
|
92
97
|
background-color: #ccc;
|
|
93
98
|
border-color: #ccc;
|
|
94
99
|
color: #fff;
|
|
@@ -96,13 +101,13 @@ button:disabled {
|
|
|
96
101
|
}
|
|
97
102
|
|
|
98
103
|
@media screen and (max-width: 720px) {
|
|
99
|
-
|
|
104
|
+
a {
|
|
100
105
|
width: 90px;
|
|
101
106
|
font-size: 14px;
|
|
102
107
|
}
|
|
103
108
|
}
|
|
104
109
|
@media screen and (max-width: 480px) {
|
|
105
|
-
|
|
110
|
+
a {
|
|
106
111
|
width: 70px;
|
|
107
112
|
font-size: 14px;
|
|
108
113
|
}
|
|
@@ -111,7 +116,7 @@ button:disabled {
|
|
|
111
116
|
}
|
|
112
117
|
}
|
|
113
118
|
@media screen and (max-width: 320px) {
|
|
114
|
-
|
|
119
|
+
a {
|
|
115
120
|
width: 58px;
|
|
116
121
|
font-size: 12px;
|
|
117
122
|
}
|
|
@@ -122,13 +127,13 @@ button:disabled {
|
|
|
122
127
|
}
|
|
123
128
|
/* fix for issue on hover/visited for mobile devices */
|
|
124
129
|
@media (hover: none) {
|
|
125
|
-
.paginationItem
|
|
130
|
+
.paginationItem a:hover {
|
|
126
131
|
background: inherit;
|
|
127
132
|
border-color: inherit;
|
|
128
133
|
color: inherit;
|
|
129
134
|
opacity: 1;
|
|
130
135
|
}
|
|
131
|
-
.paginationItem.activeItem
|
|
136
|
+
.paginationItem.activeItem a:hover {
|
|
132
137
|
background: #009993;
|
|
133
138
|
border-color: #009993;
|
|
134
139
|
color: #fff;
|
|
@@ -76,6 +76,8 @@ export class HelperPagination {
|
|
|
76
76
|
this.arrowsActive = true;
|
|
77
77
|
this.secondaryArrowsActive = false;
|
|
78
78
|
this.numberedNavActive = false;
|
|
79
|
+
this.pageQueryParam = undefined;
|
|
80
|
+
this.page = 1;
|
|
79
81
|
this.offsetInt = 0;
|
|
80
82
|
this.lastPage = false;
|
|
81
83
|
this.previousPage = false;
|
|
@@ -136,32 +138,70 @@ export class HelperPagination {
|
|
|
136
138
|
disconnectedCallback() {
|
|
137
139
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
138
140
|
}
|
|
141
|
+
pageHref(page) {
|
|
142
|
+
if (!this.pageQueryParam)
|
|
143
|
+
return '#';
|
|
144
|
+
const url = new URL(window.location.href);
|
|
145
|
+
url.searchParams.set(this.pageQueryParam, String(page + this.page - 1));
|
|
146
|
+
return `${url.search}${url.hash}`;
|
|
147
|
+
}
|
|
139
148
|
render() {
|
|
140
149
|
/**
|
|
141
150
|
* Center navigation area
|
|
142
151
|
*/
|
|
143
152
|
let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
|
|
144
|
-
|
|
153
|
+
const page = typeof item === 'number' ? item : index === 0
|
|
154
|
+
? Math.max(1, this.currentPage - 5)
|
|
155
|
+
: Math.min(this.endInt + 1, this.currentPage + 5);
|
|
156
|
+
return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("a", { href: this.pageHref(page), "aria-current": item === this.currentPage ? 'page' : undefined, "aria-disabled": item === this.currentPage ? 'true' : undefined, tabIndex: item === this.currentPage ? -1 : undefined, onClick: event => {
|
|
157
|
+
event.preventDefault();
|
|
158
|
+
if (item !== this.currentPage)
|
|
159
|
+
this.paginationNavigation(item, index);
|
|
160
|
+
} }, h("span", null, item))));
|
|
145
161
|
}));
|
|
146
162
|
/**
|
|
147
163
|
* Left navigation area
|
|
148
164
|
*/
|
|
149
|
-
let buttonSecondaryLeftSide = h("
|
|
150
|
-
|
|
165
|
+
let buttonSecondaryLeftSide = h("a", { href: this.prevPage ? this.pageHref(1) : '#', "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
166
|
+
event.preventDefault();
|
|
167
|
+
if (this.prevPage)
|
|
168
|
+
this.navigateTo('firstPage');
|
|
169
|
+
} }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
|
|
170
|
+
let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
171
|
+
event.preventDefault();
|
|
172
|
+
if (this.prevPage)
|
|
173
|
+
this.navigateTo('previousPage');
|
|
174
|
+
} }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
151
175
|
if (isMobile(this.userAgent)) {
|
|
152
176
|
buttonsLeftSide =
|
|
153
|
-
h("div", { class: "LeftItems" }, h("
|
|
177
|
+
h("div", { class: "LeftItems" }, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
178
|
+
event.preventDefault();
|
|
179
|
+
if (this.prevPage)
|
|
180
|
+
this.navigateTo('previousPage');
|
|
181
|
+
} }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
154
182
|
}
|
|
155
183
|
/**
|
|
156
184
|
* Right navigation area
|
|
157
185
|
*/
|
|
158
|
-
let buttonSecondaryRightSide = h("
|
|
159
|
-
|
|
186
|
+
let buttonSecondaryRightSide = h("a", { href: this.nextPage ? this.pageHref(this.endInt + 1) : '#', "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
187
|
+
event.preventDefault();
|
|
188
|
+
if (this.nextPage)
|
|
189
|
+
this.navigateTo('lastPage');
|
|
190
|
+
} }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
|
|
191
|
+
let buttonsRightSide = h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
192
|
+
event.preventDefault();
|
|
193
|
+
if (this.nextPage)
|
|
194
|
+
this.navigateTo('nextPage');
|
|
195
|
+
} }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
|
|
160
196
|
if (isMobile(this.userAgent)) {
|
|
161
197
|
buttonsRightSide =
|
|
162
|
-
h("div", { class: "RightItems" }, h("
|
|
198
|
+
h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
199
|
+
event.preventDefault();
|
|
200
|
+
if (this.nextPage)
|
|
201
|
+
this.navigateTo('nextPage');
|
|
202
|
+
} }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
163
203
|
}
|
|
164
|
-
return (h("
|
|
204
|
+
return (h("nav", { id: "PaginationContainer", class: "PaginationContainer", "aria-label": "Blog pagination", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
|
|
165
205
|
}
|
|
166
206
|
static get is() { return "helper-pagination"; }
|
|
167
207
|
static get encapsulation() { return "shadow"; }
|
|
@@ -391,6 +431,41 @@ export class HelperPagination {
|
|
|
391
431
|
"attribute": "numbered-nav-active",
|
|
392
432
|
"reflect": true,
|
|
393
433
|
"defaultValue": "false"
|
|
434
|
+
},
|
|
435
|
+
"pageQueryParam": {
|
|
436
|
+
"type": "string",
|
|
437
|
+
"mutable": false,
|
|
438
|
+
"complexType": {
|
|
439
|
+
"original": "string",
|
|
440
|
+
"resolved": "string",
|
|
441
|
+
"references": {}
|
|
442
|
+
},
|
|
443
|
+
"required": false,
|
|
444
|
+
"optional": true,
|
|
445
|
+
"docs": {
|
|
446
|
+
"tags": [],
|
|
447
|
+
"text": ""
|
|
448
|
+
},
|
|
449
|
+
"attribute": "page-query-param",
|
|
450
|
+
"reflect": false
|
|
451
|
+
},
|
|
452
|
+
"page": {
|
|
453
|
+
"type": "number",
|
|
454
|
+
"mutable": false,
|
|
455
|
+
"complexType": {
|
|
456
|
+
"original": "number",
|
|
457
|
+
"resolved": "number",
|
|
458
|
+
"references": {}
|
|
459
|
+
},
|
|
460
|
+
"required": false,
|
|
461
|
+
"optional": false,
|
|
462
|
+
"docs": {
|
|
463
|
+
"tags": [],
|
|
464
|
+
"text": ""
|
|
465
|
+
},
|
|
466
|
+
"attribute": "page",
|
|
467
|
+
"reflect": false,
|
|
468
|
+
"defaultValue": "1"
|
|
394
469
|
}
|
|
395
470
|
};
|
|
396
471
|
}
|
|
@@ -175,7 +175,7 @@ const translate = (key, customLang) => {
|
|
|
175
175
|
return TRANSLATIONS[(lang !== undefined) && (lang in TRANSLATIONS) ? lang : DEFAULT_LANGUAGE][key];
|
|
176
176
|
};
|
|
177
177
|
|
|
178
|
-
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
|
|
178
|
+
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 a:not(:first-child),.RightItems a:not(:last-child){margin:0 10px}.LeftItems a,.RightItems a{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 a{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 a{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem a[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.PaginationItem a:hover,.PaginationItem a:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}a{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-decoration:none;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}a:hover,a:active{background:#004D4A;border-color:#004D4A}a[aria-disabled=true]{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){a{width:90px;font-size:14px}}@media screen and (max-width: 480px){a{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){a{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem a:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem a:hover{background:#009993;border-color:#009993;color:#fff}}";
|
|
179
179
|
const HelperPaginationStyle0 = helperPaginationCss;
|
|
180
180
|
|
|
181
181
|
const HelperPagination = class {
|
|
@@ -254,6 +254,8 @@ const HelperPagination = class {
|
|
|
254
254
|
this.arrowsActive = true;
|
|
255
255
|
this.secondaryArrowsActive = false;
|
|
256
256
|
this.numberedNavActive = false;
|
|
257
|
+
this.pageQueryParam = undefined;
|
|
258
|
+
this.page = 1;
|
|
257
259
|
this.offsetInt = 0;
|
|
258
260
|
this.lastPage = false;
|
|
259
261
|
this.previousPage = false;
|
|
@@ -314,32 +316,70 @@ const HelperPagination = class {
|
|
|
314
316
|
disconnectedCallback() {
|
|
315
317
|
this.stylingSubscription && this.stylingSubscription.unsubscribe();
|
|
316
318
|
}
|
|
319
|
+
pageHref(page) {
|
|
320
|
+
if (!this.pageQueryParam)
|
|
321
|
+
return '#';
|
|
322
|
+
const url = new URL(window.location.href);
|
|
323
|
+
url.searchParams.set(this.pageQueryParam, String(page + this.page - 1));
|
|
324
|
+
return `${url.search}${url.hash}`;
|
|
325
|
+
}
|
|
317
326
|
render() {
|
|
318
327
|
/**
|
|
319
328
|
* Center navigation area
|
|
320
329
|
*/
|
|
321
330
|
let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
|
|
322
|
-
|
|
331
|
+
const page = typeof item === 'number' ? item : index === 0
|
|
332
|
+
? Math.max(1, this.currentPage - 5)
|
|
333
|
+
: Math.min(this.endInt + 1, this.currentPage + 5);
|
|
334
|
+
return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("a", { href: this.pageHref(page), "aria-current": item === this.currentPage ? 'page' : undefined, "aria-disabled": item === this.currentPage ? 'true' : undefined, tabIndex: item === this.currentPage ? -1 : undefined, onClick: event => {
|
|
335
|
+
event.preventDefault();
|
|
336
|
+
if (item !== this.currentPage)
|
|
337
|
+
this.paginationNavigation(item, index);
|
|
338
|
+
} }, h("span", null, item))));
|
|
323
339
|
}));
|
|
324
340
|
/**
|
|
325
341
|
* Left navigation area
|
|
326
342
|
*/
|
|
327
|
-
let buttonSecondaryLeftSide = h("
|
|
328
|
-
|
|
343
|
+
let buttonSecondaryLeftSide = h("a", { href: this.prevPage ? this.pageHref(1) : '#', "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
344
|
+
event.preventDefault();
|
|
345
|
+
if (this.prevPage)
|
|
346
|
+
this.navigateTo('firstPage');
|
|
347
|
+
} }, h("span", { class: "NavigationButton" }, translate('firstPage', this.language)), h("span", { class: "NavigationIcon" }));
|
|
348
|
+
let buttonsLeftSide = h("div", { class: "LeftItems" }, this.secondaryArrowsActive && buttonSecondaryLeftSide, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
349
|
+
event.preventDefault();
|
|
350
|
+
if (this.prevPage)
|
|
351
|
+
this.navigateTo('previousPage');
|
|
352
|
+
} }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
329
353
|
if (isMobile(this.userAgent)) {
|
|
330
354
|
buttonsLeftSide =
|
|
331
|
-
h("div", { class: "LeftItems" }, h("
|
|
355
|
+
h("div", { class: "LeftItems" }, h("a", { href: this.prevPage ? this.pageHref(this.currentPage - 1) : '#', rel: "prev", "aria-label": translate('previousPage', this.language), "aria-disabled": !this.prevPage ? 'true' : undefined, tabIndex: !this.prevPage ? -1 : undefined, onClick: event => {
|
|
356
|
+
event.preventDefault();
|
|
357
|
+
if (this.prevPage)
|
|
358
|
+
this.navigateTo('previousPage');
|
|
359
|
+
} }, h("span", { class: "NavigationButton" }, translate('previousPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
332
360
|
}
|
|
333
361
|
/**
|
|
334
362
|
* Right navigation area
|
|
335
363
|
*/
|
|
336
|
-
let buttonSecondaryRightSide = h("
|
|
337
|
-
|
|
364
|
+
let buttonSecondaryRightSide = h("a", { href: this.nextPage ? this.pageHref(this.endInt + 1) : '#', "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
365
|
+
event.preventDefault();
|
|
366
|
+
if (this.nextPage)
|
|
367
|
+
this.navigateTo('lastPage');
|
|
368
|
+
} }, h("span", { class: "NavigationButton" }, translate('lastPage', this.language)), h("span", { class: "NavigationIcon" }));
|
|
369
|
+
let buttonsRightSide = h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
370
|
+
event.preventDefault();
|
|
371
|
+
if (this.nextPage)
|
|
372
|
+
this.navigateTo('nextPage');
|
|
373
|
+
} }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })), this.secondaryArrowsActive && buttonSecondaryRightSide);
|
|
338
374
|
if (isMobile(this.userAgent)) {
|
|
339
375
|
buttonsRightSide =
|
|
340
|
-
h("div", { class: "RightItems" }, h("
|
|
376
|
+
h("div", { class: "RightItems" }, h("a", { href: this.nextPage ? this.pageHref(this.currentPage + 1) : '#', rel: "next", "aria-label": translate('nextPage', this.language), "aria-disabled": !this.nextPage ? 'true' : undefined, tabIndex: !this.nextPage ? -1 : undefined, onClick: event => {
|
|
377
|
+
event.preventDefault();
|
|
378
|
+
if (this.nextPage)
|
|
379
|
+
this.navigateTo('nextPage');
|
|
380
|
+
} }, h("span", { class: "NavigationButton" }, translate('nextPage', this.language)), h("span", { class: "NavigationIcon" })));
|
|
341
381
|
}
|
|
342
|
-
return (h("
|
|
382
|
+
return (h("nav", { id: "PaginationContainer", class: "PaginationContainer", "aria-label": "Blog pagination", ref: el => this.stylingContainer = el }, this.arrowsActive && buttonsLeftSide, this.numberedNavActive && navigationArea, this.arrowsActive && buttonsRightSide));
|
|
343
383
|
}
|
|
344
384
|
static get watchers() { return {
|
|
345
385
|
"clientStyling": ["handleClientStylingChange"],
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"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]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"pageQueryParam":[1,"page-query-param"],"page":[2],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
20
20
|
});
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"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]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["helper-pagination",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"mbSource":[1,"mb-source"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[1537,"client-styling-url"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"pageQueryParam":[1,"page-query-param"],"page":[2],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32]},null,{"clientStyling":["handleClientStylingChange"],"clientStylingUrl":["handleClientStylingChangeURL"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as i,h as s}from"./index-0483e183.js";const e="__WIDGET_GLOBAL_STYLE_CACHE__";function n(t,i){if(t){const s=document.createElement("style");s.innerHTML=i,t.appendChild(s)}}function a(t,i){if(!t||!i)return;const s=new URL(i);fetch(s.href).then((t=>t.text())).then((i=>{const s=document.createElement("style");s.innerHTML=i,t&&t.appendChild(s)})).catch((t=>{console.error("There was an error while trying to load client styling from URL",t)}))}const o=t=>!!(t.toLowerCase().match(/android/i)||t.toLowerCase().match(/blackberry|bb/i)||t.toLowerCase().match(/iphone|ipad|ipod/i)||t.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),h={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"}},r=(t,i)=>h[void 0!==i&&i in h?i:"en"][t],l=class{constructor(s){t(this,s),this.hpPageChange=i(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=t=>{var i;switch(t){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-=5*this.limitInt,this.offsetInt=this.offsetInt<=0?0:this.offsetInt;break;case"fivePagesForward":this.offsetInt+=5*this.limitInt,this.offsetInt=this.offsetInt/this.limitInt>=this.endInt?this.endInt*this.limitInt:this.offsetInt}this.previousPage=!!this.offsetInt,null===(i=this.hpPageChange)||void 0===i||i.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(t,i)=>{var s;this.previousPage=!0,isNaN(t)?0===i&&this.currentPage<=4?this.navigateTo("firstPage"):0===i&&this.currentPage>4?this.navigateTo("fivePagesBack"):4===i&&this.endInt-this.currentPage>=2&&this.navigateTo("fivePagesForward"):1===t?(this.offsetInt=t-1,this.previousPage=!1):this.offsetInt=(t-1)*this.limitInt,null===(s=this.hpPageChange)||void 0===s||s.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.offsetInt=0,this.lastPage=!1,this.previousPage=!1,this.limitInt=0,this.totalInt=0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(t,i){t!==i&&n(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(t,i){t!==i&&this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)}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),1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((t,i)=>i+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endInt-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((t,i)=>this.currentPage+i-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endInt-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((t,i)=>this.endInt-2+i)),this.pagesArray.unshift("..."))}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&n(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&a(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=function(t,i,s,n=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!n)return function(t,i){const s=document.createElement("style");return window.emMessageBus.subscribe(i,(i=>{t&&(s.innerHTML=i,t.appendChild(s))}))}(t,i);window[e]||(window[e]={});const a=(s=function(t,i){return window.emMessageBus.subscribe(i,(s=>{if(!t)return;const n=t.getRootNode(),a=window[e];let o=a[i]&&a[i].sheet;o?a[i].refCount=a[i].refCount+1:(o=new CSSStyleSheet,o.replaceSync(s),a[i]={sheet:o,refCount:1});const h=n.adoptedStyleSheets||[];h.includes(o)||(n.adoptedStyleSheets=[...h,o])}))}(t,i)).unsubscribe.bind(s);return s.unsubscribe=()=>{if(window[e][i]){const t=window[e][i];t.refCount>1?t.refCount=t.refCount-1:delete window[e][i]}a()},s}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}render(){let t=s("ul",{class:"PaginationArea"},this.pagesArray.map(((t,i)=>s("li",{class:"PaginationItem"+(t===this.currentPage?" ActiveItem":" ")+" "+(o(this.userAgent)?"MobileButtons":"")},s("button",{disabled:t===this.currentPage,onClick:this.paginationNavigation.bind(this,t,i)},s("span",null,t)))))),i=s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"firstPage")},s("span",{class:"NavigationButton"},r("firstPage",this.language)),s("span",{class:"NavigationIcon"})),e=s("div",{class:"LeftItems"},this.secondaryArrowsActive&&i,s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"})));o(this.userAgent)&&(e=s("div",{class:"LeftItems"},s("button",{disabled:!this.prevPage,onClick:this.navigateTo.bind(this,"previousPage")},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"}))));let n=s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"lastPage")},s("span",{class:"NavigationButton"},r("lastPage",this.language)),s("span",{class:"NavigationIcon"})),a=s("div",{class:"RightItems"},s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&n);return o(this.userAgent)&&(a=s("div",{class:"RightItems"},s("button",{disabled:!this.nextPage,onClick:this.navigateTo.bind(this,"nextPage")},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})))),s("div",{id:"PaginationContainer",ref:t=>this.stylingContainer=t},this.arrowsActive&&e,this.numberedNavActive&&t,this.arrowsActive&&a)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};l.style='@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}}';export{l as helper_pagination}
|
|
1
|
+
import{r as i,c as t,h as s}from"./index-0483e183.js";const e="__WIDGET_GLOBAL_STYLE_CACHE__";function a(i,t){if(i){const s=document.createElement("style");s.innerHTML=t,i.appendChild(s)}}function n(i,t){if(!i||!t)return;const s=new URL(t);fetch(s.href).then((i=>i.text())).then((t=>{const s=document.createElement("style");s.innerHTML=t,i&&i.appendChild(s)})).catch((i=>{console.error("There was an error while trying to load client styling from URL",i)}))}const o=i=>!!(i.toLowerCase().match(/android/i)||i.toLowerCase().match(/blackberry|bb/i)||i.toLowerCase().match(/iphone|ipad|ipod/i)||i.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i)),h={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"}},r=(i,t)=>h[void 0!==t&&t in h?t:"en"][i],l=class{constructor(s){i(this,s),this.hpPageChange=t(this,"hpPageChange",7),this.userAgent=window.navigator.userAgent,this.currentPage=1,this.navigateTo=i=>{var t;switch(i){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-=5*this.limitInt,this.offsetInt=this.offsetInt<=0?0:this.offsetInt;break;case"fivePagesForward":this.offsetInt+=5*this.limitInt,this.offsetInt=this.offsetInt/this.limitInt>=this.endInt?this.endInt*this.limitInt:this.offsetInt}this.previousPage=!!this.offsetInt,null===(t=this.hpPageChange)||void 0===t||t.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.paginationNavigation=(i,t)=>{var s;this.previousPage=!0,isNaN(i)?0===t&&this.currentPage<=4?this.navigateTo("firstPage"):0===t&&this.currentPage>4?this.navigateTo("fivePagesBack"):4===t&&this.endInt-this.currentPage>=2&&this.navigateTo("fivePagesForward"):1===i?(this.offsetInt=i-1,this.previousPage=!1):this.offsetInt=(i-1)*this.limitInt,null===(s=this.hpPageChange)||void 0===s||s.emit({offset:this.offsetInt,limit:this.limitInt,total:this.totalInt})},this.nextPage="",this.prevPage="",this.offset=0,this.limit=1,this.total=1,this.language="en",this.mbSource=void 0,this.clientStyling="",this.clientStylingUrl="",this.arrowsActive=!0,this.secondaryArrowsActive=!1,this.numberedNavActive=!1,this.pageQueryParam=void 0,this.page=1,this.offsetInt=0,this.lastPage=!1,this.previousPage=!1,this.limitInt=0,this.totalInt=0,this.pagesArray=[],this.endInt=0}handleClientStylingChange(i,t){i!==t&&a(this.stylingContainer,this.clientStyling)}handleClientStylingChangeURL(i,t){i!==t&&this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)}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),1==this.currentPage||2==this.currentPage?(this.pagesArray=Array.from({length:4},((i,t)=>t+1)),this.pagesArray.push("...")):this.currentPage>=3&&this.endInt-this.currentPage>=2?(this.pagesArray=Array.from({length:3},((i,t)=>this.currentPage+t-1)),this.pagesArray.push("..."),this.pagesArray.unshift("...")):this.endInt-this.currentPage<3&&(this.pagesArray=Array.from({length:4},((i,t)=>this.endInt-2+t)),this.pagesArray.unshift("..."))}handleClientStyling(){void 0===window.emMessageBus?(this.clientStyling&&a(this.stylingContainer,this.clientStyling),this.clientStylingUrl&&n(this.stylingContainer,this.clientStylingUrl)):this.stylingSubscription=function(i,t,s,a=!1){if(!window.emMessageBus)return;if(!("adoptedStyleSheets"in Document.prototype)||!a)return function(i,t){const s=document.createElement("style");return window.emMessageBus.subscribe(t,(t=>{i&&(s.innerHTML=t,i.appendChild(s))}))}(i,t);window[e]||(window[e]={});const n=(s=function(i,t){return window.emMessageBus.subscribe(t,(s=>{if(!i)return;const a=i.getRootNode(),n=window[e];let o=n[t]&&n[t].sheet;o?n[t].refCount=n[t].refCount+1:(o=new CSSStyleSheet,o.replaceSync(s),n[t]={sheet:o,refCount:1});const h=a.adoptedStyleSheets||[];h.includes(o)||(a.adoptedStyleSheets=[...h,o])}))}(i,t)).unsubscribe.bind(s);return s.unsubscribe=()=>{if(window[e][t]){const i=window[e][t];i.refCount>1?i.refCount=i.refCount-1:delete window[e][t]}n()},s}(this.stylingContainer,`${this.mbSource}.Style`,this.stylingSubscription,!0)}componentDidLoad(){this.handleClientStyling()}disconnectedCallback(){this.stylingSubscription&&this.stylingSubscription.unsubscribe()}pageHref(i){if(!this.pageQueryParam)return"#";const t=new URL(window.location.href);return t.searchParams.set(this.pageQueryParam,String(i+this.page-1)),`${t.search}${t.hash}`}render(){let i=s("ul",{class:"PaginationArea"},this.pagesArray.map(((i,t)=>{const e="number"==typeof i?i:0===t?Math.max(1,this.currentPage-5):Math.min(this.endInt+1,this.currentPage+5);return s("li",{class:"PaginationItem"+(i===this.currentPage?" ActiveItem":" ")+" "+(o(this.userAgent)?"MobileButtons":"")},s("a",{href:this.pageHref(e),"aria-current":i===this.currentPage?"page":void 0,"aria-disabled":i===this.currentPage?"true":void 0,tabIndex:i===this.currentPage?-1:void 0,onClick:s=>{s.preventDefault(),i!==this.currentPage&&this.paginationNavigation(i,t)}},s("span",null,i)))}))),t=s("a",{href:this.prevPage?this.pageHref(1):"#","aria-disabled":this.prevPage?void 0:"true",tabIndex:this.prevPage?void 0:-1,onClick:i=>{i.preventDefault(),this.prevPage&&this.navigateTo("firstPage")}},s("span",{class:"NavigationButton"},r("firstPage",this.language)),s("span",{class:"NavigationIcon"})),e=s("div",{class:"LeftItems"},this.secondaryArrowsActive&&t,s("a",{href:this.prevPage?this.pageHref(this.currentPage-1):"#",rel:"prev","aria-label":r("previousPage",this.language),"aria-disabled":this.prevPage?void 0:"true",tabIndex:this.prevPage?void 0:-1,onClick:i=>{i.preventDefault(),this.prevPage&&this.navigateTo("previousPage")}},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"})));o(this.userAgent)&&(e=s("div",{class:"LeftItems"},s("a",{href:this.prevPage?this.pageHref(this.currentPage-1):"#",rel:"prev","aria-label":r("previousPage",this.language),"aria-disabled":this.prevPage?void 0:"true",tabIndex:this.prevPage?void 0:-1,onClick:i=>{i.preventDefault(),this.prevPage&&this.navigateTo("previousPage")}},s("span",{class:"NavigationButton"},r("previousPage",this.language)),s("span",{class:"NavigationIcon"}))));let a=s("a",{href:this.nextPage?this.pageHref(this.endInt+1):"#","aria-disabled":this.nextPage?void 0:"true",tabIndex:this.nextPage?void 0:-1,onClick:i=>{i.preventDefault(),this.nextPage&&this.navigateTo("lastPage")}},s("span",{class:"NavigationButton"},r("lastPage",this.language)),s("span",{class:"NavigationIcon"})),n=s("div",{class:"RightItems"},s("a",{href:this.nextPage?this.pageHref(this.currentPage+1):"#",rel:"next","aria-label":r("nextPage",this.language),"aria-disabled":this.nextPage?void 0:"true",tabIndex:this.nextPage?void 0:-1,onClick:i=>{i.preventDefault(),this.nextPage&&this.navigateTo("nextPage")}},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})),this.secondaryArrowsActive&&a);return o(this.userAgent)&&(n=s("div",{class:"RightItems"},s("a",{href:this.nextPage?this.pageHref(this.currentPage+1):"#",rel:"next","aria-label":r("nextPage",this.language),"aria-disabled":this.nextPage?void 0:"true",tabIndex:this.nextPage?void 0:-1,onClick:i=>{i.preventDefault(),this.nextPage&&this.navigateTo("nextPage")}},s("span",{class:"NavigationButton"},r("nextPage",this.language)),s("span",{class:"NavigationIcon"})))),s("nav",{id:"PaginationContainer",class:"PaginationContainer","aria-label":"Blog pagination",ref:i=>this.stylingContainer=i},this.arrowsActive&&e,this.numberedNavActive&&i,this.arrowsActive&&n)}static get watchers(){return{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}}};l.style='@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 a:not(:first-child),.RightItems a:not(:last-child){margin:0 10px}.LeftItems a,.RightItems a{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 a{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 a{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem a[aria-disabled=true]{pointer-events:none;cursor:not-allowed}.PaginationItem a:hover,.PaginationItem a:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}a{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-decoration:none;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}a:hover,a:active{background:#004D4A;border-color:#004D4A}a[aria-disabled=true]{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){a{width:90px;font-size:14px}}@media screen and (max-width: 480px){a{width:70px;font-size:14px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){a{width:58px;font-size:12px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem a:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem a:hover{background:#009993;border-color:#009993;color:#fff}}';export{l as helper_pagination}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as
|
|
1
|
+
import{p as e,b as a}from"./index-0483e183.js";export{s as setNonce}from"./index-0483e183.js";import{g as t}from"./app-globals-0f993ce5.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await t(),a([["helper-pagination",[[1,"helper-pagination",{nextPage:[1537,"next-page"],prevPage:[1537,"prev-page"],offset:[1538],limit:[1538],total:[1538],language:[1537],mbSource:[1,"mb-source"],clientStyling:[1537,"client-styling"],clientStylingUrl:[1537,"client-styling-url"],arrowsActive:[1540,"arrows-active"],secondaryArrowsActive:[1540,"secondary-arrows-active"],numberedNavActive:[1540,"numbered-nav-active"],pageQueryParam:[1,"page-query-param"],page:[2],offsetInt:[32],lastPage:[32],previousPage:[32],limitInt:[32],totalInt:[32],pagesArray:[32],endInt:[32]},null,{clientStyling:["handleClientStylingChange"],clientStylingUrl:["handleClientStylingChangeURL"]}]]]],e))));
|
|
@@ -48,6 +48,8 @@ export declare class HelperPagination {
|
|
|
48
48
|
* Customize pagination: Activate pagination numbered navigation
|
|
49
49
|
*/
|
|
50
50
|
numberedNavActive: boolean;
|
|
51
|
+
pageQueryParam?: string;
|
|
52
|
+
page: number;
|
|
51
53
|
/**
|
|
52
54
|
* Component working variable for offset
|
|
53
55
|
*/
|
|
@@ -98,5 +100,6 @@ export declare class HelperPagination {
|
|
|
98
100
|
handleClientStyling(): void;
|
|
99
101
|
componentDidLoad(): void;
|
|
100
102
|
disconnectedCallback(): void;
|
|
103
|
+
private pageHref;
|
|
101
104
|
render(): any;
|
|
102
105
|
}
|
|
@@ -43,6 +43,8 @@ export namespace Components {
|
|
|
43
43
|
* The received offset
|
|
44
44
|
*/
|
|
45
45
|
"offset": number;
|
|
46
|
+
"page": number;
|
|
47
|
+
"pageQueryParam"?: string;
|
|
46
48
|
/**
|
|
47
49
|
* Previous page string value - determines if the previous page is disabled or active
|
|
48
50
|
*/
|
|
@@ -125,6 +127,8 @@ declare namespace LocalJSX {
|
|
|
125
127
|
* Event that handles the navigation, updating the offset, limit and total values
|
|
126
128
|
*/
|
|
127
129
|
"onHpPageChange"?: (event: HelperPaginationCustomEvent<any>) => void;
|
|
130
|
+
"page"?: number;
|
|
131
|
+
"pageQueryParam"?: string;
|
|
128
132
|
/**
|
|
129
133
|
* Previous page string value - determines if the previous page is disabled or active
|
|
130
134
|
*/
|