@memberjunction/ng-query-viewer 5.11.0 → 5.12.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/dist/lib/query-data-grid/query-data-grid.component.d.ts +15 -3
- package/dist/lib/query-data-grid/query-data-grid.component.d.ts.map +1 -1
- package/dist/lib/query-data-grid/query-data-grid.component.js +83 -34
- package/dist/lib/query-data-grid/query-data-grid.component.js.map +1 -1
- package/dist/lib/query-info-panel/query-info-panel.component.js +2 -2
- package/dist/lib/query-info-panel/query-info-panel.component.js.map +1 -1
- package/dist/lib/query-parameter-form/query-parameter-form.component.js +2 -2
- package/dist/lib/query-parameter-form/query-parameter-form.component.js.map +1 -1
- package/dist/lib/query-row-detail/query-row-detail.component.js +2 -2
- package/dist/lib/query-row-detail/query-row-detail.component.js.map +1 -1
- package/dist/lib/query-viewer/query-viewer.component.d.ts +13 -4
- package/dist/lib/query-viewer/query-viewer.component.d.ts.map +1 -1
- package/dist/lib/query-viewer/query-viewer.component.js +31 -8
- package/dist/lib/query-viewer/query-viewer.component.js.map +1 -1
- package/dist/lib/query-viewer.module.d.ts +5 -4
- package/dist/lib/query-viewer.module.d.ts.map +1 -1
- package/dist/lib/query-viewer.module.js +4 -0
- package/dist/lib/query-viewer.module.js.map +1 -1
- package/package.json +11 -10
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { EventEmitter, OnInit, OnDestroy, ChangeDetectorRef, ElementRef } from '@angular/core';
|
|
2
2
|
import { QueryInfo } from '@memberjunction/core';
|
|
3
|
-
import {
|
|
3
|
+
import { PageChangeEvent } from '@memberjunction/ng-pagination';
|
|
4
|
+
import { ColDef, GridReadyEvent, RowClickedEvent, GridApi, RowDoubleClickedEvent, RowSelectionOptions, GetRowIdParams, SortChangedEvent as AgSortChangedEvent, type Theme, ColumnResizedEvent, ColumnMovedEvent, SelectionChangedEvent, GridOptions } from 'ag-grid-community';
|
|
4
5
|
import { ExportService, ExportDialogConfig, ExportDialogResult } from '@memberjunction/ng-export-service';
|
|
5
6
|
import { ExportOptions, ExportResult } from '@memberjunction/export-engine';
|
|
6
7
|
import { QueryGridSelectionMode, QueryGridColumnConfig, QueryGridSortState, QueryGridState, QueryGridVisualConfig, QueryRowClickEvent, QueryEntityLinkClickEvent, QueryGridStateChangedEvent, QuerySelectionChangedEvent } from './models/query-grid-types';
|
|
@@ -133,12 +134,23 @@ export declare class QueryDataGridComponent implements OnInit, OnDestroy {
|
|
|
133
134
|
* Fired when refresh is requested
|
|
134
135
|
*/
|
|
135
136
|
RefreshRequest: EventEmitter<void>;
|
|
137
|
+
/**
|
|
138
|
+
* Total row count for server-side paging (from RunQueryResult.TotalRowCount).
|
|
139
|
+
* When > 0 and TotalPages > 1, the data pager is displayed below the grid.
|
|
140
|
+
*/
|
|
141
|
+
TotalRowCount: number;
|
|
142
|
+
/** Current page number (1-based) for server-side paging */
|
|
143
|
+
PageNumber: number;
|
|
144
|
+
/** Page size for server-side paging */
|
|
145
|
+
PageSize: number;
|
|
146
|
+
/** Fired when the user navigates to a different page */
|
|
147
|
+
PageChange: EventEmitter<PageChangeEvent>;
|
|
136
148
|
GridApi: GridApi | null;
|
|
137
149
|
ColumnDefs: ColDef[];
|
|
138
150
|
Columns: QueryGridColumnConfig[];
|
|
139
151
|
SortState: QueryGridSortState[];
|
|
140
152
|
SelectedRows: Record<string, unknown>[];
|
|
141
|
-
Theme:
|
|
153
|
+
Theme: Theme;
|
|
142
154
|
private destroy$;
|
|
143
155
|
private stateChangeSubject;
|
|
144
156
|
private statePersistSubject;
|
|
@@ -247,6 +259,6 @@ export declare class QueryDataGridComponent implements OnInit, OnDestroy {
|
|
|
247
259
|
*/
|
|
248
260
|
OnRowDetailEntityLinkClick(event: RowDetailEntityLinkEvent): void;
|
|
249
261
|
static ɵfac: i0.ɵɵFactoryDeclaration<QueryDataGridComponent, never>;
|
|
250
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<QueryDataGridComponent, "mj-query-data-grid", never, { "QueryInfo": { "alias": "QueryInfo"; "required": false; }; "ColumnConfigs": { "alias": "ColumnConfigs"; "required": false; }; "Data": { "alias": "Data"; "required": false; }; "SelectionMode": { "alias": "SelectionMode"; "required": false; }; "ShowToolbar": { "alias": "ShowToolbar"; "required": false; }; "ShowRowCount": { "alias": "ShowRowCount"; "required": false; }; "ShowSelectionCount": { "alias": "ShowSelectionCount"; "required": false; }; "ShowExport": { "alias": "ShowExport"; "required": false; }; "ShowRefresh": { "alias": "ShowRefresh"; "required": false; }; "AllowSorting": { "alias": "AllowSorting"; "required": false; }; "AllowColumnResize": { "alias": "AllowColumnResize"; "required": false; }; "AllowColumnReorder": { "alias": "AllowColumnReorder"; "required": false; }; "VisualConfig": { "alias": "VisualConfig"; "required": false; }; "IsLoading": { "alias": "IsLoading"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "InitialGridState": { "alias": "InitialGridState"; "required": false; }; "PersistState": { "alias": "PersistState"; "required": false; }; }, { "RowClick": "RowClick"; "RowDoubleClick": "RowDoubleClick"; "EntityLinkClick": "EntityLinkClick"; "SelectionChange": "SelectionChange"; "GridStateChange": "GridStateChange"; "RefreshRequest": "RefreshRequest"; }, never, never, false, never>;
|
|
262
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<QueryDataGridComponent, "mj-query-data-grid", never, { "QueryInfo": { "alias": "QueryInfo"; "required": false; }; "ColumnConfigs": { "alias": "ColumnConfigs"; "required": false; }; "Data": { "alias": "Data"; "required": false; }; "SelectionMode": { "alias": "SelectionMode"; "required": false; }; "ShowToolbar": { "alias": "ShowToolbar"; "required": false; }; "ShowRowCount": { "alias": "ShowRowCount"; "required": false; }; "ShowSelectionCount": { "alias": "ShowSelectionCount"; "required": false; }; "ShowExport": { "alias": "ShowExport"; "required": false; }; "ShowRefresh": { "alias": "ShowRefresh"; "required": false; }; "AllowSorting": { "alias": "AllowSorting"; "required": false; }; "AllowColumnResize": { "alias": "AllowColumnResize"; "required": false; }; "AllowColumnReorder": { "alias": "AllowColumnReorder"; "required": false; }; "VisualConfig": { "alias": "VisualConfig"; "required": false; }; "IsLoading": { "alias": "IsLoading"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "InitialGridState": { "alias": "InitialGridState"; "required": false; }; "PersistState": { "alias": "PersistState"; "required": false; }; "TotalRowCount": { "alias": "TotalRowCount"; "required": false; }; "PageNumber": { "alias": "PageNumber"; "required": false; }; "PageSize": { "alias": "PageSize"; "required": false; }; }, { "RowClick": "RowClick"; "RowDoubleClick": "RowDoubleClick"; "EntityLinkClick": "EntityLinkClick"; "SelectionChange": "SelectionChange"; "GridStateChange": "GridStateChange"; "RefreshRequest": "RefreshRequest"; "PageChange": "PageChange"; }, never, never, false, never>;
|
|
251
263
|
}
|
|
252
264
|
//# sourceMappingURL=query-data-grid.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"query-data-grid.component.d.ts","sourceRoot":"","sources":["../../../src/lib/query-data-grid/query-data-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EACZ,MAAM,EACN,SAAS,EACT,iBAAiB,EAEjB,UAAU,EAEb,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAsC,SAAS,EAAkB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"query-data-grid.component.d.ts","sourceRoot":"","sources":["../../../src/lib/query-data-grid/query-data-grid.component.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,10 +10,11 @@ import * as i1 from "@memberjunction/ng-export-service";
|
|
|
10
10
|
import * as i2 from "@angular/common";
|
|
11
11
|
import * as i3 from "ag-grid-angular";
|
|
12
12
|
import * as i4 from "@memberjunction/ng-shared-generic";
|
|
13
|
-
import * as i5 from "
|
|
13
|
+
import * as i5 from "@memberjunction/ng-pagination";
|
|
14
|
+
import * as i6 from "../query-row-detail/query-row-detail.component";
|
|
14
15
|
function QueryDataGridComponent_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
15
|
-
i0.ɵɵelementStart(0, "span",
|
|
16
|
-
i0.ɵɵelement(1, "i",
|
|
16
|
+
i0.ɵɵelementStart(0, "span", 10);
|
|
17
|
+
i0.ɵɵelement(1, "i", 15);
|
|
17
18
|
i0.ɵɵtext(2);
|
|
18
19
|
i0.ɵɵpipe(3, "number");
|
|
19
20
|
i0.ɵɵelementEnd();
|
|
@@ -24,12 +25,12 @@ function QueryDataGridComponent_Conditional_1_Conditional_2_Template(rf, ctx) {
|
|
|
24
25
|
} }
|
|
25
26
|
function QueryDataGridComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
26
27
|
const _r2 = i0.ɵɵgetCurrentView();
|
|
27
|
-
i0.ɵɵelementStart(0, "span",
|
|
28
|
-
i0.ɵɵelement(1, "i",
|
|
28
|
+
i0.ɵɵelementStart(0, "span", 11);
|
|
29
|
+
i0.ɵɵelement(1, "i", 16);
|
|
29
30
|
i0.ɵɵtext(2);
|
|
30
|
-
i0.ɵɵelementStart(3, "button",
|
|
31
|
+
i0.ɵɵelementStart(3, "button", 17);
|
|
31
32
|
i0.ɵɵlistener("click", function QueryDataGridComponent_Conditional_1_Conditional_3_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ClearSelection()); });
|
|
32
|
-
i0.ɵɵelement(4, "i",
|
|
33
|
+
i0.ɵɵelement(4, "i", 18);
|
|
33
34
|
i0.ɵɵelementEnd()();
|
|
34
35
|
} if (rf & 2) {
|
|
35
36
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -38,9 +39,9 @@ function QueryDataGridComponent_Conditional_1_Conditional_3_Template(rf, ctx) {
|
|
|
38
39
|
} }
|
|
39
40
|
function QueryDataGridComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
40
41
|
const _r3 = i0.ɵɵgetCurrentView();
|
|
41
|
-
i0.ɵɵelementStart(0, "button",
|
|
42
|
+
i0.ɵɵelementStart(0, "button", 19);
|
|
42
43
|
i0.ɵɵlistener("click", function QueryDataGridComponent_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.Refresh()); });
|
|
43
|
-
i0.ɵɵelement(1, "i",
|
|
44
|
+
i0.ɵɵelement(1, "i", 20);
|
|
44
45
|
i0.ɵɵelementEnd();
|
|
45
46
|
} if (rf & 2) {
|
|
46
47
|
const ctx_r0 = i0.ɵɵnextContext(2);
|
|
@@ -50,10 +51,10 @@ function QueryDataGridComponent_Conditional_1_Conditional_5_Template(rf, ctx) {
|
|
|
50
51
|
} }
|
|
51
52
|
function QueryDataGridComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
52
53
|
const _r4 = i0.ɵɵgetCurrentView();
|
|
53
|
-
i0.ɵɵelementStart(0, "button",
|
|
54
|
+
i0.ɵɵelementStart(0, "button", 21);
|
|
54
55
|
i0.ɵɵlistener("click", function QueryDataGridComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OpenExportDialog()); });
|
|
55
|
-
i0.ɵɵelement(1, "i",
|
|
56
|
-
i0.ɵɵelementStart(2, "span",
|
|
56
|
+
i0.ɵɵelement(1, "i", 22);
|
|
57
|
+
i0.ɵɵelementStart(2, "span", 23);
|
|
57
58
|
i0.ɵɵtext(3, "Export");
|
|
58
59
|
i0.ɵɵelementEnd()();
|
|
59
60
|
} if (rf & 2) {
|
|
@@ -61,13 +62,13 @@ function QueryDataGridComponent_Conditional_1_Conditional_6_Template(rf, ctx) {
|
|
|
61
62
|
i0.ɵɵproperty("disabled", ctx_r0.RowCount === 0);
|
|
62
63
|
} }
|
|
63
64
|
function QueryDataGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
64
|
-
i0.ɵɵelementStart(0, "div", 1)(1, "div",
|
|
65
|
-
i0.ɵɵconditionalCreate(2, QueryDataGridComponent_Conditional_1_Conditional_2_Template, 4, 4, "span",
|
|
66
|
-
i0.ɵɵconditionalCreate(3, QueryDataGridComponent_Conditional_1_Conditional_3_Template, 5, 1, "span",
|
|
65
|
+
i0.ɵɵelementStart(0, "div", 1)(1, "div", 9);
|
|
66
|
+
i0.ɵɵconditionalCreate(2, QueryDataGridComponent_Conditional_1_Conditional_2_Template, 4, 4, "span", 10);
|
|
67
|
+
i0.ɵɵconditionalCreate(3, QueryDataGridComponent_Conditional_1_Conditional_3_Template, 5, 1, "span", 11);
|
|
67
68
|
i0.ɵɵelementEnd();
|
|
68
|
-
i0.ɵɵelementStart(4, "div",
|
|
69
|
-
i0.ɵɵconditionalCreate(5, QueryDataGridComponent_Conditional_1_Conditional_5_Template, 2, 3, "button",
|
|
70
|
-
i0.ɵɵconditionalCreate(6, QueryDataGridComponent_Conditional_1_Conditional_6_Template, 4, 1, "button",
|
|
69
|
+
i0.ɵɵelementStart(4, "div", 12);
|
|
70
|
+
i0.ɵɵconditionalCreate(5, QueryDataGridComponent_Conditional_1_Conditional_5_Template, 2, 3, "button", 13);
|
|
71
|
+
i0.ɵɵconditionalCreate(6, QueryDataGridComponent_Conditional_1_Conditional_6_Template, 4, 1, "button", 14);
|
|
71
72
|
i0.ɵɵelementEnd()();
|
|
72
73
|
} if (rf & 2) {
|
|
73
74
|
const ctx_r0 = i0.ɵɵnextContext();
|
|
@@ -82,18 +83,27 @@ function QueryDataGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
82
83
|
} }
|
|
83
84
|
function QueryDataGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
84
85
|
i0.ɵɵelementStart(0, "div", 2);
|
|
85
|
-
i0.ɵɵelement(1, "mj-loading",
|
|
86
|
+
i0.ɵɵelement(1, "mj-loading", 24);
|
|
86
87
|
i0.ɵɵelementEnd();
|
|
87
88
|
} if (rf & 2) {
|
|
88
89
|
i0.ɵɵproperty("@fadeIn", undefined);
|
|
89
90
|
} }
|
|
90
91
|
function QueryDataGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
91
|
-
i0.ɵɵ
|
|
92
|
-
i0.ɵɵ
|
|
93
|
-
i0.ɵɵ
|
|
92
|
+
const _r5 = i0.ɵɵgetCurrentView();
|
|
93
|
+
i0.ɵɵelementStart(0, "mj-pagination", 25);
|
|
94
|
+
i0.ɵɵlistener("PageChange", function QueryDataGridComponent_Conditional_5_Template_mj_pagination_PageChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.PageChange.emit($event)); });
|
|
95
|
+
i0.ɵɵelementEnd();
|
|
96
|
+
} if (rf & 2) {
|
|
97
|
+
const ctx_r0 = i0.ɵɵnextContext();
|
|
98
|
+
i0.ɵɵproperty("TotalRowCount", ctx_r0.TotalRowCount)("PageNumber", ctx_r0.PageNumber)("PageSize", ctx_r0.PageSize)("IsLoading", ctx_r0.IsLoading);
|
|
99
|
+
} }
|
|
100
|
+
function QueryDataGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
101
|
+
i0.ɵɵelementStart(0, "div", 6);
|
|
102
|
+
i0.ɵɵelement(1, "i", 26);
|
|
103
|
+
i0.ɵɵelementStart(2, "p", 27);
|
|
94
104
|
i0.ɵɵtext(3, "No results");
|
|
95
105
|
i0.ɵɵelementEnd();
|
|
96
|
-
i0.ɵɵelementStart(4, "p",
|
|
106
|
+
i0.ɵɵelementStart(4, "p", 28);
|
|
97
107
|
i0.ɵɵtext(5, "Run the query to see results");
|
|
98
108
|
i0.ɵɵelementEnd()();
|
|
99
109
|
} if (rf & 2) {
|
|
@@ -268,6 +278,17 @@ export class QueryDataGridComponent {
|
|
|
268
278
|
* Fired when refresh is requested
|
|
269
279
|
*/
|
|
270
280
|
RefreshRequest = new EventEmitter();
|
|
281
|
+
/**
|
|
282
|
+
* Total row count for server-side paging (from RunQueryResult.TotalRowCount).
|
|
283
|
+
* When > 0 and TotalPages > 1, the data pager is displayed below the grid.
|
|
284
|
+
*/
|
|
285
|
+
TotalRowCount = 0;
|
|
286
|
+
/** Current page number (1-based) for server-side paging */
|
|
287
|
+
PageNumber = 1;
|
|
288
|
+
/** Page size for server-side paging */
|
|
289
|
+
PageSize = 100;
|
|
290
|
+
/** Fired when the user navigates to a different page */
|
|
291
|
+
PageChange = new EventEmitter();
|
|
271
292
|
// ========================================
|
|
272
293
|
// Internal State
|
|
273
294
|
// ========================================
|
|
@@ -276,7 +297,24 @@ export class QueryDataGridComponent {
|
|
|
276
297
|
Columns = [];
|
|
277
298
|
SortState = [];
|
|
278
299
|
SelectedRows = [];
|
|
279
|
-
Theme = themeAlpine
|
|
300
|
+
Theme = themeAlpine.withParams({
|
|
301
|
+
backgroundColor: 'var(--mj-bg-surface)',
|
|
302
|
+
foregroundColor: 'var(--mj-text-primary)',
|
|
303
|
+
textColor: 'var(--mj-text-primary)',
|
|
304
|
+
borderColor: 'var(--mj-border-default)',
|
|
305
|
+
chromeBackgroundColor: 'var(--mj-bg-surface-card)',
|
|
306
|
+
headerBackgroundColor: 'var(--mj-bg-surface-card)',
|
|
307
|
+
headerTextColor: 'var(--mj-text-secondary)',
|
|
308
|
+
cellTextColor: 'var(--mj-text-primary)',
|
|
309
|
+
subtleTextColor: 'var(--mj-text-muted)',
|
|
310
|
+
dataBackgroundColor: 'var(--mj-bg-surface)',
|
|
311
|
+
oddRowBackgroundColor: 'var(--mj-bg-surface-card)',
|
|
312
|
+
rowHoverColor: 'var(--mj-bg-surface-hover, color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface)))',
|
|
313
|
+
selectedRowBackgroundColor: 'color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface))',
|
|
314
|
+
accentColor: 'var(--mj-brand-primary)',
|
|
315
|
+
borderRadius: 'var(--mj-radius-sm)',
|
|
316
|
+
browserColorScheme: 'inherit',
|
|
317
|
+
});
|
|
280
318
|
destroy$ = new Subject();
|
|
281
319
|
stateChangeSubject = new Subject();
|
|
282
320
|
statePersistSubject = new Subject();
|
|
@@ -1038,20 +1076,21 @@ export class QueryDataGridComponent {
|
|
|
1038
1076
|
});
|
|
1039
1077
|
}
|
|
1040
1078
|
static ɵfac = function QueryDataGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || QueryDataGridComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.ExportService)); };
|
|
1041
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryDataGridComponent, selectors: [["mj-query-data-grid"]], inputs: { QueryInfo: "QueryInfo", ColumnConfigs: "ColumnConfigs", Data: "Data", SelectionMode: "SelectionMode", ShowToolbar: "ShowToolbar", ShowRowCount: "ShowRowCount", ShowSelectionCount: "ShowSelectionCount", ShowExport: "ShowExport", ShowRefresh: "ShowRefresh", AllowSorting: "AllowSorting", AllowColumnResize: "AllowColumnResize", AllowColumnReorder: "AllowColumnReorder", VisualConfig: "VisualConfig", IsLoading: "IsLoading", Height: "Height", InitialGridState: "InitialGridState", PersistState: "PersistState" }, outputs: { RowClick: "RowClick", RowDoubleClick: "RowDoubleClick", EntityLinkClick: "EntityLinkClick", SelectionChange: "SelectionChange", GridStateChange: "GridStateChange", RefreshRequest: "RefreshRequest" }, standalone: false, decls:
|
|
1079
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryDataGridComponent, selectors: [["mj-query-data-grid"]], inputs: { QueryInfo: "QueryInfo", ColumnConfigs: "ColumnConfigs", Data: "Data", SelectionMode: "SelectionMode", ShowToolbar: "ShowToolbar", ShowRowCount: "ShowRowCount", ShowSelectionCount: "ShowSelectionCount", ShowExport: "ShowExport", ShowRefresh: "ShowRefresh", AllowSorting: "AllowSorting", AllowColumnResize: "AllowColumnResize", AllowColumnReorder: "AllowColumnReorder", VisualConfig: "VisualConfig", IsLoading: "IsLoading", Height: "Height", InitialGridState: "InitialGridState", PersistState: "PersistState", TotalRowCount: "TotalRowCount", PageNumber: "PageNumber", PageSize: "PageSize" }, outputs: { RowClick: "RowClick", RowDoubleClick: "RowDoubleClick", EntityLinkClick: "EntityLinkClick", SelectionChange: "SelectionChange", GridStateChange: "GridStateChange", RefreshRequest: "RefreshRequest", PageChange: "PageChange" }, standalone: false, decls: 9, vars: 24, consts: [[1, "query-data-grid-container", 3, "ngClass"], [1, "grid-toolbar"], [1, "loading-overlay"], [1, "grid-wrapper"], [1, "query-grid", 3, "gridReady", "rowClicked", "rowDoubleClicked", "selectionChanged", "sortChanged", "columnResized", "columnMoved", "theme", "rowData", "columnDefs", "defaultColDef", "gridOptions", "rowSelection", "getRowId"], [3, "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "empty-state"], [3, "closed", "visible", "config"], [3, "Close", "EntityLinkClick", "NavigateRow", "RowData", "Columns", "QueryInfo", "Visible", "RowIndex", "TotalRows"], [1, "toolbar-left"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], ["title", "Refresh data", 1, "toolbar-btn", "icon-only", 3, "disabled"], ["title", "Export data", 1, "toolbar-btn", 3, "disabled"], [1, "fa-solid", "fa-table-list"], [1, "fa-solid", "fa-check-square"], ["title", "Clear selection", 1, "clear-selection-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["title", "Refresh data", 1, "toolbar-btn", "icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-sync-alt"], ["title", "Export data", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-file-export"], [1, "button-text"], ["text", "Loading query results..."], [3, "PageChange", "TotalRowCount", "PageNumber", "PageSize", "IsLoading"], [1, "fa-solid", "fa-database", "empty-icon"], [1, "empty-message"], [1, "empty-hint"]], template: function QueryDataGridComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1042
1080
|
i0.ɵɵelementStart(0, "div", 0);
|
|
1043
1081
|
i0.ɵɵconditionalCreate(1, QueryDataGridComponent_Conditional_1_Template, 7, 4, "div", 1);
|
|
1044
1082
|
i0.ɵɵconditionalCreate(2, QueryDataGridComponent_Conditional_2_Template, 2, 1, "div", 2);
|
|
1045
1083
|
i0.ɵɵelementStart(3, "div", 3)(4, "ag-grid-angular", 4);
|
|
1046
1084
|
i0.ɵɵlistener("gridReady", function QueryDataGridComponent_Template_ag_grid_angular_gridReady_4_listener($event) { return ctx.OnGridReady($event); })("rowClicked", function QueryDataGridComponent_Template_ag_grid_angular_rowClicked_4_listener($event) { return ctx.OnRowClicked($event); })("rowDoubleClicked", function QueryDataGridComponent_Template_ag_grid_angular_rowDoubleClicked_4_listener($event) { return ctx.OnRowDoubleClicked($event); })("selectionChanged", function QueryDataGridComponent_Template_ag_grid_angular_selectionChanged_4_listener($event) { return ctx.OnSelectionChanged($event); })("sortChanged", function QueryDataGridComponent_Template_ag_grid_angular_sortChanged_4_listener($event) { return ctx.OnSortChanged($event); })("columnResized", function QueryDataGridComponent_Template_ag_grid_angular_columnResized_4_listener($event) { return ctx.OnColumnResized($event); })("columnMoved", function QueryDataGridComponent_Template_ag_grid_angular_columnMoved_4_listener($event) { return ctx.OnColumnMoved($event); });
|
|
1047
1085
|
i0.ɵɵelementEnd()();
|
|
1048
|
-
i0.ɵɵconditionalCreate(5, QueryDataGridComponent_Conditional_5_Template,
|
|
1086
|
+
i0.ɵɵconditionalCreate(5, QueryDataGridComponent_Conditional_5_Template, 1, 4, "mj-pagination", 5);
|
|
1087
|
+
i0.ɵɵconditionalCreate(6, QueryDataGridComponent_Conditional_6_Template, 6, 1, "div", 6);
|
|
1049
1088
|
i0.ɵɵelementEnd();
|
|
1050
|
-
i0.ɵɵelementStart(
|
|
1051
|
-
i0.ɵɵlistener("closed", function
|
|
1089
|
+
i0.ɵɵelementStart(7, "mj-export-dialog", 7);
|
|
1090
|
+
i0.ɵɵlistener("closed", function QueryDataGridComponent_Template_mj_export_dialog_closed_7_listener($event) { return ctx.OnExportDialogClosed($event); });
|
|
1052
1091
|
i0.ɵɵelementEnd();
|
|
1053
|
-
i0.ɵɵelementStart(
|
|
1054
|
-
i0.ɵɵlistener("Close", function
|
|
1092
|
+
i0.ɵɵelementStart(8, "mj-query-row-detail", 8);
|
|
1093
|
+
i0.ɵɵlistener("Close", function QueryDataGridComponent_Template_mj_query_row_detail_Close_8_listener() { return ctx.CloseRowDetailPanel(); })("EntityLinkClick", function QueryDataGridComponent_Template_mj_query_row_detail_EntityLinkClick_8_listener($event) { return ctx.OnRowDetailEntityLinkClick($event); })("NavigateRow", function QueryDataGridComponent_Template_mj_query_row_detail_NavigateRow_8_listener($event) { return ctx.NavigateRowDetail($event); });
|
|
1055
1094
|
i0.ɵɵelementEnd();
|
|
1056
1095
|
} if (rf & 2) {
|
|
1057
1096
|
i0.ɵɵstyleProp("height", ctx.Height);
|
|
@@ -1065,12 +1104,14 @@ export class QueryDataGridComponent {
|
|
|
1065
1104
|
i0.ɵɵadvance();
|
|
1066
1105
|
i0.ɵɵproperty("theme", ctx.Theme)("rowData", ctx.Data)("columnDefs", ctx.ColumnDefs)("defaultColDef", ctx.DefaultColDef)("gridOptions", ctx.GridOptions)("rowSelection", ctx.GetRowSelectionConfig())("getRowId", ctx.GetRowId);
|
|
1067
1106
|
i0.ɵɵadvance();
|
|
1068
|
-
i0.ɵɵconditional(
|
|
1107
|
+
i0.ɵɵconditional(ctx.TotalRowCount > 0 ? 5 : -1);
|
|
1108
|
+
i0.ɵɵadvance();
|
|
1109
|
+
i0.ɵɵconditional(!ctx.IsLoading && ctx.RowCount === 0 ? 6 : -1);
|
|
1069
1110
|
i0.ɵɵadvance();
|
|
1070
1111
|
i0.ɵɵproperty("visible", ctx.ShowExportDialog)("config", ctx.ExportDialogConfig);
|
|
1071
1112
|
i0.ɵɵadvance();
|
|
1072
1113
|
i0.ɵɵproperty("RowData", ctx.RowDetailData)("Columns", ctx.Columns)("QueryInfo", ctx.QueryInfo)("Visible", ctx.ShowRowDetailPanel)("RowIndex", ctx.RowDetailIndex)("TotalRows", ctx.RowCount);
|
|
1073
|
-
} }, dependencies: [i2.NgClass, i3.AgGridAngular, i4.LoadingComponent, i1.ExportDialogComponent,
|
|
1114
|
+
} }, dependencies: [i2.NgClass, i3.AgGridAngular, i4.LoadingComponent, i5.PaginationComponent, i1.ExportDialogComponent, i6.QueryRowDetailComponent, i2.DecimalPipe], styles: ["\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n --grid-accent-color: var(--mj-brand-primary);\n --grid-selection-indicator: var(--mj-status-warning);\n --grid-selection-bg: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n --grid-sort-indicator-color: var(--mj-brand-primary);\n}\n\n.query-data-grid-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n background: var(--mj-bg-surface);\n border-radius: 4px;\n overflow: hidden;\n}\n\n\n\n\n\n\n.grid-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n min-height: 48px;\n flex-shrink: 0;\n}\n\n.toolbar-left[_ngcontent-%COMP%], \n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.row-count[_ngcontent-%COMP%], \n.selection-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.row-count[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.selection-count[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.selection-count[_ngcontent-%COMP%] {\n padding: 4px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-text-primary);\n border-radius: 4px;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.clear-selection-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n padding: 0;\n margin-left: 4px;\n border: none;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n border-radius: 50%;\n transition: all 0.15s ease;\n}\n\n.clear-selection-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n color: var(--mj-text-primary);\n}\n\n\n\n.toolbar-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-primary);\n transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.toolbar-btn.icon-only[_ngcontent-%COMP%] {\n padding: 6px 8px;\n}\n\n.toolbar-btn.icon-only[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 0;\n}\n\n\n\n\n\n\n.grid-wrapper[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n position: relative;\n transition: opacity 0.2s ease;\n}\n\n.grid-wrapper.loading[_ngcontent-%COMP%] {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.query-grid[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n}\n\n\n\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-overlay);\n z-index: 100;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n padding: 40px;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-border-strong);\n margin-bottom: 16px;\n}\n\n.empty-message[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-text-secondary);\n margin: 0 0 8px 0;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n\n\n\n\n\n .entity-link-cell {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n .entity-link {\n color: var(--grid-accent-color);\n text-decoration: none;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n .entity-link:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n\n .entity-link-icon {\n font-size: 10px;\n color: var(--mj-text-disabled);\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n .entity-link-cell:hover .entity-link-icon {\n opacity: 1;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.alternate-rows-subtle[_ngcontent-%COMP%] .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 1.5%, transparent);\n}\n\n.alternate-rows-subtle[_ngcontent-%COMP%] .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n\n\n.alternate-rows-medium[_ngcontent-%COMP%] .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 2.5%, transparent);\n}\n\n.alternate-rows-medium[_ngcontent-%COMP%] .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n\n\n.alternate-rows-strong[_ngcontent-%COMP%] .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n.alternate-rows-strong[_ngcontent-%COMP%] .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n .ag-header-cell {\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n color: var(--mj-text-secondary);\n}\n\n .ag-header-cell:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n\n\n .ag-row-selected {\n background-color: var(--grid-selection-bg) !important;\n color: var(--mj-text-primary) !important;\n box-shadow: inset 4px 0 0 0 var(--grid-selection-indicator);\n}\n\n .ag-row-selected .ag-cell {\n color: var(--mj-text-primary) !important;\n}\n\n\n\n .ag-row {\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n\n\n .header-right .ag-header-cell-label {\n justify-content: flex-end;\n}\n\n .header-center .ag-header-cell-label {\n justify-content: center;\n}\n\n\n\n .ag-checkbox-input-wrapper {\n border-radius: 4px;\n width: 18px;\n height: 18px;\n}\n\n .ag-checkbox-input-wrapper.ag-checked {\n background-color: var(--grid-accent-color);\n border-color: var(--grid-accent-color);\n}\n\n .ag-checkbox-input-wrapper.ag-checked::after {\n color: var(--mj-text-inverse);\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] .ag-sort-ascending-icon {\n color: var(--mj-brand-primary) !important;\n}\n\n[_nghost-%COMP%] .ag-sort-descending-icon {\n color: var(--mj-status-error) !important;\n}\n\n[_nghost-%COMP%] .ag-sort-ascending-icon .ag-icon, \n[_nghost-%COMP%] .ag-sort-descending-icon .ag-icon {\n font-size: 14px !important;\n}\n\n\n\n[_nghost-%COMP%] .ag-sort-order {\n margin-left: 4px;\n font-size: 11px !important;\n font-weight: 700 !important;\n color: var(--mj-text-secondary) !important;\n}\n\n\n\n[_nghost-%COMP%] .ag-header-cell-sortable:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n\n\n\n\n\n .ag-body-viewport::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n .ag-body-viewport::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n border-radius: 4px;\n}\n\n .ag-body-viewport::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 4px;\n}\n\n .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n@media (max-width: 768px) {\n .grid-toolbar[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .toolbar-left[_ngcontent-%COMP%], \n .toolbar-right[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n \n\n .toolbar-btn[_ngcontent-%COMP%] .button-text[_ngcontent-%COMP%] {\n display: none;\n }\n}"], data: { animation: [
|
|
1074
1115
|
trigger('fadeIn', [
|
|
1075
1116
|
transition(':enter', [
|
|
1076
1117
|
style({ opacity: 0, transform: 'translateY(-8px)' }),
|
|
@@ -1094,7 +1135,7 @@ export class QueryDataGridComponent {
|
|
|
1094
1135
|
animate('100ms ease-in', style({ opacity: 0, transform: 'translateY(-8px)' }))
|
|
1095
1136
|
])
|
|
1096
1137
|
])
|
|
1097
|
-
], template: "<!-- Query Data Grid Component -->\n<div class=\"query-data-grid-container\" [ngClass]=\"GetContainerClasses()\" [style.height]=\"Height\">\n <!-- Toolbar -->\n @if (ShowToolbar) {\n <div class=\"grid-toolbar\">\n <div class=\"toolbar-left\">\n <!-- Row count -->\n @if (ShowRowCount) {\n <span class=\"row-count\">\n <i class=\"fa-solid fa-table-list\"></i>\n {{ RowCount | number }} {{ RowCount === 1 ? 'row' : 'rows' }}\n </span>\n }\n <!-- Selection count -->\n @if (ShowSelectionCount && SelectionCount > 0) {\n <span class=\"selection-count\">\n <i class=\"fa-solid fa-check-square\"></i>\n {{ SelectionCount }} selected\n <button class=\"clear-selection-btn\" (click)=\"ClearSelection()\" title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </span>\n }\n </div>\n <div class=\"toolbar-right\">\n <!-- Refresh button -->\n @if (ShowRefresh) {\n <button\n (click)=\"Refresh()\"\n [disabled]=\"IsLoading\"\n title=\"Refresh data\"\n class=\"toolbar-btn icon-only\">\n <i class=\"fa-solid fa-sync-alt\" [class.fa-spin]=\"IsLoading\"></i>\n </button>\n }\n <!-- Export button -->\n @if (ShowExport) {\n <button\n [disabled]=\"RowCount === 0\"\n title=\"Export data\"\n class=\"toolbar-btn\"\n (click)=\"OpenExportDialog()\">\n <i class=\"fa-solid fa-file-export\"></i>\n <span class=\"button-text\">Export</span>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Loading overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\" @fadeIn>\n <mj-loading text=\"Loading query results...\"></mj-loading>\n </div>\n }\n\n <!-- AG Grid -->\n <div class=\"grid-wrapper\" [class.loading]=\"IsLoading\">\n <ag-grid-angular\n class=\"query-grid\"\n [theme]=\"Theme\"\n [rowData]=\"Data\"\n [columnDefs]=\"ColumnDefs\"\n [defaultColDef]=\"DefaultColDef\"\n [gridOptions]=\"GridOptions\"\n [rowSelection]=\"GetRowSelectionConfig()\"\n [getRowId]=\"GetRowId\"\n (gridReady)=\"OnGridReady($event)\"\n (rowClicked)=\"OnRowClicked($event)\"\n (rowDoubleClicked)=\"OnRowDoubleClicked($event)\"\n (selectionChanged)=\"OnSelectionChanged($event)\"\n (sortChanged)=\"OnSortChanged($event)\"\n (columnResized)=\"OnColumnResized($event)\"\n (columnMoved)=\"OnColumnMoved($event)\">\n </ag-grid-angular>\n </div>\n\n <!-- Empty state -->\n @if (!IsLoading && RowCount === 0) {\n <div class=\"empty-state\" @fadeIn>\n <i class=\"fa-solid fa-database empty-icon\"></i>\n <p class=\"empty-message\">No results</p>\n <p class=\"empty-hint\">Run the query to see results</p>\n </div>\n }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n [visible]=\"ShowExportDialog\"\n [config]=\"ExportDialogConfig\"\n (closed)=\"OnExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Row Detail Panel -->\n<mj-query-row-detail\n [RowData]=\"RowDetailData\"\n [Columns]=\"Columns\"\n [QueryInfo]=\"QueryInfo\"\n [Visible]=\"ShowRowDetailPanel\"\n [RowIndex]=\"RowDetailIndex\"\n [TotalRows]=\"RowCount\"\n (Close)=\"CloseRowDetailPanel()\"\n (EntityLinkClick)=\"OnRowDetailEntityLinkClick($event)\"\n (NavigateRow)=\"NavigateRowDetail($event)\">\n</mj-query-row-detail>\n", styles: ["/* Query Data Grid Component Styles */\n\n:host {\n display: block;\n height: 100%;\n --grid-accent-color: #2196F3;\n --grid-selection-indicator: #f9a825;\n --grid-selection-bg: #fff9e6;\n --grid-sort-indicator-color: #2196F3;\n}\n\n.query-data-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n background: #fff;\n border-radius: 4px;\n overflow: hidden;\n}\n\n/* ========================================\n Toolbar\n ======================================== */\n\n.grid-toolbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n background: #ffffff;\n border-bottom: 1px solid #e0e0e0;\n min-height: 48px;\n flex-shrink: 0;\n}\n\n.toolbar-left,\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.row-count,\n.selection-count {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: #666;\n font-weight: 500;\n}\n\n.row-count i,\n.selection-count i {\n color: #888;\n}\n\n.selection-count {\n padding: 4px 8px;\n background: var(--grid-selection-bg);\n border-radius: 4px;\n border-left: 3px solid var(--grid-selection-indicator);\n}\n\n.clear-selection-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n padding: 0;\n margin-left: 4px;\n border: none;\n background: transparent;\n color: #888;\n cursor: pointer;\n border-radius: 50%;\n transition: all 0.15s ease;\n}\n\n.clear-selection-btn:hover {\n background: rgba(0, 0, 0, 0.1);\n color: #333;\n}\n\n/* Toolbar buttons - consistent styling */\n.toolbar-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: #f5f5f5;\n border: 1px solid #ddd;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: #333;\n transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n background: #eee;\n border-color: #ccc;\n}\n\n.toolbar-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn i {\n font-size: 14px;\n}\n\n/* Icon-only button */\n.toolbar-btn.icon-only {\n padding: 6px 8px;\n}\n\n.toolbar-btn.icon-only i {\n margin-right: 0;\n}\n\n/* ========================================\n Grid wrapper\n ======================================== */\n\n.grid-wrapper {\n flex: 1;\n min-height: 0;\n position: relative;\n transition: opacity 0.2s ease;\n}\n\n.grid-wrapper.loading {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.query-grid {\n width: 100%;\n height: 100%;\n}\n\n/* ========================================\n Loading overlay\n ======================================== */\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.9);\n z-index: 100;\n}\n\n/* ========================================\n Empty state\n ======================================== */\n\n.empty-state {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n padding: 40px;\n}\n\n.empty-icon {\n font-size: 48px;\n color: #ccc;\n margin-bottom: 16px;\n}\n\n.empty-message {\n font-size: 18px;\n color: #666;\n margin: 0 0 8px 0;\n}\n\n.empty-hint {\n font-size: 14px;\n color: #999;\n margin: 0;\n}\n\n/* ========================================\n Entity link cell\n ======================================== */\n\n::ng-deep .entity-link-cell {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n::ng-deep .entity-link {\n color: var(--grid-accent-color);\n text-decoration: none;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n::ng-deep .entity-link:hover {\n color: #1565c0;\n text-decoration: underline;\n}\n\n::ng-deep .entity-link-icon {\n font-size: 10px;\n color: #aaa;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n::ng-deep .entity-link-cell:hover .entity-link-icon {\n opacity: 1;\n}\n\n/* ========================================\n AG Grid customizations\n ======================================== */\n\n::ng-deep .ag-theme-alpine {\n --ag-header-background-color: #fafafa;\n --ag-header-foreground-color: #333;\n --ag-row-hover-color: #e8f4fd;\n --ag-selected-row-background-color: var(--grid-selection-bg);\n --ag-font-size: 13px;\n --ag-row-border-color: #e8e8e8;\n}\n\n/* ========================================\n Visual Config: Zebra Striping\n (copied from entity-data-grid pattern)\n ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n background-color: rgba(0, 0, 0, 0.015);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n background-color: rgba(0, 0, 0, 0.025);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n background-color: rgba(0, 0, 0, 0.04);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--grid-row-hover-bg, #f5f5f5);\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell {\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n color: #546e7a;\n}\n\n::ng-deep .ag-theme-alpine .ag-header-cell:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n\n/* Selected row styling */\n::ng-deep .ag-row-selected {\n box-shadow: inset 4px 0 0 0 var(--grid-selection-indicator);\n}\n\n/* Row border */\n::ng-deep .ag-theme-alpine .ag-row {\n border-bottom: 1px solid var(--ag-row-border-color, #f0f0f0);\n}\n\n/* Header alignment */\n::ng-deep .header-right .ag-header-cell-label {\n justify-content: flex-end;\n}\n\n::ng-deep .header-center .ag-header-cell-label {\n justify-content: center;\n}\n\n/* Checkbox styling */\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper {\n border-radius: 4px;\n width: 18px;\n height: 18px;\n}\n\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked {\n background-color: var(--grid-accent-color);\n border-color: var(--grid-accent-color);\n}\n\n::ng-deep .ag-theme-alpine .ag-checkbox-input-wrapper.ag-checked::after {\n color: #ffffff;\n}\n\n/* ========================================\n Sort Indicators - Arrow Only\n ======================================== */\n\n/* Sort icons - colored arrows only */\n:host ::ng-deep .ag-sort-ascending-icon {\n color: #1976d2 !important;\n}\n\n:host ::ng-deep .ag-sort-descending-icon {\n color: #d81b60 !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n font-size: 14px !important;\n}\n\n/* Sort order number (for multi-sort) */\n:host ::ng-deep .ag-sort-order {\n margin-left: 4px;\n font-size: 11px !important;\n font-weight: 700 !important;\n color: #666 !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n background: rgba(0, 0, 0, 0.04);\n}\n\n/* ========================================\n Scrollbar Styling\n ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n background: #f5f5f5;\n border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n background: #c0c0c0;\n border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n background: #a0a0a0;\n}\n\n/* ========================================\n Responsive adjustments\n ======================================== */\n\n@media (max-width: 768px) {\n .grid-toolbar {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .toolbar-left,\n .toolbar-right {\n flex-wrap: wrap;\n }\n\n /* Hide button text on mobile */\n .toolbar-btn .button-text {\n display: none;\n }\n}\n"] }]
|
|
1138
|
+
], template: "<!-- Query Data Grid Component -->\n<div class=\"query-data-grid-container\" [ngClass]=\"GetContainerClasses()\" [style.height]=\"Height\">\n <!-- Toolbar -->\n @if (ShowToolbar) {\n <div class=\"grid-toolbar\">\n <div class=\"toolbar-left\">\n <!-- Row count -->\n @if (ShowRowCount) {\n <span class=\"row-count\">\n <i class=\"fa-solid fa-table-list\"></i>\n {{ RowCount | number }} {{ RowCount === 1 ? 'row' : 'rows' }}\n </span>\n }\n <!-- Selection count -->\n @if (ShowSelectionCount && SelectionCount > 0) {\n <span class=\"selection-count\">\n <i class=\"fa-solid fa-check-square\"></i>\n {{ SelectionCount }} selected\n <button class=\"clear-selection-btn\" (click)=\"ClearSelection()\" title=\"Clear selection\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </span>\n }\n </div>\n <div class=\"toolbar-right\">\n <!-- Refresh button -->\n @if (ShowRefresh) {\n <button\n (click)=\"Refresh()\"\n [disabled]=\"IsLoading\"\n title=\"Refresh data\"\n class=\"toolbar-btn icon-only\">\n <i class=\"fa-solid fa-sync-alt\" [class.fa-spin]=\"IsLoading\"></i>\n </button>\n }\n <!-- Export button -->\n @if (ShowExport) {\n <button\n [disabled]=\"RowCount === 0\"\n title=\"Export data\"\n class=\"toolbar-btn\"\n (click)=\"OpenExportDialog()\">\n <i class=\"fa-solid fa-file-export\"></i>\n <span class=\"button-text\">Export</span>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Loading overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\" @fadeIn>\n <mj-loading text=\"Loading query results...\"></mj-loading>\n </div>\n }\n\n <!-- AG Grid -->\n <div class=\"grid-wrapper\" [class.loading]=\"IsLoading\">\n <ag-grid-angular\n class=\"query-grid\"\n [theme]=\"Theme\"\n [rowData]=\"Data\"\n [columnDefs]=\"ColumnDefs\"\n [defaultColDef]=\"DefaultColDef\"\n [gridOptions]=\"GridOptions\"\n [rowSelection]=\"GetRowSelectionConfig()\"\n [getRowId]=\"GetRowId\"\n (gridReady)=\"OnGridReady($event)\"\n (rowClicked)=\"OnRowClicked($event)\"\n (rowDoubleClicked)=\"OnRowDoubleClicked($event)\"\n (selectionChanged)=\"OnSelectionChanged($event)\"\n (sortChanged)=\"OnSortChanged($event)\"\n (columnResized)=\"OnColumnResized($event)\"\n (columnMoved)=\"OnColumnMoved($event)\">\n </ag-grid-angular>\n </div>\n\n <!-- Pagination (only shown when server-side paging is active) -->\n @if (TotalRowCount > 0) {\n <mj-pagination\n [TotalRowCount]=\"TotalRowCount\"\n [PageNumber]=\"PageNumber\"\n [PageSize]=\"PageSize\"\n [IsLoading]=\"IsLoading\"\n (PageChange)=\"PageChange.emit($event)\">\n </mj-pagination>\n }\n\n <!-- Empty state -->\n @if (!IsLoading && RowCount === 0) {\n <div class=\"empty-state\" @fadeIn>\n <i class=\"fa-solid fa-database empty-icon\"></i>\n <p class=\"empty-message\">No results</p>\n <p class=\"empty-hint\">Run the query to see results</p>\n </div>\n }\n</div>\n\n<!-- Export Dialog -->\n<mj-export-dialog\n [visible]=\"ShowExportDialog\"\n [config]=\"ExportDialogConfig\"\n (closed)=\"OnExportDialogClosed($event)\">\n</mj-export-dialog>\n\n<!-- Row Detail Panel -->\n<mj-query-row-detail\n [RowData]=\"RowDetailData\"\n [Columns]=\"Columns\"\n [QueryInfo]=\"QueryInfo\"\n [Visible]=\"ShowRowDetailPanel\"\n [RowIndex]=\"RowDetailIndex\"\n [TotalRows]=\"RowCount\"\n (Close)=\"CloseRowDetailPanel()\"\n (EntityLinkClick)=\"OnRowDetailEntityLinkClick($event)\"\n (NavigateRow)=\"NavigateRowDetail($event)\">\n</mj-query-row-detail>\n", styles: ["/* Query Data Grid Component Styles */\n\n:host {\n display: block;\n height: 100%;\n --grid-accent-color: var(--mj-brand-primary);\n --grid-selection-indicator: var(--mj-status-warning);\n --grid-selection-bg: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n --grid-sort-indicator-color: var(--mj-brand-primary);\n}\n\n.query-data-grid-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n background: var(--mj-bg-surface);\n border-radius: 4px;\n overflow: hidden;\n}\n\n/* ========================================\n Toolbar\n ======================================== */\n\n.grid-toolbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n min-height: 48px;\n flex-shrink: 0;\n}\n\n.toolbar-left,\n.toolbar-right {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.row-count,\n.selection-count {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n.row-count i,\n.selection-count i {\n color: var(--mj-text-muted);\n}\n\n.selection-count {\n padding: 4px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-text-primary);\n border-radius: 4px;\n border-left: 3px solid var(--mj-brand-primary);\n}\n\n.clear-selection-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n padding: 0;\n margin-left: 4px;\n border: none;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n border-radius: 50%;\n transition: all 0.15s ease;\n}\n\n.clear-selection-btn:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n color: var(--mj-text-primary);\n}\n\n/* Toolbar buttons - consistent styling */\n.toolbar-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-primary);\n transition: background-color 0.2s, border-color 0.2s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.toolbar-btn i {\n font-size: 14px;\n}\n\n/* Icon-only button */\n.toolbar-btn.icon-only {\n padding: 6px 8px;\n}\n\n.toolbar-btn.icon-only i {\n margin-right: 0;\n}\n\n/* ========================================\n Grid wrapper\n ======================================== */\n\n.grid-wrapper {\n flex: 1;\n min-height: 0;\n position: relative;\n transition: opacity 0.2s ease;\n}\n\n.grid-wrapper.loading {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.query-grid {\n width: 100%;\n height: 100%;\n}\n\n/* ========================================\n Loading overlay\n ======================================== */\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-overlay);\n z-index: 100;\n}\n\n/* ========================================\n Empty state\n ======================================== */\n\n.empty-state {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n padding: 40px;\n}\n\n.empty-icon {\n font-size: 48px;\n color: var(--mj-border-strong);\n margin-bottom: 16px;\n}\n\n.empty-message {\n font-size: 18px;\n color: var(--mj-text-secondary);\n margin: 0 0 8px 0;\n}\n\n.empty-hint {\n font-size: 14px;\n color: var(--mj-text-muted);\n margin: 0;\n}\n\n/* ========================================\n Entity link cell\n ======================================== */\n\n::ng-deep .entity-link-cell {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n::ng-deep .entity-link {\n color: var(--grid-accent-color);\n text-decoration: none;\n cursor: pointer;\n transition: color 0.15s ease;\n}\n\n::ng-deep .entity-link:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n\n::ng-deep .entity-link-icon {\n font-size: 10px;\n color: var(--mj-text-disabled);\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n::ng-deep .entity-link-cell:hover .entity-link-icon {\n opacity: 1;\n}\n\n/* ========================================\n AG Grid customizations\n ======================================== */\n\n/* ========================================\n Visual Config: Zebra Striping\n (copied from entity-data-grid pattern)\n ======================================== */\n\n/* Subtle contrast */\n.alternate-rows-subtle ::ng-deep .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 1.5%, transparent);\n}\n\n.alternate-rows-subtle ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n/* Medium contrast (default) */\n.alternate-rows-medium ::ng-deep .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 2.5%, transparent);\n}\n\n.alternate-rows-medium ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n/* Strong contrast */\n.alternate-rows-strong ::ng-deep .ag-row-odd {\n background-color: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n.alternate-rows-strong ::ng-deep .ag-row-odd:hover:not(.ag-row-selected) {\n background-color: var(--mj-bg-surface-hover);\n}\n\n::ng-deep .ag-header-cell {\n font-weight: 600;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n color: var(--mj-text-secondary);\n}\n\n::ng-deep .ag-header-cell:hover {\n background-color: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n/* Selected row styling */\n::ng-deep .ag-row-selected {\n background-color: var(--grid-selection-bg) !important;\n color: var(--mj-text-primary) !important;\n box-shadow: inset 4px 0 0 0 var(--grid-selection-indicator);\n}\n\n::ng-deep .ag-row-selected .ag-cell {\n color: var(--mj-text-primary) !important;\n}\n\n/* Row border */\n::ng-deep .ag-row {\n border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n/* Header alignment */\n::ng-deep .header-right .ag-header-cell-label {\n justify-content: flex-end;\n}\n\n::ng-deep .header-center .ag-header-cell-label {\n justify-content: center;\n}\n\n/* Checkbox styling */\n::ng-deep .ag-checkbox-input-wrapper {\n border-radius: 4px;\n width: 18px;\n height: 18px;\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked {\n background-color: var(--grid-accent-color);\n border-color: var(--grid-accent-color);\n}\n\n::ng-deep .ag-checkbox-input-wrapper.ag-checked::after {\n color: var(--mj-text-inverse);\n}\n\n/* ========================================\n Sort Indicators - Arrow Only\n ======================================== */\n\n/* Sort icons - colored arrows only */\n:host ::ng-deep .ag-sort-ascending-icon {\n color: var(--mj-brand-primary) !important;\n}\n\n:host ::ng-deep .ag-sort-descending-icon {\n color: var(--mj-status-error) !important;\n}\n\n:host ::ng-deep .ag-sort-ascending-icon .ag-icon,\n:host ::ng-deep .ag-sort-descending-icon .ag-icon {\n font-size: 14px !important;\n}\n\n/* Sort order number (for multi-sort) */\n:host ::ng-deep .ag-sort-order {\n margin-left: 4px;\n font-size: 11px !important;\n font-weight: 700 !important;\n color: var(--mj-text-secondary) !important;\n}\n\n/* Hover state for sortable headers */\n:host ::ng-deep .ag-header-cell-sortable:hover {\n background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n}\n\n/* ========================================\n Scrollbar Styling\n ======================================== */\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 4px;\n}\n\n::ng-deep .ag-body-viewport::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* ========================================\n Responsive adjustments\n ======================================== */\n\n@media (max-width: 768px) {\n .grid-toolbar {\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .toolbar-left,\n .toolbar-right {\n flex-wrap: wrap;\n }\n\n /* Hide button text on mobile */\n .toolbar-btn .button-text {\n display: none;\n }\n}\n"] }]
|
|
1098
1139
|
}], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.ExportService }], { QueryInfo: [{
|
|
1099
1140
|
type: Input
|
|
1100
1141
|
}], ColumnConfigs: [{
|
|
@@ -1141,6 +1182,14 @@ export class QueryDataGridComponent {
|
|
|
1141
1182
|
type: Output
|
|
1142
1183
|
}], RefreshRequest: [{
|
|
1143
1184
|
type: Output
|
|
1185
|
+
}], TotalRowCount: [{
|
|
1186
|
+
type: Input
|
|
1187
|
+
}], PageNumber: [{
|
|
1188
|
+
type: Input
|
|
1189
|
+
}], PageSize: [{
|
|
1190
|
+
type: Input
|
|
1191
|
+
}], PageChange: [{
|
|
1192
|
+
type: Output
|
|
1144
1193
|
}] }); })();
|
|
1145
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryDataGridComponent, { className: "QueryDataGridComponent", filePath: "src/lib/query-data-grid/query-data-grid.component.ts", lineNumber:
|
|
1194
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryDataGridComponent, { className: "QueryDataGridComponent", filePath: "src/lib/query-data-grid/query-data-grid.component.ts", lineNumber: 109 }); })();
|
|
1146
1195
|
//# sourceMappingURL=query-data-grid.component.js.map
|