@memberjunction/ng-pagination 0.0.1 → 5.12.0
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/lib/pagination.component.d.ts +55 -0
- package/dist/lib/pagination.component.d.ts.map +1 -0
- package/dist/lib/pagination.component.js +146 -0
- package/dist/lib/pagination.component.js.map +1 -0
- package/dist/lib/pagination.module.d.ts +14 -0
- package/dist/lib/pagination.module.d.ts.map +1 -0
- package/dist/lib/pagination.module.js +23 -0
- package/dist/lib/pagination.module.js.map +1 -0
- package/dist/public-api.d.ts +3 -0
- package/dist/public-api.d.ts.map +1 -0
- package/dist/public-api.js +8 -0
- package/dist/public-api.js.map +1 -0
- package/package.json +36 -6
- package/README.md +0 -45
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* Event emitted when the user navigates to a different page.
|
|
5
|
+
*/
|
|
6
|
+
export interface PageChangeEvent {
|
|
7
|
+
/** 1-based page number */
|
|
8
|
+
PageNumber: number;
|
|
9
|
+
/** Number of rows per page */
|
|
10
|
+
PageSize: number;
|
|
11
|
+
/** 0-based start row for the new page (convenience: (PageNumber - 1) * PageSize) */
|
|
12
|
+
StartRow: number;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* PaginationComponent — reusable page-based navigation for server-side paged data.
|
|
16
|
+
*
|
|
17
|
+
* Displays "Showing X-Y of Z" summary with first/prev/next/last navigation.
|
|
18
|
+
* Designed for use with RunQuery's StartRow/MaxRows server-side paging.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* ```html
|
|
22
|
+
* <mj-pagination
|
|
23
|
+
* [TotalRowCount]="result.TotalRowCount"
|
|
24
|
+
* [PageNumber]="currentPage"
|
|
25
|
+
* [PageSize]="pageSize"
|
|
26
|
+
* [IsLoading]="isLoading"
|
|
27
|
+
* (PageChange)="onPageChange($event)">
|
|
28
|
+
* </mj-pagination>
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export declare class PaginationComponent {
|
|
32
|
+
/** Total number of rows across all pages */
|
|
33
|
+
TotalRowCount: number;
|
|
34
|
+
/** Current page number (1-based) */
|
|
35
|
+
PageNumber: number;
|
|
36
|
+
/** Number of rows per page */
|
|
37
|
+
PageSize: number;
|
|
38
|
+
/** Whether data is currently loading */
|
|
39
|
+
IsLoading: boolean;
|
|
40
|
+
/** Emitted when the user navigates to a different page */
|
|
41
|
+
PageChange: EventEmitter<PageChangeEvent>;
|
|
42
|
+
get TotalPages(): number;
|
|
43
|
+
get DisplayFrom(): number;
|
|
44
|
+
get DisplayTo(): number;
|
|
45
|
+
get CanGoBack(): boolean;
|
|
46
|
+
get CanGoForward(): boolean;
|
|
47
|
+
GoToFirst(): void;
|
|
48
|
+
GoToPrevious(): void;
|
|
49
|
+
GoToNext(): void;
|
|
50
|
+
GoToLast(): void;
|
|
51
|
+
private emitPageChange;
|
|
52
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
|
|
53
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "mj-pagination", never, { "TotalRowCount": { "alias": "TotalRowCount"; "required": false; }; "PageNumber": { "alias": "PageNumber"; "required": false; }; "PageSize": { "alias": "PageSize"; "required": false; }; "IsLoading": { "alias": "IsLoading"; "required": false; }; }, { "PageChange": "PageChange"; }, never, never, true, never>;
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=pagination.component.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.component.d.ts","sourceRoot":"","sources":["../../src/lib/pagination.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;;AAGvE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC5B,0BAA0B;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAOa,mBAAmB;IAC5B,4CAA4C;IACnC,aAAa,EAAE,MAAM,CAAK;IAEnC,oCAAoC;IAC3B,UAAU,EAAE,MAAM,CAAK;IAEhC,8BAA8B;IACrB,QAAQ,EAAE,MAAM,CAAO;IAEhC,wCAAwC;IAC/B,SAAS,EAAE,OAAO,CAAS;IAEpC,0DAA0D;IAChD,UAAU,gCAAuC;IAE3D,IAAI,UAAU,IAAI,MAAM,CAGvB;IAED,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,SAAS,IAAI,IAAI;IAIjB,YAAY,IAAI,IAAI;IAIpB,QAAQ,IAAI,IAAI;IAIhB,QAAQ,IAAI,IAAI;IAIhB,OAAO,CAAC,cAAc;yCAtDb,mBAAmB;2CAAnB,mBAAmB;CA6D/B"}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
function PaginationComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
6
|
+
i0.ɵɵdomElement(0, "i", 12);
|
|
7
|
+
} }
|
|
8
|
+
function PaginationComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
9
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
10
|
+
i0.ɵɵdomElementStart(0, "div", 0)(1, "span", 1);
|
|
11
|
+
i0.ɵɵtext(2);
|
|
12
|
+
i0.ɵɵpipe(3, "number");
|
|
13
|
+
i0.ɵɵpipe(4, "number");
|
|
14
|
+
i0.ɵɵpipe(5, "number");
|
|
15
|
+
i0.ɵɵdomElementEnd();
|
|
16
|
+
i0.ɵɵdomElementStart(6, "div", 2)(7, "button", 3);
|
|
17
|
+
i0.ɵɵdomListener("click", function PaginationComponent_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToFirst()); });
|
|
18
|
+
i0.ɵɵdomElement(8, "i", 4);
|
|
19
|
+
i0.ɵɵdomElementEnd();
|
|
20
|
+
i0.ɵɵdomElementStart(9, "button", 5);
|
|
21
|
+
i0.ɵɵdomListener("click", function PaginationComponent_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToPrevious()); });
|
|
22
|
+
i0.ɵɵdomElement(10, "i", 6);
|
|
23
|
+
i0.ɵɵdomElementEnd();
|
|
24
|
+
i0.ɵɵdomElementStart(11, "span", 7);
|
|
25
|
+
i0.ɵɵtext(12);
|
|
26
|
+
i0.ɵɵdomElementEnd();
|
|
27
|
+
i0.ɵɵdomElementStart(13, "button", 8);
|
|
28
|
+
i0.ɵɵdomListener("click", function PaginationComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToNext()); });
|
|
29
|
+
i0.ɵɵdomElement(14, "i", 9);
|
|
30
|
+
i0.ɵɵdomElementEnd();
|
|
31
|
+
i0.ɵɵdomElementStart(15, "button", 10);
|
|
32
|
+
i0.ɵɵdomListener("click", function PaginationComponent_Conditional_0_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.GoToLast()); });
|
|
33
|
+
i0.ɵɵdomElement(16, "i", 11);
|
|
34
|
+
i0.ɵɵdomElementEnd();
|
|
35
|
+
i0.ɵɵconditionalCreate(17, PaginationComponent_Conditional_0_Conditional_17_Template, 1, 0, "i", 12);
|
|
36
|
+
i0.ɵɵdomElementEnd()();
|
|
37
|
+
} if (rf & 2) {
|
|
38
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
39
|
+
i0.ɵɵadvance(2);
|
|
40
|
+
i0.ɵɵtextInterpolate3(" ", i0.ɵɵpipeBind1(3, 10, ctx_r1.DisplayFrom), "-", i0.ɵɵpipeBind1(4, 12, ctx_r1.DisplayTo), " of ", i0.ɵɵpipeBind1(5, 14, ctx_r1.TotalRowCount), " ");
|
|
41
|
+
i0.ɵɵadvance(5);
|
|
42
|
+
i0.ɵɵdomProperty("disabled", !ctx_r1.CanGoBack);
|
|
43
|
+
i0.ɵɵadvance(2);
|
|
44
|
+
i0.ɵɵdomProperty("disabled", !ctx_r1.CanGoBack);
|
|
45
|
+
i0.ɵɵadvance(3);
|
|
46
|
+
i0.ɵɵtextInterpolate2(" Page ", ctx_r1.PageNumber, " of ", ctx_r1.TotalPages, " ");
|
|
47
|
+
i0.ɵɵadvance();
|
|
48
|
+
i0.ɵɵdomProperty("disabled", !ctx_r1.CanGoForward);
|
|
49
|
+
i0.ɵɵadvance(2);
|
|
50
|
+
i0.ɵɵdomProperty("disabled", !ctx_r1.CanGoForward);
|
|
51
|
+
i0.ɵɵadvance(2);
|
|
52
|
+
i0.ɵɵconditional(ctx_r1.IsLoading ? 17 : -1);
|
|
53
|
+
} }
|
|
54
|
+
/**
|
|
55
|
+
* PaginationComponent — reusable page-based navigation for server-side paged data.
|
|
56
|
+
*
|
|
57
|
+
* Displays "Showing X-Y of Z" summary with first/prev/next/last navigation.
|
|
58
|
+
* Designed for use with RunQuery's StartRow/MaxRows server-side paging.
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* ```html
|
|
62
|
+
* <mj-pagination
|
|
63
|
+
* [TotalRowCount]="result.TotalRowCount"
|
|
64
|
+
* [PageNumber]="currentPage"
|
|
65
|
+
* [PageSize]="pageSize"
|
|
66
|
+
* [IsLoading]="isLoading"
|
|
67
|
+
* (PageChange)="onPageChange($event)">
|
|
68
|
+
* </mj-pagination>
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
export class PaginationComponent {
|
|
72
|
+
/** Total number of rows across all pages */
|
|
73
|
+
TotalRowCount = 0;
|
|
74
|
+
/** Current page number (1-based) */
|
|
75
|
+
PageNumber = 1;
|
|
76
|
+
/** Number of rows per page */
|
|
77
|
+
PageSize = 100;
|
|
78
|
+
/** Whether data is currently loading */
|
|
79
|
+
IsLoading = false;
|
|
80
|
+
/** Emitted when the user navigates to a different page */
|
|
81
|
+
PageChange = new EventEmitter();
|
|
82
|
+
get TotalPages() {
|
|
83
|
+
if (this.TotalRowCount <= 0 || this.PageSize <= 0)
|
|
84
|
+
return 0;
|
|
85
|
+
return Math.ceil(this.TotalRowCount / this.PageSize);
|
|
86
|
+
}
|
|
87
|
+
get DisplayFrom() {
|
|
88
|
+
if (this.TotalRowCount <= 0)
|
|
89
|
+
return 0;
|
|
90
|
+
return (this.PageNumber - 1) * this.PageSize + 1;
|
|
91
|
+
}
|
|
92
|
+
get DisplayTo() {
|
|
93
|
+
return Math.min(this.PageNumber * this.PageSize, this.TotalRowCount);
|
|
94
|
+
}
|
|
95
|
+
get CanGoBack() {
|
|
96
|
+
return this.PageNumber > 1 && !this.IsLoading;
|
|
97
|
+
}
|
|
98
|
+
get CanGoForward() {
|
|
99
|
+
return this.PageNumber < this.TotalPages && !this.IsLoading;
|
|
100
|
+
}
|
|
101
|
+
GoToFirst() {
|
|
102
|
+
if (this.CanGoBack)
|
|
103
|
+
this.emitPageChange(1);
|
|
104
|
+
}
|
|
105
|
+
GoToPrevious() {
|
|
106
|
+
if (this.CanGoBack)
|
|
107
|
+
this.emitPageChange(this.PageNumber - 1);
|
|
108
|
+
}
|
|
109
|
+
GoToNext() {
|
|
110
|
+
if (this.CanGoForward)
|
|
111
|
+
this.emitPageChange(this.PageNumber + 1);
|
|
112
|
+
}
|
|
113
|
+
GoToLast() {
|
|
114
|
+
if (this.CanGoForward)
|
|
115
|
+
this.emitPageChange(this.TotalPages);
|
|
116
|
+
}
|
|
117
|
+
emitPageChange(page) {
|
|
118
|
+
this.PageChange.emit({
|
|
119
|
+
PageNumber: page,
|
|
120
|
+
PageSize: this.PageSize,
|
|
121
|
+
StartRow: (page - 1) * this.PageSize,
|
|
122
|
+
});
|
|
123
|
+
}
|
|
124
|
+
static ɵfac = function PaginationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationComponent)(); };
|
|
125
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationComponent, selectors: [["mj-pagination"]], inputs: { TotalRowCount: "TotalRowCount", PageNumber: "PageNumber", PageSize: "PageSize", IsLoading: "IsLoading" }, outputs: { PageChange: "PageChange" }, decls: 1, vars: 1, consts: [[1, "pagination"], [1, "pager-summary"], [1, "pager-controls"], ["title", "First page", 1, "pager-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-left"], ["title", "Previous page", 1, "pager-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-left"], [1, "pager-page-info"], ["title", "Next page", 1, "pager-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-right"], ["title", "Last page", 1, "pager-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-right"], [1, "fa-solid", "fa-spinner", "fa-spin", "pager-loading"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
|
|
126
|
+
i0.ɵɵconditionalCreate(0, PaginationComponent_Conditional_0_Template, 18, 16, "div", 0);
|
|
127
|
+
} if (rf & 2) {
|
|
128
|
+
i0.ɵɵconditional(ctx.TotalRowCount > 0 && ctx.TotalPages > 1 ? 0 : -1);
|
|
129
|
+
} }, dependencies: [CommonModule, i1.DecimalPipe], styles: [".pagination[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary, #666);\n border-top: 1px solid var(--mj-border-color, #e0e0e0);\n background: var(--mj-surface, #fafafa);\n}\n\n.pager-summary[_ngcontent-%COMP%] {\n white-space: nowrap;\n}\n\n.pager-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.pager-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--mj-border-color, #d0d0d0);\n border-radius: 4px;\n background: var(--mj-surface, #fff);\n color: var(--mj-text-primary, #333);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.pager-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-hover-bg, #e8e8e8);\n border-color: var(--mj-border-hover, #999);\n}\n\n.pager-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.35;\n cursor: default;\n}\n\n.pager-page-info[_ngcontent-%COMP%] {\n padding: 0 8px;\n white-space: nowrap;\n font-weight: 500;\n}\n\n.pager-loading[_ngcontent-%COMP%] {\n margin-left: 6px;\n color: var(--mj-accent, #0078d4);\n}"] });
|
|
130
|
+
}
|
|
131
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
|
|
132
|
+
type: Component,
|
|
133
|
+
args: [{ standalone: true, selector: 'mj-pagination', imports: [CommonModule], template: "@if (TotalRowCount > 0 && TotalPages > 1) {\n <div class=\"pagination\">\n <span class=\"pager-summary\">\n {{ DisplayFrom | number }}-{{ DisplayTo | number }} of {{ TotalRowCount | number }}\n </span>\n\n <div class=\"pager-controls\">\n <button class=\"pager-btn\" [disabled]=\"!CanGoBack\" (click)=\"GoToFirst()\" title=\"First page\">\n <i class=\"fa-solid fa-angles-left\"></i>\n </button>\n <button class=\"pager-btn\" [disabled]=\"!CanGoBack\" (click)=\"GoToPrevious()\" title=\"Previous page\">\n <i class=\"fa-solid fa-angle-left\"></i>\n </button>\n\n <span class=\"pager-page-info\">\n Page {{ PageNumber }} of {{ TotalPages }}\n </span>\n\n <button class=\"pager-btn\" [disabled]=\"!CanGoForward\" (click)=\"GoToNext()\" title=\"Next page\">\n <i class=\"fa-solid fa-angle-right\"></i>\n </button>\n <button class=\"pager-btn\" [disabled]=\"!CanGoForward\" (click)=\"GoToLast()\" title=\"Last page\">\n <i class=\"fa-solid fa-angles-right\"></i>\n </button>\n\n @if (IsLoading) {\n <i class=\"fa-solid fa-spinner fa-spin pager-loading\"></i>\n }\n </div>\n </div>\n}\n", styles: [".pagination {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n font-size: 13px;\n color: var(--mj-text-secondary, #666);\n border-top: 1px solid var(--mj-border-color, #e0e0e0);\n background: var(--mj-surface, #fafafa);\n}\n\n.pager-summary {\n white-space: nowrap;\n}\n\n.pager-controls {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.pager-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n border: 1px solid var(--mj-border-color, #d0d0d0);\n border-radius: 4px;\n background: var(--mj-surface, #fff);\n color: var(--mj-text-primary, #333);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n}\n\n.pager-btn:hover:not(:disabled) {\n background: var(--mj-hover-bg, #e8e8e8);\n border-color: var(--mj-border-hover, #999);\n}\n\n.pager-btn:disabled {\n opacity: 0.35;\n cursor: default;\n}\n\n.pager-page-info {\n padding: 0 8px;\n white-space: nowrap;\n font-weight: 500;\n}\n\n.pager-loading {\n margin-left: 6px;\n color: var(--mj-accent, #0078d4);\n}\n"] }]
|
|
134
|
+
}], null, { TotalRowCount: [{
|
|
135
|
+
type: Input
|
|
136
|
+
}], PageNumber: [{
|
|
137
|
+
type: Input
|
|
138
|
+
}], PageSize: [{
|
|
139
|
+
type: Input
|
|
140
|
+
}], IsLoading: [{
|
|
141
|
+
type: Input
|
|
142
|
+
}], PageChange: [{
|
|
143
|
+
type: Output
|
|
144
|
+
}] }); })();
|
|
145
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "src/lib/pagination.component.ts", lineNumber: 40 }); })();
|
|
146
|
+
//# sourceMappingURL=pagination.component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.component.js","sourceRoot":"","sources":["../../src/lib/pagination.component.ts","../../src/lib/pagination.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;;;;ICyBvC,2BAAyD;;;;IAxB7D,AADF,iCAAwB,cACM;IAC1B,YACF;;;;IAAA,oBAAO;IAGL,AADF,iCAA4B,gBACiE;IAAzC,0LAAS,kBAAW,KAAC;IACrE,0BAAuC;IACzC,oBAAS;IACT,oCAAiG;IAA/C,0LAAS,qBAAc,KAAC;IACxE,2BAAsC;IACxC,oBAAS;IAET,mCAA8B;IAC5B,aACF;IAAA,oBAAO;IAEP,qCAA4F;IAAvC,2LAAS,iBAAU,KAAC;IACvE,2BAAuC;IACzC,oBAAS;IACT,sCAA4F;IAAvC,2LAAS,iBAAU,KAAC;IACvE,4BAAwC;IAC1C,oBAAS;IAET,oGAAiB;IAIrB,AADE,oBAAM,EACF;;;IA1BF,eACF;IADE,6KACF;IAG4B,eAAuB;IAAvB,+CAAuB;IAGvB,eAAuB;IAAvB,+CAAuB;IAK/C,eACF;IADE,kFACF;IAE0B,cAA0B;IAA1B,kDAA0B;IAG1B,eAA0B;IAA1B,kDAA0B;IAIpD,eAEC;IAFD,4CAEC;;ADZP;;;;;;;;;;;;;;;;GAgBG;AAQH,MAAM,OAAO,mBAAmB;IAC5B,4CAA4C;IACnC,aAAa,GAAW,CAAC,CAAC;IAEnC,oCAAoC;IAC3B,UAAU,GAAW,CAAC,CAAC;IAEhC,8BAA8B;IACrB,QAAQ,GAAW,GAAG,CAAC;IAEhC,wCAAwC;IAC/B,SAAS,GAAY,KAAK,CAAC;IAEpC,0DAA0D;IAChD,UAAU,GAAG,IAAI,YAAY,EAAmB,CAAC;IAE3D,IAAI,UAAU;QACV,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QAC5D,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,WAAW;QACX,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACzE,CAAC;IAED,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClD,CAAC;IAED,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAChE,CAAC;IAED,SAAS;QACL,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IAED,YAAY;QACR,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACjE,CAAC;IAED,QAAQ;QACJ,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;IACpE,CAAC;IAED,QAAQ;QACJ,IAAI,IAAI,CAAC,YAAY;YAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChE,CAAC;IAEO,cAAc,CAAC,IAAY;QAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YACjB,UAAU,EAAE,IAAI;YAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ;SACvC,CAAC,CAAC;IACP,CAAC;6GA5DQ,mBAAmB;6DAAnB,mBAAmB;YCvChC,uFAA2C;;YAA3C,sEA8BC;4BDKa,YAAY;;iFAIb,mBAAmB;cAP/B,SAAS;6BACM,IAAI,YACN,eAAe,WAChB,CAAC,YAAY,CAAC;;kBAMtB,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,KAAK;;kBAGL,MAAM;;kFAdE,mBAAmB","sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Event emitted when the user navigates to a different page.\n */\nexport interface PageChangeEvent {\n /** 1-based page number */\n PageNumber: number;\n /** Number of rows per page */\n PageSize: number;\n /** 0-based start row for the new page (convenience: (PageNumber - 1) * PageSize) */\n StartRow: number;\n}\n\n/**\n * PaginationComponent — reusable page-based navigation for server-side paged data.\n *\n * Displays \"Showing X-Y of Z\" summary with first/prev/next/last navigation.\n * Designed for use with RunQuery's StartRow/MaxRows server-side paging.\n *\n * @example\n * ```html\n * <mj-pagination\n * [TotalRowCount]=\"result.TotalRowCount\"\n * [PageNumber]=\"currentPage\"\n * [PageSize]=\"pageSize\"\n * [IsLoading]=\"isLoading\"\n * (PageChange)=\"onPageChange($event)\">\n * </mj-pagination>\n * ```\n */\n@Component({\n standalone: true,\n selector: 'mj-pagination',\n imports: [CommonModule],\n templateUrl: './pagination.component.html',\n styleUrls: ['./pagination.component.css']\n})\nexport class PaginationComponent {\n /** Total number of rows across all pages */\n @Input() TotalRowCount: number = 0;\n\n /** Current page number (1-based) */\n @Input() PageNumber: number = 1;\n\n /** Number of rows per page */\n @Input() PageSize: number = 100;\n\n /** Whether data is currently loading */\n @Input() IsLoading: boolean = false;\n\n /** Emitted when the user navigates to a different page */\n @Output() PageChange = new EventEmitter<PageChangeEvent>();\n\n get TotalPages(): number {\n if (this.TotalRowCount <= 0 || this.PageSize <= 0) return 0;\n return Math.ceil(this.TotalRowCount / this.PageSize);\n }\n\n get DisplayFrom(): number {\n if (this.TotalRowCount <= 0) return 0;\n return (this.PageNumber - 1) * this.PageSize + 1;\n }\n\n get DisplayTo(): number {\n return Math.min(this.PageNumber * this.PageSize, this.TotalRowCount);\n }\n\n get CanGoBack(): boolean {\n return this.PageNumber > 1 && !this.IsLoading;\n }\n\n get CanGoForward(): boolean {\n return this.PageNumber < this.TotalPages && !this.IsLoading;\n }\n\n GoToFirst(): void {\n if (this.CanGoBack) this.emitPageChange(1);\n }\n\n GoToPrevious(): void {\n if (this.CanGoBack) this.emitPageChange(this.PageNumber - 1);\n }\n\n GoToNext(): void {\n if (this.CanGoForward) this.emitPageChange(this.PageNumber + 1);\n }\n\n GoToLast(): void {\n if (this.CanGoForward) this.emitPageChange(this.TotalPages);\n }\n\n private emitPageChange(page: number): void {\n this.PageChange.emit({\n PageNumber: page,\n PageSize: this.PageSize,\n StartRow: (page - 1) * this.PageSize,\n });\n }\n}\n","@if (TotalRowCount > 0 && TotalPages > 1) {\n <div class=\"pagination\">\n <span class=\"pager-summary\">\n {{ DisplayFrom | number }}-{{ DisplayTo | number }} of {{ TotalRowCount | number }}\n </span>\n\n <div class=\"pager-controls\">\n <button class=\"pager-btn\" [disabled]=\"!CanGoBack\" (click)=\"GoToFirst()\" title=\"First page\">\n <i class=\"fa-solid fa-angles-left\"></i>\n </button>\n <button class=\"pager-btn\" [disabled]=\"!CanGoBack\" (click)=\"GoToPrevious()\" title=\"Previous page\">\n <i class=\"fa-solid fa-angle-left\"></i>\n </button>\n\n <span class=\"pager-page-info\">\n Page {{ PageNumber }} of {{ TotalPages }}\n </span>\n\n <button class=\"pager-btn\" [disabled]=\"!CanGoForward\" (click)=\"GoToNext()\" title=\"Next page\">\n <i class=\"fa-solid fa-angle-right\"></i>\n </button>\n <button class=\"pager-btn\" [disabled]=\"!CanGoForward\" (click)=\"GoToLast()\" title=\"Last page\">\n <i class=\"fa-solid fa-angles-right\"></i>\n </button>\n\n @if (IsLoading) {\n <i class=\"fa-solid fa-spinner fa-spin pager-loading\"></i>\n }\n </div>\n </div>\n}\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as i0 from "@angular/core";
|
|
2
|
+
import * as i1 from "./pagination.component";
|
|
3
|
+
/**
|
|
4
|
+
* PaginationModule — convenience NgModule wrapper for the standalone PaginationComponent.
|
|
5
|
+
*
|
|
6
|
+
* Import this module if your consuming module uses NgModule-declared components.
|
|
7
|
+
* Alternatively, import `PaginationComponent` directly into standalone components.
|
|
8
|
+
*/
|
|
9
|
+
export declare class PaginationModule {
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PaginationModule, never>;
|
|
11
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<PaginationModule, never, [typeof i1.PaginationComponent], [typeof i1.PaginationComponent]>;
|
|
12
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<PaginationModule>;
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=pagination.module.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.module.d.ts","sourceRoot":"","sources":["../../src/lib/pagination.module.ts"],"names":[],"mappings":";;AAGA;;;;;GAKG;AACH,qBAIa,gBAAgB;yCAAhB,gBAAgB;0CAAhB,gBAAgB;0CAAhB,gBAAgB;CAAI"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { NgModule } from '@angular/core';
|
|
2
|
+
import { PaginationComponent } from './pagination.component';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
/**
|
|
5
|
+
* PaginationModule — convenience NgModule wrapper for the standalone PaginationComponent.
|
|
6
|
+
*
|
|
7
|
+
* Import this module if your consuming module uses NgModule-declared components.
|
|
8
|
+
* Alternatively, import `PaginationComponent` directly into standalone components.
|
|
9
|
+
*/
|
|
10
|
+
export class PaginationModule {
|
|
11
|
+
static ɵfac = function PaginationModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationModule)(); };
|
|
12
|
+
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: PaginationModule });
|
|
13
|
+
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [PaginationComponent] });
|
|
14
|
+
}
|
|
15
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationModule, [{
|
|
16
|
+
type: NgModule,
|
|
17
|
+
args: [{
|
|
18
|
+
imports: [PaginationComponent],
|
|
19
|
+
exports: [PaginationComponent]
|
|
20
|
+
}]
|
|
21
|
+
}], null, null); })();
|
|
22
|
+
(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(PaginationModule, { imports: [PaginationComponent], exports: [PaginationComponent] }); })();
|
|
23
|
+
//# sourceMappingURL=pagination.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.module.js","sourceRoot":"","sources":["../../src/lib/pagination.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;;AAE7D;;;;;GAKG;AAKH,MAAM,OAAO,gBAAgB;0GAAhB,gBAAgB;4DAAhB,gBAAgB;gEAHf,mBAAmB;;iFAGpB,gBAAgB;cAJ5B,QAAQ;eAAC;gBACN,OAAO,EAAE,CAAC,mBAAmB,CAAC;gBAC9B,OAAO,EAAE,CAAC,mBAAmB,CAAC;aACjC;;wFACY,gBAAgB,cAHf,mBAAmB,aACnB,mBAAmB","sourcesContent":["import { NgModule } from '@angular/core';\nimport { PaginationComponent } from './pagination.component';\n\n/**\n * PaginationModule — convenience NgModule wrapper for the standalone PaginationComponent.\n *\n * Import this module if your consuming module uses NgModule-declared components.\n * Alternatively, import `PaginationComponent` directly into standalone components.\n */\n@NgModule({\n imports: [PaginationComponent],\n exports: [PaginationComponent]\n})\nexport class PaginationModule { }\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public-api.d.ts","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAKA,cAAc,yBAAyB,CAAC;AAGxC,cAAc,4BAA4B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,SAAS;AACT,cAAc,yBAAyB,CAAC;AAExC,oBAAoB;AACpB,cAAc,4BAA4B,CAAC","sourcesContent":["/*\n * Public API Surface for @memberjunction/ng-pagination\n */\n\n// Module\nexport * from './lib/pagination.module';\n\n// Component & types\nexport * from './lib/pagination.component';\n"]}
|
package/package.json
CHANGED
|
@@ -1,10 +1,40 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-pagination",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "5.12.0",
|
|
4
|
+
"description": "MemberJunction: Reusable pagination component for server-side paged data with first/prev/next/last navigation",
|
|
5
|
+
"main": "./dist/public-api.js",
|
|
6
|
+
"typings": "./dist/public-api.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"/dist"
|
|
9
|
+
],
|
|
10
|
+
"scripts": {
|
|
11
|
+
"test": "echo \"No tests configured yet\"",
|
|
12
|
+
"build": "ngc",
|
|
13
|
+
"test:watch": "vitest"
|
|
14
|
+
},
|
|
5
15
|
"keywords": [
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
|
|
16
|
+
"memberjunction",
|
|
17
|
+
"angular",
|
|
18
|
+
"pagination",
|
|
19
|
+
"server-side-paging"
|
|
20
|
+
],
|
|
21
|
+
"author": "",
|
|
22
|
+
"license": "ISC",
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"@angular/compiler": "21.1.3",
|
|
25
|
+
"@angular/compiler-cli": "21.1.3",
|
|
26
|
+
"vitest": "^4.0.18"
|
|
27
|
+
},
|
|
28
|
+
"peerDependencies": {
|
|
29
|
+
"@angular/common": "21.1.3",
|
|
30
|
+
"@angular/core": "21.1.3"
|
|
31
|
+
},
|
|
32
|
+
"dependencies": {
|
|
33
|
+
"tslib": "^2.8.1"
|
|
34
|
+
},
|
|
35
|
+
"sideEffects": false,
|
|
36
|
+
"repository": {
|
|
37
|
+
"type": "git",
|
|
38
|
+
"url": "https://github.com/MemberJunction/MJ"
|
|
39
|
+
}
|
|
10
40
|
}
|
package/README.md
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
# @memberjunction/ng-pagination
|
|
2
|
-
|
|
3
|
-
## ⚠️ IMPORTANT NOTICE ⚠️
|
|
4
|
-
|
|
5
|
-
**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
|
|
6
|
-
|
|
7
|
-
This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
|
|
8
|
-
|
|
9
|
-
## Purpose
|
|
10
|
-
|
|
11
|
-
This package exists to:
|
|
12
|
-
1. Configure OIDC trusted publishing for the package name `@memberjunction/ng-pagination`
|
|
13
|
-
2. Enable secure, token-less publishing from CI/CD workflows
|
|
14
|
-
3. Establish provenance for packages published under this name
|
|
15
|
-
|
|
16
|
-
## What is OIDC Trusted Publishing?
|
|
17
|
-
|
|
18
|
-
OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
|
|
19
|
-
|
|
20
|
-
## Setup Instructions
|
|
21
|
-
|
|
22
|
-
To properly configure OIDC trusted publishing for this package:
|
|
23
|
-
|
|
24
|
-
1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
|
|
25
|
-
2. Configure the trusted publisher (e.g., GitHub Actions)
|
|
26
|
-
3. Specify the repository and workflow that should be allowed to publish
|
|
27
|
-
4. Use the configured workflow to publish your actual package
|
|
28
|
-
|
|
29
|
-
## DO NOT USE THIS PACKAGE
|
|
30
|
-
|
|
31
|
-
This package is a placeholder for OIDC configuration only. It:
|
|
32
|
-
- Contains no executable code
|
|
33
|
-
- Provides no functionality
|
|
34
|
-
- Should not be installed as a dependency
|
|
35
|
-
- Exists only for administrative purposes
|
|
36
|
-
|
|
37
|
-
## More Information
|
|
38
|
-
|
|
39
|
-
For more details about npm's trusted publishing feature, see:
|
|
40
|
-
- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
|
|
41
|
-
- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
|
|
42
|
-
|
|
43
|
-
---
|
|
44
|
-
|
|
45
|
-
**Maintained for OIDC setup purposes only**
|