@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.
- package/ng-package.json +11 -0
- package/package.json +8 -16
- package/project.json +22 -0
- package/src/lib/components/zen-column.component.ts +105 -0
- package/src/lib/components/zen-grid.component.ts +971 -0
- package/src/lib/directives/zen-cell-template.directive.ts +10 -0
- package/src/lib/directives/zen-editor-template.directive.ts +10 -0
- package/src/lib/directives/zen-grid-value-accessor.directive.ts +41 -0
- package/src/lib/directives/zen-header-template.directive.ts +10 -0
- package/src/lib/plugins/angular-plugin-wrapper.ts +40 -0
- package/src/lib/services/template-bridge.service.ts +341 -0
- package/src/lib/services/zen-grid-config.token.ts +11 -0
- package/src/lib/types.ts +107 -0
- package/src/lib/utils/event-map.ts +98 -0
- package/src/lib/utils/signal-bridge.ts +17 -0
- package/src/lib/utils/ssr-guard.ts +7 -0
- package/src/public-api.ts +389 -0
- package/tsconfig.lib.json +31 -0
- package/tsconfig.lib.prod.json +13 -0
- package/fesm2022/zengrid-angular.mjs +0 -1400
- package/fesm2022/zengrid-angular.mjs.map +0 -1
- package/types/zengrid-angular.d.ts +0 -646
|
@@ -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
|