@zengrid/angular 1.2.3 → 1.3.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.
@@ -1,1400 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, TemplateRef, Directive, input, contentChild, Component, ApplicationRef, Injector, EnvironmentInjector, createComponent, Injectable, InjectionToken, PLATFORM_ID, ChangeDetectorRef, NgZone, DestroyRef, viewChild, contentChildren, model, output, afterNextRender, effect, ChangeDetectionStrategy, forwardRef, signal } from '@angular/core';
3
- import { isPlatformBrowser } from '@angular/common';
4
- import { Grid } from '@zengrid/core';
5
- export { ARIAManager, AdvancedCellRenderer, AutoFitCalculator, ButtonRenderer, CSVExporter, CheckboxEditor, CheckboxHeaderRenderer, CheckboxRenderer, ChipRenderer, ClipboardManager, ColumnDragCommand, ColumnDragManager, ColumnGroupManager, ColumnGroupModel, ColumnGroupRenderer, ColumnModel, ColumnPinPlugin, ColumnReorderPlugin, ColumnResizeManager, ColumnStore, ColumnVisibilityPlugin, GridStore as CoreGridStore, DateEditor, DatePickerRenderer, DateRangeEditor, DateRangeRenderer, DateRenderer, DateTimeEditor, DateTimePickerRenderer, DateTimeRenderer, DependencyGraph, DragKeyboardHandler, DragTouchHandler, DragVisualFeedback, DropdownEditor, DropdownRenderer, EditorManager, EventEmitter, FilterableHeaderRenderer, FocusManager, GridApiImpl, IconHeaderRenderer, ImageRenderer, KeyboardNavigator, LinkRenderer, MultiColumnSorter, NumberRenderer, PipelineRegistry, PluginHost, ProgressBarRenderer, RendererRegistry, ResizeHandleRenderer, ResizePreview, ScrollModel, SelectRenderer, SingleColumnSorter, SortStateManager, SortableHeaderRenderer, SparseMatrix, TextEditor, TextHeaderRenderer, TextRenderer, ThemeBuilder, TimeEditor, TimePickerRenderer, TimeRenderer, ViewportModel, alpha, applyTheme, containsCell, createAsyncFilterPlugin, createAsyncSortPlugin, createColumnGroupRenderer, createCorePlugin, createDatePickerRenderer, createDateTimePickerRenderer, createDateTimeRenderer, createDevToolsConnector, createEditingPlugin, createFilterPlugin, createHitTester, createIdentityIndexMap, createIndexMap, createLifecyclePlugin, createSelectionPlugin, createSortPlugin, createTheme, createTimePickerRenderer, createTimeRenderer, createUndoRedoPlugin, darkTheme, darken, draculaTheme, formatDate, formatDateForDisplay, formatDateRange, formatDateTime, formatTime, getAllThemes, getTheme, githubTheme, hasTheme, isDateInRange, isValidDate, lightTheme, lighten, listThemes, materialTheme, mergeRanges, nordTheme, normalizeRange, oneDarkTheme, parseDate, parseDateTime, parseTime, rangesIntersect, registerTheme, removeTheme, setDatetimeTheme, setDatetimeThemeConfig, solarizedTheme, themeToCSSVariables, unregisterTheme } from '@zengrid/core';
6
- import { resolveOperationMode } from '@zengrid/shared';
7
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
8
-
9
- const EVENT_MAP = {
10
- // Cell events
11
- 'cell:click': 'cellClick',
12
- 'cell:doubleClick': 'cellDoubleClick',
13
- 'cell:contextMenu': 'cellContextMenu',
14
- 'cell:change': 'cellChange',
15
- 'cell:beforeChange': 'cellBeforeChange',
16
- 'cell:afterChange': 'cellAfterChange',
17
- // Selection events
18
- 'selection:change': 'selectionChange',
19
- 'selection:start': 'selectionStart',
20
- 'selection:end': 'selectionEnd',
21
- // Editing events
22
- 'edit:start': 'editStart',
23
- 'edit:end': 'editEnd',
24
- 'edit:commit': 'editCommit',
25
- 'edit:cancel': 'editCancel',
26
- // Scroll events
27
- 'scroll': 'scroll',
28
- 'scroll:start': 'scrollStart',
29
- 'scroll:end': 'scrollEnd',
30
- // Sort events
31
- 'sort:change': 'sortChange',
32
- 'sort:beforeSort': 'sortBeforeSort',
33
- 'sort:afterSort': 'sortAfterSort',
34
- // Filter events
35
- 'filter:change': 'filterChange',
36
- 'filter:beforeFilter': 'filterBeforeFilter',
37
- 'filter:afterFilter': 'filterAfterFilter',
38
- 'filter:export': 'filterExport',
39
- 'filter:start': 'filterStart',
40
- 'filter:end': 'filterEnd',
41
- 'filter:error': 'filterError',
42
- 'filter:clear': 'filterClear',
43
- // Focus events
44
- 'focus:change': 'focusChange',
45
- 'focus:in': 'focusIn',
46
- 'focus:out': 'focusOut',
47
- // Keyboard events
48
- 'key:down': 'keyDown',
49
- 'key:up': 'keyUp',
50
- 'key:press': 'keyPress',
51
- // Column events
52
- 'column:resize': 'columnResize',
53
- 'column:move': 'columnMove',
54
- 'column:hide': 'columnHide',
55
- 'column:show': 'columnShow',
56
- 'column:dragStart': 'columnDragStart',
57
- 'column:drag': 'columnDrag',
58
- 'column:dragEnd': 'columnDragEnd',
59
- 'column:dragCancel': 'columnDragCancel',
60
- // Header events
61
- 'header:click': 'headerClick',
62
- 'header:doubleClick': 'headerDoubleClick',
63
- 'header:contextMenu': 'headerContextMenu',
64
- 'header:hover': 'headerHover',
65
- 'header:sort:click': 'headerSortClick',
66
- 'header:filter:click': 'headerFilterClick',
67
- 'header:checkbox:change': 'headerCheckboxChange',
68
- // Lifecycle events
69
- 'render:start': 'renderStart',
70
- 'render:end': 'renderEnd',
71
- 'data:load': 'dataLoad',
72
- 'data:change': 'dataChange',
73
- 'loading:start': 'loadingStart',
74
- 'loading:end': 'loadingEnd',
75
- 'loading:progress': 'loadingProgress',
76
- // Undo/Redo events
77
- 'undo-redo:change': 'undoRedoChange',
78
- // Destroy
79
- 'destroy': 'gridDestroy',
80
- // Error events
81
- 'error': 'gridError',
82
- 'warning': 'gridWarning',
83
- // Row events
84
- 'row:insert': 'rowInsert',
85
- 'row:delete': 'rowDelete',
86
- 'row:move': 'rowMove',
87
- // Clipboard events
88
- 'copy': 'copy',
89
- 'cut': 'cut',
90
- 'paste': 'paste',
91
- };
92
-
93
- class ZenCellTemplateDirective {
94
- constructor() {
95
- this.templateRef = inject((TemplateRef));
96
- }
97
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
98
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ZenCellTemplateDirective, isStandalone: true, selector: "[zenCellTemplate]", ngImport: i0 }); }
99
- }
100
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenCellTemplateDirective, decorators: [{
101
- type: Directive,
102
- args: [{
103
- selector: '[zenCellTemplate]',
104
- standalone: true,
105
- }]
106
- }] });
107
-
108
- class ZenEditorTemplateDirective {
109
- constructor() {
110
- this.templateRef = inject((TemplateRef));
111
- }
112
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenEditorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
113
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ZenEditorTemplateDirective, isStandalone: true, selector: "[zenEditorTemplate]", ngImport: i0 }); }
114
- }
115
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenEditorTemplateDirective, decorators: [{
116
- type: Directive,
117
- args: [{
118
- selector: '[zenEditorTemplate]',
119
- standalone: true,
120
- }]
121
- }] });
122
-
123
- class ZenHeaderTemplateDirective {
124
- constructor() {
125
- this.templateRef = inject((TemplateRef));
126
- }
127
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
128
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ZenHeaderTemplateDirective, isStandalone: true, selector: "[zenHeaderTemplate]", ngImport: i0 }); }
129
- }
130
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenHeaderTemplateDirective, decorators: [{
131
- type: Directive,
132
- args: [{
133
- selector: '[zenHeaderTemplate]',
134
- standalone: true,
135
- }]
136
- }] });
137
-
138
- class ZenColumnComponent {
139
- constructor() {
140
- this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
141
- this.header = input.required(...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
142
- this.width = input(undefined, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
143
- this.renderer = input(undefined, ...(ngDevMode ? [{ debugName: "renderer" }] : /* istanbul ignore next */ []));
144
- this.sortable = input(undefined, ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
145
- this.editable = input(undefined, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
146
- this.editor = input(undefined, ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
147
- this.editorOptions = input(undefined, ...(ngDevMode ? [{ debugName: "editorOptions" }] : /* istanbul ignore next */ []));
148
- this.filterable = input(undefined, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
149
- this.resizable = input(undefined, ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
150
- this.reorderable = input(undefined, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
151
- this.minWidth = input(undefined, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
152
- this.maxWidth = input(undefined, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
153
- this.overflow = input(undefined, ...(ngDevMode ? [{ debugName: "overflow" }] : /* istanbul ignore next */ []));
154
- this.autoHeight = input(undefined, ...(ngDevMode ? [{ debugName: "autoHeight" }] : /* istanbul ignore next */ []));
155
- this.id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
156
- this.cellTemplate = contentChild(ZenCellTemplateDirective, ...(ngDevMode ? [{ debugName: "cellTemplate" }] : /* istanbul ignore next */ []));
157
- this.editorTemplate = contentChild(ZenEditorTemplateDirective, ...(ngDevMode ? [{ debugName: "editorTemplate" }] : /* istanbul ignore next */ []));
158
- this.headerTemplate = contentChild(ZenHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
159
- }
160
- toColumnDef(bridge) {
161
- const def = {
162
- field: this.field(),
163
- header: this.header(),
164
- };
165
- const colId = this.id();
166
- const w = this.width();
167
- const sort = this.sortable();
168
- const edit = this.editable();
169
- const edOpts = this.editorOptions();
170
- const filter = this.filterable();
171
- const resize = this.resizable();
172
- const reorder = this.reorderable();
173
- const minW = this.minWidth();
174
- const maxW = this.maxWidth();
175
- const ov = this.overflow();
176
- const autoH = this.autoHeight();
177
- if (colId !== undefined)
178
- def.id = colId;
179
- if (w !== undefined)
180
- def.width = w;
181
- if (sort !== undefined)
182
- def.sortable = sort;
183
- if (edit !== undefined)
184
- def.editable = edit;
185
- if (edOpts !== undefined)
186
- def.editorOptions = edOpts;
187
- if (filter !== undefined)
188
- def.filterable = filter;
189
- if (resize !== undefined)
190
- def.resizable = resize;
191
- if (reorder !== undefined)
192
- def.reorderable = reorder;
193
- if (minW !== undefined)
194
- def.minWidth = minW;
195
- if (maxW !== undefined)
196
- def.maxWidth = maxW;
197
- if (ov !== undefined)
198
- def.overflow = ov;
199
- if (autoH !== undefined)
200
- def.autoHeight = autoH;
201
- // Resolve renderer: template > component/renderer input > none
202
- const cellTpl = this.cellTemplate();
203
- const rendererInput = this.renderer();
204
- if (cellTpl) {
205
- def.renderer = bridge.createTemplateRenderer(cellTpl.templateRef);
206
- }
207
- else if (rendererInput !== undefined) {
208
- if (typeof rendererInput === 'string') {
209
- def.renderer = rendererInput;
210
- }
211
- else if ('render' in rendererInput && typeof rendererInput.render === 'function') {
212
- def.renderer = rendererInput;
213
- }
214
- else {
215
- // It's a Component type
216
- def.renderer = bridge.createComponentRenderer(rendererInput);
217
- }
218
- }
219
- // Resolve editor: template > component/editor input > none
220
- const edTpl = this.editorTemplate();
221
- const editorInput = this.editor();
222
- if (edTpl) {
223
- def.editor = bridge.createTemplateEditor(edTpl.templateRef);
224
- }
225
- else if (editorInput !== undefined) {
226
- if (typeof editorInput === 'string') {
227
- def.editor = editorInput;
228
- }
229
- else if ('init' in editorInput && typeof editorInput.init === 'function') {
230
- def.editor = editorInput;
231
- }
232
- else {
233
- def.editor = bridge.createComponentEditor(editorInput);
234
- }
235
- }
236
- return def;
237
- }
238
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
239
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.7", type: ZenColumnComponent, isStandalone: true, selector: "zen-column", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: true, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, renderer: { classPropertyName: "renderer", publicName: "renderer", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: false, transformFunction: null }, editorOptions: { classPropertyName: "editorOptions", publicName: "editorOptions", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, autoHeight: { classPropertyName: "autoHeight", publicName: "autoHeight", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ZenCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "editorTemplate", first: true, predicate: ZenEditorTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ZenHeaderTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
240
- }
241
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenColumnComponent, decorators: [{
242
- type: Component,
243
- args: [{
244
- selector: 'zen-column',
245
- standalone: true,
246
- template: `<ng-content></ng-content>`,
247
- }]
248
- }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], renderer: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderer", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: false }] }], editorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorOptions", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], overflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "overflow", required: false }] }], autoHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHeight", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], cellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenCellTemplateDirective), { isSignal: true }] }], editorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenEditorTemplateDirective), { isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZenHeaderTemplateDirective), { isSignal: true }] }] } });
249
-
250
- const MAX_POOL_SIZE = 100;
251
- class TemplateBridgeService {
252
- constructor() {
253
- this.appRef = inject(ApplicationRef);
254
- this.injector = inject(Injector);
255
- this.envInjector = inject(EnvironmentInjector);
256
- this.templatePools = new Map();
257
- this.componentPools = new Map();
258
- }
259
- createTemplateRenderer(templateRef) {
260
- return new TemplateRendererBridge(this, templateRef);
261
- }
262
- createComponentRenderer(componentType) {
263
- return new ComponentRendererBridge(this, componentType);
264
- }
265
- createTemplateEditor(templateRef) {
266
- return new TemplateEditorBridge(this, templateRef);
267
- }
268
- createComponentEditor(componentType) {
269
- return new ComponentEditorBridge(this, componentType);
270
- }
271
- acquireView(templateRef, context) {
272
- let pool = this.templatePools.get(templateRef);
273
- if (!pool) {
274
- pool = [];
275
- this.templatePools.set(templateRef, pool);
276
- }
277
- // Find a pooled view not in use
278
- const pooled = pool.find(p => !p.inUse);
279
- if (pooled) {
280
- pooled.inUse = true;
281
- // Update context
282
- Object.assign(pooled.viewRef.context, context);
283
- pooled.viewRef.detectChanges();
284
- return pooled.viewRef;
285
- }
286
- // Create new
287
- const viewRef = templateRef.createEmbeddedView(context);
288
- this.appRef.attachView(viewRef);
289
- if (pool.length < MAX_POOL_SIZE) {
290
- pool.push({ viewRef, inUse: true });
291
- }
292
- return viewRef;
293
- }
294
- releaseView(templateRef, viewRef) {
295
- const pool = this.templatePools.get(templateRef);
296
- if (!pool)
297
- return;
298
- const pooled = pool.find(p => p.viewRef === viewRef);
299
- if (pooled) {
300
- pooled.inUse = false;
301
- // Detach root nodes from DOM
302
- for (const node of viewRef.rootNodes) {
303
- node.remove?.();
304
- }
305
- }
306
- else {
307
- this.appRef.detachView(viewRef);
308
- viewRef.destroy();
309
- }
310
- }
311
- acquireComponent(componentType, hostElement) {
312
- let pool = this.componentPools.get(componentType);
313
- if (!pool) {
314
- pool = [];
315
- this.componentPools.set(componentType, pool);
316
- }
317
- const pooled = pool.find(p => !p.inUse);
318
- if (pooled) {
319
- pooled.inUse = true;
320
- hostElement.appendChild(pooled.componentRef.hostView.rootNodes[0]);
321
- return pooled.componentRef;
322
- }
323
- const componentRef = createComponent(componentType, {
324
- environmentInjector: this.envInjector,
325
- elementInjector: this.injector,
326
- hostElement,
327
- });
328
- this.appRef.attachView(componentRef.hostView);
329
- if (pool.length < MAX_POOL_SIZE) {
330
- pool.push({ componentRef, inUse: true });
331
- }
332
- return componentRef;
333
- }
334
- releaseComponent(componentType, componentRef) {
335
- const pool = this.componentPools.get(componentType);
336
- if (!pool)
337
- return;
338
- const pooled = pool.find(p => p.componentRef === componentRef);
339
- if (pooled) {
340
- pooled.inUse = false;
341
- const rootNode = componentRef.hostView.rootNodes[0];
342
- rootNode?.remove?.();
343
- }
344
- else {
345
- componentRef.destroy();
346
- }
347
- }
348
- destroyAll() {
349
- for (const pool of this.templatePools.values()) {
350
- for (const { viewRef } of pool) {
351
- this.appRef.detachView(viewRef);
352
- viewRef.destroy();
353
- }
354
- }
355
- this.templatePools.clear();
356
- for (const pool of this.componentPools.values()) {
357
- for (const { componentRef } of pool) {
358
- componentRef.destroy();
359
- }
360
- }
361
- this.componentPools.clear();
362
- }
363
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TemplateBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
364
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TemplateBridgeService, providedIn: 'root' }); }
365
- }
366
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TemplateBridgeService, decorators: [{
367
- type: Injectable,
368
- args: [{ providedIn: 'root' }]
369
- }] });
370
- class TemplateRendererBridge {
371
- constructor(bridge, templateRef) {
372
- this.bridge = bridge;
373
- this.templateRef = templateRef;
374
- this.activeViews = new Map();
375
- }
376
- render(element, params) {
377
- const context = {
378
- $implicit: params.value,
379
- value: params.value,
380
- cell: params.cell,
381
- row: params.rowData,
382
- column: params.column,
383
- isSelected: params.isSelected,
384
- };
385
- const viewRef = this.bridge.acquireView(this.templateRef, context);
386
- for (const node of viewRef.rootNodes) {
387
- element.appendChild(node);
388
- }
389
- this.activeViews.set(element, viewRef);
390
- }
391
- update(element, params) {
392
- const viewRef = this.activeViews.get(element);
393
- if (!viewRef) {
394
- this.render(element, params);
395
- return;
396
- }
397
- const ctx = viewRef.context;
398
- ctx.$implicit = params.value;
399
- ctx.value = params.value;
400
- ctx.cell = params.cell;
401
- ctx.row = params.rowData;
402
- ctx.column = params.column;
403
- ctx.isSelected = params.isSelected;
404
- viewRef.detectChanges();
405
- }
406
- destroy(element) {
407
- const viewRef = this.activeViews.get(element);
408
- if (viewRef) {
409
- this.bridge.releaseView(this.templateRef, viewRef);
410
- this.activeViews.delete(element);
411
- }
412
- }
413
- }
414
- class ComponentRendererBridge {
415
- constructor(bridge, componentType) {
416
- this.bridge = bridge;
417
- this.componentType = componentType;
418
- this.activeComponents = new Map();
419
- }
420
- render(element, params) {
421
- const componentRef = this.bridge.acquireComponent(this.componentType, element);
422
- componentRef.setInput('params', params);
423
- componentRef.changeDetectorRef.detectChanges();
424
- this.activeComponents.set(element, componentRef);
425
- }
426
- update(element, params) {
427
- const componentRef = this.activeComponents.get(element);
428
- if (!componentRef) {
429
- this.render(element, params);
430
- return;
431
- }
432
- componentRef.setInput('params', params);
433
- componentRef.changeDetectorRef.detectChanges();
434
- }
435
- destroy(element) {
436
- const componentRef = this.activeComponents.get(element);
437
- if (componentRef) {
438
- this.bridge.releaseComponent(this.componentType, componentRef);
439
- this.activeComponents.delete(element);
440
- }
441
- }
442
- }
443
- class TemplateEditorBridge {
444
- constructor(bridge, templateRef) {
445
- this.bridge = bridge;
446
- this.templateRef = templateRef;
447
- this.viewRef = null;
448
- this.currentValue = null;
449
- this.onCompleteFn = null;
450
- }
451
- init(container, value, params) {
452
- this.currentValue = value;
453
- this.onCompleteFn = params.onComplete ?? null;
454
- const context = {
455
- $implicit: value,
456
- value,
457
- cell: params.cell,
458
- onComplete: (v) => {
459
- this.currentValue = v;
460
- this.onCompleteFn?.(v, false);
461
- },
462
- onChange: (v) => {
463
- this.currentValue = v;
464
- params.onChange?.(v);
465
- },
466
- };
467
- this.viewRef = this.bridge.acquireView(this.templateRef, context);
468
- for (const node of this.viewRef.rootNodes) {
469
- container.appendChild(node);
470
- }
471
- }
472
- getValue() {
473
- return this.currentValue;
474
- }
475
- focus() {
476
- if (!this.viewRef)
477
- return;
478
- const firstInput = this.viewRef.rootNodes
479
- .find((n) => n.querySelector?.('input,select,textarea'));
480
- firstInput?.querySelector?.('input,select,textarea')?.focus();
481
- }
482
- destroy() {
483
- if (this.viewRef) {
484
- this.bridge.releaseView(this.templateRef, this.viewRef);
485
- this.viewRef = null;
486
- }
487
- }
488
- }
489
- class ComponentEditorBridge {
490
- constructor(bridge, componentType) {
491
- this.bridge = bridge;
492
- this.componentType = componentType;
493
- this.componentRef = null;
494
- this.currentValue = null;
495
- }
496
- init(container, value, params) {
497
- this.currentValue = value;
498
- this.componentRef = this.bridge.acquireComponent(this.componentType, container);
499
- this.componentRef.setInput('value', value);
500
- this.componentRef.setInput('params', params);
501
- this.componentRef.setInput('onComplete', (v) => {
502
- this.currentValue = v;
503
- params.onComplete?.(v, false);
504
- });
505
- this.componentRef.setInput('onChange', (v) => {
506
- this.currentValue = v;
507
- params.onChange?.(v);
508
- });
509
- this.componentRef.changeDetectorRef.detectChanges();
510
- }
511
- getValue() {
512
- return this.currentValue;
513
- }
514
- focus() {
515
- const hostEl = this.componentRef?.location?.nativeElement;
516
- hostEl?.querySelector?.('input,select,textarea')?.focus();
517
- }
518
- destroy() {
519
- if (this.componentRef) {
520
- this.bridge.releaseComponent(this.componentType, this.componentRef);
521
- this.componentRef = null;
522
- }
523
- }
524
- }
525
-
526
- const ZEN_GRID_CONFIG = new InjectionToken('ZenGridConfig');
527
- function provideZenGrid(config) {
528
- return {
529
- provide: ZEN_GRID_CONFIG,
530
- useValue: config,
531
- };
532
- }
533
-
534
- class ZenGridComponent {
535
- get placeholderHeight() {
536
- const rowHeight = this.getResolvedRowHeight();
537
- const height = typeof rowHeight === 'number' ? rowHeight : 30;
538
- return this.rowCount() * height;
539
- }
540
- constructor() {
541
- this.platformId = inject(PLATFORM_ID);
542
- this.cdr = inject(ChangeDetectorRef);
543
- this.ngZone = inject(NgZone);
544
- this.destroyRef = inject(DestroyRef);
545
- this.templateBridge = inject(TemplateBridgeService);
546
- this.globalConfig = inject(ZEN_GRID_CONFIG, { optional: true });
547
- this._isBrowser = isPlatformBrowser(this.platformId);
548
- this.gridContainerRef = viewChild('gridContainer', ...(ngDevMode ? [{ debugName: "gridContainerRef" }] : /* istanbul ignore next */ []));
549
- this.columnChildren = contentChildren(ZenColumnComponent, ...(ngDevMode ? [{ debugName: "columnChildren" }] : /* istanbul ignore next */ []));
550
- this.grid = null;
551
- this.gridReady = false;
552
- this.explicitInputs = new Set();
553
- this.pendingModelDataSync = null;
554
- // --- Core Inputs ---
555
- this.rowCount = input.required(...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
556
- this.colCount = input.required(...(ngDevMode ? [{ debugName: "colCount" }] : /* istanbul ignore next */ []));
557
- this.rowHeight = input(30, { ...(ngDevMode ? { debugName: "rowHeight" } : /* istanbul ignore next */ {}), transform: (value) => this.markExplicitInput('rowHeight', value) });
558
- this.colWidth = input(100, { ...(ngDevMode ? { debugName: "colWidth" } : /* istanbul ignore next */ {}), transform: (value) => this.markExplicitInput('colWidth', value) });
559
- this.columns = input([], { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), transform: (value) => this.markExplicitInput('columns', value) });
560
- // --- Feature Inputs ---
561
- this.enableSelection = input(undefined, ...(ngDevMode ? [{ debugName: "enableSelection" }] : /* istanbul ignore next */ []));
562
- this.enableMultiSelection = input(undefined, ...(ngDevMode ? [{ debugName: "enableMultiSelection" }] : /* istanbul ignore next */ []));
563
- this.selectionType = input(undefined, ...(ngDevMode ? [{ debugName: "selectionType" }] : /* istanbul ignore next */ []));
564
- this.enableColumnResize = input(undefined, ...(ngDevMode ? [{ debugName: "enableColumnResize" }] : /* istanbul ignore next */ []));
565
- this.enableColumnDrag = input(undefined, ...(ngDevMode ? [{ debugName: "enableColumnDrag" }] : /* istanbul ignore next */ []));
566
- this.enableKeyboardNavigation = input(undefined, ...(ngDevMode ? [{ debugName: "enableKeyboardNavigation" }] : /* istanbul ignore next */ []));
567
- this.enableA11y = input(undefined, ...(ngDevMode ? [{ debugName: "enableA11y" }] : /* istanbul ignore next */ []));
568
- this.enableCellPooling = input(undefined, ...(ngDevMode ? [{ debugName: "enableCellPooling" }] : /* istanbul ignore next */ []));
569
- // --- Mode Inputs ---
570
- this.dataMode = input(undefined, ...(ngDevMode ? [{ debugName: "dataMode" }] : /* istanbul ignore next */ []));
571
- // --- Backend Callback Inputs ---
572
- this.onDataRequest = input(undefined, ...(ngDevMode ? [{ debugName: "onDataRequest" }] : /* istanbul ignore next */ []));
573
- this.onLoadMoreRows = input(undefined, ...(ngDevMode ? [{ debugName: "onLoadMoreRows" }] : /* istanbul ignore next */ []));
574
- // --- Config Object Inputs ---
575
- this.pagination = input(undefined, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
576
- this.loading = input(undefined, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
577
- this.infiniteScrolling = input(undefined, ...(ngDevMode ? [{ debugName: "infiniteScrolling" }] : /* istanbul ignore next */ []));
578
- this.rowHeightMode = input(undefined, ...(ngDevMode ? [{ debugName: "rowHeightMode" }] : /* istanbul ignore next */ []));
579
- this.rowHeightConfig = input(undefined, ...(ngDevMode ? [{ debugName: "rowHeightConfig" }] : /* istanbul ignore next */ []));
580
- this.columnResize = input(undefined, ...(ngDevMode ? [{ debugName: "columnResize" }] : /* istanbul ignore next */ []));
581
- this.columnDrag = input(undefined, ...(ngDevMode ? [{ debugName: "columnDrag" }] : /* istanbul ignore next */ []));
582
- this.cellOverflow = input(undefined, ...(ngDevMode ? [{ debugName: "cellOverflow" }] : /* istanbul ignore next */ []));
583
- this.autoResize = input(undefined, ...(ngDevMode ? [{ debugName: "autoResize" }] : /* istanbul ignore next */ []));
584
- this.overscanRows = input(undefined, ...(ngDevMode ? [{ debugName: "overscanRows" }] : /* istanbul ignore next */ []));
585
- this.overscanCols = input(undefined, ...(ngDevMode ? [{ debugName: "overscanCols" }] : /* istanbul ignore next */ []));
586
- this.sortIcons = input(undefined, ...(ngDevMode ? [{ debugName: "sortIcons" }] : /* istanbul ignore next */ []));
587
- this.rendererCache = input(undefined, ...(ngDevMode ? [{ debugName: "rendererCache" }] : /* istanbul ignore next */ []));
588
- // --- Callback Inputs (GridOptions event callbacks) ---
589
- this.onScrollCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onScrollCallback" }] : /* istanbul ignore next */ []));
590
- this.onCellClickCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellClickCallback" }] : /* istanbul ignore next */ []));
591
- this.onCellDoubleClickCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellDoubleClickCallback" }] : /* istanbul ignore next */ []));
592
- this.onCellContextMenuCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onCellContextMenuCallback" }] : /* istanbul ignore next */ []));
593
- this.onSelectionChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onSelectionChangeCallback" }] : /* istanbul ignore next */ []));
594
- this.onPageChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onPageChangeCallback" }] : /* istanbul ignore next */ []));
595
- this.onColumnWidthsChangeCallback = input(undefined, ...(ngDevMode ? [{ debugName: "onColumnWidthsChangeCallback" }] : /* istanbul ignore next */ []));
596
- // --- Plugin Input ---
597
- this.plugins = input([], ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
598
- // --- Two-way Model Signals ---
599
- this.data = model([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
600
- this.selection = model([], ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
601
- this.sortState = model([], ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
602
- this.filterState = model([], ...(ngDevMode ? [{ debugName: "filterState" }] : /* istanbul ignore next */ []));
603
- this.currentPage = model(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
604
- // --- Cell Events ---
605
- this.cellClick = output();
606
- this.cellDoubleClick = output();
607
- this.cellContextMenu = output();
608
- this.cellChange = output();
609
- this.cellBeforeChange = output();
610
- this.cellAfterChange = output();
611
- // --- Selection Events ---
612
- this.selectionChangeEvent = output({ alias: 'selectionChanged' });
613
- this.selectionStart = output();
614
- this.selectionEnd = output();
615
- // --- Editing Events ---
616
- this.editStart = output();
617
- this.editEnd = output();
618
- this.editCommit = output();
619
- this.editCancel = output();
620
- // --- Scroll Events ---
621
- this.scroll = output();
622
- this.scrollStart = output();
623
- this.scrollEnd = output();
624
- // --- Sort Events ---
625
- this.sortChange = output();
626
- this.sortBeforeSort = output();
627
- this.sortAfterSort = output();
628
- // --- Filter Events ---
629
- this.filterChange = output();
630
- this.filterBeforeFilter = output();
631
- this.filterAfterFilter = output();
632
- this.filterExport = output();
633
- this.filterStart = output();
634
- this.filterEnd = output();
635
- this.filterError = output();
636
- this.filterClear = output();
637
- // --- Focus Events ---
638
- this.focusChange = output();
639
- this.focusIn = output();
640
- this.focusOut = output();
641
- // --- Keyboard Events ---
642
- this.keyDown = output();
643
- this.keyUp = output();
644
- this.keyPress = output();
645
- // --- Column Events ---
646
- this.columnResizeEvent = output({ alias: 'columnResize' });
647
- this.columnMove = output();
648
- this.columnHide = output();
649
- this.columnShow = output();
650
- this.columnDragStart = output();
651
- this.columnDragEvent = output({ alias: 'columnDrag' });
652
- this.columnDragEnd = output();
653
- this.columnDragCancel = output();
654
- // --- Header Events ---
655
- this.headerClick = output();
656
- this.headerDoubleClick = output();
657
- this.headerContextMenu = output();
658
- this.headerHover = output();
659
- this.headerSortClick = output();
660
- this.headerFilterClick = output();
661
- this.headerCheckboxChange = output();
662
- // --- Lifecycle Events ---
663
- this.renderStart = output();
664
- this.renderEnd = output();
665
- this.dataLoad = output();
666
- this.dataChange = output();
667
- this.loadingStart = output();
668
- this.loadingEnd = output();
669
- this.loadingProgress = output();
670
- this.undoRedoChange = output();
671
- this.gridDestroy = output();
672
- this.gridError = output();
673
- this.gridWarning = output();
674
- // --- Row Events ---
675
- this.rowInsert = output();
676
- this.rowDelete = output();
677
- this.rowMove = output();
678
- // --- Clipboard Events ---
679
- this.copy = output();
680
- this.cut = output();
681
- this.paste = output();
682
- this.outputMap = {};
683
- this.eventHandlers = [];
684
- this.buildOutputMap();
685
- this.destroyRef.onDestroy(() => {
686
- if (this.grid) {
687
- for (const { event, handler } of this.eventHandlers) {
688
- this.grid.off(event, handler);
689
- }
690
- this.grid.destroy();
691
- this.grid = null;
692
- }
693
- this.eventHandlers = [];
694
- this.gridReady = false;
695
- this.templateBridge.destroyAll();
696
- });
697
- afterNextRender(() => {
698
- this.ngZone.runOutsideAngular(() => {
699
- this.initGrid();
700
- });
701
- });
702
- // Sync data input → grid (skip first run, initGrid handles initial data)
703
- effect(() => {
704
- const data = this.data();
705
- if (!this.gridReady || this.getResolvedDataMode() !== 'frontend')
706
- return;
707
- if (!Array.isArray(data))
708
- return;
709
- if (this.pendingModelDataSync === data) {
710
- this.pendingModelDataSync = null;
711
- return;
712
- }
713
- this.grid.setData(data);
714
- });
715
- // Sync columns from content children or input (skip first run)
716
- effect(() => {
717
- this.columnChildren();
718
- this.columns();
719
- if (!this.gridReady)
720
- return;
721
- const resolvedColumns = this.getComponentColumns();
722
- if (resolvedColumns !== undefined) {
723
- this.grid.updateOptions({ columns: resolvedColumns });
724
- }
725
- });
726
- // Sync option changes with previous-value diffing (only sends changed values)
727
- const prevOptions = {};
728
- effect(() => {
729
- const current = [
730
- ['rowHeight', this.getResolvedRowHeight()],
731
- ['colWidth', this.getResolvedColWidth()],
732
- ['selectionType', this.selectionType()],
733
- ['enableSelection', this.enableSelection()],
734
- ['enableMultiSelection', this.enableMultiSelection()],
735
- ['enableKeyboardNavigation', this.enableKeyboardNavigation()],
736
- ['enableA11y', this.enableA11y()],
737
- ['enableColumnResize', this.enableColumnResize()],
738
- ['enableColumnDrag', this.enableColumnDrag()],
739
- ['dataMode', this.getConfiguredDataMode()],
740
- ['pagination', this.pagination()],
741
- ['loading', this.loading()],
742
- ['infiniteScrolling', this.infiniteScrolling()],
743
- ['rowHeightMode', this.rowHeightMode()],
744
- ['rowHeightConfig', this.rowHeightConfig()],
745
- ['columnResize', this.columnResize()],
746
- ['columnDrag', this.columnDrag()],
747
- ['cellOverflow', this.cellOverflow()],
748
- ['autoResize', this.autoResize()],
749
- ['overscanRows', this.overscanRows()],
750
- ['overscanCols', this.overscanCols()],
751
- ];
752
- if (!this.gridReady) {
753
- // Store initial values for diffing on next run
754
- for (const [key, val] of current) {
755
- prevOptions[key] = val;
756
- }
757
- return;
758
- }
759
- const changed = {};
760
- let hasChanges = false;
761
- for (const [key, val] of current) {
762
- if (val !== undefined && val !== prevOptions[key]) {
763
- changed[key] = val;
764
- hasChanges = true;
765
- }
766
- prevOptions[key] = val;
767
- }
768
- if (hasChanges) {
769
- this.grid.updateOptions(changed);
770
- }
771
- });
772
- }
773
- markExplicitInput(name, value) {
774
- this.explicitInputs.add(name);
775
- return value;
776
- }
777
- hasExplicitInput(name) {
778
- return this.explicitInputs.has(name);
779
- }
780
- getResolvedDataMode() {
781
- return resolveOperationMode({
782
- mode: this.getConfiguredDataMode(),
783
- callback: this.onDataRequest() ??
784
- this.globalConfig?.['onDataRequest'],
785
- }, { rowCount: this.rowCount() });
786
- }
787
- getConfiguredDataMode() {
788
- return this.dataMode() ?? this.globalConfig?.['dataMode'];
789
- }
790
- getResolvedRowHeight() {
791
- const configured = this.globalConfig?.['rowHeight'];
792
- return this.hasExplicitInput('rowHeight') || configured === undefined ? this.rowHeight() : configured;
793
- }
794
- getResolvedColWidth() {
795
- const configured = this.globalConfig?.['colWidth'];
796
- return this.hasExplicitInput('colWidth') || configured === undefined ? this.colWidth() : configured;
797
- }
798
- getComponentColumns() {
799
- const columnChildren = this.columnChildren();
800
- if (columnChildren.length > 0) {
801
- return columnChildren.map(c => c.toColumnDef(this.templateBridge));
802
- }
803
- const inputColumns = this.columns();
804
- if (this.hasExplicitInput('columns') || inputColumns.length > 0) {
805
- return inputColumns;
806
- }
807
- return undefined;
808
- }
809
- buildOutputMap() {
810
- this.outputMap = {
811
- cellClick: this.cellClick,
812
- cellDoubleClick: this.cellDoubleClick,
813
- cellContextMenu: this.cellContextMenu,
814
- cellChange: this.cellChange,
815
- cellBeforeChange: this.cellBeforeChange,
816
- cellAfterChange: this.cellAfterChange,
817
- selectionChange: this.selectionChangeEvent,
818
- selectionStart: this.selectionStart,
819
- selectionEnd: this.selectionEnd,
820
- editStart: this.editStart,
821
- editEnd: this.editEnd,
822
- editCommit: this.editCommit,
823
- editCancel: this.editCancel,
824
- scroll: this.scroll,
825
- scrollStart: this.scrollStart,
826
- scrollEnd: this.scrollEnd,
827
- sortChange: this.sortChange,
828
- sortBeforeSort: this.sortBeforeSort,
829
- sortAfterSort: this.sortAfterSort,
830
- filterChange: this.filterChange,
831
- filterBeforeFilter: this.filterBeforeFilter,
832
- filterAfterFilter: this.filterAfterFilter,
833
- filterExport: this.filterExport,
834
- filterStart: this.filterStart,
835
- filterEnd: this.filterEnd,
836
- filterError: this.filterError,
837
- filterClear: this.filterClear,
838
- focusChange: this.focusChange,
839
- focusIn: this.focusIn,
840
- focusOut: this.focusOut,
841
- keyDown: this.keyDown,
842
- keyUp: this.keyUp,
843
- keyPress: this.keyPress,
844
- columnResize: this.columnResizeEvent,
845
- columnMove: this.columnMove,
846
- columnHide: this.columnHide,
847
- columnShow: this.columnShow,
848
- columnDragStart: this.columnDragStart,
849
- columnDrag: this.columnDragEvent,
850
- columnDragEnd: this.columnDragEnd,
851
- columnDragCancel: this.columnDragCancel,
852
- headerClick: this.headerClick,
853
- headerDoubleClick: this.headerDoubleClick,
854
- headerContextMenu: this.headerContextMenu,
855
- headerHover: this.headerHover,
856
- headerSortClick: this.headerSortClick,
857
- headerFilterClick: this.headerFilterClick,
858
- headerCheckboxChange: this.headerCheckboxChange,
859
- renderStart: this.renderStart,
860
- renderEnd: this.renderEnd,
861
- dataLoad: this.dataLoad,
862
- dataChange: this.dataChange,
863
- loadingStart: this.loadingStart,
864
- loadingEnd: this.loadingEnd,
865
- loadingProgress: this.loadingProgress,
866
- undoRedoChange: this.undoRedoChange,
867
- gridDestroy: this.gridDestroy,
868
- gridError: this.gridError,
869
- gridWarning: this.gridWarning,
870
- rowInsert: this.rowInsert,
871
- rowDelete: this.rowDelete,
872
- rowMove: this.rowMove,
873
- copy: this.copy,
874
- cut: this.cut,
875
- paste: this.paste,
876
- };
877
- }
878
- initGrid() {
879
- const containerRef = this.gridContainerRef();
880
- if (!containerRef)
881
- return;
882
- const container = containerRef.nativeElement;
883
- const dataValue = this.data();
884
- const componentColumns = this.getComponentColumns();
885
- const resolvedDataMode = this.getResolvedDataMode();
886
- const options = {
887
- ...(this.globalConfig ?? {}),
888
- rowCount: this.rowCount(),
889
- colCount: this.colCount(),
890
- ...this.getOptionalOptions(),
891
- rowHeight: this.getResolvedRowHeight(),
892
- colWidth: this.getResolvedColWidth(),
893
- ...(componentColumns !== undefined ? { columns: componentColumns } : {}),
894
- };
895
- this.grid = new Grid(container, options);
896
- // Wire up events
897
- this.wireEvents();
898
- // Frontend mode owns the in-memory dataset, including an explicit empty array.
899
- if (resolvedDataMode === 'frontend' && Array.isArray(dataValue)) {
900
- this.grid.setData(dataValue);
901
- }
902
- // Install plugins
903
- const pluginList = this.plugins();
904
- for (const plugin of pluginList) {
905
- this.grid.usePlugin(plugin);
906
- }
907
- this.grid.render();
908
- this.gridReady = true;
909
- }
910
- getOptionalOptions() {
911
- const opts = {};
912
- const enSel = this.enableSelection();
913
- const enMulti = this.enableMultiSelection();
914
- const selType = this.selectionType();
915
- const enKb = this.enableKeyboardNavigation();
916
- const enA11y = this.enableA11y();
917
- const enPool = this.enableCellPooling();
918
- const enResize = this.enableColumnResize();
919
- const enDrag = this.enableColumnDrag();
920
- const dMode = this.getConfiguredDataMode();
921
- const dReq = this.onDataRequest();
922
- const loadMore = this.onLoadMoreRows();
923
- const pag = this.pagination();
924
- const load = this.loading();
925
- const infScroll = this.infiniteScrolling();
926
- const rhMode = this.rowHeightMode();
927
- const rhConfig = this.rowHeightConfig();
928
- const colResizeConf = this.columnResize();
929
- const colDragConf = this.columnDrag();
930
- const overflow = this.cellOverflow();
931
- const autoRes = this.autoResize();
932
- const oRows = this.overscanRows();
933
- const oCols = this.overscanCols();
934
- const sIcons = this.sortIcons();
935
- const rCache = this.rendererCache();
936
- const onScrollCb = this.onScrollCallback();
937
- const onCellClickCb = this.onCellClickCallback();
938
- const onCellDblClickCb = this.onCellDoubleClickCallback();
939
- const onCellCtxCb = this.onCellContextMenuCallback();
940
- const onSelChangeCb = this.onSelectionChangeCallback();
941
- const onPageChangeCb = this.onPageChangeCallback();
942
- const onColWidthsCb = this.onColumnWidthsChangeCallback();
943
- if (enSel !== undefined)
944
- opts.enableSelection = enSel;
945
- if (enMulti !== undefined)
946
- opts.enableMultiSelection = enMulti;
947
- if (selType !== undefined)
948
- opts.selectionType = selType;
949
- if (enKb !== undefined)
950
- opts.enableKeyboardNavigation = enKb;
951
- if (enA11y !== undefined)
952
- opts.enableA11y = enA11y;
953
- if (enPool !== undefined)
954
- opts.enableCellPooling = enPool;
955
- if (enResize !== undefined)
956
- opts.enableColumnResize = enResize;
957
- if (enDrag !== undefined)
958
- opts.enableColumnDrag = enDrag;
959
- if (dMode !== undefined)
960
- opts.dataMode = dMode;
961
- if (dReq !== undefined)
962
- opts.onDataRequest = dReq;
963
- if (loadMore !== undefined)
964
- opts.onLoadMoreRows = loadMore;
965
- if (pag !== undefined)
966
- opts.pagination = pag;
967
- if (load !== undefined)
968
- opts.loading = load;
969
- if (infScroll !== undefined)
970
- opts.infiniteScrolling = infScroll;
971
- if (rhMode !== undefined)
972
- opts.rowHeightMode = rhMode;
973
- if (rhConfig !== undefined)
974
- opts.rowHeightConfig = rhConfig;
975
- if (colResizeConf !== undefined)
976
- opts.columnResize = colResizeConf;
977
- if (colDragConf !== undefined)
978
- opts.columnDrag = colDragConf;
979
- if (overflow !== undefined)
980
- opts.cellOverflow = overflow;
981
- if (autoRes !== undefined)
982
- opts.autoResize = autoRes;
983
- if (oRows !== undefined)
984
- opts.overscanRows = oRows;
985
- if (oCols !== undefined)
986
- opts.overscanCols = oCols;
987
- if (sIcons !== undefined)
988
- opts.sortIcons = sIcons;
989
- if (rCache !== undefined)
990
- opts.rendererCache = rCache;
991
- if (onScrollCb !== undefined)
992
- opts.onScroll = onScrollCb;
993
- if (onCellClickCb !== undefined)
994
- opts.onCellClick = onCellClickCb;
995
- if (onCellDblClickCb !== undefined)
996
- opts.onCellDoubleClick = onCellDblClickCb;
997
- if (onCellCtxCb !== undefined)
998
- opts.onCellContextMenu = onCellCtxCb;
999
- if (onSelChangeCb !== undefined)
1000
- opts.onSelectionChange = onSelChangeCb;
1001
- if (onPageChangeCb !== undefined)
1002
- opts.onPageChange = onPageChangeCb;
1003
- if (onColWidthsCb !== undefined)
1004
- opts.onColumnWidthsChange = onColWidthsCb;
1005
- return opts;
1006
- }
1007
- wireEvents() {
1008
- if (!this.grid)
1009
- return;
1010
- for (const [gridEvent, outputName] of Object.entries(EVENT_MAP)) {
1011
- const outputRef = this.outputMap[outputName];
1012
- if (!outputRef)
1013
- continue;
1014
- const handler = (payload) => {
1015
- this.ngZone.run(() => {
1016
- outputRef.emit(payload);
1017
- // Update two-way model signals for specific events
1018
- if (gridEvent === 'selection:change' && payload?.ranges) {
1019
- this.selection.set(payload.ranges);
1020
- }
1021
- else if (gridEvent === 'sort:change' && payload?.sortState) {
1022
- this.sortState.set(payload.sortState);
1023
- }
1024
- else if (gridEvent === 'filter:change' && payload?.filterState) {
1025
- this.filterState.set(payload.filterState);
1026
- }
1027
- else if (gridEvent === 'data:change') {
1028
- // data:change doesn't carry full data, skip model update
1029
- }
1030
- this.cdr.markForCheck();
1031
- });
1032
- };
1033
- this.grid.on(gridEvent, handler);
1034
- this.eventHandlers.push({ event: gridEvent, handler });
1035
- }
1036
- }
1037
- // --- Public API Methods ---
1038
- get gridInstance() {
1039
- return this.grid;
1040
- }
1041
- render() {
1042
- this.grid?.render();
1043
- }
1044
- refresh() {
1045
- this.grid?.refresh();
1046
- }
1047
- clearCache() {
1048
- this.grid?.clearCache();
1049
- }
1050
- updateCells(cells) {
1051
- this.grid?.updateCells(cells);
1052
- }
1053
- setData(data) {
1054
- if (this.getResolvedDataMode() === 'frontend') {
1055
- if (this.grid) {
1056
- this.pendingModelDataSync = data;
1057
- this.grid.setData(data);
1058
- }
1059
- }
1060
- this.data.set(data);
1061
- }
1062
- getData(row, col) {
1063
- return this.grid?.getData(row, col);
1064
- }
1065
- // --- Sort API ---
1066
- sortColumn(column, direction = 'asc') {
1067
- if (direction === null)
1068
- this.grid?.sort.clear();
1069
- else
1070
- this.grid?.sort.apply([{ column, direction }]);
1071
- }
1072
- toggleSort(column) {
1073
- this.grid?.sort.toggle(column);
1074
- }
1075
- getSortState() {
1076
- return this.grid?.sort.getState() ?? [];
1077
- }
1078
- clearSort() {
1079
- this.grid?.sort.clear();
1080
- }
1081
- setSortState(sortState) {
1082
- this.grid?.sort.setState(sortState);
1083
- }
1084
- // --- Filter API ---
1085
- setFilter(column, operator, value) {
1086
- this.grid?.filter.set(column, operator, value);
1087
- }
1088
- setColumnFilter(column, conditions, logic = 'AND') {
1089
- this.grid?.filter.setColumn(column, conditions, logic);
1090
- }
1091
- getFilterState() {
1092
- return this.grid?.filter.getState() ?? [];
1093
- }
1094
- setFilterState(models) {
1095
- this.grid?.filter.setState(models);
1096
- }
1097
- clearFilters() {
1098
- this.grid?.filter.clear();
1099
- }
1100
- clearColumnFilter(column) {
1101
- this.grid?.filter.clearColumn(column);
1102
- }
1103
- setQuickFilter(query, columns) {
1104
- this.grid?.filter.setQuick(query, columns);
1105
- }
1106
- clearQuickFilter() {
1107
- this.grid?.filter.clearQuick();
1108
- }
1109
- // --- Export API ---
1110
- exportCSV(options = {}) {
1111
- return this.grid?.export.csv(options) ?? '';
1112
- }
1113
- exportTSV(options = {}) {
1114
- return this.grid?.export.tsv(options) ?? '';
1115
- }
1116
- // --- Pagination API ---
1117
- goToPage(page) {
1118
- this.grid?.pagination.goTo(page);
1119
- this.currentPage.set(page);
1120
- }
1121
- nextPage() {
1122
- this.grid?.pagination.next();
1123
- this.currentPage.set(this.grid?.pagination.getCurrentPage() ?? 1);
1124
- }
1125
- previousPage() {
1126
- this.grid?.pagination.previous();
1127
- this.currentPage.set(this.grid?.pagination.getCurrentPage() ?? 1);
1128
- }
1129
- setPageSize(pageSize) {
1130
- this.grid?.pagination.setPageSize(pageSize);
1131
- }
1132
- getCurrentPage() {
1133
- return this.grid?.pagination.getCurrentPage() ?? 1;
1134
- }
1135
- getPageSize() {
1136
- return this.grid?.pagination.getPageSize() ?? 0;
1137
- }
1138
- getTotalPages() {
1139
- return this.grid?.pagination.getTotalPages() ?? 0;
1140
- }
1141
- // --- Column API ---
1142
- resizeColumn(col, width) {
1143
- this.grid?.resizeColumn(col, width);
1144
- }
1145
- autoFitColumn(col) {
1146
- this.grid?.autoFitColumn(col);
1147
- }
1148
- autoFitAllColumns() {
1149
- this.grid?.autoFitAllColumns();
1150
- }
1151
- setColumnConstraints(col, constraints) {
1152
- this.grid?.setColumnConstraints(col, constraints);
1153
- }
1154
- // --- State Persistence API ---
1155
- getColumnState() {
1156
- return this.grid?.getColumnState() ?? [];
1157
- }
1158
- applyColumnState(state, options) {
1159
- this.grid?.applyColumnState(state, options);
1160
- }
1161
- getStateSnapshot() {
1162
- return this.grid?.getStateSnapshot() ?? null;
1163
- }
1164
- applyStateSnapshot(snapshot) {
1165
- this.grid?.applyStateSnapshot(snapshot);
1166
- }
1167
- // --- Scroll API ---
1168
- scrollToCell(row, col) {
1169
- this.grid?.scrollToCell(row, col);
1170
- }
1171
- getScrollPosition() {
1172
- return this.grid?.getScrollPosition() ?? { top: 0, left: 0 };
1173
- }
1174
- getVisibleRange() {
1175
- return this.grid?.getVisibleRange() ?? null;
1176
- }
1177
- // --- Header API ---
1178
- registerHeaderRenderer(name, renderer) {
1179
- this.grid?.registerHeaderRenderer(name, renderer);
1180
- }
1181
- updateHeader(columnIndex) {
1182
- this.grid?.updateHeader(columnIndex);
1183
- }
1184
- updateAllHeaders() {
1185
- this.grid?.updateAllHeaders();
1186
- }
1187
- // --- Plugin API ---
1188
- usePlugin(plugin) {
1189
- this.grid?.usePlugin(plugin);
1190
- }
1191
- // --- Stats ---
1192
- getStats() {
1193
- return this.grid?.getStats();
1194
- }
1195
- getDimensions() {
1196
- return this.grid?.getDimensions() ?? { width: 0, height: 0 };
1197
- }
1198
- getColumnPosition(col) {
1199
- return this.grid?.getColumnPosition(col) ?? { x: 0, width: 0 };
1200
- }
1201
- // --- Data Mode ---
1202
- getDataMode() {
1203
- return this.grid?.getDataMode() ?? 'frontend';
1204
- }
1205
- // --- Sort (missing methods) ---
1206
- getColumnSort(column) {
1207
- return this.grid?.getColumnSort(column);
1208
- }
1209
- getSortIcons() {
1210
- return this.grid?.getSortIcons() ?? { asc: '▲', desc: '▼' };
1211
- }
1212
- getSortMode() {
1213
- return this.grid?.getSortMode() ?? 'frontend';
1214
- }
1215
- // --- Filter (missing methods) ---
1216
- getFieldFilterState() {
1217
- return this.grid?.getFieldFilterState();
1218
- }
1219
- getFilterExports() {
1220
- return this.grid?.getFilterExports();
1221
- }
1222
- getFilterMode() {
1223
- return this.grid?.getFilterMode() ?? 'frontend';
1224
- }
1225
- getQuickFilter() {
1226
- return this.grid?.getQuickFilter() ?? { query: '', columns: null };
1227
- }
1228
- // --- Pagination (missing methods) ---
1229
- firstPage() {
1230
- this.grid?.firstPage();
1231
- this.currentPage.set(this.grid?.getCurrentPage() ?? 1);
1232
- }
1233
- lastPage() {
1234
- this.grid?.lastPage();
1235
- this.currentPage.set(this.grid?.getCurrentPage() ?? 1);
1236
- }
1237
- // --- Scroll (missing methods) ---
1238
- scrollThroughCells(cells, options) {
1239
- return this.grid?.scrollThroughCells(cells, options) ?? {
1240
- promise: Promise.resolve(),
1241
- abort: () => { },
1242
- };
1243
- }
1244
- // --- Column Resize/Drag (missing methods) ---
1245
- attachColumnResize(headerElement) {
1246
- this.grid?.attachColumnResize(headerElement);
1247
- }
1248
- detachColumnResize() {
1249
- this.grid?.detachColumnResize();
1250
- }
1251
- updateColumnResizeHandles() {
1252
- this.grid?.updateColumnResizeHandles();
1253
- }
1254
- attachColumnDrag(headerElement) {
1255
- this.grid?.attachColumnDrag(headerElement);
1256
- }
1257
- detachColumnDrag() {
1258
- this.grid?.detachColumnDrag();
1259
- }
1260
- isDragging() {
1261
- return this.grid?.isDragging() ?? false;
1262
- }
1263
- // --- Renderer Registration ---
1264
- registerRenderer(name, renderer) {
1265
- this.grid?.registerRenderer(name, renderer);
1266
- }
1267
- // --- Options Update ---
1268
- updateOptions(options) {
1269
- this.grid?.updateOptions(options);
1270
- }
1271
- // --- Header (missing methods) ---
1272
- refreshHeaders() {
1273
- this.grid?.refreshHeaders();
1274
- }
1275
- // --- Infinite Scroll ---
1276
- resetInfiniteScrolling() {
1277
- this.grid?.resetInfiniteScrolling();
1278
- }
1279
- getSlidingWindowStats() {
1280
- return this.grid?.getSlidingWindowStats();
1281
- }
1282
- // --- Plugin System (advanced) ---
1283
- getStore() {
1284
- return this.grid?.getStore();
1285
- }
1286
- getPluginHost() {
1287
- return this.grid?.getPluginHost() ?? null;
1288
- }
1289
- getGridApi() {
1290
- return this.grid?.getGridApi() ?? null;
1291
- }
1292
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1293
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ZenGridComponent, isStandalone: true, selector: "zen-grid", inputs: { rowCount: { classPropertyName: "rowCount", publicName: "rowCount", isSignal: true, isRequired: true, transformFunction: null }, colCount: { classPropertyName: "colCount", publicName: "colCount", isSignal: true, isRequired: true, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, colWidth: { classPropertyName: "colWidth", publicName: "colWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, enableSelection: { classPropertyName: "enableSelection", publicName: "enableSelection", isSignal: true, isRequired: false, transformFunction: null }, enableMultiSelection: { classPropertyName: "enableMultiSelection", publicName: "enableMultiSelection", isSignal: true, isRequired: false, transformFunction: null }, selectionType: { classPropertyName: "selectionType", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, enableColumnResize: { classPropertyName: "enableColumnResize", publicName: "enableColumnResize", isSignal: true, isRequired: false, transformFunction: null }, enableColumnDrag: { classPropertyName: "enableColumnDrag", publicName: "enableColumnDrag", isSignal: true, isRequired: false, transformFunction: null }, enableKeyboardNavigation: { classPropertyName: "enableKeyboardNavigation", publicName: "enableKeyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, enableA11y: { classPropertyName: "enableA11y", publicName: "enableA11y", isSignal: true, isRequired: false, transformFunction: null }, enableCellPooling: { classPropertyName: "enableCellPooling", publicName: "enableCellPooling", isSignal: true, isRequired: false, transformFunction: null }, dataMode: { classPropertyName: "dataMode", publicName: "dataMode", isSignal: true, isRequired: false, transformFunction: null }, onDataRequest: { classPropertyName: "onDataRequest", publicName: "onDataRequest", isSignal: true, isRequired: false, transformFunction: null }, onLoadMoreRows: { classPropertyName: "onLoadMoreRows", publicName: "onLoadMoreRows", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, infiniteScrolling: { classPropertyName: "infiniteScrolling", publicName: "infiniteScrolling", isSignal: true, isRequired: false, transformFunction: null }, rowHeightMode: { classPropertyName: "rowHeightMode", publicName: "rowHeightMode", isSignal: true, isRequired: false, transformFunction: null }, rowHeightConfig: { classPropertyName: "rowHeightConfig", publicName: "rowHeightConfig", isSignal: true, isRequired: false, transformFunction: null }, columnResize: { classPropertyName: "columnResize", publicName: "columnResize", isSignal: true, isRequired: false, transformFunction: null }, columnDrag: { classPropertyName: "columnDrag", publicName: "columnDrag", isSignal: true, isRequired: false, transformFunction: null }, cellOverflow: { classPropertyName: "cellOverflow", publicName: "cellOverflow", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, overscanRows: { classPropertyName: "overscanRows", publicName: "overscanRows", isSignal: true, isRequired: false, transformFunction: null }, overscanCols: { classPropertyName: "overscanCols", publicName: "overscanCols", isSignal: true, isRequired: false, transformFunction: null }, sortIcons: { classPropertyName: "sortIcons", publicName: "sortIcons", isSignal: true, isRequired: false, transformFunction: null }, rendererCache: { classPropertyName: "rendererCache", publicName: "rendererCache", isSignal: true, isRequired: false, transformFunction: null }, onScrollCallback: { classPropertyName: "onScrollCallback", publicName: "onScrollCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellClickCallback: { classPropertyName: "onCellClickCallback", publicName: "onCellClickCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellDoubleClickCallback: { classPropertyName: "onCellDoubleClickCallback", publicName: "onCellDoubleClickCallback", isSignal: true, isRequired: false, transformFunction: null }, onCellContextMenuCallback: { classPropertyName: "onCellContextMenuCallback", publicName: "onCellContextMenuCallback", isSignal: true, isRequired: false, transformFunction: null }, onSelectionChangeCallback: { classPropertyName: "onSelectionChangeCallback", publicName: "onSelectionChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, onPageChangeCallback: { classPropertyName: "onPageChangeCallback", publicName: "onPageChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, onColumnWidthsChangeCallback: { classPropertyName: "onColumnWidthsChangeCallback", publicName: "onColumnWidthsChangeCallback", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, sortState: { classPropertyName: "sortState", publicName: "sortState", isSignal: true, isRequired: false, transformFunction: null }, filterState: { classPropertyName: "filterState", publicName: "filterState", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", selection: "selectionChange", sortState: "sortStateChange", filterState: "filterStateChange", currentPage: "currentPageChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellContextMenu: "cellContextMenu", cellChange: "cellChange", cellBeforeChange: "cellBeforeChange", cellAfterChange: "cellAfterChange", selectionChangeEvent: "selectionChanged", selectionStart: "selectionStart", selectionEnd: "selectionEnd", editStart: "editStart", editEnd: "editEnd", editCommit: "editCommit", editCancel: "editCancel", scroll: "scroll", scrollStart: "scrollStart", scrollEnd: "scrollEnd", sortChange: "sortChange", sortBeforeSort: "sortBeforeSort", sortAfterSort: "sortAfterSort", filterChange: "filterChange", filterBeforeFilter: "filterBeforeFilter", filterAfterFilter: "filterAfterFilter", filterExport: "filterExport", filterStart: "filterStart", filterEnd: "filterEnd", filterError: "filterError", filterClear: "filterClear", focusChange: "focusChange", focusIn: "focusIn", focusOut: "focusOut", keyDown: "keyDown", keyUp: "keyUp", keyPress: "keyPress", columnResizeEvent: "columnResize", columnMove: "columnMove", columnHide: "columnHide", columnShow: "columnShow", columnDragStart: "columnDragStart", columnDragEvent: "columnDrag", columnDragEnd: "columnDragEnd", columnDragCancel: "columnDragCancel", headerClick: "headerClick", headerDoubleClick: "headerDoubleClick", headerContextMenu: "headerContextMenu", headerHover: "headerHover", headerSortClick: "headerSortClick", headerFilterClick: "headerFilterClick", headerCheckboxChange: "headerCheckboxChange", renderStart: "renderStart", renderEnd: "renderEnd", dataLoad: "dataLoad", dataChange: "dataChange", loadingStart: "loadingStart", loadingEnd: "loadingEnd", loadingProgress: "loadingProgress", undoRedoChange: "undoRedoChange", gridDestroy: "gridDestroy", gridError: "gridError", gridWarning: "gridWarning", rowInsert: "rowInsert", rowDelete: "rowDelete", rowMove: "rowMove", copy: "copy", cut: "cut", paste: "paste" }, queries: [{ propertyName: "columnChildren", predicate: ZenColumnComponent, isSignal: true }], viewQueries: [{ propertyName: "gridContainerRef", first: true, predicate: ["gridContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
1294
- @if (_isBrowser) {
1295
- <div #gridContainer class="zen-grid-container"></div>
1296
- } @else {
1297
- <div class="zen-grid-placeholder" [style.height.px]="placeholderHeight"></div>
1298
- }
1299
- <div style="display:none">
1300
- <ng-content></ng-content>
1301
- </div>
1302
- `, isInline: true, styles: [":host{display:block;position:relative;height:100%}.zen-grid-container{width:100%;height:100%}.zen-grid-placeholder{width:100%;background:#f5f5f5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1303
- }
1304
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenGridComponent, decorators: [{
1305
- type: Component,
1306
- args: [{ selector: 'zen-grid', standalone: true, template: `
1307
- @if (_isBrowser) {
1308
- <div #gridContainer class="zen-grid-container"></div>
1309
- } @else {
1310
- <div class="zen-grid-placeholder" [style.height.px]="placeholderHeight"></div>
1311
- }
1312
- <div style="display:none">
1313
- <ng-content></ng-content>
1314
- </div>
1315
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;position:relative;height:100%}.zen-grid-container{width:100%;height:100%}.zen-grid-placeholder{width:100%;background:#f5f5f5}\n"] }]
1316
- }], ctorParameters: () => [], propDecorators: { gridContainerRef: [{ type: i0.ViewChild, args: ['gridContainer', { isSignal: true }] }], columnChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZenColumnComponent), { isSignal: true }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: true }] }], colCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "colCount", required: true }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], colWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "colWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], enableSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSelection", required: false }] }], enableMultiSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMultiSelection", required: false }] }], selectionType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionType", required: false }] }], enableColumnResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnResize", required: false }] }], enableColumnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnDrag", required: false }] }], enableKeyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableKeyboardNavigation", required: false }] }], enableA11y: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableA11y", required: false }] }], enableCellPooling: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCellPooling", required: false }] }], dataMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataMode", required: false }] }], onDataRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "onDataRequest", required: false }] }], onLoadMoreRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMoreRows", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], infiniteScrolling: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScrolling", required: false }] }], rowHeightMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeightMode", required: false }] }], rowHeightConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeightConfig", required: false }] }], columnResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnResize", required: false }] }], columnDrag: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDrag", required: false }] }], cellOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellOverflow", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], overscanRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscanRows", required: false }] }], overscanCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscanCols", required: false }] }], sortIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortIcons", required: false }] }], rendererCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererCache", required: false }] }], onScrollCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onScrollCallback", required: false }] }], onCellClickCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellClickCallback", required: false }] }], onCellDoubleClickCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellDoubleClickCallback", required: false }] }], onCellContextMenuCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onCellContextMenuCallback", required: false }] }], onSelectionChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onSelectionChangeCallback", required: false }] }], onPageChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onPageChangeCallback", required: false }] }], onColumnWidthsChangeCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "onColumnWidthsChangeCallback", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], sortState: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortState", required: false }] }, { type: i0.Output, args: ["sortStateChange"] }], filterState: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterState", required: false }] }, { type: i0.Output, args: ["filterStateChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellDoubleClick: [{ type: i0.Output, args: ["cellDoubleClick"] }], cellContextMenu: [{ type: i0.Output, args: ["cellContextMenu"] }], cellChange: [{ type: i0.Output, args: ["cellChange"] }], cellBeforeChange: [{ type: i0.Output, args: ["cellBeforeChange"] }], cellAfterChange: [{ type: i0.Output, args: ["cellAfterChange"] }], selectionChangeEvent: [{ type: i0.Output, args: ["selectionChanged"] }], selectionStart: [{ type: i0.Output, args: ["selectionStart"] }], selectionEnd: [{ type: i0.Output, args: ["selectionEnd"] }], editStart: [{ type: i0.Output, args: ["editStart"] }], editEnd: [{ type: i0.Output, args: ["editEnd"] }], editCommit: [{ type: i0.Output, args: ["editCommit"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], scroll: [{ type: i0.Output, args: ["scroll"] }], scrollStart: [{ type: i0.Output, args: ["scrollStart"] }], scrollEnd: [{ type: i0.Output, args: ["scrollEnd"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], sortBeforeSort: [{ type: i0.Output, args: ["sortBeforeSort"] }], sortAfterSort: [{ type: i0.Output, args: ["sortAfterSort"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterBeforeFilter: [{ type: i0.Output, args: ["filterBeforeFilter"] }], filterAfterFilter: [{ type: i0.Output, args: ["filterAfterFilter"] }], filterExport: [{ type: i0.Output, args: ["filterExport"] }], filterStart: [{ type: i0.Output, args: ["filterStart"] }], filterEnd: [{ type: i0.Output, args: ["filterEnd"] }], filterError: [{ type: i0.Output, args: ["filterError"] }], filterClear: [{ type: i0.Output, args: ["filterClear"] }], focusChange: [{ type: i0.Output, args: ["focusChange"] }], focusIn: [{ type: i0.Output, args: ["focusIn"] }], focusOut: [{ type: i0.Output, args: ["focusOut"] }], keyDown: [{ type: i0.Output, args: ["keyDown"] }], keyUp: [{ type: i0.Output, args: ["keyUp"] }], keyPress: [{ type: i0.Output, args: ["keyPress"] }], columnResizeEvent: [{ type: i0.Output, args: ["columnResize"] }], columnMove: [{ type: i0.Output, args: ["columnMove"] }], columnHide: [{ type: i0.Output, args: ["columnHide"] }], columnShow: [{ type: i0.Output, args: ["columnShow"] }], columnDragStart: [{ type: i0.Output, args: ["columnDragStart"] }], columnDragEvent: [{ type: i0.Output, args: ["columnDrag"] }], columnDragEnd: [{ type: i0.Output, args: ["columnDragEnd"] }], columnDragCancel: [{ type: i0.Output, args: ["columnDragCancel"] }], headerClick: [{ type: i0.Output, args: ["headerClick"] }], headerDoubleClick: [{ type: i0.Output, args: ["headerDoubleClick"] }], headerContextMenu: [{ type: i0.Output, args: ["headerContextMenu"] }], headerHover: [{ type: i0.Output, args: ["headerHover"] }], headerSortClick: [{ type: i0.Output, args: ["headerSortClick"] }], headerFilterClick: [{ type: i0.Output, args: ["headerFilterClick"] }], headerCheckboxChange: [{ type: i0.Output, args: ["headerCheckboxChange"] }], renderStart: [{ type: i0.Output, args: ["renderStart"] }], renderEnd: [{ type: i0.Output, args: ["renderEnd"] }], dataLoad: [{ type: i0.Output, args: ["dataLoad"] }], dataChange: [{ type: i0.Output, args: ["dataChange"] }], loadingStart: [{ type: i0.Output, args: ["loadingStart"] }], loadingEnd: [{ type: i0.Output, args: ["loadingEnd"] }], loadingProgress: [{ type: i0.Output, args: ["loadingProgress"] }], undoRedoChange: [{ type: i0.Output, args: ["undoRedoChange"] }], gridDestroy: [{ type: i0.Output, args: ["gridDestroy"] }], gridError: [{ type: i0.Output, args: ["gridError"] }], gridWarning: [{ type: i0.Output, args: ["gridWarning"] }], rowInsert: [{ type: i0.Output, args: ["rowInsert"] }], rowDelete: [{ type: i0.Output, args: ["rowDelete"] }], rowMove: [{ type: i0.Output, args: ["rowMove"] }], copy: [{ type: i0.Output, args: ["copy"] }], cut: [{ type: i0.Output, args: ["cut"] }], paste: [{ type: i0.Output, args: ["paste"] }] } });
1317
-
1318
- class ZenGridValueAccessorDirective {
1319
- constructor() {
1320
- this.grid = inject(ZenGridComponent);
1321
- this.onChange = () => { };
1322
- this.onTouched = () => { };
1323
- this.grid.dataChange.subscribe(() => {
1324
- this.onChange(this.grid.data());
1325
- this.onTouched();
1326
- });
1327
- }
1328
- writeValue(value) {
1329
- if (value) {
1330
- this.grid.setData(value);
1331
- }
1332
- }
1333
- registerOnChange(fn) {
1334
- this.onChange = fn;
1335
- }
1336
- registerOnTouched(fn) {
1337
- this.onTouched = fn;
1338
- }
1339
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenGridValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
1340
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: ZenGridValueAccessorDirective, isStandalone: true, selector: "zen-grid[formControl],zen-grid[formControlName],zen-grid[ngModel]", providers: [
1341
- {
1342
- provide: NG_VALUE_ACCESSOR,
1343
- useExisting: forwardRef(() => ZenGridValueAccessorDirective),
1344
- multi: true,
1345
- },
1346
- ], ngImport: i0 }); }
1347
- }
1348
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ZenGridValueAccessorDirective, decorators: [{
1349
- type: Directive,
1350
- args: [{
1351
- selector: 'zen-grid[formControl],zen-grid[formControlName],zen-grid[ngModel]',
1352
- standalone: true,
1353
- providers: [
1354
- {
1355
- provide: NG_VALUE_ACCESSOR,
1356
- useExisting: forwardRef(() => ZenGridValueAccessorDirective),
1357
- multi: true,
1358
- },
1359
- ],
1360
- }]
1361
- }], ctorParameters: () => [] });
1362
-
1363
- class AngularPluginWrapper {
1364
- constructor(injector, pluginFactory) {
1365
- this.injector = injector;
1366
- this.pluginFactory = pluginFactory;
1367
- const plugin = this.pluginFactory(this.injector);
1368
- this.name = plugin.name;
1369
- this.phase = plugin.phase;
1370
- this.dependencies = plugin.dependencies;
1371
- }
1372
- setup(store, api, context) {
1373
- const plugin = this.pluginFactory(this.injector);
1374
- return plugin.setup(store, api, context);
1375
- }
1376
- dispose() {
1377
- // Plugin cleanup handled by PluginHost
1378
- }
1379
- }
1380
- function createAngularPlugin(injector, factory) {
1381
- return new AngularPluginWrapper(injector, factory);
1382
- }
1383
-
1384
- function bridgeStoreSignal(store, key) {
1385
- const angularSignal = signal(store.get(key), ...(ngDevMode ? [{ debugName: "angularSignal" }] : /* istanbul ignore next */ []));
1386
- store.effect(`angular-bridge:${key}`, () => {
1387
- const value = store.get(key);
1388
- angularSignal.set(value);
1389
- }, 'angular-bridge');
1390
- return angularSignal.asReadonly();
1391
- }
1392
-
1393
- // Components
1394
-
1395
- /**
1396
- * Generated bundle index. Do not edit.
1397
- */
1398
-
1399
- export { AngularPluginWrapper, EVENT_MAP, TemplateBridgeService, ZEN_GRID_CONFIG, ZenCellTemplateDirective, ZenColumnComponent, ZenEditorTemplateDirective, ZenGridComponent, ZenGridValueAccessorDirective, ZenHeaderTemplateDirective, bridgeStoreSignal, createAngularPlugin, provideZenGrid };
1400
- //# sourceMappingURL=zengrid-angular.mjs.map