@toolbox-web/grid-angular 1.3.0 → 1.4.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 +146 -54
- package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs +58 -0
- package/fesm2022/toolbox-web-grid-angular-features-clipboard.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs +37 -0
- package/fesm2022/toolbox-web-grid-angular-features-column-virtualization.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs +51 -0
- package/fesm2022/toolbox-web-grid-angular-features-context-menu.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-editing.mjs +115 -1
- package/fesm2022/toolbox-web-grid-angular-features-editing.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-export.mjs +55 -2
- package/fesm2022/toolbox-web-grid-angular-features-export.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs +159 -5
- package/fesm2022/toolbox-web-grid-angular-features-filtering.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs +83 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-columns.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs +82 -0
- package/fesm2022/toolbox-web-grid-angular-features-grouping-rows.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs +109 -2
- package/fesm2022/toolbox-web-grid-angular-features-master-detail.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs +38 -0
- package/fesm2022/toolbox-web-grid-angular-features-multi-sort.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs +37 -0
- package/fesm2022/toolbox-web-grid-angular-features-pinned-columns.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs +103 -0
- package/fesm2022/toolbox-web-grid-angular-features-pinned-rows.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs +36 -0
- package/fesm2022/toolbox-web-grid-angular-features-pivot.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-print.mjs +58 -2
- package/fesm2022/toolbox-web-grid-angular-features-print.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-reorder-columns.mjs +52 -0
- package/fesm2022/toolbox-web-grid-angular-features-reorder-columns.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs +41 -0
- package/fesm2022/toolbox-web-grid-angular-features-reorder-rows.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs +105 -2
- package/fesm2022/toolbox-web-grid-angular-features-responsive.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-row-drag-drop.mjs +77 -0
- package/fesm2022/toolbox-web-grid-angular-features-row-drag-drop.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-selection.mjs +52 -2
- package/fesm2022/toolbox-web-grid-angular-features-selection.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs +36 -0
- package/fesm2022/toolbox-web-grid-angular-features-server-side.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-tooltip.mjs +36 -0
- package/fesm2022/toolbox-web-grid-angular-features-tooltip.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-tree.mjs +53 -0
- package/fesm2022/toolbox-web-grid-angular-features-tree.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs +57 -2
- package/fesm2022/toolbox-web-grid-angular-features-undo-redo.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs +53 -0
- package/fesm2022/toolbox-web-grid-angular-features-visibility.mjs.map +1 -1
- package/fesm2022/toolbox-web-grid-angular.mjs +1238 -682
- package/fesm2022/toolbox-web-grid-angular.mjs.map +1 -1
- package/package.json +1 -1
- package/types/toolbox-web-grid-angular-features-clipboard.d.ts +23 -0
- package/types/toolbox-web-grid-angular-features-clipboard.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-column-virtualization.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-context-menu.d.ts +22 -0
- package/types/toolbox-web-grid-angular-features-context-menu.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-editing.d.ts +32 -0
- package/types/toolbox-web-grid-angular-features-editing.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-export.d.ts +21 -3
- package/types/toolbox-web-grid-angular-features-export.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-filtering.d.ts +67 -6
- package/types/toolbox-web-grid-angular-features-filtering.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-grouping-columns.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts +25 -0
- package/types/toolbox-web-grid-angular-features-grouping-rows.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-master-detail.d.ts +23 -0
- package/types/toolbox-web-grid-angular-features-master-detail.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-multi-sort.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-multi-sort.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts +18 -0
- package/types/toolbox-web-grid-angular-features-pinned-columns.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-pinned-rows.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-pivot.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-pivot.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-print.d.ts +22 -3
- package/types/toolbox-web-grid-angular-features-print.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-reorder-columns.d.ts +22 -0
- package/types/toolbox-web-grid-angular-features-reorder-columns.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-reorder-rows.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-responsive.d.ts +22 -0
- package/types/toolbox-web-grid-angular-features-responsive.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-row-drag-drop.d.ts +27 -0
- package/types/toolbox-web-grid-angular-features-row-drag-drop.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-selection.d.ts +21 -3
- package/types/toolbox-web-grid-angular-features-selection.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-server-side.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-server-side.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-tooltip.d.ts +19 -0
- package/types/toolbox-web-grid-angular-features-tooltip.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-tree.d.ts +22 -0
- package/types/toolbox-web-grid-angular-features-tree.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-undo-redo.d.ts +22 -3
- package/types/toolbox-web-grid-angular-features-undo-redo.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular-features-visibility.d.ts +22 -0
- package/types/toolbox-web-grid-angular-features-visibility.d.ts.map +1 -1
- package/types/toolbox-web-grid-angular.d.ts +865 -107
- package/types/toolbox-web-grid-angular.d.ts.map +1 -1
package/README.md
CHANGED
|
@@ -77,28 +77,108 @@ export class MyGridComponent {
|
|
|
77
77
|
|
|
78
78
|
## Enabling Features
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
`<tbw-grid>` supports three patterns for turning on plugins. Pick whichever fits the
|
|
81
|
+
component — they can be mixed.
|
|
81
82
|
|
|
82
|
-
|
|
83
|
+
| Pattern | Best for | v2 status |
|
|
84
|
+
| --------------------------------------------------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
|
85
|
+
| `gridConfig.features` (object literal) | Configuration-driven apps that prefer a single setup object | ✅ Unchanged — fully supported |
|
|
86
|
+
| **Per-feature directive** (e.g. `GridFilteringDirective`) | Template-driven apps that want signal inputs/outputs **and** the smallest bundle | ✅ **Recommended** — the future-proof path |
|
|
87
|
+
| Inputs/outputs on `Grid` (e.g. `[filtering]`) | v1.x apps already on this style | ⚠️ **Deprecated** — bindings remain for v1.x compatibility but will be removed in v2.0 |
|
|
88
|
+
|
|
89
|
+
> Apps that only use `gridConfig` are **not affected** by the v2 cleanup — only consumers
|
|
90
|
+
> binding feature inputs directly on `<tbw-grid>` need to add the matching per-feature
|
|
91
|
+
> directive to their component's `imports` before v2.
|
|
92
|
+
|
|
93
|
+
### Recommended: Per-Feature Directives
|
|
94
|
+
|
|
95
|
+
Each feature ships its own attribute-selector directive (`GridFilteringDirective`,
|
|
96
|
+
`GridSelectionDirective`, …) from its secondary entry. Add the directive to the
|
|
97
|
+
component's `imports` and bind exactly the same `[input]` / `(output)` you used before:
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
import { Component } from '@angular/core';
|
|
101
|
+
import { Grid } from '@toolbox-web/grid-angular';
|
|
102
|
+
import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filtering';
|
|
103
|
+
import { GridSelectionDirective } from '@toolbox-web/grid-angular/features/selection';
|
|
104
|
+
import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi-sort';
|
|
105
|
+
|
|
106
|
+
@Component({
|
|
107
|
+
imports: [Grid, GridFilteringDirective, GridSelectionDirective, GridMultiSortDirective],
|
|
108
|
+
template: `
|
|
109
|
+
<tbw-grid
|
|
110
|
+
[rows]="rows"
|
|
111
|
+
[columns]="columns"
|
|
112
|
+
[selection]="'range'"
|
|
113
|
+
[multiSort]="true"
|
|
114
|
+
[filtering]="true"
|
|
115
|
+
style="height: 400px; display: block;">
|
|
116
|
+
</tbw-grid>
|
|
117
|
+
`,
|
|
118
|
+
})
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
**Why this is the preferred path:**
|
|
122
|
+
|
|
123
|
+
- **Tree-shakeable typed surface** — the feature's `input()` / `output()` definitions ship
|
|
124
|
+
inside the feature's own bundle. Apps that don't import the directive don't pay for its
|
|
125
|
+
compiled metadata in the core grid-angular bundle.
|
|
126
|
+
- **Compile-time safety** — Angular errors with `Can't bind to 'filtering' since it isn't
|
|
127
|
+
a known property of 'tbw-grid'` if you forget the directive (stronger than React/Vue,
|
|
128
|
+
which silently drop unknown props, and stronger than the runtime guard on the WC core).
|
|
129
|
+
- **Same bindings, same demos** — the directive's selector matches the existing
|
|
130
|
+
attributes (`tbw-grid[filtering], tbw-grid[filterChange]`), so migrating from the
|
|
131
|
+
legacy style is a one-line `imports` addition per feature with **zero template
|
|
132
|
+
changes**.
|
|
133
|
+
|
|
134
|
+
### Legacy: Inputs/Outputs on `Grid` (deprecated)
|
|
83
135
|
|
|
84
|
-
|
|
85
|
-
|
|
136
|
+
The v1.x style — declaring `[filtering]`, `(filterChange)`, etc. directly on the
|
|
137
|
+
`Grid` directive without importing a per-feature directive — still works for the entire
|
|
138
|
+
v1.x line and is mediated by a per-element claims registry so the two styles can coexist
|
|
139
|
+
on the same grid without duplicate plugins or double-emitted events. The bindings are
|
|
140
|
+
marked `@deprecated` in JSDoc; v2.0 will remove them, at which point a one-line directive
|
|
141
|
+
import per feature is the migration.
|
|
142
|
+
|
|
143
|
+
### How the side-effect import works
|
|
144
|
+
|
|
145
|
+
1. **Import the feature** — A side-effect import registers the feature factory with the
|
|
146
|
+
core grid (`@toolbox-web/grid/features/<name>`).
|
|
147
|
+
2. **Bind the input** — The per-feature directive (or, in legacy code, the input on
|
|
148
|
+
`Grid`) instantiates the plugin with the input value.
|
|
86
149
|
|
|
87
150
|
```typescript
|
|
88
|
-
// 1.
|
|
151
|
+
// 1. Side-effect import — required for either pattern
|
|
89
152
|
import '@toolbox-web/grid-angular/features/selection';
|
|
90
153
|
import '@toolbox-web/grid-angular/features/multi-sort';
|
|
91
154
|
import '@toolbox-web/grid-angular/features/filtering';
|
|
92
155
|
|
|
93
|
-
//
|
|
156
|
+
// 2a. Recommended — per-feature directives in `imports`
|
|
157
|
+
import { GridSelectionDirective } from '@toolbox-web/grid-angular/features/selection';
|
|
158
|
+
import { GridMultiSortDirective } from '@toolbox-web/grid-angular/features/multi-sort';
|
|
159
|
+
import { GridFilteringDirective } from '@toolbox-web/grid-angular/features/filtering';
|
|
160
|
+
|
|
161
|
+
@Component({
|
|
162
|
+
imports: [Grid, GridSelectionDirective, GridMultiSortDirective, GridFilteringDirective],
|
|
163
|
+
template: `
|
|
164
|
+
<tbw-grid
|
|
165
|
+
[rows]="rows"
|
|
166
|
+
[selection]="'range'"
|
|
167
|
+
[multiSort]="true"
|
|
168
|
+
[filtering]="true"
|
|
169
|
+
style="height: 400px; display: block;">
|
|
170
|
+
</tbw-grid>
|
|
171
|
+
`,
|
|
172
|
+
})
|
|
173
|
+
|
|
174
|
+
// 2b. Legacy / deprecated — same bindings on Grid alone (works in v1.x)
|
|
94
175
|
@Component({
|
|
95
176
|
imports: [Grid],
|
|
96
177
|
template: `
|
|
97
178
|
<tbw-grid
|
|
98
179
|
[rows]="rows"
|
|
99
|
-
[columns]="columns"
|
|
100
180
|
[selection]="'range'"
|
|
101
|
-
[
|
|
181
|
+
[multiSort]="true"
|
|
102
182
|
[filtering]="true"
|
|
103
183
|
style="height: 400px; display: block;">
|
|
104
184
|
</tbw-grid>
|
|
@@ -115,32 +195,36 @@ import '@toolbox-web/grid-angular/features/filtering';
|
|
|
115
195
|
|
|
116
196
|
### Available Features
|
|
117
197
|
|
|
118
|
-
Import from `@toolbox-web/grid-angular/features/<name
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
| `
|
|
126
|
-
| `
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
| `
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
| `
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
198
|
+
Import the **directive** from `@toolbox-web/grid-angular/features/<name>` and add it
|
|
199
|
+
alongside `Grid` in your component's `imports` (recommended). The same `[input]` /
|
|
200
|
+
`(output)` bindings on the `Grid` directive itself are still accepted in v1.x but are
|
|
201
|
+
`@deprecated`.
|
|
202
|
+
|
|
203
|
+
| Per-Feature Directive (recommended) | Input | Example |
|
|
204
|
+
| --------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------- |
|
|
205
|
+
| [`GridSelectionDirective`](https://toolboxjs.com/grid/angular/api/directives/GridSelectionDirective/) | `[selection]` | `[selection]="'range'"` or `[selection]="{ mode: 'row', checkbox: true }"` |
|
|
206
|
+
| [`GridMultiSortDirective`](https://toolboxjs.com/grid/angular/api/directives/GridMultiSortDirective/) | `[multiSort]` | `[multiSort]="true"` or `[multiSort]="{ maxSortLevels: 3 }"` |
|
|
207
|
+
| [`GridFilteringDirective`](https://toolboxjs.com/grid/angular/api/directives/GridFilteringDirective/) | `[filtering]` | `[filtering]="true"` or `[filtering]="{ debounceMs: 200 }"` |
|
|
208
|
+
| [`GridEditingDirective`](https://toolboxjs.com/grid/angular/api/directives/GridEditingDirective/) | `[editing]` | `[editing]="true"` or `[editing]="'dblclick'"` |
|
|
209
|
+
| [`GridClipboardDirective`](https://toolboxjs.com/grid/angular/api/directives/GridClipboardDirective/) | `[clipboard]` | `[clipboard]="true"` (requires selection) |
|
|
210
|
+
| [`GridUndoRedoDirective`](https://toolboxjs.com/grid/angular/api/directives/GridUndoRedoDirective/) | `[undoRedo]` | `[undoRedo]="true"` (requires editing) |
|
|
211
|
+
| [`GridContextMenuDirective`](https://toolboxjs.com/grid/angular/api/directives/GridContextMenuDirective/) | `[contextMenu]` | `[contextMenu]="true"` |
|
|
212
|
+
| [`GridReorderColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridReorderColumnsDirective/) | `[reorderColumns]` | `[reorderColumns]="true"` |
|
|
213
|
+
| [`GridRowDragDropDirective`](https://toolboxjs.com/grid/angular/api/directives/GridRowDragDropDirective/) | `[rowDragDrop]` / `[reorderRows]` | `[rowDragDrop]="true"` (within and across grids) |
|
|
214
|
+
| [`GridVisibilityDirective`](https://toolboxjs.com/grid/angular/api/directives/GridVisibilityDirective/) | `[visibility]` | `[visibility]="true"` (column visibility panel) |
|
|
215
|
+
| [`GridPinnedColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPinnedColumnsDirective/) | `[pinnedColumns]` | `[pinnedColumns]="true"` |
|
|
216
|
+
| [`GridPinnedRowsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPinnedRowsDirective/) | `[pinnedRows]` | `[pinnedRows]="true"` |
|
|
217
|
+
| [`GridGroupingColumnsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridGroupingColumnsDirective/) | `[groupingColumns]` | `[groupingColumns]="true"` |
|
|
218
|
+
| [`GridGroupingRowsDirective`](https://toolboxjs.com/grid/angular/api/directives/GridGroupingRowsDirective/) | `[groupingRows]` | `[groupingRows]="{ groupBy: 'department' }"` |
|
|
219
|
+
| [`GridTreeDirective`](https://toolboxjs.com/grid/angular/api/directives/GridTreeDirective/) | `[tree]` | `[tree]="{ childrenField: 'children' }"` |
|
|
220
|
+
| [`GridColumnVirtualizationDirective`](https://toolboxjs.com/grid/angular/api/directives/GridColumnVirtualizationDirective/) | `[columnVirtualization]` | `[columnVirtualization]="true"` |
|
|
221
|
+
| [`GridExportDirective`](https://toolboxjs.com/grid/angular/api/directives/GridExportDirective/) | `[export]` | `[export]="true"` |
|
|
222
|
+
| [`GridPrintDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPrintDirective/) | `[print]` | `[print]="true"` |
|
|
223
|
+
| [`GridResponsiveDirective`](https://toolboxjs.com/grid/angular/api/directives/GridResponsiveDirective/) | `[responsive]` | `[responsive]="true"` (card layout on mobile) |
|
|
224
|
+
| [`GridMasterDetailDirective`](https://toolboxjs.com/grid/angular/api/directives/GridMasterDetailDirective/) | `[masterDetail]` | `[masterDetail]="true"` (use with `<tbw-grid-detail>`) |
|
|
225
|
+
| [`GridTooltipDirective`](https://toolboxjs.com/grid/angular/api/directives/GridTooltipDirective/) | `[tooltip]` | `[tooltip]="true"` |
|
|
226
|
+
| [`GridPivotDirective`](https://toolboxjs.com/grid/angular/api/directives/GridPivotDirective/) | `[pivot]` | `[pivot]="{ rowFields: [...], columnFields: [...] }"` |
|
|
227
|
+
| [`GridServerSideDirective`](https://toolboxjs.com/grid/angular/api/directives/GridServerSideDirective/) | `[serverSide]` | `[serverSide]="{ ... }"` |
|
|
144
228
|
|
|
145
229
|
### Import All Features
|
|
146
230
|
|
|
@@ -241,7 +325,8 @@ Use `*tbwEditor` for custom cell editors. The adapter automatically listens for
|
|
|
241
325
|
|
|
242
326
|
```typescript
|
|
243
327
|
import { Component, output } from '@angular/core';
|
|
244
|
-
import { Grid, TbwRenderer
|
|
328
|
+
import { Grid, TbwRenderer } from '@toolbox-web/grid-angular';
|
|
329
|
+
import { TbwEditor } from '@toolbox-web/grid-angular/features/editing';
|
|
245
330
|
|
|
246
331
|
// Your editor component just needs to emit 'commit' and 'cancel' events
|
|
247
332
|
@Component({
|
|
@@ -314,7 +399,8 @@ import { Grid, GridColumnView } from '@toolbox-web/grid-angular';
|
|
|
314
399
|
### GridColumnEditor
|
|
315
400
|
|
|
316
401
|
```typescript
|
|
317
|
-
import { Grid, GridColumnView
|
|
402
|
+
import { Grid, GridColumnView } from '@toolbox-web/grid-angular';
|
|
403
|
+
import { GridColumnEditor } from '@toolbox-web/grid-angular/features/editing';
|
|
318
404
|
|
|
319
405
|
@Component({
|
|
320
406
|
imports: [Grid, GridColumnView, GridColumnEditor],
|
|
@@ -374,7 +460,8 @@ export class MyGridComponent {
|
|
|
374
460
|
Use `GridDetailView` for expandable row details:
|
|
375
461
|
|
|
376
462
|
```typescript
|
|
377
|
-
import { Grid
|
|
463
|
+
import { Grid } from '@toolbox-web/grid-angular';
|
|
464
|
+
import { GridDetailView } from '@toolbox-web/grid-angular/features/master-detail';
|
|
378
465
|
import { MasterDetailPlugin } from '@toolbox-web/grid/all';
|
|
379
466
|
|
|
380
467
|
@Component({
|
|
@@ -680,9 +767,10 @@ The grid can be used as an Angular form control with `formControlName` or `formC
|
|
|
680
767
|
```typescript
|
|
681
768
|
import { Component } from '@angular/core';
|
|
682
769
|
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
|
683
|
-
import { Grid
|
|
770
|
+
import { Grid } from '@toolbox-web/grid-angular';
|
|
684
771
|
import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
|
|
685
772
|
import type { GridConfig } from '@toolbox-web/grid';
|
|
773
|
+
import { GridFormArray } from '@toolbox-web/grid-angular/features/editing';
|
|
686
774
|
|
|
687
775
|
interface Employee {
|
|
688
776
|
name: string;
|
|
@@ -722,8 +810,9 @@ export class MyComponent {
|
|
|
722
810
|
```typescript
|
|
723
811
|
import { Component } from '@angular/core';
|
|
724
812
|
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
725
|
-
import { Grid
|
|
813
|
+
import { Grid } from '@toolbox-web/grid-angular';
|
|
726
814
|
import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
|
|
815
|
+
import { GridFormArray } from '@toolbox-web/grid-angular/features/editing';
|
|
727
816
|
|
|
728
817
|
@Component({
|
|
729
818
|
imports: [Grid, GridFormArray, ReactiveFormsModule],
|
|
@@ -811,8 +900,9 @@ For fine-grained control over validation and form state at the cell level, use a
|
|
|
811
900
|
```typescript
|
|
812
901
|
import { Component, input, output } from '@angular/core';
|
|
813
902
|
import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
814
|
-
import { Grid,
|
|
903
|
+
import { Grid, TbwRenderer } from '@toolbox-web/grid-angular';
|
|
815
904
|
import { EditingPlugin } from '@toolbox-web/grid/plugins/editing';
|
|
905
|
+
import { GridFormArray, TbwEditor } from '@toolbox-web/grid-angular/features/editing';
|
|
816
906
|
|
|
817
907
|
// Custom editor that uses the FormControl directly
|
|
818
908
|
@Component({
|
|
@@ -905,7 +995,7 @@ export class MyComponent {
|
|
|
905
995
|
When using `FormArray` with `FormGroup`s, you can also access row-level validation state through the `FormArrayContext`. This is useful for styling entire rows based on their validation state or displaying row-level error summaries.
|
|
906
996
|
|
|
907
997
|
```typescript
|
|
908
|
-
import {
|
|
998
|
+
import { type FormArrayContext, getFormArrayContext } from '@toolbox-web/grid-angular/features/editing';
|
|
909
999
|
|
|
910
1000
|
// Get the context from a grid element
|
|
911
1001
|
const context = getFormArrayContext(gridElement);
|
|
@@ -955,7 +1045,7 @@ The adapter provides base classes that eliminate boilerplate when building custo
|
|
|
955
1045
|
|
|
956
1046
|
```typescript
|
|
957
1047
|
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
|
|
958
|
-
import { BaseOverlayEditor } from '@toolbox-web/grid-angular';
|
|
1048
|
+
import { BaseOverlayEditor } from '@toolbox-web/grid-angular/features/editing';
|
|
959
1049
|
|
|
960
1050
|
@Component({
|
|
961
1051
|
selector: 'app-date-editor',
|
|
@@ -1002,7 +1092,7 @@ export class DateEditorComponent extends BaseOverlayEditor<MyRow, string> implem
|
|
|
1002
1092
|
|
|
1003
1093
|
```typescript
|
|
1004
1094
|
import { Component, ViewChild, ElementRef } from '@angular/core';
|
|
1005
|
-
import { BaseFilterPanel } from '@toolbox-web/grid-angular';
|
|
1095
|
+
import { BaseFilterPanel } from '@toolbox-web/grid-angular/features/filtering';
|
|
1006
1096
|
|
|
1007
1097
|
@Component({
|
|
1008
1098
|
selector: 'app-text-filter',
|
|
@@ -1120,11 +1210,8 @@ export class TextFilterComponent extends BaseFilterPanel {
|
|
|
1120
1210
|
import type {
|
|
1121
1211
|
// Template contexts
|
|
1122
1212
|
GridCellContext,
|
|
1123
|
-
GridEditorContext,
|
|
1124
|
-
GridDetailContext,
|
|
1125
1213
|
GridToolPanelContext,
|
|
1126
1214
|
StructuralCellContext,
|
|
1127
|
-
StructuralEditorContext,
|
|
1128
1215
|
// Events
|
|
1129
1216
|
CellCommitEvent,
|
|
1130
1217
|
RowCommitEvent,
|
|
@@ -1140,20 +1227,25 @@ import type {
|
|
|
1140
1227
|
AngularCellRenderer,
|
|
1141
1228
|
AngularCellEditor,
|
|
1142
1229
|
AngularTypeDefault,
|
|
1143
|
-
// Reactive Forms
|
|
1144
|
-
FormArrayContext,
|
|
1145
|
-
// Overlay position type
|
|
1146
|
-
OverlayPosition,
|
|
1147
1230
|
} from '@toolbox-web/grid-angular';
|
|
1148
1231
|
|
|
1149
|
-
//
|
|
1150
|
-
import {
|
|
1232
|
+
// Reactive Forms types live with the editing feature
|
|
1233
|
+
import type { FormArrayContext, OverlayPosition } from '@toolbox-web/grid-angular/features/editing';
|
|
1151
1234
|
|
|
1152
1235
|
// Type guard for component class detection
|
|
1153
1236
|
import { isComponentClass } from '@toolbox-web/grid-angular';
|
|
1154
1237
|
|
|
1155
|
-
//
|
|
1156
|
-
import {
|
|
1238
|
+
// Base classes for custom editors and filter panels
|
|
1239
|
+
import {
|
|
1240
|
+
BaseGridEditor,
|
|
1241
|
+
BaseGridEditorCVA,
|
|
1242
|
+
BaseOverlayEditor,
|
|
1243
|
+
getFormArrayContext,
|
|
1244
|
+
type GridEditorContext,
|
|
1245
|
+
type StructuralEditorContext,
|
|
1246
|
+
} from '@toolbox-web/grid-angular/features/editing';
|
|
1247
|
+
import { type GridDetailContext } from '@toolbox-web/grid-angular/features/master-detail';
|
|
1248
|
+
import { BaseFilterPanel } from '@toolbox-web/grid-angular/features/filtering';
|
|
1157
1249
|
```
|
|
1158
1250
|
|
|
1159
1251
|
### AngularGridAdapter
|
|
@@ -1,4 +1,60 @@
|
|
|
1
1
|
import '@toolbox-web/grid/features/clipboard';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, ElementRef, input, output, Directive } from '@angular/core';
|
|
4
|
+
import { registerFeatureClaim, claimEvent, unregisterFeatureClaim, unclaimEvent } from '@toolbox-web/grid-angular';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `GridClipboardDirective` — owns `[clipboard]`, `(copy)`, `(paste)` on
|
|
8
|
+
* `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.
|
|
9
|
+
*
|
|
10
|
+
* @category Directive
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Owns the binding(s) `[clipboard], [copy], [paste]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
|
|
14
|
+
*
|
|
15
|
+
* @category Directive
|
|
16
|
+
*/
|
|
17
|
+
class GridClipboardDirective {
|
|
18
|
+
elementRef = inject((ElementRef));
|
|
19
|
+
clipboard = input(...(ngDevMode ? [undefined, { debugName: "clipboard" }] : /* istanbul ignore next */ []));
|
|
20
|
+
copy = output();
|
|
21
|
+
paste = output();
|
|
22
|
+
listeners = new Map();
|
|
23
|
+
constructor() {
|
|
24
|
+
const grid = this.elementRef.nativeElement;
|
|
25
|
+
registerFeatureClaim(grid, 'clipboard', () => this.clipboard());
|
|
26
|
+
claimEvent(grid, 'copy');
|
|
27
|
+
claimEvent(grid, 'paste');
|
|
28
|
+
}
|
|
29
|
+
ngOnInit() {
|
|
30
|
+
const grid = this.elementRef.nativeElement;
|
|
31
|
+
const wire = (name, out) => {
|
|
32
|
+
const l = (e) => out.emit(e.detail);
|
|
33
|
+
grid.addEventListener(name, l);
|
|
34
|
+
this.listeners.set(name, l);
|
|
35
|
+
};
|
|
36
|
+
wire('copy', this.copy);
|
|
37
|
+
wire('paste', this.paste);
|
|
38
|
+
}
|
|
39
|
+
ngOnDestroy() {
|
|
40
|
+
const grid = this.elementRef.nativeElement;
|
|
41
|
+
for (const [name, l] of this.listeners)
|
|
42
|
+
grid.removeEventListener(name, l);
|
|
43
|
+
this.listeners.clear();
|
|
44
|
+
unregisterFeatureClaim(grid, 'clipboard');
|
|
45
|
+
unclaimEvent(grid, 'copy');
|
|
46
|
+
unclaimEvent(grid, 'paste');
|
|
47
|
+
}
|
|
48
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridClipboardDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
49
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridClipboardDirective, isStandalone: true, selector: "tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]", inputs: { clipboard: { classPropertyName: "clipboard", publicName: "clipboard", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copy: "copy", paste: "paste" }, ngImport: i0 });
|
|
50
|
+
}
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridClipboardDirective, decorators: [{
|
|
52
|
+
type: Directive,
|
|
53
|
+
args: [{
|
|
54
|
+
selector: 'tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]',
|
|
55
|
+
standalone: true,
|
|
56
|
+
}]
|
|
57
|
+
}], ctorParameters: () => [], propDecorators: { clipboard: [{ type: i0.Input, args: [{ isSignal: true, alias: "clipboard", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }], paste: [{ type: i0.Output, args: ["paste"] }] } });
|
|
2
58
|
|
|
3
59
|
/**
|
|
4
60
|
* Clipboard feature for @toolbox-web/grid-angular
|
|
@@ -20,4 +76,6 @@ import '@toolbox-web/grid/features/clipboard';
|
|
|
20
76
|
/**
|
|
21
77
|
* Generated bundle index. Do not edit.
|
|
22
78
|
*/
|
|
79
|
+
|
|
80
|
+
export { GridClipboardDirective };
|
|
23
81
|
//# sourceMappingURL=toolbox-web-grid-angular-features-clipboard.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/clipboard';\nexport type { _Augmentation as _ClipboardAugmentation } from '@toolbox-web/grid/features/clipboard';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"toolbox-web-grid-angular-features-clipboard.mjs","sources":["../../../../libs/grid-angular/features/clipboard/src/grid-clipboard.directive.ts","../../../../libs/grid-angular/features/clipboard/src/index.ts","../../../../libs/grid-angular/features/clipboard/src/toolbox-web-grid-angular-features-clipboard.ts"],"sourcesContent":["/**\n * `GridClipboardDirective` — owns `[clipboard]`, `(copy)`, `(paste)` on\n * `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy, OnInit, output } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { claimEvent, registerFeatureClaim, unclaimEvent, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ClipboardConfig, CopyDetail, PasteDetail } from '@toolbox-web/grid/plugins/clipboard';\n\n/**\n * Owns the binding(s) `[clipboard], [copy], [paste]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[clipboard], tbw-grid[copy], tbw-grid[paste]',\n standalone: true,\n})\nexport class GridClipboardDirective implements OnInit, OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly clipboard = input<boolean | ClipboardConfig>();\n readonly copy = output<CopyDetail>();\n readonly paste = output<PasteDetail>();\n\n private readonly listeners = new Map<string, (e: Event) => void>();\n\n constructor() {\n const grid = this.elementRef.nativeElement;\n registerFeatureClaim(grid, 'clipboard', () => this.clipboard());\n claimEvent(grid, 'copy');\n claimEvent(grid, 'paste');\n }\n\n ngOnInit(): void {\n const grid = this.elementRef.nativeElement;\n const wire = <T>(name: string, out: { emit: (v: T) => void }): void => {\n const l = (e: Event): void => out.emit((e as CustomEvent<T>).detail);\n grid.addEventListener(name, l);\n this.listeners.set(name, l);\n };\n wire<CopyDetail>('copy', this.copy);\n wire<PasteDetail>('paste', this.paste);\n }\n\n ngOnDestroy(): void {\n const grid = this.elementRef.nativeElement;\n for (const [name, l] of this.listeners) grid.removeEventListener(name, l);\n this.listeners.clear();\n unregisterFeatureClaim(grid, 'clipboard');\n unclaimEvent(grid, 'copy');\n unclaimEvent(grid, 'paste');\n }\n}\n","/**\n * Clipboard feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `clipboard` input on Grid directive.\n * Requires selection feature to be enabled.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/selection';\n * import '@toolbox-web/grid-angular/features/clipboard';\n *\n * <tbw-grid [selection]=\"'range'\" [clipboard]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/clipboard';\nexport { GridClipboardDirective } from './grid-clipboard.directive';\nexport type { _Augmentation as _ClipboardAugmentation } from '@toolbox-web/grid/features/clipboard';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAMH;;;;AAIG;MAKU,sBAAsB,CAAA;AAChB,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA6B;IAC9C,IAAI,GAAG,MAAM,EAAc;IAC3B,KAAK,GAAG,MAAM,EAAe;AAErB,IAAA,SAAS,GAAG,IAAI,GAAG,EAA8B;AAElE,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,oBAAoB,CAAC,IAAI,EAAE,WAAW,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;AAC/D,QAAA,UAAU,CAAC,IAAI,EAAE,MAAM,CAAC;AACxB,QAAA,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC;IAC3B;IAEA,QAAQ,GAAA;AACN,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,MAAM,IAAI,GAAG,CAAI,IAAY,EAAE,GAA6B,KAAU;AACpE,YAAA,MAAM,CAAC,GAAG,CAAC,CAAQ,KAAW,GAAG,CAAC,IAAI,CAAE,CAAoB,CAAC,MAAM,CAAC;AACpE,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC,CAAC;YAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;AAC7B,QAAA,CAAC;AACD,QAAA,IAAI,CAAa,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,CAAc,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;IACxC;IAEA,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;QAC1C,KAAK,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS;AAAE,YAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,CAAC;AACzE,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;AACtB,QAAA,sBAAsB,CAAC,IAAI,EAAE,WAAW,CAAC;AACzC,QAAA,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC;AAC1B,QAAA,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC;IAC7B;uGAlCW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sDAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAJlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sDAAsD;AAChE,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACnBD;;;;;;;;;;;;;;;AAeG;;ACfH;;AAEG;;;;"}
|
|
@@ -1,4 +1,39 @@
|
|
|
1
1
|
import '@toolbox-web/grid/features/column-virtualization';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, ElementRef, input, Directive } from '@angular/core';
|
|
4
|
+
import { registerFeatureClaim, unregisterFeatureClaim } from '@toolbox-web/grid-angular';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `GridColumnVirtualizationDirective` — owns `[columnVirtualization]` on
|
|
8
|
+
* `<tbw-grid>`. No event outputs. See `GridFilteringDirective` for the
|
|
9
|
+
* full rationale.
|
|
10
|
+
*
|
|
11
|
+
* @category Directive
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Owns the binding(s) `[columnVirtualization]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
|
|
15
|
+
*
|
|
16
|
+
* @category Directive
|
|
17
|
+
*/
|
|
18
|
+
class GridColumnVirtualizationDirective {
|
|
19
|
+
elementRef = inject((ElementRef));
|
|
20
|
+
columnVirtualization = input(...(ngDevMode ? [undefined, { debugName: "columnVirtualization" }] : /* istanbul ignore next */ []));
|
|
21
|
+
constructor() {
|
|
22
|
+
registerFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization', () => this.columnVirtualization());
|
|
23
|
+
}
|
|
24
|
+
ngOnDestroy() {
|
|
25
|
+
unregisterFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization');
|
|
26
|
+
}
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnVirtualizationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
28
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridColumnVirtualizationDirective, isStandalone: true, selector: "tbw-grid[columnVirtualization]", inputs: { columnVirtualization: { classPropertyName: "columnVirtualization", publicName: "columnVirtualization", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
29
|
+
}
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridColumnVirtualizationDirective, decorators: [{
|
|
31
|
+
type: Directive,
|
|
32
|
+
args: [{
|
|
33
|
+
selector: 'tbw-grid[columnVirtualization]',
|
|
34
|
+
standalone: true,
|
|
35
|
+
}]
|
|
36
|
+
}], ctorParameters: () => [], propDecorators: { columnVirtualization: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnVirtualization", required: false }] }] } });
|
|
2
37
|
|
|
3
38
|
/**
|
|
4
39
|
* Column virtualization feature for @toolbox-web/grid-angular
|
|
@@ -18,4 +53,6 @@ import '@toolbox-web/grid/features/column-virtualization';
|
|
|
18
53
|
/**
|
|
19
54
|
* Generated bundle index. Do not edit.
|
|
20
55
|
*/
|
|
56
|
+
|
|
57
|
+
export { GridColumnVirtualizationDirective };
|
|
21
58
|
//# sourceMappingURL=toolbox-web-grid-angular-features-column-virtualization.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbox-web-grid-angular-features-column-virtualization.mjs","sources":["../../../../libs/grid-angular/features/column-virtualization/src/index.ts","../../../../libs/grid-angular/features/column-virtualization/src/toolbox-web-grid-angular-features-column-virtualization.ts"],"sourcesContent":["/**\n * Column virtualization feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `columnVirtualization` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/column-virtualization';\n *\n * <tbw-grid [columnVirtualization]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/column-virtualization';\nexport type { _Augmentation as _ColumnVirtualizationAugmentation } from '@toolbox-web/grid/features/column-virtualization';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"toolbox-web-grid-angular-features-column-virtualization.mjs","sources":["../../../../libs/grid-angular/features/column-virtualization/src/grid-column-virtualization.directive.ts","../../../../libs/grid-angular/features/column-virtualization/src/index.ts","../../../../libs/grid-angular/features/column-virtualization/src/toolbox-web-grid-angular-features-column-virtualization.ts"],"sourcesContent":["/**\n * `GridColumnVirtualizationDirective` — owns `[columnVirtualization]` on\n * `<tbw-grid>`. No event outputs. See `GridFilteringDirective` for the\n * full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { registerFeatureClaim, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ColumnVirtualizationConfig } from '@toolbox-web/grid/plugins/column-virtualization';\n\n/**\n * Owns the binding(s) `[columnVirtualization]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[columnVirtualization]',\n standalone: true,\n})\nexport class GridColumnVirtualizationDirective implements OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly columnVirtualization = input<boolean | ColumnVirtualizationConfig>();\n\n constructor() {\n registerFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization', () => this.columnVirtualization());\n }\n\n ngOnDestroy(): void {\n unregisterFeatureClaim(this.elementRef.nativeElement, 'columnVirtualization');\n }\n}\n","/**\n * Column virtualization feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `columnVirtualization` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/column-virtualization';\n *\n * <tbw-grid [columnVirtualization]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/column-virtualization';\nexport { GridColumnVirtualizationDirective } from './grid-column-virtualization.directive';\nexport type { _Augmentation as _ColumnVirtualizationAugmentation } from '@toolbox-web/grid/features/column-virtualization';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;;AAMG;AAMH;;;;AAIG;MAKU,iCAAiC,CAAA;AAC3B,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,oBAAoB,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,sBAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAwC;AAE7E,IAAA,WAAA,GAAA;AACE,QAAA,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,sBAAsB,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAChH;IAEA,WAAW,GAAA;QACT,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,sBAAsB,CAAC;IAC/E;uGAXW,iCAAiC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAjC,iCAAiC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gCAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjC,iCAAiC,EAAA,UAAA,EAAA,CAAA;kBAJ7C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,gCAAgC;AAC1C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACpBD;;;;;;;;;;;;;AAaG;;ACbH;;AAEG;;;;"}
|
|
@@ -1,4 +1,53 @@
|
|
|
1
1
|
import '@toolbox-web/grid/features/context-menu';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { inject, ElementRef, input, output, Directive } from '@angular/core';
|
|
4
|
+
import { registerFeatureClaim, claimEvent, unregisterFeatureClaim, unclaimEvent } from '@toolbox-web/grid-angular';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* `GridContextMenuDirective` — owns `[contextMenu]` and `(contextMenuOpen)`
|
|
8
|
+
* on `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.
|
|
9
|
+
*
|
|
10
|
+
* @category Directive
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Owns the binding(s) `[contextMenu], [contextMenuOpen]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.
|
|
14
|
+
*
|
|
15
|
+
* @category Directive
|
|
16
|
+
*/
|
|
17
|
+
class GridContextMenuDirective {
|
|
18
|
+
elementRef = inject((ElementRef));
|
|
19
|
+
contextMenu = input(...(ngDevMode ? [undefined, { debugName: "contextMenu" }] : /* istanbul ignore next */ []));
|
|
20
|
+
contextMenuOpen = output();
|
|
21
|
+
listener;
|
|
22
|
+
constructor() {
|
|
23
|
+
const grid = this.elementRef.nativeElement;
|
|
24
|
+
registerFeatureClaim(grid, 'contextMenu', () => this.contextMenu());
|
|
25
|
+
claimEvent(grid, 'context-menu-open');
|
|
26
|
+
}
|
|
27
|
+
ngOnInit() {
|
|
28
|
+
const grid = this.elementRef.nativeElement;
|
|
29
|
+
this.listener = (e) => this.contextMenuOpen.emit(e.detail);
|
|
30
|
+
grid.addEventListener('context-menu-open', this.listener);
|
|
31
|
+
}
|
|
32
|
+
ngOnDestroy() {
|
|
33
|
+
const grid = this.elementRef.nativeElement;
|
|
34
|
+
if (this.listener) {
|
|
35
|
+
grid.removeEventListener('context-menu-open', this.listener);
|
|
36
|
+
this.listener = undefined;
|
|
37
|
+
}
|
|
38
|
+
unregisterFeatureClaim(grid, 'contextMenu');
|
|
39
|
+
unclaimEvent(grid, 'context-menu-open');
|
|
40
|
+
}
|
|
41
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
42
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: GridContextMenuDirective, isStandalone: true, selector: "tbw-grid[contextMenu], tbw-grid[contextMenuOpen]", inputs: { contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextMenuOpen: "contextMenuOpen" }, ngImport: i0 });
|
|
43
|
+
}
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: GridContextMenuDirective, decorators: [{
|
|
45
|
+
type: Directive,
|
|
46
|
+
args: [{
|
|
47
|
+
selector: 'tbw-grid[contextMenu], tbw-grid[contextMenuOpen]',
|
|
48
|
+
standalone: true,
|
|
49
|
+
}]
|
|
50
|
+
}], ctorParameters: () => [], propDecorators: { contextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenu", required: false }] }], contextMenuOpen: [{ type: i0.Output, args: ["contextMenuOpen"] }] } });
|
|
2
51
|
|
|
3
52
|
/**
|
|
4
53
|
* Context menu feature for @toolbox-web/grid-angular
|
|
@@ -18,4 +67,6 @@ import '@toolbox-web/grid/features/context-menu';
|
|
|
18
67
|
/**
|
|
19
68
|
* Generated bundle index. Do not edit.
|
|
20
69
|
*/
|
|
70
|
+
|
|
71
|
+
export { GridContextMenuDirective };
|
|
21
72
|
//# sourceMappingURL=toolbox-web-grid-angular-features-context-menu.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbox-web-grid-angular-features-context-menu.mjs","sources":["../../../../libs/grid-angular/features/context-menu/src/index.ts","../../../../libs/grid-angular/features/context-menu/src/toolbox-web-grid-angular-features-context-menu.ts"],"sourcesContent":["/**\n * Context menu feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `contextMenu` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/context-menu';\n *\n * <tbw-grid [contextMenu]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/context-menu';\nexport type { _Augmentation as _ContextMenuAugmentation } from '@toolbox-web/grid/features/context-menu';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"toolbox-web-grid-angular-features-context-menu.mjs","sources":["../../../../libs/grid-angular/features/context-menu/src/grid-context-menu.directive.ts","../../../../libs/grid-angular/features/context-menu/src/index.ts","../../../../libs/grid-angular/features/context-menu/src/toolbox-web-grid-angular-features-context-menu.ts"],"sourcesContent":["/**\n * `GridContextMenuDirective` — owns `[contextMenu]` and `(contextMenuOpen)`\n * on `<tbw-grid>`. See `GridFilteringDirective` for the full rationale.\n *\n * @category Directive\n */\nimport { Directive, ElementRef, inject, input, OnDestroy, OnInit, output } from '@angular/core';\nimport type { DataGridElement } from '@toolbox-web/grid';\nimport { claimEvent, registerFeatureClaim, unclaimEvent, unregisterFeatureClaim } from '@toolbox-web/grid-angular';\nimport type { ContextMenuConfig, ContextMenuOpenDetail } from '@toolbox-web/grid/plugins/context-menu';\n\n/**\n * Owns the binding(s) `[contextMenu], [contextMenuOpen]` on `<tbw-grid>` for the matching feature plugin. See {@link GridFilteringDirective} for the full rationale.\n *\n * @category Directive\n */\n@Directive({\n selector: 'tbw-grid[contextMenu], tbw-grid[contextMenuOpen]',\n standalone: true,\n})\nexport class GridContextMenuDirective implements OnInit, OnDestroy {\n private readonly elementRef = inject(ElementRef<DataGridElement>);\n\n readonly contextMenu = input<boolean | ContextMenuConfig>();\n readonly contextMenuOpen = output<ContextMenuOpenDetail>();\n\n private listener?: (e: Event) => void;\n\n constructor() {\n const grid = this.elementRef.nativeElement;\n registerFeatureClaim(grid, 'contextMenu', () => this.contextMenu());\n claimEvent(grid, 'context-menu-open');\n }\n\n ngOnInit(): void {\n const grid = this.elementRef.nativeElement;\n this.listener = (e: Event): void => this.contextMenuOpen.emit((e as CustomEvent<ContextMenuOpenDetail>).detail);\n grid.addEventListener('context-menu-open', this.listener);\n }\n\n ngOnDestroy(): void {\n const grid = this.elementRef.nativeElement;\n if (this.listener) {\n grid.removeEventListener('context-menu-open', this.listener);\n this.listener = undefined;\n }\n unregisterFeatureClaim(grid, 'contextMenu');\n unclaimEvent(grid, 'context-menu-open');\n }\n}\n","/**\n * Context menu feature for @toolbox-web/grid-angular\n *\n * Import this module to enable the `contextMenu` input on Grid directive.\n *\n * @example\n * ```typescript\n * import '@toolbox-web/grid-angular/features/context-menu';\n *\n * <tbw-grid [contextMenu]=\"true\" />\n * ```\n *\n * @packageDocumentation\n */\n\nimport '@toolbox-web/grid/features/context-menu';\nexport { GridContextMenuDirective } from './grid-context-menu.directive';\nexport type { _Augmentation as _ContextMenuAugmentation } from '@toolbox-web/grid/features/context-menu';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAAA;;;;;AAKG;AAMH;;;;AAIG;MAKU,wBAAwB,CAAA;AAClB,IAAA,UAAU,GAAG,MAAM,EAAC,UAA2B,EAAC;IAExD,WAAW,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,aAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAA+B;IAClD,eAAe,GAAG,MAAM,EAAyB;AAElD,IAAA,QAAQ;AAEhB,IAAA,WAAA,GAAA;AACE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,oBAAoB,CAAC,IAAI,EAAE,aAAa,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;AACnE,QAAA,UAAU,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACvC;IAEA,QAAQ,GAAA;AACN,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAQ,KAAW,IAAI,CAAC,eAAe,CAAC,IAAI,CAAE,CAAwC,CAAC,MAAM,CAAC;QAC/G,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,QAAQ,CAAC;IAC3D;IAEA,WAAW,GAAA;AACT,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa;AAC1C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,QAAQ,CAAC;AAC5D,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;QAC3B;AACA,QAAA,sBAAsB,CAAC,IAAI,EAAE,aAAa,CAAC;AAC3C,QAAA,YAAY,CAAC,IAAI,EAAE,mBAAmB,CAAC;IACzC;uGA5BW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAxB,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kDAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAxB,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAJpC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,kDAAkD;AAC5D,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACnBD;;;;;;;;;;;;;AAaG;;ACbH;;AAEG;;;;"}
|