@reforgium/data-grid 2.5.3 → 3.0.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/README.md +111 -5
- package/fesm2022/reforgium-data-grid-column-manager.mjs +35 -28
- package/fesm2022/{reforgium-data-grid-grid-overlay-scroll.feature-Dvwc2nsE.mjs → reforgium-data-grid-grid-overlay-scroll.feature-CFEP3NgY.mjs} +2 -2
- package/fesm2022/reforgium-data-grid-paginator.mjs +14 -14
- package/fesm2022/{reforgium-data-grid-reforgium-data-grid-BOyAs6Bw.mjs → reforgium-data-grid-reforgium-data-grid-CM3-29GE.mjs} +769 -195
- package/fesm2022/reforgium-data-grid-ui.mjs +3 -3
- package/fesm2022/reforgium-data-grid.mjs +1 -1
- package/package.json +1 -1
- package/types/reforgium-data-grid-column-manager.d.ts +1 -1
- package/types/reforgium-data-grid.d.ts +321 -194
package/README.md
CHANGED
|
@@ -59,6 +59,41 @@ export class SomeComponent {
|
|
|
59
59
|
(pageChange)="loadMore($event)"
|
|
60
60
|
/>
|
|
61
61
|
```
|
|
62
|
+
|
|
63
|
+
For small and medium lists, `data` remains the simplest contract.
|
|
64
|
+
|
|
65
|
+
For server-paged lists, you can now pass a page-oriented source instead:
|
|
66
|
+
|
|
67
|
+
```ts
|
|
68
|
+
import type { GridPagedDataSource } from '@reforgium/data-grid';
|
|
69
|
+
|
|
70
|
+
type User = { id: number; name: string };
|
|
71
|
+
|
|
72
|
+
declare const usersSource: GridPagedDataSource<User>;
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<re-data-grid
|
|
77
|
+
mode="infinity"
|
|
78
|
+
[source]="usersSource"
|
|
79
|
+
[columns]="columns"
|
|
80
|
+
[pageSize]="20"
|
|
81
|
+
/>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
In `source` mode, the grid keeps its own internal page buffer for infinity scrolling, so the parent does not need to maintain one ever-growing accumulated `data[]`.
|
|
85
|
+
|
|
86
|
+
Important:
|
|
87
|
+
|
|
88
|
+
- The grid does not auto-fetch on mount in `source` mode.
|
|
89
|
+
- The parent should first apply filters / route params / query state and then call the source explicitly (`fetch(...)`, `updatePage(0)`, etc.).
|
|
90
|
+
- After the source is initialized, the grid may call `source.updatePage(...)` for user-driven page changes and infinity buffering.
|
|
91
|
+
- If the source exposes `updatePageSize(...)`, the grid uses it when the page size changes.
|
|
92
|
+
- If the source exposes `sort`, `updateSort(...)`, or `updateSorts(...)`, the grid keeps sort state in sync and can delegate user sorting directly to the source.
|
|
93
|
+
- Infinity buffering uses `prefetchMode: 'sequential'` by default for compatibility with latest-wins sources such as `PagedQueryStore`.
|
|
94
|
+
- Set `prefetchMode: 'parallel'` only for sources that safely support concurrent `updatePage(...)` calls.
|
|
95
|
+
|
|
96
|
+
`PagedQueryStore` from `@reforgium/statum` fits this contract directly, so `[source]="store"` is enough for the common server-table case.
|
|
62
97
|
---
|
|
63
98
|
|
|
64
99
|
## Configuration
|
|
@@ -107,6 +142,38 @@ Supported default fields:
|
|
|
107
142
|
|
|
108
143
|
`translations` supports: `emptyState`, `itemsPerPageLabel`, `nextPageLabel`, `prevPageLabel`, `indexColumnHeader`.
|
|
109
144
|
|
|
145
|
+
### Global header text resolver
|
|
146
|
+
|
|
147
|
+
If your app keeps column headers as i18n keys, you can resolve them globally via DI without wiring `headerTemplate` for every table.
|
|
148
|
+
|
|
149
|
+
- `provideDataGridHeaderTextResolver(...)` registers `(text, ctx) => string | Signal<string>`
|
|
150
|
+
- The resolver applies to plain column headers and header-group titles
|
|
151
|
+
- `headerTemplate` / `titleTemplate` still win for markup, but receive already-resolved text in `$implicit`
|
|
152
|
+
- `provideDataGridHeaderTextResolverWithParent(...)` is available for advanced parent-resolver composition
|
|
153
|
+
|
|
154
|
+
```ts
|
|
155
|
+
import { inject } from '@angular/core';
|
|
156
|
+
import { provideDataGridHeaderTextResolver } from '@reforgium/data-grid';
|
|
157
|
+
import { LangService } from '@reforgium/presentia';
|
|
158
|
+
|
|
159
|
+
export const appConfig: ApplicationConfig = {
|
|
160
|
+
providers: [
|
|
161
|
+
provideDataGridHeaderTextResolver(() => {
|
|
162
|
+
const lang = inject(LangService);
|
|
163
|
+
|
|
164
|
+
return (text) => (text.includes('.') ? lang.observe(text) : text);
|
|
165
|
+
}),
|
|
166
|
+
],
|
|
167
|
+
};
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
```ts
|
|
171
|
+
columns = [
|
|
172
|
+
{ key: 'name', header: 'users.columns.name' },
|
|
173
|
+
{ key: 'email', header: 'users.columns.email' },
|
|
174
|
+
];
|
|
175
|
+
```
|
|
176
|
+
|
|
110
177
|
### Type registries (global + local)
|
|
111
178
|
|
|
112
179
|
You can register type-based transformers and renderers globally via DI.
|
|
@@ -200,6 +267,7 @@ columns = [
|
|
|
200
267
|
| Parameter | Type | Default | Description | |
|
|
201
268
|
|--------------------|--------------------------------------------------|--------------------|-------------------------------------------------------------------------------------------------|------------------|
|
|
202
269
|
| data | `T[]` | `[]` | Data array to render | |
|
|
270
|
+
| source | `GridPagedDataSource<T> \| null` | `null` | Optional page-oriented source for pagination/infinity flows | *[NEW in 3.x]* |
|
|
203
271
|
| columns | `GridColumn<T>[]` | `[]` | Programmatic column configuration (used when no declarative columns are provided) | |
|
|
204
272
|
| headerGroups | `GridHeaderGroup<T>[]` | `[]` | Optional top header row groups (`from`..`to`) for 2-level headers | *[NEW in 2.0.0]* |
|
|
205
273
|
| pinnedRows | `GridPinnedRow<T>[]` | `[]` | Top / bottom pinned rows | |
|
|
@@ -230,6 +298,18 @@ Selection mode guidance:
|
|
|
230
298
|
- Prefer using row selection with `mode="pagination"` for clearer UX and predictable “select all” behavior.
|
|
231
299
|
- In `mode="infinity"`, selection typically applies only to currently loaded rows, so use it only when that behavior is acceptable.
|
|
232
300
|
|
|
301
|
+
Data source guidance:
|
|
302
|
+
|
|
303
|
+
- Use `data` when the parent already owns the full rendered collection.
|
|
304
|
+
- Use `source` for server-driven pagination or infinity flows where the parent should expose only the current page.
|
|
305
|
+
- In `mode="infinity"` + `source`, the grid uses `totalElements` for scroll height when available and stores loaded page chunks internally instead of forcing the parent to append rows into one large array.
|
|
306
|
+
- `GridPagedDataSource.totalElements` is optional for infinity sources. If omitted, the grid keeps requesting pages until it receives a short page (`items.length < pageSize`) and then treats that page as the end of the dataset.
|
|
307
|
+
- In `source` mode, initialize the source from the parent after all filters / params are ready; the grid does not perform an automatic first fetch on mount.
|
|
308
|
+
- `GridPagedDataSource.error` is optional and can be used by consumers that want to project source-level error UI near the grid.
|
|
309
|
+
- `GridPagedDataSource.sort`, `updateSort(...)`, and `updateSorts(...)` let the grid use source-owned sort state instead of forcing a separate parent bridge.
|
|
310
|
+
- `GridPagedDataSource.prefetchMode` defaults to `sequential`; keep that default for `PagedQueryStore` and similar latest-wins sources.
|
|
311
|
+
- Use `prefetchMode: 'parallel'` only when the source supports multiple concurrent `updatePage(...)` requests without canceling each other.
|
|
312
|
+
|
|
233
313
|
Feature lazy-loading behavior (runtime `import()`):
|
|
234
314
|
|
|
235
315
|
- Selection feature is loaded when `selection.mode !== 'none'`.
|
|
@@ -289,6 +369,7 @@ Row templates:
|
|
|
289
369
|
Notes:
|
|
290
370
|
|
|
291
371
|
- A cell click also triggers the row click event (bubbling), so listen to one or stop propagation if needed.
|
|
372
|
+
- In `source` mode, sort events are still emitted, but if the source implements sort hooks the grid also updates the source directly.
|
|
292
373
|
|
|
293
374
|
### Public API methods
|
|
294
375
|
|
|
@@ -300,6 +381,28 @@ Notes:
|
|
|
300
381
|
- `setSort(event)` - applies single-sort state and emits sort events
|
|
301
382
|
- `setMultiSort(items)` - applies multi-sort state and emits sort events
|
|
302
383
|
|
|
384
|
+
### GridPagedDataSource<T> reference
|
|
385
|
+
|
|
386
|
+
The optional `source` input accepts a page-oriented contract:
|
|
387
|
+
|
|
388
|
+
| Field / method | Type | Description |
|
|
389
|
+
|---|---|---|
|
|
390
|
+
| `items` | `Signal<T[]>` | Current page items |
|
|
391
|
+
| `loading` | `Signal<boolean>` | Source loading state |
|
|
392
|
+
| `error` | `Signal<unknown \| null>` | Optional source error state |
|
|
393
|
+
| `page` | `number` | Current page index |
|
|
394
|
+
| `pageSize` | `number` | Current page size |
|
|
395
|
+
| `totalElements` | `number \| undefined` | Optional total size |
|
|
396
|
+
| `sort` | `ReadonlyArray<GridSortItem<T>> \| undefined` | Optional source-owned sort state |
|
|
397
|
+
| `version` | `Signal<number> \| undefined` | Dataset reset marker for local buffer invalidation |
|
|
398
|
+
| `updatePage(page)` | `(page: number) => Promise<unknown>` | Load a page |
|
|
399
|
+
| `updatePageSize(size)` | `((size: number) => Promise<unknown>) \| undefined` | Optional page-size handler |
|
|
400
|
+
| `updateSort(sort)` | `((sort?: GridSortItem<T> \| null) => Promise<unknown>) \| undefined` | Optional single-sort handler |
|
|
401
|
+
| `updateSorts(sort)` | `((sort?: ReadonlyArray<GridSortItem<T>> \| null) => Promise<unknown>) \| undefined` | Optional multi-sort handler |
|
|
402
|
+
| `prefetchMode` | `'sequential' \| 'parallel' \| undefined` | Infinity prefetch strategy |
|
|
403
|
+
|
|
404
|
+
This contract is intentionally grid-like, not `statum`-specific, but `PagedQueryStore` already matches it well enough to be used directly.
|
|
405
|
+
|
|
303
406
|
### GridColumn<T> reference
|
|
304
407
|
|
|
305
408
|
`columns` accepts `GridColumn<T>[]`, where `GridColumn<T>` is a union of three column variants:
|
|
@@ -323,11 +426,11 @@ Common (base) fields:
|
|
|
323
426
|
|
|
324
427
|
Renderer-specific fields:
|
|
325
428
|
|
|
326
|
-
| Variant
|
|
327
|
-
|
|
429
|
+
| Variant | Fields | Notes |
|
|
430
|
+
|--------------------------|----------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|
|
|
328
431
|
| Built-in / type renderer | `type?: GridBuiltInCellType \| string`, `typeParams?: any`, `defaultValue?: any` | Built-in types are `plain/date/number/index/checkbox`; custom string types can be handled by local/DI type registries. |
|
|
329
|
-
| Value renderer
|
|
330
|
-
| Template renderer
|
|
432
|
+
| Value renderer | `value: (row: T, ctx) => string \| number`, `track: (row: T) => string` | `track` is required for stable row identity and efficient updates. `ctx` includes `col`, `index`, `isPinned`. |
|
|
433
|
+
| Template renderer | `renderTemplate: TemplateRef<...>`, `track: (row: T) => string` | `track` is required when rendering through Angular templates. |
|
|
331
434
|
|
|
332
435
|
Cell text wrapping/clamp behavior:
|
|
333
436
|
|
|
@@ -657,7 +760,10 @@ Layout:
|
|
|
657
760
|
|
|
658
761
|
Page:
|
|
659
762
|
|
|
660
|
-
- `--re-data-grid-paginator-page-size` - page button size (`1.75rem`)
|
|
763
|
+
- `--re-data-grid-paginator-page-size` - base page button size, used as default min-width and height (`1.75rem`)
|
|
764
|
+
- `--re-data-grid-paginator-page-min-width` - page button min width (`var(--re-data-grid-paginator-page-size)`)
|
|
765
|
+
- `--re-data-grid-paginator-page-height` - page button height (`var(--re-data-grid-paginator-page-size)`)
|
|
766
|
+
- `--re-data-grid-paginator-page-paddings` - page button paddings (`0 0.5rem`)
|
|
661
767
|
- `--re-data-grid-paginator-page-border` - page button border (`1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0)`)
|
|
662
768
|
- `--re-data-grid-paginator-page-separator-color` - page button border color (`var(--re-data-grid-separator-color, --border-color)`)
|
|
663
769
|
- `--re-data-grid-paginator-page-rounded` - page button border radius (`var(--re-data-grid-rounded, --radius-md)`)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
1
2
|
import * as i0 from '@angular/core';
|
|
2
3
|
import { inject, TemplateRef, Directive, Component, input, booleanAttribute, Injector, output, contentChild, signal, computed, viewChild, effect, runInInjectionContext, afterNextRender } from '@angular/core';
|
|
3
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
4
4
|
|
|
5
5
|
const isVisible = (column) => column.visible !== false;
|
|
6
6
|
function cloneColumns(columns) {
|
|
@@ -14,7 +14,11 @@ function resolvePinState(columns, key) {
|
|
|
14
14
|
return column.sticky === 'right' ? 'right' : 'left';
|
|
15
15
|
}
|
|
16
16
|
function moveColumn(columns, fromIndex, toIndex) {
|
|
17
|
-
if (fromIndex === toIndex ||
|
|
17
|
+
if (fromIndex === toIndex ||
|
|
18
|
+
fromIndex < 0 ||
|
|
19
|
+
toIndex < 0 ||
|
|
20
|
+
fromIndex >= columns.length ||
|
|
21
|
+
toIndex >= columns.length) {
|
|
18
22
|
return columns;
|
|
19
23
|
}
|
|
20
24
|
const next = [...columns];
|
|
@@ -53,10 +57,10 @@ function setColumnVisibility(columns, key, visible) {
|
|
|
53
57
|
|
|
54
58
|
class DataGridColumnManagerColumnTitleDirective {
|
|
55
59
|
template = inject((TemplateRef));
|
|
56
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
57
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
60
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerColumnTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
61
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridColumnManagerColumnTitleDirective, isStandalone: true, selector: "ng-template[reDataGridColumnManagerColumnTitle]", ngImport: i0 });
|
|
58
62
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
63
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerColumnTitleDirective, decorators: [{
|
|
60
64
|
type: Directive,
|
|
61
65
|
args: [{
|
|
62
66
|
selector: 'ng-template[reDataGridColumnManagerColumnTitle]',
|
|
@@ -66,10 +70,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
66
70
|
|
|
67
71
|
class DataGridColumnManagerTriggerDirective {
|
|
68
72
|
template = inject((TemplateRef));
|
|
69
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
70
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
74
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridColumnManagerTriggerDirective, isStandalone: true, selector: "ng-template[reDataGridColumnManagerTrigger]", ngImport: i0 });
|
|
71
75
|
}
|
|
72
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManagerTriggerDirective, decorators: [{
|
|
73
77
|
type: Directive,
|
|
74
78
|
args: [{
|
|
75
79
|
selector: 'ng-template[reDataGridColumnManagerTrigger]',
|
|
@@ -77,9 +81,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
77
81
|
}]
|
|
78
82
|
}] });
|
|
79
83
|
|
|
84
|
+
/* eslint-disable max-len */
|
|
80
85
|
class CrossIcon {
|
|
81
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
82
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
86
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CrossIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
87
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CrossIcon, isStandalone: true, selector: "re-cross-ic", ngImport: i0, template: `
|
|
83
88
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
89
|
<path
|
|
85
90
|
d="M10.3052 8L13.759 4.5462C13.8354 4.47048 13.896 4.38038 13.9374 4.28111C13.9787 4.18186 14 4.07538 14 3.96785C14 3.86032 13.9787 3.75385 13.9374 3.65458C13.896 3.55532 13.8354 3.46523 13.759 3.3895L12.6105 2.24095C12.5347 2.1646 12.4447 2.104 12.3454 2.06265C12.2461 2.02129 12.1397 2 12.0321 2C11.9246 2 11.8182 2.02129 11.7189 2.06265C11.6196 2.104 11.5296 2.1646 11.4538 2.24095L8 5.69475L4.5462 2.24095C4.47048 2.1646 4.38038 2.104 4.28111 2.06265C4.18186 2.02129 4.07538 2 3.96785 2C3.86032 2 3.75385 2.02129 3.65458 2.06265C3.55532 2.104 3.46523 2.1646 3.3895 2.24095L2.24095 3.3895C2.1646 3.46523 2.104 3.55532 2.06265 3.65458C2.02129 3.75385 2 3.86032 2 3.96785C2 4.07538 2.02129 4.18186 2.06265 4.28111C2.104 4.38038 2.1646 4.47048 2.24095 4.5462L5.69475 8L2.24095 11.4538C2.1646 11.5296 2.104 11.6196 2.06265 11.7189C2.02129 11.8182 2 11.9246 2 12.0321C2 12.1397 2.02129 12.2461 2.06265 12.3454C2.104 12.4447 2.1646 12.5347 2.24095 12.6105L3.3895 13.759C3.46523 13.8354 3.55532 13.896 3.65458 13.9374C3.75385 13.9787 3.86032 14 3.96785 14C4.07538 14 4.18186 13.9787 4.28111 13.9374C4.38038 13.896 4.47048 13.8354 4.5462 13.759L8 10.3052L11.4538 13.759C11.5296 13.8354 11.6196 13.896 11.7189 13.9374C11.8182 13.9787 11.9246 14 12.0321 14C12.1397 14 12.2461 13.9787 12.3454 13.9374C12.4447 13.896 12.5347 13.8354 12.6105 13.759L13.759 12.6105C13.8354 12.5347 13.896 12.4447 13.9374 12.3454C13.9787 12.2461 14 12.1397 14 12.0321C14 11.9246 13.9787 11.8182 13.9374 11.7189C13.896 11.6196 13.8354 11.5296 13.759 11.4538L10.3052 8Z"
|
|
@@ -88,7 +93,7 @@ class CrossIcon {
|
|
|
88
93
|
</svg>
|
|
89
94
|
`, isInline: true, styles: [":host{--re-data-grid-cross-ic-surface: currentColor;display:inline-block;width:16px;height:16px}\n"] });
|
|
90
95
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CrossIcon, decorators: [{
|
|
92
97
|
type: Component,
|
|
93
98
|
args: [{ selector: 're-cross-ic', template: `
|
|
94
99
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -100,10 +105,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
100
105
|
`, styles: [":host{--re-data-grid-cross-ic-surface: currentColor;display:inline-block;width:16px;height:16px}\n"] }]
|
|
101
106
|
}] });
|
|
102
107
|
|
|
108
|
+
/* eslint-disable max-len */
|
|
103
109
|
class EyeIcon {
|
|
104
110
|
open = input(false, { ...(ngDevMode ? { debugName: "open" } : {}), transform: booleanAttribute });
|
|
105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
111
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EyeIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
112
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: EyeIcon, isStandalone: true, selector: "re-eye-ic", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
107
113
|
@if (open()) {
|
|
108
114
|
<svg width="13.5" height="13.5" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
109
115
|
<path
|
|
@@ -121,7 +127,7 @@ class EyeIcon {
|
|
|
121
127
|
}
|
|
122
128
|
`, isInline: true, styles: [":host{--re-data-grid-eye-ic-surface: currentColor;max-width:16px;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] });
|
|
123
129
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
130
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: EyeIcon, decorators: [{
|
|
125
131
|
type: Component,
|
|
126
132
|
args: [{ selector: 're-eye-ic', template: `
|
|
127
133
|
@if (open()) {
|
|
@@ -142,10 +148,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
142
148
|
`, styles: [":host{--re-data-grid-eye-ic-surface: currentColor;max-width:16px;min-width:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
143
149
|
}], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
|
|
144
150
|
|
|
151
|
+
/* eslint-disable max-len */
|
|
145
152
|
class PinIcon {
|
|
146
153
|
toRight = input(false, { ...(ngDevMode ? { debugName: "toRight" } : {}), transform: booleanAttribute });
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
148
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.
|
|
154
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PinIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
155
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: PinIcon, isStandalone: true, selector: "re-pin-ic", inputs: { toRight: { classPropertyName: "toRight", publicName: "toRight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
149
156
|
<svg
|
|
150
157
|
width="16"
|
|
151
158
|
height="16"
|
|
@@ -161,7 +168,7 @@ class PinIcon {
|
|
|
161
168
|
</svg>
|
|
162
169
|
`, isInline: true, styles: [":host{--re-data-grid-pin-ic-surface: currentColor;display:inline-block;width:16px;height:16px}.toRight{transform:rotate(-90deg)}\n"] });
|
|
163
170
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PinIcon, decorators: [{
|
|
165
172
|
type: Component,
|
|
166
173
|
args: [{ selector: 're-pin-ic', template: `
|
|
167
174
|
<svg
|
|
@@ -379,6 +386,14 @@ class DataGridColumnManager {
|
|
|
379
386
|
}
|
|
380
387
|
this.reorderByKey(source, targetKey);
|
|
381
388
|
}
|
|
389
|
+
buildColumnTitleContext(column) {
|
|
390
|
+
const title = String(column.header || column.key);
|
|
391
|
+
return {
|
|
392
|
+
$implicit: title,
|
|
393
|
+
title,
|
|
394
|
+
column,
|
|
395
|
+
};
|
|
396
|
+
}
|
|
382
397
|
reorderByKey(sourceKey, targetKey) {
|
|
383
398
|
const list = this.state();
|
|
384
399
|
const from = list.findIndex((column) => column.key === sourceKey);
|
|
@@ -398,14 +413,6 @@ class DataGridColumnManager {
|
|
|
398
413
|
isInsidePinMenu(target) {
|
|
399
414
|
return target instanceof Element && !!target.closest('[data-pin-menu]');
|
|
400
415
|
}
|
|
401
|
-
buildColumnTitleContext(column) {
|
|
402
|
-
const title = String(column.header || column.key);
|
|
403
|
-
return {
|
|
404
|
-
$implicit: title,
|
|
405
|
-
title,
|
|
406
|
-
column,
|
|
407
|
-
};
|
|
408
|
-
}
|
|
409
416
|
schedulePanelPositioning() {
|
|
410
417
|
runInInjectionContext(this.injector, () => {
|
|
411
418
|
afterNextRender(() => this.positionPanel());
|
|
@@ -428,10 +435,10 @@ class DataGridColumnManager {
|
|
|
428
435
|
const nextLeft = Math.min(Math.max(0, lower), upper);
|
|
429
436
|
this.panelLeft.set(Number.isFinite(nextLeft) ? nextLeft : 0);
|
|
430
437
|
}
|
|
431
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
432
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\r\n <button\r\n type=\"button\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n @if (triggerTemplate(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n } @else {\r\n <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n </div>\r\n }\r\n </button>\r\n\r\n @if (opened()) {\r\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n @let list = filteredColumns();\r\n\r\n @if (controlsVisible() && searchable()) {\r\n <label class=\"re-dg-cm__search\">\r\n <input\r\n type=\"search\"\r\n [value]=\"searchQuery()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n </label>\r\n }\r\n\r\n <div class=\"re-dg-cm__title-row\">\r\n @if (controlsVisible()) {\r\n <div class=\"re-dg-cm__tools\">\r\n <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n\r\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n </div>\r\n\r\n <div class=\"re-dg-cm__list\">\r\n @for (column of list; track column.key) {\r\n @let currentPin = pin(column.key);\r\n @let disabled = !!column.disabled;\r\n @let canHideValue = canHideColumn(column.key);\r\n\r\n <div\r\n class=\"re-dg-cm__row\"\r\n [attr.draggable]=\"allowReorder() && !disabled\"\r\n [class.re-dg-cm__row--disabled]=\"disabled\"\r\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n (dragstart)=\"onDragStart($event, column.key)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event, column.key)\"\r\n (dragend)=\"draggingKey.set(null)\"\r\n >\r\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n <div class=\"re-dg-cm__checkbox\">\r\n <button\r\n type=\"button\"\r\n [class.active]=\"column.visible !== false\"\r\n [disabled]=\"disabled || !canHideValue\"\r\n (click)=\"onVisibleChange(column.key)\"\r\n >\r\n <re-eye-ic [open]=\"column.visible !== false\" />\r\n </button>\r\n @if (columnTitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n />\r\n } @else {\r\n <span>{{ column.header || column.key }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"re-dg-cm__actions\">\r\n @if (allowPin()) {\r\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n <button\r\n type=\"button\"\r\n class=\"re-dg-cm__pin-current\"\r\n [disabled]=\"disabled\"\r\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n (click)=\"togglePinMenu($event, column.key)\"\r\n [title]=\"pinLabel(currentPin)\"\r\n >\r\n @if (currentPin === 'left') {\r\n <re-pin-ic />\r\n } @else if (currentPin === 'right') {\r\n <re-pin-ic toRight />\r\n } @else {\r\n <re-cross-ic />\r\n }\r\n </button>\r\n\r\n @if (openedPinMenuKey() === column.key && !disabled) {\r\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n (click)=\"selectPin(column.key, 'left')\"\r\n title=\"Pin left\"\r\n >\r\n <re-pin-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n (click)=\"selectPin(column.key, 'none')\"\r\n title=\"Unpin\"\r\n >\r\n <re-cross-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n (click)=\"selectPin(column.key, 'right')\"\r\n title=\"Pin right\"\r\n >\r\n <re-pin-ic toRight />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
|
|
438
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManager, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
439
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: DataGridColumnManager, isStandalone: true, selector: "re-data-grid-column-manager", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, showAllLabel: { classPropertyName: "showAllLabel", publicName: "showAllLabel", isSignal: true, isRequired: false, transformFunction: null }, hideAllLabel: { classPropertyName: "hideAllLabel", publicName: "hideAllLabel", isSignal: true, isRequired: false, transformFunction: null }, controlsVisible: { classPropertyName: "controlsVisible", publicName: "controlsVisible", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, allowPin: { classPropertyName: "allowPin", publicName: "allowPin", isSignal: true, isRequired: false, transformFunction: null }, allowVisibility: { classPropertyName: "allowVisibility", publicName: "allowVisibility", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange" }, host: { attributes: { "document:mousedown": "onDocumentMouseDown($event.target)", "window:resize": "onWindowResize()" } }, queries: [{ propertyName: "triggerDirective", first: true, predicate: DataGridColumnManagerTriggerDirective, descendants: true, isSignal: true }, { propertyName: "columnTitleTemplate", first: true, predicate: (DataGridColumnManagerColumnTitleDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"re-dg-cm\" #root>\r\n <button\r\n type=\"button\"\r\n [attr.aria-expanded]=\"opened()\"\r\n [attr.aria-haspopup]=\"'dialog'\"\r\n (click)=\"toggleOpen()\"\r\n >\r\n @if (triggerTemplate(); as template) {\r\n <ng-container [ngTemplateOutlet]=\"template\" />\r\n } @else {\r\n <div class=\"re-dg-cm__trigger\" [class.re-dg-cm__trigger--open]=\"opened()\">\r\n <span class=\"re-dg-cm__trigger-label\">{{ triggerLabel() }}</span>\r\n <span class=\"re-dg-cm__trigger-count\">{{ visibleColumnsCount() }}/{{ state().length }}</span>\r\n </div>\r\n }\r\n </button>\r\n\r\n @if (opened()) {\r\n <div class=\"re-dg-cm__panel\" #panel role=\"dialog\" [style.left.px]=\"panelLeft()\">\r\n @let list = filteredColumns();\r\n\r\n @if (controlsVisible() && searchable()) {\r\n <label class=\"re-dg-cm__search\">\r\n <input\r\n type=\"search\"\r\n [value]=\"searchQuery()\"\r\n [placeholder]=\"searchPlaceholder()\"\r\n (input)=\"onSearch($event)\"\r\n />\r\n </label>\r\n }\r\n\r\n <div class=\"re-dg-cm__title-row\">\r\n @if (controlsVisible()) {\r\n <div class=\"re-dg-cm__tools\">\r\n <button type=\"button\" (click)=\"showAll()\">{{ showAllLabel() }}</button>\r\n <button type=\"button\" (click)=\"hideOptional()\">{{ hideAllLabel() }}</button>\r\n </div>\r\n } @else {\r\n <span></span>\r\n }\r\n\r\n <span class=\"re-dg-cm__meta\">{{ visibleColumnsCount() }} / {{ state().length }}</span>\r\n </div>\r\n\r\n <div class=\"re-dg-cm__list\">\r\n @for (column of list; track column.key) {\r\n @let currentPin = pin(column.key);\r\n @let disabled = !!column.disabled;\r\n @let canHideValue = canHideColumn(column.key);\r\n\r\n <div\r\n class=\"re-dg-cm__row\"\r\n [attr.draggable]=\"allowReorder() && !disabled\"\r\n [class.re-dg-cm__row--disabled]=\"disabled\"\r\n [class.re-dg-cm__row--dragging]=\"draggingKey() === column.key\"\r\n (dragstart)=\"onDragStart($event, column.key)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (drop)=\"onDrop($event, column.key)\"\r\n (dragend)=\"draggingKey.set(null)\"\r\n >\r\n <span class=\"re-dg-cm__drag\" title=\"Reorder\">::</span>\r\n\r\n <div class=\"re-dg-cm__checkbox\">\r\n <button\r\n type=\"button\"\r\n [class.active]=\"column.visible !== false\"\r\n [disabled]=\"disabled || !canHideValue\"\r\n (click)=\"onVisibleChange(column.key)\"\r\n >\r\n <re-eye-ic [open]=\"column.visible !== false\" />\r\n </button>\r\n @if (columnTitleTemplate()) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"columnTitleTemplate()!.template\"\r\n [ngTemplateOutletContext]=\"buildColumnTitleContext(column)\"\r\n />\r\n } @else {\r\n <span>{{ column.header || column.key }}</span>\r\n }\r\n </div>\r\n\r\n <div class=\"re-dg-cm__actions\">\r\n @if (allowPin()) {\r\n <div class=\"re-dg-cm__pin-menu\" data-pin-menu>\r\n <button\r\n type=\"button\"\r\n class=\"re-dg-cm__pin-current\"\r\n [disabled]=\"disabled\"\r\n [class.re-dg-cm__action--active]=\"currentPin !== 'none'\"\r\n [attr.aria-expanded]=\"openedPinMenuKey() === column.key\"\r\n (click)=\"togglePinMenu($event, column.key)\"\r\n [title]=\"pinLabel(currentPin)\"\r\n >\r\n @if (currentPin === 'left') {\r\n <re-pin-ic />\r\n } @else if (currentPin === 'right') {\r\n <re-pin-ic toRight />\r\n } @else {\r\n <re-cross-ic />\r\n }\r\n </button>\r\n\r\n @if (openedPinMenuKey() === column.key && !disabled) {\r\n <div class=\"re-dg-cm__pin-popover\" data-pin-menu role=\"menu\">\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'left'\"\r\n (click)=\"selectPin(column.key, 'left')\"\r\n title=\"Pin left\"\r\n >\r\n <re-pin-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'none'\"\r\n (click)=\"selectPin(column.key, 'none')\"\r\n title=\"Unpin\"\r\n >\r\n <re-cross-ic />\r\n </button>\r\n\r\n <button\r\n type=\"button\"\r\n class=\"pin-button\"\r\n [class.re-dg-cm__action--active]=\"currentPin === 'right'\"\r\n (click)=\"selectPin(column.key, 'right')\"\r\n title=\"Pin right\"\r\n >\r\n <re-pin-ic toRight />\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{--re-data-grid-cm-gap: .5rem;--re-data-grid-cm-rounded: .625rem;--re-data-grid-cm-border: 1px solid var(--surface-border, #dfe1e6);--re-data-grid-cm-surface: var(--surface-neutral, #fff);--re-data-grid-cm-muted: var(--text-muted, #64748b);--re-data-grid-cm-active: var(--primary-color, #2a90f4);--re-data-grid-cm-shadow: 0 12px 30px rgba(15, 23, 42, .18);display:inline-block;position:relative}.re-dg-cm{position:relative;display:inline-flex;flex-direction:column;gap:var(--re-data-grid-cm-gap)}.re-dg-cm__trigger{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .75rem;border:var(--re-data-grid-cm-border);border-radius:999px;background:var(--re-data-grid-cm-surface);color:inherit;cursor:pointer}.re-dg-cm__trigger--open{box-shadow:0 0 0 2px color-mix(in srgb,var(--re-data-grid-cm-active) 25%,transparent)}.re-dg-cm__trigger-label{font-size:.8125rem;font-weight:600}.re-dg-cm__trigger-count{font-size:.75rem;color:var(--re-data-grid-cm-muted)}.re-dg-cm__panel{position:absolute;top:calc(100% + .5rem);left:0;z-index:50;min-width:18rem;width:max-content;max-width:min(24rem,85vw);display:grid;gap:var(--re-data-grid-cm-gap);padding:.75rem;border:var(--re-data-grid-cm-border);border-radius:var(--re-data-grid-cm-rounded);background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__tools,.re-dg-cm__row,.re-dg-cm__actions{display:flex;align-items:center}.re-dg-cm__meta{color:var(--re-data-grid-cm-muted);font-size:.75rem}.re-dg-cm__search input{width:100%;height:2rem;border-radius:.5rem;border:var(--re-data-grid-cm-border);padding:0 .625rem;background:var(--re-data-grid-cm-surface);color:inherit}.re-dg-cm__tools{gap:.5rem}.re-dg-cm__title-row{display:flex;justify-content:space-between}.re-dg-cm__tools button,.re-dg-cm__actions button{color:inherit;cursor:pointer;font-size:.75rem;line-height:1}.re-dg-cm__tools button{height:1.8rem;padding:0 .5rem}.re-dg-cm__actions button{width:1.7rem;height:1.7rem}.re-dg-cm__list{display:grid;gap:.375rem;max-height:22rem;overflow:auto;padding-right:.125rem}.re-dg-cm__row{gap:.5rem;padding:.375rem .5rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:color-mix(in srgb,var(--re-data-grid-cm-surface) 88%,#f8fafc)}.re-dg-cm__row--dragging{opacity:.55}.re-dg-cm__row--disabled{opacity:.6}.re-dg-cm__drag{width:1rem;color:var(--re-data-grid-cm-muted);cursor:grab;-webkit-user-select:none;user-select:none}.re-dg-cm__checkbox{display:inline-flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0;font-size:.8125rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.re-dg-cm__checkbox>button{color:var(--re-data-grid-cm-muted)}.re-dg-cm__checkbox>button.active{color:var(--re-data-grid-cm-active)}.re-dg-cm__actions{gap:.25rem;margin-left:auto}.re-dg-cm__pin-menu{position:relative}.re-dg-cm__pin-current{width:1.7rem;height:1.7rem}.re-dg-cm__pin-popover{position:absolute;right:0;top:calc(100% + .25rem);z-index:2;display:flex;align-items:center;gap:.25rem;padding:.25rem;border:var(--re-data-grid-cm-border);border-radius:.5rem;background:var(--re-data-grid-cm-surface);box-shadow:var(--re-data-grid-cm-shadow)}.re-dg-cm__action--active{color:var(--re-data-grid-cm-active)!important;font-weight:700}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EyeIcon, selector: "re-eye-ic", inputs: ["open"] }, { kind: "component", type: CrossIcon, selector: "re-cross-ic" }, { kind: "component", type: PinIcon, selector: "re-pin-ic", inputs: ["toRight"] }] });
|
|
433
440
|
}
|
|
434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
441
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridColumnManager, decorators: [{
|
|
435
442
|
type: Component,
|
|
436
443
|
args: [{ selector: 're-data-grid-column-manager', standalone: true, host: {
|
|
437
444
|
'document:mousedown': 'onDocumentMouseDown($event.target)',
|
|
@@ -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-CM3-29GE.mjs';
|
|
2
2
|
|
|
3
3
|
function createGridOverlayScrollFeature(ctx) {
|
|
4
4
|
const showScrollbar = () => {
|
|
@@ -76,4 +76,4 @@ function createGridOverlayScrollFeature(ctx) {
|
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
export { createGridOverlayScrollFeature };
|
|
79
|
-
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-
|
|
79
|
+
//# sourceMappingURL=reforgium-data-grid-grid-overlay-scroll.feature-CFEP3NgY.mjs.map
|
|
@@ -5,10 +5,10 @@ import { DataGridDropdown } from '@reforgium/data-grid/ui';
|
|
|
5
5
|
|
|
6
6
|
class DataGridPaginatorFirstDirective {
|
|
7
7
|
tpl = inject((TemplateRef));
|
|
8
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
9
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
8
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorFirstDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
9
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorFirstDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorFirst]", ngImport: i0 });
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorFirstDirective, decorators: [{
|
|
12
12
|
type: Directive,
|
|
13
13
|
args: [{
|
|
14
14
|
selector: 'ng-template[reDataGridPaginatorFirst]',
|
|
@@ -16,10 +16,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
16
16
|
}] });
|
|
17
17
|
class DataGridPaginatorLastDirective {
|
|
18
18
|
tpl = inject((TemplateRef));
|
|
19
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
20
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
19
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorLastDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
20
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorLastDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorLast]", ngImport: i0 });
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorLastDirective, decorators: [{
|
|
23
23
|
type: Directive,
|
|
24
24
|
args: [{
|
|
25
25
|
selector: 'ng-template[reDataGridPaginatorLast]',
|
|
@@ -27,10 +27,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
27
27
|
}] });
|
|
28
28
|
class DataGridPaginatorPageDirective {
|
|
29
29
|
tpl = inject((TemplateRef));
|
|
30
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
31
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorPageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
31
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: DataGridPaginatorPageDirective, isStandalone: true, selector: "ng-template[reDataGridPaginatorPage]", ngImport: i0 });
|
|
32
32
|
}
|
|
33
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
33
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginatorPageDirective, decorators: [{
|
|
34
34
|
type: Directive,
|
|
35
35
|
args: [{
|
|
36
36
|
selector: 'ng-template[reDataGridPaginatorPage]',
|
|
@@ -117,8 +117,8 @@ class DataGridPaginator {
|
|
|
117
117
|
}
|
|
118
118
|
this.pageSizeChange.emit(typedValue);
|
|
119
119
|
}
|
|
120
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
121
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
120
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
121
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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
122
|
@let total = totalPages();
|
|
123
123
|
@let perPageOptions = normalizedPageSizeOptions();
|
|
124
124
|
|
|
@@ -193,9 +193,9 @@ class DataGridPaginator {
|
|
|
193
193
|
}
|
|
194
194
|
</button>
|
|
195
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-
|
|
196
|
+
`, 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, --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:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-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);cursor:pointer;white-space:nowrap;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
197
|
}
|
|
198
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: DataGridPaginator, decorators: [{
|
|
199
199
|
type: Component,
|
|
200
200
|
args: [{ selector: 're-data-grid-paginator', imports: [NgTemplateOutlet, DataGridDropdown], template: `
|
|
201
201
|
@let total = totalPages();
|
|
@@ -272,7 +272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
272
272
|
}
|
|
273
273
|
</button>
|
|
274
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-
|
|
275
|
+
`, 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, --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:inline-flex;justify-content:center;align-items:center;min-width:var(--re-data-grid-paginator-page-min-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);cursor:pointer;white-space:nowrap;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
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
277
|
|
|
278
278
|
/**
|