@everymatrix/bonus-pagination-nav 1.44.0 → 1.45.2
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/bonus-pagination-nav/bonus-pagination-nav.esm.js +1 -1
- package/dist/bonus-pagination-nav/p-57809f35.js +2 -0
- package/dist/bonus-pagination-nav/p-e1255160.js +1 -0
- package/dist/bonus-pagination-nav/p-f71ef42b.entry.js +1 -0
- package/dist/cjs/app-globals-3a1e7e63.js +5 -0
- package/dist/cjs/bonus-pagination-nav.cjs.entry.js +140 -165
- package/dist/cjs/bonus-pagination-nav.cjs.js +16 -10
- package/dist/cjs/index-5f4d615c.js +1233 -0
- package/dist/cjs/loader.cjs.js +6 -12
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/bonus-pagination-nav/bonus-pagination-nav.js +325 -350
- package/dist/collection/components/bonus-pagination-nav/index.js +1 -0
- package/dist/collection/utils/locale.utils.js +55 -55
- package/dist/collection/utils/utils.js +3 -0
- package/dist/esm/app-globals-0f993ce5.js +3 -0
- package/dist/esm/bonus-pagination-nav.entry.js +140 -165
- package/dist/esm/bonus-pagination-nav.js +13 -10
- package/dist/esm/index-332d0149.js +1206 -0
- package/dist/esm/loader.js +6 -12
- package/dist/stencil.config.dev.js +17 -0
- package/dist/stencil.config.js +14 -21
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/bonus-pagination-nav/.stencil/packages/stencil/bonus-pagination-nav/stencil.config.d.ts +2 -0
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-monorepo/packages/stencil/bonus-pagination-nav/.stencil/packages/stencil/bonus-pagination-nav/stencil.config.dev.d.ts +2 -0
- package/dist/types/components/bonus-pagination-nav/bonus-pagination-nav.d.ts +52 -52
- package/dist/types/components/bonus-pagination-nav/index.d.ts +1 -0
- package/dist/types/components.d.ts +16 -1
- package/dist/types/stencil-public-runtime.d.ts +142 -33
- package/dist/types/utils/locale.utils.d.ts +7 -7
- package/dist/types/utils/utils.d.ts +1 -0
- package/loader/cdn.js +1 -3
- package/loader/index.cjs.js +1 -3
- package/loader/index.d.ts +13 -1
- package/loader/index.es2017.js +1 -3
- package/loader/index.js +1 -3
- package/loader/package.json +1 -0
- package/package.json +9 -2
- package/dist/bonus-pagination-nav/p-06373b64.js +0 -1
- package/dist/bonus-pagination-nav/p-fc173a41.entry.js +0 -1
- package/dist/cjs/index-fb15607a.js +0 -1189
- package/dist/components/bonus-pagination-nav.d.ts +0 -11
- package/dist/components/bonus-pagination-nav.js +0 -215
- package/dist/components/index.d.ts +0 -26
- package/dist/components/index.js +0 -1
- package/dist/esm/index-7299a1fa.js +0 -1163
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/css-shim.js +0 -1
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
- package/dist/types/Users/adrian.pripon/Documents/Work/widgets-stencil/packages/bonus-pagination-nav/.stencil/packages/bonus-pagination-nav/stencil.config.d.ts +0 -2
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Components, JSX } from "../types/components";
|
|
2
|
-
|
|
3
|
-
interface BonusPaginationNav extends Components.BonusPaginationNav, HTMLElement {}
|
|
4
|
-
export const BonusPaginationNav: {
|
|
5
|
-
prototype: BonusPaginationNav;
|
|
6
|
-
new (): BonusPaginationNav;
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Used to define this component and all nested components recursively.
|
|
10
|
-
*/
|
|
11
|
-
export const defineCustomElement: () => void;
|
|
@@ -1,215 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
|
|
2
|
-
|
|
3
|
-
const DEFAULT_LANGUAGE = 'en';
|
|
4
|
-
const SUPPORTED_LANGUAGES = ['pt-br', 'en', 'es-mx', 'hu', 'hr'];
|
|
5
|
-
const TRANSLATIONS = {
|
|
6
|
-
"en": {
|
|
7
|
-
"firstPage": '|<',
|
|
8
|
-
"lastPage": '>|',
|
|
9
|
-
"prePage": '<',
|
|
10
|
-
"nextPage": '>',
|
|
11
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
12
|
-
},
|
|
13
|
-
"hu": {
|
|
14
|
-
"firstPage": 'First',
|
|
15
|
-
"lastPage": 'Last',
|
|
16
|
-
"prePage": '<',
|
|
17
|
-
"nextPage": '>',
|
|
18
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
19
|
-
},
|
|
20
|
-
"hr": {
|
|
21
|
-
"firstPage": 'First',
|
|
22
|
-
"lastPage": 'Last',
|
|
23
|
-
"prePage": '<',
|
|
24
|
-
"nextPage": '>',
|
|
25
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
26
|
-
},
|
|
27
|
-
"pt-br": {
|
|
28
|
-
"firstPage": 'First',
|
|
29
|
-
"lastPage": 'Last',
|
|
30
|
-
"prePage": '<',
|
|
31
|
-
"nextPage": '>',
|
|
32
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
33
|
-
},
|
|
34
|
-
"es-mx": {
|
|
35
|
-
"firstPage": 'First',
|
|
36
|
-
"lastPage": 'Last',
|
|
37
|
-
"prePage": '<',
|
|
38
|
-
"nextPage": '>',
|
|
39
|
-
"pageOfTotal": '{start}-{end} of {total}',
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
const translate = (key, customLang, values) => {
|
|
43
|
-
const lang = customLang;
|
|
44
|
-
let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
|
|
45
|
-
if (values !== undefined) {
|
|
46
|
-
for (const [key, value] of Object.entries(values.values)) {
|
|
47
|
-
const regex = new RegExp(`{${key}}`, 'g');
|
|
48
|
-
translation = translation.replace(regex, value);
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
return translation;
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const bonusPaginationNavCss = ":host{display:block}.PageNavigationWrapper{display:flex;flex-direction:row}.PageNavigationWrapper .PageOfMessage{margin:5px;padding:5px 6px;margin:2px}.PageNavigation{display:flex;flex-direction:row;align-items:center}.PageNavigation .PageArrow{color:var(--emfe-w-color-primary, #777676);padding:6px 5px;cursor:pointer;font-weight:bold;width:1.2rem;text-align:center}.PageNavigation .PageArrow.Disabled{color:var(--emfe-w-color-gray-100, #e0e0e0)}ul.PaginationArea{list-style:none;padding:0px;margin:0px;display:flex}ul.PaginationArea li.PageItem{cursor:pointer;padding:5px 6px;margin:2px;width:0.9rem;text-align:center}ul.PaginationArea li.PageItem.Active,ul.PaginationArea li.PageItem:hover{font-weight:bold;color:var(--emfe-w-color-primary, #f5f1f1);background-color:var(--emfe-w-color-secondary, #8c8989);border-radius:0.3rem}";
|
|
55
|
-
|
|
56
|
-
const BonusPaginationNav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
57
|
-
constructor() {
|
|
58
|
-
super();
|
|
59
|
-
this.__registerHost();
|
|
60
|
-
this.reloadPageEmitter = createEvent(this, "reloadPageByType", 7);
|
|
61
|
-
/**
|
|
62
|
-
* The received length of dataset
|
|
63
|
-
*/
|
|
64
|
-
this.total = 1;
|
|
65
|
-
/**
|
|
66
|
-
* The received limit for the number of pages
|
|
67
|
-
*/
|
|
68
|
-
this.limit = 10;
|
|
69
|
-
/**
|
|
70
|
-
* The offset of dataset
|
|
71
|
-
*/
|
|
72
|
-
this.offset = 0;
|
|
73
|
-
/**
|
|
74
|
-
* The table id, use to identify which table listen the page change message
|
|
75
|
-
* when there is more than 1 table on same page
|
|
76
|
-
*/
|
|
77
|
-
this.tableId = 'default';
|
|
78
|
-
/**
|
|
79
|
-
* Language
|
|
80
|
-
*/
|
|
81
|
-
this.language = 'en';
|
|
82
|
-
/**
|
|
83
|
-
* Translation via url
|
|
84
|
-
*/
|
|
85
|
-
this.translationUrl = '';
|
|
86
|
-
/**
|
|
87
|
-
* Customize pagination: Activate pagination arrows
|
|
88
|
-
*/
|
|
89
|
-
this.arrowsActive = true;
|
|
90
|
-
/**
|
|
91
|
-
* Customize pagination: Activate pagination secondary arrows
|
|
92
|
-
*/
|
|
93
|
-
this.secondaryArrowsActive = true;
|
|
94
|
-
/**
|
|
95
|
-
* Customize pagination: Activate pagination numbered navigation
|
|
96
|
-
*/
|
|
97
|
-
this.displayPageNumbers = true;
|
|
98
|
-
this.endPageIndex = 0;
|
|
99
|
-
this.currentPage = 1;
|
|
100
|
-
}
|
|
101
|
-
pageLimitChangedHandler(event) {
|
|
102
|
-
this.limit = event.detail.limit ? event.detail.limit : this.limit;
|
|
103
|
-
//reset offset = 0, this.currentPage = 1 when page limit changed
|
|
104
|
-
this.currentPage = 1;
|
|
105
|
-
this.offset = 0;
|
|
106
|
-
this.updatePageStatus();
|
|
107
|
-
if (event.type == 'pageLimitChanged') {
|
|
108
|
-
this.reloadPageEmitter.emit({ offset: 0, limit: this.limit, tableId: this.tableId });
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
goTo(step) {
|
|
112
|
-
if (step == '...' || step == 0 || step > this.endPageIndex + 1) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
this.currentPage = step;
|
|
116
|
-
let offset = (this.currentPage - 1) * this.limit;
|
|
117
|
-
this.reloadPageEmitter.emit({ offset, limit: this.limit, tableId: this.tableId });
|
|
118
|
-
}
|
|
119
|
-
renderPageList() {
|
|
120
|
-
return h("ul", { class: 'PaginationArea' }, this.pagesArray.map((page) => {
|
|
121
|
-
return (h("li", { class: `PageItem ${this.currentPage == page ? 'Active' : ''}`, onClick: () => {
|
|
122
|
-
this.goTo(page);
|
|
123
|
-
} }, page));
|
|
124
|
-
}));
|
|
125
|
-
}
|
|
126
|
-
renderStylingWrapper() {
|
|
127
|
-
return h("general-styling-wrapper", { targetTranslations: TRANSLATIONS, translationUrl: this.translationUrl });
|
|
128
|
-
}
|
|
129
|
-
updatePageStatus() {
|
|
130
|
-
this.endPageIndex = (Math.ceil(this.total / this.limit) - 1);
|
|
131
|
-
this.endPageIndex = this.endPageIndex < 0 ? this.endPageIndex = 0 : this.endPageIndex;
|
|
132
|
-
this.pagesArray = [];
|
|
133
|
-
if (this.endPageIndex < 5) {
|
|
134
|
-
this.pagesArray = Array.from({ length: this.endPageIndex + 1 }, (_, i) => i + 1);
|
|
135
|
-
}
|
|
136
|
-
else {
|
|
137
|
-
/**
|
|
138
|
-
* Construct numbered navigation area based on current page position
|
|
139
|
-
*/
|
|
140
|
-
if (this.currentPage == 1 || this.currentPage == 2) {
|
|
141
|
-
this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
|
|
142
|
-
this.pagesArray.push('...');
|
|
143
|
-
}
|
|
144
|
-
else if (this.currentPage >= 3 && ((this.endPageIndex - this.currentPage) >= 2)) {
|
|
145
|
-
this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
|
|
146
|
-
this.pagesArray.push('...');
|
|
147
|
-
this.pagesArray.unshift('...');
|
|
148
|
-
}
|
|
149
|
-
else if ((this.endPageIndex - this.currentPage) < 3) {
|
|
150
|
-
this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endPageIndex - 2 + i);
|
|
151
|
-
this.pagesArray.unshift('...');
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
componentWillRender() {
|
|
156
|
-
this.currentPage = Math.floor(this.offset / this.limit) + 1;
|
|
157
|
-
this.updatePageStatus();
|
|
158
|
-
}
|
|
159
|
-
render() {
|
|
160
|
-
const startOffset = (this.currentPage - 1) * this.limit + 1;
|
|
161
|
-
const endOffset = this.currentPage * this.limit > this.total ? this.total : this.currentPage * this.limit;
|
|
162
|
-
return h("div", { class: 'PageNavigationWrapper' }, this.displayRangeOfTotal && this.total > 0 && h("span", { class: 'PageOfMessage' }, translate('pageOfTotal', this.language, {
|
|
163
|
-
values: {
|
|
164
|
-
start: startOffset,
|
|
165
|
-
end: endOffset,
|
|
166
|
-
total: this.total
|
|
167
|
-
}
|
|
168
|
-
})), h("div", { class: 'PageNavigation' }, this.arrowsActive &&
|
|
169
|
-
h("div", { class: `PageArrow FirstPage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
170
|
-
this.goTo(1);
|
|
171
|
-
} }, translate('firstPage', this.language)), this.secondaryArrowsActive &&
|
|
172
|
-
h("span", { class: `PageArrow PrePage ${this.currentPage == 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
173
|
-
this.goTo(this.currentPage - 1);
|
|
174
|
-
} }, translate('prePage', this.language)), this.displayPageNumbers && this.renderPageList(), this.secondaryArrowsActive &&
|
|
175
|
-
h("span", { class: `PageArrow NextPage ${this.currentPage == (this.endPageIndex + 1) ? 'Disabled' : ''}`, onClick: () => {
|
|
176
|
-
this.goTo(this.currentPage + 1);
|
|
177
|
-
} }, translate('nextPage', this.language)), this.arrowsActive &&
|
|
178
|
-
h("div", { class: `PageArrow LastPage ${this.currentPage == this.endPageIndex + 1 ? 'Disabled' : ''}`, onClick: () => {
|
|
179
|
-
this.goTo(this.endPageIndex + 1);
|
|
180
|
-
} }, " ", translate('lastPage', this.language), " "), this.renderStylingWrapper()));
|
|
181
|
-
}
|
|
182
|
-
static get style() { return bonusPaginationNavCss; }
|
|
183
|
-
}, [0, "bonus-pagination-nav", {
|
|
184
|
-
"total": [1538],
|
|
185
|
-
"limit": [1538],
|
|
186
|
-
"offset": [1538],
|
|
187
|
-
"tableId": [1537, "table-id"],
|
|
188
|
-
"language": [1537],
|
|
189
|
-
"translationUrl": [513, "translation-url"],
|
|
190
|
-
"arrowsActive": [1540, "arrows-active"],
|
|
191
|
-
"secondaryArrowsActive": [1540, "secondary-arrows-active"],
|
|
192
|
-
"displayPageNumbers": [1540, "display-page-numbers"],
|
|
193
|
-
"displayRangeOfTotal": [1540, "display-range-of-total"],
|
|
194
|
-
"endPageIndex": [32],
|
|
195
|
-
"pagesArray": [32],
|
|
196
|
-
"currentPage": [32]
|
|
197
|
-
}, [[8, "paginationReset", "pageLimitChangedHandler"], [8, "pageLimitChanged", "pageLimitChangedHandler"]]]);
|
|
198
|
-
function defineCustomElement$1() {
|
|
199
|
-
if (typeof customElements === "undefined") {
|
|
200
|
-
return;
|
|
201
|
-
}
|
|
202
|
-
const components = ["bonus-pagination-nav"];
|
|
203
|
-
components.forEach(tagName => { switch (tagName) {
|
|
204
|
-
case "bonus-pagination-nav":
|
|
205
|
-
if (!customElements.get(tagName)) {
|
|
206
|
-
customElements.define(tagName, BonusPaginationNav$1);
|
|
207
|
-
}
|
|
208
|
-
break;
|
|
209
|
-
} });
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
const BonusPaginationNav = BonusPaginationNav$1;
|
|
213
|
-
const defineCustomElement = defineCustomElement$1;
|
|
214
|
-
|
|
215
|
-
export { BonusPaginationNav, defineCustomElement };
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/* BonusPaginationNav custom elements */
|
|
2
|
-
|
|
3
|
-
import type { Components, JSX } from "../types/components";
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Used to manually set the base path where assets can be found.
|
|
7
|
-
* If the script is used as "module", it's recommended to use "import.meta.url",
|
|
8
|
-
* such as "setAssetPath(import.meta.url)". Other options include
|
|
9
|
-
* "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
|
|
10
|
-
* dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
|
|
11
|
-
* But do note that this configuration depends on how your script is bundled, or lack of
|
|
12
|
-
* bundling, and where your assets can be loaded from. Additionally custom bundling
|
|
13
|
-
* will have to ensure the static assets are copied to its build directory.
|
|
14
|
-
*/
|
|
15
|
-
export declare const setAssetPath: (path: string) => void;
|
|
16
|
-
|
|
17
|
-
export interface SetPlatformOptions {
|
|
18
|
-
raf?: (c: FrameRequestCallback) => number;
|
|
19
|
-
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
20
|
-
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
21
|
-
}
|
|
22
|
-
export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
|
|
23
|
-
|
|
24
|
-
export type { Components, JSX };
|
|
25
|
-
|
|
26
|
-
export * from '../types';
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|