@reforgium/data-grid 3.2.6 → 3.2.8
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/CHANGELOG.md +31 -0
- package/README.md +50 -19
- package/fesm2022/reforgium-data-grid-config.mjs +59 -0
- package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-BfxJb8Ym.mjs → reforgium-data-grid-grid-overlay-scroll.feature-BjGZGMGU.mjs} +2 -2
- package/fesm2022/reforgium-data-grid-paginator.mjs +2 -2
- package/fesm2022/{reforgium-data-grid-reforgium-data-grid-Cwwi5rhv.mjs → reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs} +10 -62
- package/fesm2022/reforgium-data-grid.mjs +2 -1
- package/package.json +5 -1
- package/types/reforgium-data-grid-config.d.ts +53 -0
- package/types/reforgium-data-grid.d.ts +108 -173
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
## [3.2.8] - 17.09.2026
|
|
2
|
+
|
|
3
|
+
### Added
|
|
4
|
+
|
|
5
|
+
- Public CSS hooks for body geometry, header rows and cells, body cells, row height, final-row separators, template alignment, and paginator page geometry.
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- Active paginator border color now resolves through a declared active-page token.
|
|
10
|
+
- Consumer applications can reproduce compact and report-specific grid layouts without `::ng-deep` selectors.
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## [3.2.7] - 17.09.2026
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
|
|
18
|
+
- Lightweight `@reforgium/data-grid/config` entry point for application-level defaults without the grid renderer.
|
|
19
|
+
- Public styling variables for the last-column separator and paginator alignment, button, active, and gap states.
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## [3.2.6] - 14.09.2026
|
|
24
|
+
|
|
25
|
+
### Fixed
|
|
26
|
+
|
|
27
|
+
- Paginator no longer renders `NaN` while total or page-size inputs are unresolved during the initial request.
|
|
28
|
+
- Spinner loading mode is now shown while pagination replaces an already-rendered page; infinite-scroll prefetch remains non-blocking.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
1
32
|
## [3.2.5] - 30.07.2026
|
|
2
33
|
|
|
3
34
|
### Fixed
|
package/README.md
CHANGED
|
@@ -107,9 +107,9 @@ Request ownership:
|
|
|
107
107
|
You can override default input values for all grid instances via DI:
|
|
108
108
|
|
|
109
109
|
```ts
|
|
110
|
-
import { provideDataGridDefaults } from '@reforgium/data-grid';
|
|
110
|
+
import { provideDataGridDefaults } from '@reforgium/data-grid/config';
|
|
111
111
|
|
|
112
|
-
export const appConfig: ApplicationConfig = {
|
|
112
|
+
export const appConfig: ApplicationConfig = {
|
|
113
113
|
providers: [
|
|
114
114
|
provideDataGridDefaults({
|
|
115
115
|
mode: 'pagination',
|
|
@@ -121,10 +121,14 @@ export const appConfig: ApplicationConfig = {
|
|
|
121
121
|
},
|
|
122
122
|
}),
|
|
123
123
|
],
|
|
124
|
-
};
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
|
|
124
|
+
};
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
Use the `/config` entry point in application bootstrap code. It contains only the DI token and provider defaults,
|
|
128
|
+
so importing global configuration does not pull the grid renderer into the initial bundle. The root export remains
|
|
129
|
+
available for compatibility.
|
|
130
|
+
|
|
131
|
+
Supported default fields:
|
|
128
132
|
|
|
129
133
|
- `mode`
|
|
130
134
|
- `hasIndexColumn`
|
|
@@ -593,8 +597,10 @@ Layout / Appearance:
|
|
|
593
597
|
- `--re-data-grid-rounded` - border radius (`var(--radius-md, 6px)`)
|
|
594
598
|
- `--re-data-grid-separator-color` - outer border color (`var(--border-color)`)
|
|
595
599
|
- `--re-data-grid-separator` - outer border (`1px solid var(--re-data-grid-separator-color)`)
|
|
596
|
-
- `--re-data-grid-surface` - table background (`#fff`)
|
|
597
|
-
- `--re-data-grid-active` - active color (`#2a90f4`)
|
|
600
|
+
- `--re-data-grid-surface` - table background (`#fff`)
|
|
601
|
+
- `--re-data-grid-active` - active color (`#2a90f4`)
|
|
602
|
+
- `--re-data-grid-body-border` - scrollable body border (`var(--re-data-grid-separator)`)
|
|
603
|
+
- `--re-data-grid-body-radius` - scrollable body radius (`var(--re-data-grid-rounded)`)
|
|
598
604
|
|
|
599
605
|
Empty / Loading States:
|
|
600
606
|
|
|
@@ -637,13 +643,17 @@ Header:
|
|
|
637
643
|
|
|
638
644
|
- `--re-data-grid-header-rounded` - header corner radius (`var(--re-data-grid-rounded)`)
|
|
639
645
|
- `--re-data-grid-header-surface` - header area background (`#fff`)
|
|
640
|
-
- `--re-data-grid-header-body-gap` - gap between header and body (`0px`)
|
|
646
|
+
- `--re-data-grid-header-body-gap` - gap between header and body (`0px`)
|
|
647
|
+
- `--re-data-grid-header-rows-padding` - header rows container padding (`0`)
|
|
648
|
+
- `--re-data-grid-header-rows-border-bottom` - header rows container bottom border (`0`)
|
|
649
|
+
- `--re-data-grid-header-rows-surface` - header rows container background (`transparent`)
|
|
641
650
|
- `--re-data-grid-header-row-height` - main header row height (`40px`)
|
|
642
651
|
- `--re-data-grid-header-row-separator-color` - main header separator color (`#ccc`)
|
|
643
652
|
- `--re-data-grid-header-row-separator` - main header separator (`1px solid var(--re-data-grid-header-row-separator-color)`)
|
|
644
653
|
- `--re-data-grid-header-group-row-height` - group header row height (`var(--re-data-grid-header-row-height)`)
|
|
645
654
|
- `--re-data-grid-header-group-row-separator-color` - group header separator color (`var(--re-data-grid-header-row-separator-color)`)
|
|
646
|
-
- `--re-data-grid-header-group-row-separator` - group header separator (`1px solid var(--re-data-grid-header-group-row-separator-color)`)
|
|
655
|
+
- `--re-data-grid-header-group-row-separator` - group header separator (`1px solid var(--re-data-grid-header-group-row-separator-color)`)
|
|
656
|
+
- `--re-data-grid-header-group-row-border-bottom` - group row container bottom border (`0`)
|
|
647
657
|
|
|
648
658
|
Header Cells:
|
|
649
659
|
|
|
@@ -652,7 +662,14 @@ Header Cells:
|
|
|
652
662
|
- `--re-data-grid-header-cell-color` - text color (`#000`)
|
|
653
663
|
- `--re-data-grid-header-cell-surface` - cell background (`#fafafa`)
|
|
654
664
|
- `--re-data-grid-header-cell-line-height` - header text line-height for clamp (`1.2`)
|
|
655
|
-
- `--re-data-grid-header-cell-max-lines` - header max text lines (`2`)
|
|
665
|
+
- `--re-data-grid-header-cell-max-lines` - header max text lines (`2`)
|
|
666
|
+
- `--re-data-grid-header-cell-min-height` - header cell minimum height (`auto`)
|
|
667
|
+
- `--re-data-grid-header-cell-padding` - header cell padding (`var(--re-data-grid-cell-paddings)`)
|
|
668
|
+
- `--re-data-grid-header-cell-border-right` - header column divider (`var(--re-data-grid-column-separator)`)
|
|
669
|
+
- `--re-data-grid-header-cell-border-bottom` - header bottom divider (`var(--re-data-grid-header-row-separator)`)
|
|
670
|
+
- `--re-data-grid-header-cell-radius` - header cell radius (`0`)
|
|
671
|
+
- `--re-data-grid-header-cell-direction` - header cell flex direction (`row`)
|
|
672
|
+
- `--re-data-grid-header-cell-gap` - header cell content gap (`0.75rem`)
|
|
656
673
|
- `--re-data-grid-header-group-cell-font-weight` - group font weight (`var(--re-data-grid-header-cell-font-weight)`)
|
|
657
674
|
- `--re-data-grid-header-group-cell-font-size` - group font size (`var(--re-data-grid-header-cell-font-size)`)
|
|
658
675
|
- `--re-data-grid-header-group-cell-color` - group text color (`var(--re-data-grid-header-cell-color)`)
|
|
@@ -671,7 +688,9 @@ Rows:
|
|
|
671
688
|
- `--re-data-grid-row-odd-surface` - odd rows background (`var(--re-data-grid-cell-surface)`)
|
|
672
689
|
- `--re-data-grid-row-hover-surface` - hover rows background (`var(--re-data-grid-cell-surface)`)
|
|
673
690
|
- `--re-data-grid-row-hover-color` - hover rows text color (`var(--re-data-grid-cell-color)`)
|
|
674
|
-
- `--re-data-grid-row-hover-rounded` - hover row corner radius (`0px`)
|
|
691
|
+
- `--re-data-grid-row-hover-rounded` - hover row corner radius (`0px`)
|
|
692
|
+
- `--re-data-grid-row-min-height` - row minimum height (`auto`)
|
|
693
|
+
- `--re-data-grid-last-row-border-bottom` - final body-row separator (`var(--re-data-grid-row-separator)`)
|
|
675
694
|
|
|
676
695
|
Columns:
|
|
677
696
|
|
|
@@ -687,7 +706,15 @@ Cells:
|
|
|
687
706
|
- `--re-data-grid-cell-color` - text color (`#000`)
|
|
688
707
|
- `--re-data-grid-cell-surface` - cell background (`#fff`)
|
|
689
708
|
- `--re-data-grid-cell-line-height` - body text line-height for clamp (`1.2`)
|
|
690
|
-
- `--re-data-grid-cell-max-lines` - body max text lines (`2`)
|
|
709
|
+
- `--re-data-grid-cell-max-lines` - body max text lines (`2`)
|
|
710
|
+
- `--re-data-grid-cell-min-height` - body cell minimum height (`auto`)
|
|
711
|
+
- `--re-data-grid-cell-border-right` - body cell column divider (`var(--re-data-grid-column-separator)`)
|
|
712
|
+
- `--re-data-grid-cell-border-bottom` - body cell row divider (`var(--re-data-grid-row-separator)`)
|
|
713
|
+
- `--re-data-grid-cell-radius` - body cell radius (`0`)
|
|
714
|
+
- `--re-data-grid-cell-direction` - body cell flex direction (`row`)
|
|
715
|
+
- `--re-data-grid-cell-gap` - body cell content gap (`0`)
|
|
716
|
+
- `--re-data-grid-cell-template-justify` - default projected-template alignment (`left`)
|
|
717
|
+
- `--re-data-grid-cell-template-text-align` - default projected-template text alignment (`left`)
|
|
691
718
|
|
|
692
719
|
Checkbox:
|
|
693
720
|
|
|
@@ -817,12 +844,16 @@ Page:
|
|
|
817
844
|
- `--re-data-grid-paginator-page-rounded` - page button border radius (`var(--re-data-grid-rounded, var(--radius-md, 0.375rem))`)
|
|
818
845
|
- `--re-data-grid-paginator-page-surface` - page button background (`var(--re-data-grid-surface, white)`)
|
|
819
846
|
- `--re-data-grid-paginator-page-color` - page button text color (`var(--text-primary, #1e293b)`)
|
|
820
|
-
- `--re-data-grid-paginator-page-font-size` - page button font size (`0.875rem`)
|
|
847
|
+
- `--re-data-grid-paginator-page-font-size` - page button font size (`0.875rem`)
|
|
848
|
+
- `--re-data-grid-paginator-page-width` - page button width (`auto`)
|
|
849
|
+
- `--re-data-grid-paginator-page-flex-shrink` - page button flex shrink (`0`)
|
|
850
|
+
- `--re-data-grid-paginator-page-font-variant-numeric` - numeric glyph variant (`normal`)
|
|
821
851
|
|
|
822
852
|
Active Page:
|
|
823
853
|
|
|
824
854
|
- `--re-data-grid-paginator-page-active-surface` - active page button background (`var(--re-data-grid-active, #3b82f6)`)
|
|
825
|
-
- `--re-data-grid-paginator-page-active-color` - active page button text color (`white`)
|
|
855
|
+
- `--re-data-grid-paginator-page-active-color` - active page button text color (`white`)
|
|
856
|
+
- `--re-data-grid-paginator-page-active-border-color` - active page border color (`var(--re-data-grid-paginator-page-active-surface)`)
|
|
826
857
|
|
|
827
858
|
Hover Page:
|
|
828
859
|
|
|
@@ -945,10 +976,10 @@ Dark Theme Example:
|
|
|
945
976
|
--re-data-grid-cell-color: #eef2f6;
|
|
946
977
|
--re-data-grid-row-separator-color: #262a2e;
|
|
947
978
|
--re-data-grid-column-separator-color: #1e2226;
|
|
948
|
-
}
|
|
949
|
-
```
|
|
950
|
-
|
|
951
|
-
Compact Mode Example:
|
|
979
|
+
}
|
|
980
|
+
```
|
|
981
|
+
|
|
982
|
+
Compact Mode Example:
|
|
952
983
|
|
|
953
984
|
```css
|
|
954
985
|
.compact-grid {
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { InjectionToken, makeEnvironmentProviders, inject } from '@angular/core';
|
|
2
|
+
|
|
3
|
+
const DEFAULT_DATA_GRID_DEFAULTS = {
|
|
4
|
+
mode: 'pagination',
|
|
5
|
+
hasIndexColumn: false,
|
|
6
|
+
selection: { mode: 'none' },
|
|
7
|
+
pageSize: 20,
|
|
8
|
+
sortMode: 'single',
|
|
9
|
+
resizable: true,
|
|
10
|
+
rowHeight: 40,
|
|
11
|
+
headerHeight: 48,
|
|
12
|
+
height: 'default',
|
|
13
|
+
virtualBuffer: 8,
|
|
14
|
+
loadingMode: 'spinner',
|
|
15
|
+
pageStartFromZero: true,
|
|
16
|
+
deferContent: true,
|
|
17
|
+
deferHeader: false,
|
|
18
|
+
deferPinned: false,
|
|
19
|
+
deferCells: false,
|
|
20
|
+
deferIcons: true,
|
|
21
|
+
deferTooltip: false,
|
|
22
|
+
translations: {
|
|
23
|
+
emptyState: 'No records found',
|
|
24
|
+
itemsPerPageLabel: 'Items per page:',
|
|
25
|
+
nextPageLabel: 'Next page',
|
|
26
|
+
prevPageLabel: 'Previous page',
|
|
27
|
+
indexColumnHeader: '#',
|
|
28
|
+
},
|
|
29
|
+
debounce: { resize: 100, scroll: 50 },
|
|
30
|
+
};
|
|
31
|
+
const DATA_GRID_CONFIG = new InjectionToken('RE_DATA_GRID_DEFAULTS', {
|
|
32
|
+
providedIn: 'root',
|
|
33
|
+
factory: () => DEFAULT_DATA_GRID_DEFAULTS,
|
|
34
|
+
});
|
|
35
|
+
function provideDataGridDefaults(config) {
|
|
36
|
+
return makeEnvironmentProviders([
|
|
37
|
+
{
|
|
38
|
+
provide: DATA_GRID_CONFIG,
|
|
39
|
+
useFactory: () => {
|
|
40
|
+
const parent = inject(DATA_GRID_CONFIG, { optional: true, skipSelf: true });
|
|
41
|
+
const base = parent ?? DEFAULT_DATA_GRID_DEFAULTS;
|
|
42
|
+
return {
|
|
43
|
+
...base,
|
|
44
|
+
...config,
|
|
45
|
+
selection: config.selection ?? base.selection,
|
|
46
|
+
translations: { ...base.translations, ...config.translations },
|
|
47
|
+
debounce: { ...base.debounce, ...config.debounce },
|
|
48
|
+
};
|
|
49
|
+
},
|
|
50
|
+
},
|
|
51
|
+
]);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Generated bundle index. Do not edit.
|
|
56
|
+
*/
|
|
57
|
+
|
|
58
|
+
export { DATA_GRID_CONFIG, DEFAULT_DATA_GRID_DEFAULTS, provideDataGridDefaults };
|
|
59
|
+
//# sourceMappingURL=reforgium-data-grid-config.mjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-
|
|
1
|
+
import { c as computeScrollbarState, a as clampThumbTop, m as mapThumbTopToScrollTop } from './reforgium-data-grid-reforgium-data-grid-tjVPmA68.mjs';
|
|
2
2
|
|
|
3
3
|
function createGridOverlayScrollFeature(ctx) {
|
|
4
4
|
let activeMove = null;
|
|
@@ -111,4 +111,4 @@ function createGridOverlayScrollFeature(ctx) {
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
export { createGridOverlayScrollFeature };
|
|
114
|
-
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-
|
|
114
|
+
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-BjGZGMGU.mjs.map
|
|
@@ -217,7 +217,7 @@ class DataGridPaginator {
|
|
|
217
217
|
}
|
|
218
218
|
</button>
|
|
219
219
|
}
|
|
220
|
-
`, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--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, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--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:
|
|
220
|
+
`, isInline: true, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--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, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--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-width: auto;--re-data-grid-paginator-page-flex-shrink: 0;--re-data-grid-paginator-page-font-variant-numeric: normal;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--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-active-shadow: none;--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);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);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:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);width:var(--re-data-grid-paginator-page-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);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);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);font-variant-numeric:var(--re-data-grid-paginator-page-font-variant-numeric);flex-shrink:var(--re-data-grid-paginator-page-flex-shrink);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.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);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.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-page-active-border-color, var(--re-data-grid-paginator-page-active-surface) );background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\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"] }] });
|
|
221
221
|
}
|
|
222
222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, decorators: [{
|
|
223
223
|
type: Component,
|
|
@@ -311,7 +311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
311
311
|
}
|
|
312
312
|
</button>
|
|
313
313
|
}
|
|
314
|
-
`, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--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, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--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:
|
|
314
|
+
`, styles: [":host{--re-data-grid-paginator-gap: .5rem;--re-data-grid-paginator-page-size: 1.75rem;--re-data-grid-paginator-page-min-width: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-height: var(--re-data-grid-paginator-page-size);--re-data-grid-paginator-page-paddings: 0 .5rem;--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, var(--border-color, #e2e8f0));--re-data-grid-paginator-page-rounded: var(--re-data-grid-rounded, var(--radius-md, .375rem));--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-width: auto;--re-data-grid-paginator-page-flex-shrink: 0;--re-data-grid-paginator-page-font-variant-numeric: normal;--re-data-grid-paginator-button-font-weight: 400;--re-data-grid-paginator-button-shadow: none;--re-data-grid-paginator-button-transition: all .2s;--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-active-shadow: none;--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);--re-data-grid-paginator-justify-content: flex-start;--re-data-grid-paginator-align-items: center;--re-data-grid-paginator-gap-min-width: auto;--re-data-grid-paginator-gap-font-weight: inherit;--re-data-grid-paginator-gap-color: var(--re-data-grid-paginator-page-color);display:flex;align-items:var(--re-data-grid-paginator-align-items);justify-content:var(--re-data-grid-paginator-justify-content);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:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-width);width:var(--re-data-grid-paginator-page-width);height:var(--re-data-grid-paginator-page-height);padding:var(--re-data-grid-paginator-page-paddings);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);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);font-variant-numeric:var(--re-data-grid-paginator-page-font-variant-numeric);flex-shrink:var(--re-data-grid-paginator-page-flex-shrink);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.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);box-shadow:var(--re-data-grid-paginator-button-shadow);cursor:pointer;font-weight:var(--re-data-grid-paginator-button-font-weight);white-space:nowrap;transition:var(--re-data-grid-paginator-button-transition)}.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-page-active-border-color, var(--re-data-grid-paginator-page-active-surface) );background:var(--re-data-grid-paginator-page-active-surface);color:var(--re-data-grid-paginator-page-active-color);box-shadow:var(--re-data-grid-paginator-page-active-shadow)}.re-paginator-gap{display:flex;align-items:center;justify-content:center;min-width:var(--re-data-grid-paginator-gap-min-width);padding:var(--re-data-grid-paginator-page-paddings);color:var(--re-data-grid-paginator-gap-color);font-weight:var(--re-data-grid-paginator-gap-font-weight)}\n"] }]
|
|
315
315
|
}], 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 }] }] } });
|
|
316
316
|
|
|
317
317
|
/**
|