@reforgium/data-grid 1.1.0 → 2.0.1
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/README.md +466 -109
- package/fesm2022/reforgium-data-grid-column-manager.mjs +601 -0
- package/fesm2022/reforgium-data-grid-paginator.mjs +283 -0
- package/fesm2022/reforgium-data-grid-ui.mjs +124 -0
- package/fesm2022/reforgium-data-grid.mjs +859 -169
- package/package.json +23 -3
- package/types/reforgium-data-grid-column-manager.d.ts +53 -0
- package/types/reforgium-data-grid-paginator.d.ts +66 -0
- package/types/reforgium-data-grid-ui.d.ts +28 -0
- package/types/reforgium-data-grid.d.ts +665 -268
- package/fesm2022/reforgium-data-grid.mjs.map +0 -1
- package/types/reforgium-data-grid.d.ts.map +0 -1
|
@@ -0,0 +1,283 @@
|
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, TemplateRef, Directive, input, numberAttribute, booleanAttribute, output, contentChildren, computed, Component } from '@angular/core';
|
|
4
|
+
import { DataGridDropdown } from '@reforgium/data-grid/ui';
|
|
5
|
+
|
|
6
|
+
class DataGridPaginatorFirstDirective {
|
|
7
|
+
tpl = inject((TemplateRef));
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorFirstDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridPaginatorFirstDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorFirst]", ngImport: i0 });
|
|
10
|
+
}
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorFirstDirective, decorators: [{
|
|
12
|
+
type: Directive,
|
|
13
|
+
args: [{
|
|
14
|
+
selector: 'ng-template[reDataGridPaginatorFirst]',
|
|
15
|
+
}]
|
|
16
|
+
}] });
|
|
17
|
+
class DataGridPaginatorLastDirective {
|
|
18
|
+
tpl = inject((TemplateRef));
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorLastDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridPaginatorLastDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorLast]", ngImport: i0 });
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorLastDirective, decorators: [{
|
|
23
|
+
type: Directive,
|
|
24
|
+
args: [{
|
|
25
|
+
selector: 'ng-template[reDataGridPaginatorLast]',
|
|
26
|
+
}]
|
|
27
|
+
}] });
|
|
28
|
+
class DataGridPaginatorPageDirective {
|
|
29
|
+
tpl = inject((TemplateRef));
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
31
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataGridPaginatorPageDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorPage]", ngImport: i0 });
|
|
32
|
+
}
|
|
33
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginatorPageDirective, decorators: [{
|
|
34
|
+
type: Directive,
|
|
35
|
+
args: [{
|
|
36
|
+
selector: 'ng-template[reDataGridPaginatorPage]',
|
|
37
|
+
}]
|
|
38
|
+
}] });
|
|
39
|
+
|
|
40
|
+
// noinspection CssUnresolvedCustomProperty
|
|
41
|
+
class DataGridPaginator {
|
|
42
|
+
current = input(0, { ...(ngDevMode ? { debugName: "current" } : {}), transform: numberAttribute });
|
|
43
|
+
totalElements = input(0, { ...(ngDevMode ? { debugName: "totalElements" } : {}), transform: numberAttribute });
|
|
44
|
+
pageSize = input(0, { ...(ngDevMode ? { debugName: "pageSize" } : {}), transform: numberAttribute });
|
|
45
|
+
maxShowPages = input(7, { ...(ngDevMode ? { debugName: "maxShowPages" } : {}), transform: numberAttribute });
|
|
46
|
+
showFirstLast = input(false, { ...(ngDevMode ? { debugName: "showFirstLast" } : {}), transform: booleanAttribute });
|
|
47
|
+
firstLabel = input('First', ...(ngDevMode ? [{ debugName: "firstLabel" }] : []));
|
|
48
|
+
lastLabel = input('Last', ...(ngDevMode ? [{ debugName: "lastLabel" }] : []));
|
|
49
|
+
showPerPage = input(false, { ...(ngDevMode ? { debugName: "showPerPage" } : {}), transform: booleanAttribute });
|
|
50
|
+
perPageLabel = input('Items per page:', ...(ngDevMode ? [{ debugName: "perPageLabel" }] : []));
|
|
51
|
+
pageSizeOptions = input([10, 20, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
|
|
52
|
+
pageChange = output();
|
|
53
|
+
pageSizeChange = output();
|
|
54
|
+
firstSlotRefs = contentChildren(DataGridPaginatorFirstDirective, ...(ngDevMode ? [{ debugName: "firstSlotRefs" }] : []));
|
|
55
|
+
lastSlotRefs = contentChildren(DataGridPaginatorLastDirective, ...(ngDevMode ? [{ debugName: "lastSlotRefs" }] : []));
|
|
56
|
+
pageSlotRefs = contentChildren(DataGridPaginatorPageDirective, ...(ngDevMode ? [{ debugName: "pageSlotRefs" }] : []));
|
|
57
|
+
firstTpl = computed(() => this.firstSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "firstTpl" }] : []));
|
|
58
|
+
lastTpl = computed(() => this.lastSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "lastTpl" }] : []));
|
|
59
|
+
pageTpl = computed(() => this.pageSlotRefs()?.at(0), ...(ngDevMode ? [{ debugName: "pageTpl" }] : []));
|
|
60
|
+
normalizedPageSizeOptions = computed(() => {
|
|
61
|
+
const uniq = new Set(this.pageSizeOptions()
|
|
62
|
+
.map((value) => Number(value))
|
|
63
|
+
.filter((value) => Number.isFinite(value) && value > 0));
|
|
64
|
+
if (!uniq.has(this.pageSize())) {
|
|
65
|
+
uniq.add(this.pageSize());
|
|
66
|
+
}
|
|
67
|
+
return [...uniq].sort((a, b) => a - b).map((value) => ({ label: `${value}`, value }));
|
|
68
|
+
}, ...(ngDevMode ? [{ debugName: "normalizedPageSizeOptions" }] : []));
|
|
69
|
+
totalPages = computed(() => {
|
|
70
|
+
const size = this.pageSize();
|
|
71
|
+
return size > 0 ? Math.ceil(this.totalElements() / size) : 0;
|
|
72
|
+
}, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
|
|
73
|
+
pages = computed(() => {
|
|
74
|
+
const current = this.current();
|
|
75
|
+
const total = this.totalPages();
|
|
76
|
+
const max = this.maxShowPages();
|
|
77
|
+
if (total <= max) {
|
|
78
|
+
return Array.from({ length: total }, (_, i) => i);
|
|
79
|
+
}
|
|
80
|
+
const pages = [];
|
|
81
|
+
const sidePages = Math.floor((max - 3) / 2);
|
|
82
|
+
pages.push(0);
|
|
83
|
+
let start = Math.max(1, current - sidePages);
|
|
84
|
+
let end = Math.min(total - 2, current + sidePages);
|
|
85
|
+
if (current <= sidePages + 1) {
|
|
86
|
+
end = max - 3;
|
|
87
|
+
}
|
|
88
|
+
else if (current >= total - sidePages - 2) {
|
|
89
|
+
start = total - max + 2;
|
|
90
|
+
}
|
|
91
|
+
if (start > 1) {
|
|
92
|
+
pages.push(-1);
|
|
93
|
+
}
|
|
94
|
+
for (let i = start; i <= end; i++) {
|
|
95
|
+
pages.push(i);
|
|
96
|
+
}
|
|
97
|
+
if (end < total - 2) {
|
|
98
|
+
pages.push(-1);
|
|
99
|
+
}
|
|
100
|
+
pages.push(total - 1);
|
|
101
|
+
return pages;
|
|
102
|
+
}, ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
103
|
+
goToPage(page) {
|
|
104
|
+
if (!Number.isInteger(page)) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
const total = this.totalPages();
|
|
108
|
+
if (page < 0 || page >= total || page === this.current()) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
this.pageChange.emit(page);
|
|
112
|
+
}
|
|
113
|
+
onPageSizeChange(value) {
|
|
114
|
+
const typedValue = Number(value);
|
|
115
|
+
if (!Number.isFinite(typedValue) || typedValue <= 0 || value === this.pageSize()) {
|
|
116
|
+
return;
|
|
117
|
+
}
|
|
118
|
+
this.pageSizeChange.emit(typedValue);
|
|
119
|
+
}
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridPaginator, isStandalone: true, selector: "re-data-grid-paginator", inputs: { current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, maxShowPages: { classPropertyName: "maxShowPages", publicName: "maxShowPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, firstLabel: { classPropertyName: "firstLabel", publicName: "firstLabel", isSignal: true, isRequired: false, transformFunction: null }, lastLabel: { classPropertyName: "lastLabel", publicName: "lastLabel", isSignal: true, isRequired: false, transformFunction: null }, showPerPage: { classPropertyName: "showPerPage", publicName: "showPerPage", isSignal: true, isRequired: false, transformFunction: null }, perPageLabel: { classPropertyName: "perPageLabel", publicName: "perPageLabel", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, queries: [{ propertyName: "firstSlotRefs", predicate: DataGridPaginatorFirstDirective, isSignal: true }, { propertyName: "lastSlotRefs", predicate: DataGridPaginatorLastDirective, isSignal: true }, { propertyName: "pageSlotRefs", predicate: DataGridPaginatorPageDirective, isSignal: true }], ngImport: i0, template: `
|
|
122
|
+
@let total = totalPages();
|
|
123
|
+
@let perPageOptions = normalizedPageSizeOptions();
|
|
124
|
+
|
|
125
|
+
@if (showPerPage() && perPageOptions.length) {
|
|
126
|
+
<div class="re-paginator-per-page">
|
|
127
|
+
<span class="re-paginator-per-page-label">{{ perPageLabel() }}</span>
|
|
128
|
+
|
|
129
|
+
<re-data-grid-dropdown
|
|
130
|
+
[options]="perPageOptions"
|
|
131
|
+
[value]="pageSize()"
|
|
132
|
+
[placeholder]="''"
|
|
133
|
+
(selectValue)="onPageSizeChange($event)"
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@if (showFirstLast() && total > 1) {
|
|
139
|
+
@let firstDisabled = current() <= 0;
|
|
140
|
+
|
|
141
|
+
<button class="re-paginator-edge re-paginator-edge--first" [disabled]="firstDisabled" (click)="goToPage(0)">
|
|
142
|
+
@if (firstTpl()) {
|
|
143
|
+
<ng-container
|
|
144
|
+
[ngTemplateOutlet]="firstTpl()!.tpl"
|
|
145
|
+
[ngTemplateOutletContext]="{ $implicit: 0, current: current(), total, disabled: firstDisabled }"
|
|
146
|
+
/>
|
|
147
|
+
} @else {
|
|
148
|
+
{{ firstLabel() }}
|
|
149
|
+
}
|
|
150
|
+
</button>
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@for (page of pages(); track $index) {
|
|
154
|
+
@if (page === -1) {
|
|
155
|
+
<span class="re-paginator-gap">...</span>
|
|
156
|
+
} @else {
|
|
157
|
+
<button
|
|
158
|
+
class="re-paginator-page"
|
|
159
|
+
[class.re-paginator-page--active]="page === current()"
|
|
160
|
+
(click)="goToPage(page)"
|
|
161
|
+
>
|
|
162
|
+
@if (pageTpl()) {
|
|
163
|
+
<ng-container
|
|
164
|
+
[ngTemplateOutlet]="pageTpl()!.tpl"
|
|
165
|
+
[ngTemplateOutletContext]="{
|
|
166
|
+
$implicit: page,
|
|
167
|
+
page,
|
|
168
|
+
label: page + 1,
|
|
169
|
+
current: current(),
|
|
170
|
+
total,
|
|
171
|
+
active: page === current(),
|
|
172
|
+
}"
|
|
173
|
+
/>
|
|
174
|
+
} @else {
|
|
175
|
+
{{ page + 1 }}
|
|
176
|
+
}
|
|
177
|
+
</button>
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
@if (showFirstLast() && total > 1) {
|
|
182
|
+
@let lastPage = total - 1;
|
|
183
|
+
@let lastDisabled = current() >= lastPage;
|
|
184
|
+
|
|
185
|
+
<button class="re-paginator-edge re-paginator-edge--last" [disabled]="lastDisabled" (click)="goToPage(lastPage)">
|
|
186
|
+
@if (lastTpl()) {
|
|
187
|
+
<ng-container
|
|
188
|
+
[ngTemplateOutlet]="lastTpl()!.tpl"
|
|
189
|
+
[ngTemplateOutletContext]="{ $implicit: lastPage, current: current(), total, disabled: lastDisabled }"
|
|
190
|
+
/>
|
|
191
|
+
} @else {
|
|
192
|
+
{{ lastLabel() }}
|
|
193
|
+
}
|
|
194
|
+
</button>
|
|
195
|
+
}
|
|
196
|
+
`, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);cursor:pointer;white-space:nowrap;transition:all .2s}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DataGridDropdown, selector: "re-data-grid-dropdown", inputs: ["options", "value", "disabled", "placeholder"], outputs: ["selectValue"] }] });
|
|
197
|
+
}
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridPaginator, decorators: [{
|
|
199
|
+
type: Component,
|
|
200
|
+
args: [{ selector: 're-data-grid-paginator', imports: [NgTemplateOutlet, DataGridDropdown], template: `
|
|
201
|
+
@let total = totalPages();
|
|
202
|
+
@let perPageOptions = normalizedPageSizeOptions();
|
|
203
|
+
|
|
204
|
+
@if (showPerPage() && perPageOptions.length) {
|
|
205
|
+
<div class="re-paginator-per-page">
|
|
206
|
+
<span class="re-paginator-per-page-label">{{ perPageLabel() }}</span>
|
|
207
|
+
|
|
208
|
+
<re-data-grid-dropdown
|
|
209
|
+
[options]="perPageOptions"
|
|
210
|
+
[value]="pageSize()"
|
|
211
|
+
[placeholder]="''"
|
|
212
|
+
(selectValue)="onPageSizeChange($event)"
|
|
213
|
+
/>
|
|
214
|
+
</div>
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@if (showFirstLast() && total > 1) {
|
|
218
|
+
@let firstDisabled = current() <= 0;
|
|
219
|
+
|
|
220
|
+
<button class="re-paginator-edge re-paginator-edge--first" [disabled]="firstDisabled" (click)="goToPage(0)">
|
|
221
|
+
@if (firstTpl()) {
|
|
222
|
+
<ng-container
|
|
223
|
+
[ngTemplateOutlet]="firstTpl()!.tpl"
|
|
224
|
+
[ngTemplateOutletContext]="{ $implicit: 0, current: current(), total, disabled: firstDisabled }"
|
|
225
|
+
/>
|
|
226
|
+
} @else {
|
|
227
|
+
{{ firstLabel() }}
|
|
228
|
+
}
|
|
229
|
+
</button>
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
@for (page of pages(); track $index) {
|
|
233
|
+
@if (page === -1) {
|
|
234
|
+
<span class="re-paginator-gap">...</span>
|
|
235
|
+
} @else {
|
|
236
|
+
<button
|
|
237
|
+
class="re-paginator-page"
|
|
238
|
+
[class.re-paginator-page--active]="page === current()"
|
|
239
|
+
(click)="goToPage(page)"
|
|
240
|
+
>
|
|
241
|
+
@if (pageTpl()) {
|
|
242
|
+
<ng-container
|
|
243
|
+
[ngTemplateOutlet]="pageTpl()!.tpl"
|
|
244
|
+
[ngTemplateOutletContext]="{
|
|
245
|
+
$implicit: page,
|
|
246
|
+
page,
|
|
247
|
+
label: page + 1,
|
|
248
|
+
current: current(),
|
|
249
|
+
total,
|
|
250
|
+
active: page === current(),
|
|
251
|
+
}"
|
|
252
|
+
/>
|
|
253
|
+
} @else {
|
|
254
|
+
{{ page + 1 }}
|
|
255
|
+
}
|
|
256
|
+
</button>
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
@if (showFirstLast() && total > 1) {
|
|
261
|
+
@let lastPage = total - 1;
|
|
262
|
+
@let lastDisabled = current() >= lastPage;
|
|
263
|
+
|
|
264
|
+
<button class="re-paginator-edge re-paginator-edge--last" [disabled]="lastDisabled" (click)="goToPage(lastPage)">
|
|
265
|
+
@if (lastTpl()) {
|
|
266
|
+
<ng-container
|
|
267
|
+
[ngTemplateOutlet]="lastTpl()!.tpl"
|
|
268
|
+
[ngTemplateOutletContext]="{ $implicit: lastPage, current: current(), total, disabled: lastDisabled }"
|
|
269
|
+
/>
|
|
270
|
+
} @else {
|
|
271
|
+
{{ lastLabel() }}
|
|
272
|
+
}
|
|
273
|
+
</button>
|
|
274
|
+
}
|
|
275
|
+
`, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-border: 1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-paginator-page-separator-color: var(--re-data-grid-separator-color, --border-color);--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, --radius-md);--re-data-grid-paginator-page-surface: var(--re-data-grid-surface, white);--re-data-grid-paginator-page-color: var(--text-primary, #1e293b);--re-data-grid-paginator-page-font-size: .875rem;--re-data-grid-paginator-page-active-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-active-color: white;--re-data-grid-paginator-page-hover-surface: var(--re-data-grid-active, #3b82f6);--re-data-grid-paginator-page-hover-color: white;--re-data-grid-paginator-edge-min-width: 2.5rem;--re-data-grid-paginator-edge-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-edge-paddings: 0 .625rem;--re-data-grid-paginator-edge-border: var(--re-data-grid-paginator-page-border);--re-data-grid-paginator-edge-rounded: var(--re-data-grid-paginator-page-rounded);--re-data-grid-paginator-edge-surface: var(--re-data-grid-paginator-page-surface);--re-data-grid-paginator-edge-color: var(--re-data-grid-paginator-page-color);--re-data-grid-paginator-edge-font-size: var(--re-data-grid-paginator-page-font-size);--re-data-grid-paginator-edge-hover-surface: var(--re-data-grid-paginator-page-hover-surface);--re-data-grid-paginator-edge-hover-color: var(--re-data-grid-paginator-page-hover-color);--re-data-grid-paginator-edge-disabled-opacity: .5;--re-data-grid-paginator-per-page-gap: .5rem;--re-data-grid-paginator-per-page-label-size: .8125rem;--re-data-grid-paginator-per-page-label-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:center;gap:var(--re-data-grid-paginator-gap);flex-wrap:wrap}:host re-data-grid-dropdown{--re-data-grid-dropdown-width: 4rem}.re-paginator-per-page{display:inline-flex;align-items:center;gap:var(--re-data-grid-paginator-per-page-gap);margin-right:auto}.re-paginator-per-page-label{font-size:var(--re-data-grid-paginator-per-page-label-size);color:var(--re-data-grid-paginator-per-page-label-color)}.re-paginator-page{display:flex;justify-content:center;align-items:center;width:var(--re-data-grid-paginator-page-size);height:var(--re-data-grid-paginator-page-size);border-radius:var(--re-data-grid-paginator-page-rounded);border:var(--re-data-grid-paginator-page-border);font-size:var(--re-data-grid-paginator-page-font-size);background:var(--re-data-grid-paginator-page-surface);color:var(--re-data-grid-paginator-page-color);cursor:pointer;transition:all .2s}.re-paginator-edge{display:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-edge-min-width);height:var(--re-data-grid-paginator-edge-height);padding:var(--re-data-grid-paginator-edge-paddings);border-radius:var(--re-data-grid-paginator-edge-rounded);border:var(--re-data-grid-paginator-edge-border);font-size:var(--re-data-grid-paginator-edge-font-size);background:var(--re-data-grid-paginator-edge-surface);color:var(--re-data-grid-paginator-edge-color);cursor:pointer;white-space:nowrap;transition:all .2s}.re-paginator-edge:hover:not(:disabled){background:var(--re-data-grid-paginator-edge-hover-surface);color:var(--re-data-grid-paginator-edge-hover-color)}.re-paginator-edge:disabled{opacity:var(--re-data-grid-paginator-edge-disabled-opacity);cursor:default}.re-paginator-page:hover:not(.re-paginator-page--active){background:var(--re-data-grid-paginator-page-hover-surface);color:var(--re-data-grid-paginator-page-hover-color)}.re-paginator-page--active{border-color:var(--re-data-grid-paginator-active-surface);background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-page-color)}\n"] }]
|
|
276
|
+
}], propDecorators: { current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], maxShowPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxShowPages", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], firstLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLabel", required: false }] }], lastLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLabel", required: false }] }], showPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPerPage", required: false }] }], perPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "perPageLabel", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], firstSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorFirstDirective), { isSignal: true }] }], lastSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorLastDirective), { isSignal: true }] }], pageSlotRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataGridPaginatorPageDirective), { isSignal: true }] }] } });
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* Generated bundle index. Do not edit.
|
|
280
|
+
*/
|
|
281
|
+
|
|
282
|
+
export { DataGridPaginator, DataGridPaginatorFirstDirective, DataGridPaginatorLastDirective, DataGridPaginatorPageDirective };
|
|
283
|
+
//# sourceMappingURL=reforgium-data-grid-paginator.mjs.map
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import { NgClass } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { input, output, viewChild, signal, computed, Component } from '@angular/core';
|
|
4
|
+
|
|
5
|
+
// noinspection CssUnresolvedCustomProperty
|
|
6
|
+
class DataGridDropdown {
|
|
7
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
8
|
+
value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
9
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
10
|
+
placeholder = input('Select', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
11
|
+
selectValue = output();
|
|
12
|
+
root = viewChild('root', ...(ngDevMode ? [{ debugName: "root" }] : []));
|
|
13
|
+
opened = signal(false, ...(ngDevMode ? [{ debugName: "opened" }] : []));
|
|
14
|
+
selectedLabel = computed(() => {
|
|
15
|
+
const selected = this.options().find((option) => option.value === this.value());
|
|
16
|
+
return selected?.label ?? this.placeholder();
|
|
17
|
+
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
18
|
+
toggleOpen() {
|
|
19
|
+
if (this.disabled()) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
this.opened.update((current) => !current);
|
|
23
|
+
}
|
|
24
|
+
select(value) {
|
|
25
|
+
if (value !== this.value()) {
|
|
26
|
+
this.selectValue.emit(value);
|
|
27
|
+
}
|
|
28
|
+
this.opened.set(false);
|
|
29
|
+
}
|
|
30
|
+
onDocumentMouseDown(target) {
|
|
31
|
+
if (!this.opened()) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
const root = this.root()?.nativeElement;
|
|
35
|
+
if (root && target instanceof Node && !root.contains(target)) {
|
|
36
|
+
this.opened.set(false);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridDropdown, isStandalone: true, selector: "re-data-grid-dropdown", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectValue: "selectValue" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
41
|
+
<div #root class="re-dg-dd" [class.re-dg-dd--disabled]="disabled()">
|
|
42
|
+
<button
|
|
43
|
+
class="re-dg-dd-trigger"
|
|
44
|
+
type="button"
|
|
45
|
+
[disabled]="disabled()"
|
|
46
|
+
[attr.aria-expanded]="opened()"
|
|
47
|
+
[attr.aria-haspopup]="'listbox'"
|
|
48
|
+
(click)="toggleOpen()"
|
|
49
|
+
>
|
|
50
|
+
<span class="re-dg-dd-value">{{ selectedLabel() }}</span>
|
|
51
|
+
<span class="re-dg-dd-chevron" [class.re-dg-dd-chevron--opened]="opened()">▾</span>
|
|
52
|
+
</button>
|
|
53
|
+
|
|
54
|
+
@if (opened()) {
|
|
55
|
+
<div class="re-dg-dd-menu" role="listbox">
|
|
56
|
+
@for (option of options(); track option.value) {
|
|
57
|
+
<button
|
|
58
|
+
class="re-dg-dd-option"
|
|
59
|
+
[ngClass]="{
|
|
60
|
+
're-dg-dd-option--active': option.value === value(),
|
|
61
|
+
're-dg-dd-option--disabled': !!option.disabled,
|
|
62
|
+
}"
|
|
63
|
+
type="button"
|
|
64
|
+
role="option"
|
|
65
|
+
[attr.aria-selected]="option.value === value()"
|
|
66
|
+
[disabled]="option.disabled"
|
|
67
|
+
(click)="select(option.value)"
|
|
68
|
+
>
|
|
69
|
+
{{ option.label }}
|
|
70
|
+
</button>
|
|
71
|
+
}
|
|
72
|
+
</div>
|
|
73
|
+
}
|
|
74
|
+
</div>
|
|
75
|
+
`, isInline: true, styles: [":host{--re-data-grid-dropdown-width: 120px;--re-data-grid-dropdown-height: 2rem;--re-data-grid-dropdown-radius: .375rem;--re-data-grid-dropdown-border: 1px solid var(--border-color, --re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-dropdown-surface: var(--surface-neutral, --re-data-grid-surface);--re-data-grid-dropdown-color: var(--text-primary, #1e293b);--re-data-grid-dropdown-menu-z-index: 30;--re-data-grid-dropdown-hover-surface: rgba(15, 23, 42, .05);--re-data-grid-dropdown-active-surface: rgba(15, 23, 42, .08);--re-data-grid-dropdown-shadow: 0 8px 20px rgba(0, 0, 0, .12);display:inline-flex;position:relative;min-width:var(--re-data-grid-dropdown-width);color:var(--re-data-grid-dropdown-color)}.re-dg-dd{position:relative;width:100%}.re-dg-dd-trigger{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--re-data-grid-dropdown-height);border-radius:var(--re-data-grid-dropdown-radius);border:var(--re-data-grid-dropdown-border);background:var(--re-data-grid-dropdown-surface);color:inherit;padding:0 .625rem;cursor:pointer}.re-dg-dd-menu{position:absolute;top:calc(100% + .25rem);left:0;z-index:var(--re-data-grid-dropdown-menu-z-index);width:100%;border-radius:var(--re-data-grid-dropdown-radius);border:var(--re-data-grid-dropdown-border);background:var(--re-data-grid-dropdown-surface);box-shadow:var(--re-data-grid-dropdown-shadow);overflow:hidden}.re-dg-dd-option{width:100%;height:var(--re-data-grid-dropdown-height);border:0;background:transparent;color:inherit;text-align:left;padding:0 .625rem;cursor:pointer}.re-dg-dd-option:hover:not(.re-dg-dd-option--disabled){background:var(--re-data-grid-dropdown-hover-surface)}.re-dg-dd-option--active{background:var(--re-data-grid-dropdown-active-surface);font-weight:600}.re-dg-dd-option--disabled{opacity:.6;cursor:not-allowed}.re-dg-dd-chevron{transition:transform .2s}.re-dg-dd-chevron--opened{transform:rotate(180deg)}.re-dg-dd--disabled .re-dg-dd-trigger{opacity:.65;cursor:default}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
76
|
+
}
|
|
77
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataGridDropdown, decorators: [{
|
|
78
|
+
type: Component,
|
|
79
|
+
args: [{ selector: 're-data-grid-dropdown', standalone: true, imports: [NgClass], template: `
|
|
80
|
+
<div #root class="re-dg-dd" [class.re-dg-dd--disabled]="disabled()">
|
|
81
|
+
<button
|
|
82
|
+
class="re-dg-dd-trigger"
|
|
83
|
+
type="button"
|
|
84
|
+
[disabled]="disabled()"
|
|
85
|
+
[attr.aria-expanded]="opened()"
|
|
86
|
+
[attr.aria-haspopup]="'listbox'"
|
|
87
|
+
(click)="toggleOpen()"
|
|
88
|
+
>
|
|
89
|
+
<span class="re-dg-dd-value">{{ selectedLabel() }}</span>
|
|
90
|
+
<span class="re-dg-dd-chevron" [class.re-dg-dd-chevron--opened]="opened()">▾</span>
|
|
91
|
+
</button>
|
|
92
|
+
|
|
93
|
+
@if (opened()) {
|
|
94
|
+
<div class="re-dg-dd-menu" role="listbox">
|
|
95
|
+
@for (option of options(); track option.value) {
|
|
96
|
+
<button
|
|
97
|
+
class="re-dg-dd-option"
|
|
98
|
+
[ngClass]="{
|
|
99
|
+
're-dg-dd-option--active': option.value === value(),
|
|
100
|
+
're-dg-dd-option--disabled': !!option.disabled,
|
|
101
|
+
}"
|
|
102
|
+
type="button"
|
|
103
|
+
role="option"
|
|
104
|
+
[attr.aria-selected]="option.value === value()"
|
|
105
|
+
[disabled]="option.disabled"
|
|
106
|
+
(click)="select(option.value)"
|
|
107
|
+
>
|
|
108
|
+
{{ option.label }}
|
|
109
|
+
</button>
|
|
110
|
+
}
|
|
111
|
+
</div>
|
|
112
|
+
}
|
|
113
|
+
</div>
|
|
114
|
+
`, host: {
|
|
115
|
+
'document:mousedown': 'onDocumentMouseDown($event.target)',
|
|
116
|
+
}, styles: [":host{--re-data-grid-dropdown-width: 120px;--re-data-grid-dropdown-height: 2rem;--re-data-grid-dropdown-radius: .375rem;--re-data-grid-dropdown-border: 1px solid var(--border-color, --re-data-grid-paginator-separator-color, #e2e8f0);--re-data-grid-dropdown-surface: var(--surface-neutral, --re-data-grid-surface);--re-data-grid-dropdown-color: var(--text-primary, #1e293b);--re-data-grid-dropdown-menu-z-index: 30;--re-data-grid-dropdown-hover-surface: rgba(15, 23, 42, .05);--re-data-grid-dropdown-active-surface: rgba(15, 23, 42, .08);--re-data-grid-dropdown-shadow: 0 8px 20px rgba(0, 0, 0, .12);display:inline-flex;position:relative;min-width:var(--re-data-grid-dropdown-width);color:var(--re-data-grid-dropdown-color)}.re-dg-dd{position:relative;width:100%}.re-dg-dd-trigger{display:inline-flex;align-items:center;justify-content:space-between;width:100%;height:var(--re-data-grid-dropdown-height);border-radius:var(--re-data-grid-dropdown-radius);border:var(--re-data-grid-dropdown-border);background:var(--re-data-grid-dropdown-surface);color:inherit;padding:0 .625rem;cursor:pointer}.re-dg-dd-menu{position:absolute;top:calc(100% + .25rem);left:0;z-index:var(--re-data-grid-dropdown-menu-z-index);width:100%;border-radius:var(--re-data-grid-dropdown-radius);border:var(--re-data-grid-dropdown-border);background:var(--re-data-grid-dropdown-surface);box-shadow:var(--re-data-grid-dropdown-shadow);overflow:hidden}.re-dg-dd-option{width:100%;height:var(--re-data-grid-dropdown-height);border:0;background:transparent;color:inherit;text-align:left;padding:0 .625rem;cursor:pointer}.re-dg-dd-option:hover:not(.re-dg-dd-option--disabled){background:var(--re-data-grid-dropdown-hover-surface)}.re-dg-dd-option--active{background:var(--re-data-grid-dropdown-active-surface);font-weight:600}.re-dg-dd-option--disabled{opacity:.6;cursor:not-allowed}.re-dg-dd-chevron{transition:transform .2s}.re-dg-dd-chevron--opened{transform:rotate(180deg)}.re-dg-dd--disabled .re-dg-dd-trigger{opacity:.65;cursor:default}\n"] }]
|
|
117
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectValue: [{ type: i0.Output, args: ["selectValue"] }], root: [{ type: i0.ViewChild, args: ['root', { isSignal: true }] }] } });
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Generated bundle index. Do not edit.
|
|
121
|
+
*/
|
|
122
|
+
|
|
123
|
+
export { DataGridDropdown };
|
|
124
|
+
//# sourceMappingURL=reforgium-data-grid-ui.mjs.map
|