@memberjunction/ng-entity-viewer 2.133.0 → 3.1.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/entity-cards/entity-cards.component.js +1 -1
- package/dist/lib/entity-cards/entity-cards.component.js.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts +10 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.d.ts.map +1 -1
- package/dist/lib/entity-data-grid/entity-data-grid.component.js +87 -35
- package/dist/lib/entity-data-grid/entity-data-grid.component.js.map +1 -1
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js +1 -1
- package/dist/lib/entity-record-detail-panel/entity-record-detail-panel.component.js.map +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts +89 -13
- package/dist/lib/entity-viewer/entity-viewer.component.d.ts.map +1 -1
- package/dist/lib/entity-viewer/entity-viewer.component.js +317 -136
- package/dist/lib/entity-viewer/entity-viewer.component.js.map +1 -1
- package/dist/lib/pagination/pagination.component.js +1 -1
- package/dist/lib/pagination/pagination.component.js.map +1 -1
- package/dist/lib/pill/pill.component.js +1 -1
- package/dist/lib/pill/pill.component.js.map +1 -1
- package/dist/lib/view-config-panel/view-config-panel.component.d.ts +87 -2
- package/dist/lib/view-config-panel/view-config-panel.component.d.ts.map +1 -1
- package/dist/lib/view-config-panel/view-config-panel.component.js +720 -426
- package/dist/lib/view-config-panel/view-config-panel.component.js.map +1 -1
- package/dist/module.js +1 -1
- package/dist/module.js.map +1 -1
- package/package.json +15 -15
|
@@ -3,218 +3,177 @@ import { Metadata } from '@memberjunction/core';
|
|
|
3
3
|
import { createEmptyFilter } from '@memberjunction/ng-filter-builder';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "@angular/forms";
|
|
6
|
-
const _forTrack0 = ($index, $item) => $item.
|
|
7
|
-
const _forTrack1 = ($index, $item) => $item.
|
|
6
|
+
const _forTrack0 = ($index, $item) => $item.fieldId;
|
|
7
|
+
const _forTrack1 = ($index, $item) => $item.ID;
|
|
8
8
|
function ViewConfigPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
9
9
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
10
|
-
i0.ɵɵelementStart(0, "div",
|
|
10
|
+
i0.ɵɵelementStart(0, "div", 24);
|
|
11
11
|
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClose()); });
|
|
12
12
|
i0.ɵɵelementEnd();
|
|
13
13
|
} }
|
|
14
|
-
function
|
|
15
|
-
i0.ɵɵelementStart(0, "
|
|
14
|
+
function ViewConfigPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
15
|
+
i0.ɵɵelementStart(0, "span", 13);
|
|
16
16
|
i0.ɵɵtext(1);
|
|
17
17
|
i0.ɵɵelementEnd();
|
|
18
18
|
} if (rf & 2) {
|
|
19
|
-
const
|
|
20
|
-
i0.ɵɵproperty("value", field_r4.Name);
|
|
21
|
-
i0.ɵɵadvance();
|
|
22
|
-
i0.ɵɵtextInterpolate(field_r4.DisplayNameOrName);
|
|
23
|
-
} }
|
|
24
|
-
function ViewConfigPanelComponent_Conditional_25_Conditional_12_Template(rf, ctx) { if (rf & 1) {
|
|
25
|
-
const _r5 = i0.ɵɵgetCurrentView();
|
|
26
|
-
i0.ɵɵelementStart(0, "div", 29)(1, "button", 38);
|
|
27
|
-
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_25_Conditional_12_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.sortDirection = "asc"); });
|
|
28
|
-
i0.ɵɵelement(2, "i", 39);
|
|
29
|
-
i0.ɵɵelementEnd();
|
|
30
|
-
i0.ɵɵelementStart(3, "button", 40);
|
|
31
|
-
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_25_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.sortDirection = "desc"); });
|
|
32
|
-
i0.ɵɵelement(4, "i", 41);
|
|
33
|
-
i0.ɵɵelementEnd()();
|
|
34
|
-
} if (rf & 2) {
|
|
35
|
-
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
19
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
36
20
|
i0.ɵɵadvance();
|
|
37
|
-
i0.ɵɵ
|
|
38
|
-
i0.ɵɵadvance(2);
|
|
39
|
-
i0.ɵɵclassProp("active", ctx_r1.sortDirection === "desc");
|
|
21
|
+
i0.ɵɵtextInterpolate(ctx_r1.sortItems.length);
|
|
40
22
|
} }
|
|
41
|
-
function
|
|
42
|
-
i0.ɵɵelement(0, "div",
|
|
23
|
+
function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
24
|
+
i0.ɵɵelement(0, "div", 35);
|
|
43
25
|
} }
|
|
44
|
-
function
|
|
45
|
-
i0.ɵɵelement(0, "i",
|
|
26
|
+
function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
27
|
+
i0.ɵɵelement(0, "i", 40);
|
|
46
28
|
} if (rf & 2) {
|
|
47
|
-
const
|
|
48
|
-
i0.ɵɵpropertyInterpolate1("title", "Custom name: ",
|
|
29
|
+
const column_r4 = i0.ɵɵnextContext().$implicit;
|
|
30
|
+
i0.ɵɵpropertyInterpolate1("title", "Custom name: ", column_r4.userDisplayName, "");
|
|
49
31
|
} }
|
|
50
|
-
function
|
|
51
|
-
i0.ɵɵelement(0, "i",
|
|
32
|
+
function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
33
|
+
i0.ɵɵelement(0, "i", 41);
|
|
52
34
|
} }
|
|
53
|
-
function
|
|
54
|
-
i0.ɵɵelement(0, "div",
|
|
35
|
+
function ViewConfigPanelComponent_Conditional_30_For_10_Conditional_17_Template(rf, ctx) { if (rf & 1) {
|
|
36
|
+
i0.ɵɵelement(0, "div", 35);
|
|
55
37
|
} }
|
|
56
|
-
function
|
|
57
|
-
const
|
|
58
|
-
i0.ɵɵtemplate(0,
|
|
59
|
-
i0.ɵɵelementStart(1, "div",
|
|
60
|
-
i0.ɵɵlistener("dragstart", function
|
|
61
|
-
i0.ɵɵelementStart(2, "div",
|
|
62
|
-
i0.ɵɵelement(3, "i",
|
|
38
|
+
function ViewConfigPanelComponent_Conditional_30_For_10_Template(rf, ctx) { if (rf & 1) {
|
|
39
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
40
|
+
i0.ɵɵtemplate(0, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_0_Template, 1, 0, "div", 35);
|
|
41
|
+
i0.ɵɵelementStart(1, "div", 36);
|
|
42
|
+
i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragstart_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragStart($event, column_r4)); })("dragover", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragover_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragOver($event, column_r4)); })("dragleave", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_drop_1_listener($event) { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDrop($event, column_r4)); })("dragend", function ViewConfigPanelComponent_Conditional_30_For_10_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDragEnd($event)); });
|
|
43
|
+
i0.ɵɵelementStart(2, "div", 37);
|
|
44
|
+
i0.ɵɵelement(3, "i", 38);
|
|
63
45
|
i0.ɵɵelementEnd();
|
|
64
|
-
i0.ɵɵelementStart(4, "span",
|
|
46
|
+
i0.ɵɵelementStart(4, "span", 39);
|
|
65
47
|
i0.ɵɵtext(5);
|
|
66
|
-
i0.ɵɵtemplate(6,
|
|
48
|
+
i0.ɵɵtemplate(6, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_6_Template, 1, 2, "i", 40)(7, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_7_Template, 1, 0, "i", 41);
|
|
67
49
|
i0.ɵɵelementEnd();
|
|
68
|
-
i0.ɵɵelementStart(8, "div",
|
|
69
|
-
i0.ɵɵlistener("click", function
|
|
70
|
-
i0.ɵɵelement(10, "i",
|
|
50
|
+
i0.ɵɵelementStart(8, "div", 42)(9, "button", 43);
|
|
51
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_9_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFormatEditor(column_r4)); });
|
|
52
|
+
i0.ɵɵelement(10, "i", 44);
|
|
71
53
|
i0.ɵɵelementEnd();
|
|
72
|
-
i0.ɵɵelementStart(11, "button",
|
|
73
|
-
i0.ɵɵlistener("click", function
|
|
74
|
-
i0.ɵɵelement(12, "i",
|
|
54
|
+
i0.ɵɵelementStart(11, "button", 45);
|
|
55
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_11_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnUp(column_r4)); });
|
|
56
|
+
i0.ɵɵelement(12, "i", 46);
|
|
75
57
|
i0.ɵɵelementEnd();
|
|
76
|
-
i0.ɵɵelementStart(13, "button",
|
|
77
|
-
i0.ɵɵlistener("click", function
|
|
78
|
-
i0.ɵɵelement(14, "i",
|
|
58
|
+
i0.ɵɵelementStart(13, "button", 47);
|
|
59
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_13_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.moveColumnDown(column_r4)); });
|
|
60
|
+
i0.ɵɵelement(14, "i", 48);
|
|
79
61
|
i0.ɵɵelementEnd();
|
|
80
|
-
i0.ɵɵelementStart(15, "button",
|
|
81
|
-
i0.ɵɵlistener("click", function
|
|
82
|
-
i0.ɵɵelement(16, "i",
|
|
62
|
+
i0.ɵɵelementStart(15, "button", 49);
|
|
63
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_10_Template_button_click_15_listener() { const column_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r4)); });
|
|
64
|
+
i0.ɵɵelement(16, "i", 31);
|
|
83
65
|
i0.ɵɵelementEnd()()();
|
|
84
|
-
i0.ɵɵtemplate(17,
|
|
66
|
+
i0.ɵɵtemplate(17, ViewConfigPanelComponent_Conditional_30_For_10_Conditional_17_Template, 1, 0, "div", 35);
|
|
85
67
|
} if (rf & 2) {
|
|
86
|
-
const
|
|
87
|
-
const ɵ$
|
|
68
|
+
const column_r4 = ctx.$implicit;
|
|
69
|
+
const ɵ$index_76_r5 = ctx.$index;
|
|
88
70
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
89
|
-
i0.ɵɵconditional(ctx_r1.isDropBefore(
|
|
71
|
+
i0.ɵɵconditional(ctx_r1.isDropBefore(column_r4) ? 0 : -1);
|
|
90
72
|
i0.ɵɵadvance();
|
|
91
|
-
i0.ɵɵclassProp("dragging", ctx_r1.draggedColumn ===
|
|
73
|
+
i0.ɵɵclassProp("dragging", ctx_r1.draggedColumn === column_r4)("drop-target", ctx_r1.dropTargetColumn === column_r4);
|
|
92
74
|
i0.ɵɵadvance(4);
|
|
93
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
75
|
+
i0.ɵɵtextInterpolate1(" ", column_r4.userDisplayName || column_r4.displayName, " ");
|
|
94
76
|
i0.ɵɵadvance();
|
|
95
|
-
i0.ɵɵconditional(
|
|
77
|
+
i0.ɵɵconditional(column_r4.userDisplayName ? 6 : -1);
|
|
96
78
|
i0.ɵɵadvance();
|
|
97
|
-
i0.ɵɵconditional(ctx_r1.hasCustomFormat(
|
|
79
|
+
i0.ɵɵconditional(ctx_r1.hasCustomFormat(column_r4) ? 7 : -1);
|
|
98
80
|
i0.ɵɵadvance(4);
|
|
99
|
-
i0.ɵɵproperty("disabled", ɵ$
|
|
81
|
+
i0.ɵɵproperty("disabled", ɵ$index_76_r5 === 0);
|
|
100
82
|
i0.ɵɵadvance(2);
|
|
101
|
-
i0.ɵɵproperty("disabled", ɵ$
|
|
83
|
+
i0.ɵɵproperty("disabled", ɵ$index_76_r5 === ctx_r1.visibleColumns.length - 1);
|
|
102
84
|
i0.ɵɵadvance(4);
|
|
103
|
-
i0.ɵɵconditional(ctx_r1.isDropAfter(
|
|
85
|
+
i0.ɵɵconditional(ctx_r1.isDropAfter(column_r4) && ɵ$index_76_r5 === ctx_r1.visibleColumns.length - 1 ? 17 : -1);
|
|
104
86
|
} }
|
|
105
|
-
function
|
|
106
|
-
i0.ɵɵelementStart(0, "div",
|
|
107
|
-
i0.ɵɵelement(1, "i",
|
|
87
|
+
function ViewConfigPanelComponent_Conditional_30_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
88
|
+
i0.ɵɵelementStart(0, "div", 30);
|
|
89
|
+
i0.ɵɵelement(1, "i", 50);
|
|
108
90
|
i0.ɵɵelementStart(2, "span");
|
|
109
91
|
i0.ɵɵtext(3, "No columns visible. Add columns from below.");
|
|
110
92
|
i0.ɵɵelementEnd()();
|
|
111
93
|
} }
|
|
112
|
-
function
|
|
113
|
-
const
|
|
114
|
-
i0.ɵɵelementStart(0, "div",
|
|
115
|
-
i0.ɵɵelement(1, "i",
|
|
116
|
-
i0.ɵɵelementStart(2, "input",
|
|
117
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
94
|
+
function ViewConfigPanelComponent_Conditional_30_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
95
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
96
|
+
i0.ɵɵelementStart(0, "div", 32);
|
|
97
|
+
i0.ɵɵelement(1, "i", 51);
|
|
98
|
+
i0.ɵɵelementStart(2, "input", 52);
|
|
99
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_30_Conditional_19_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.columnSearchText, $event) || (ctx_r1.columnSearchText = $event); return i0.ɵɵresetView($event); });
|
|
118
100
|
i0.ɵɵelementEnd()();
|
|
119
101
|
} if (rf & 2) {
|
|
120
102
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
121
103
|
i0.ɵɵadvance(2);
|
|
122
104
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.columnSearchText);
|
|
123
105
|
} }
|
|
124
|
-
function
|
|
125
|
-
const
|
|
126
|
-
i0.ɵɵelementStart(0, "div",
|
|
106
|
+
function ViewConfigPanelComponent_Conditional_30_For_22_Template(rf, ctx) { if (rf & 1) {
|
|
107
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
108
|
+
i0.ɵɵelementStart(0, "div", 34)(1, "span", 39);
|
|
127
109
|
i0.ɵɵtext(2);
|
|
128
110
|
i0.ɵɵelementEnd();
|
|
129
|
-
i0.ɵɵelementStart(3, "button",
|
|
130
|
-
i0.ɵɵlistener("click", function
|
|
131
|
-
i0.ɵɵelement(4, "i",
|
|
111
|
+
i0.ɵɵelementStart(3, "button", 53);
|
|
112
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_30_For_22_Template_button_click_3_listener() { const column_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleColumnVisibility(column_r8)); });
|
|
113
|
+
i0.ɵɵelement(4, "i", 54);
|
|
132
114
|
i0.ɵɵelementEnd()();
|
|
133
115
|
} if (rf & 2) {
|
|
134
|
-
const
|
|
116
|
+
const column_r8 = ctx.$implicit;
|
|
135
117
|
i0.ɵɵadvance(2);
|
|
136
|
-
i0.ɵɵtextInterpolate(
|
|
118
|
+
i0.ɵɵtextInterpolate(column_r8.displayName);
|
|
137
119
|
} }
|
|
138
|
-
function
|
|
139
|
-
i0.ɵɵelementStart(0, "div",
|
|
140
|
-
i0.ɵɵelement(1, "i",
|
|
120
|
+
function ViewConfigPanelComponent_Conditional_30_Conditional_23_Template(rf, ctx) { if (rf & 1) {
|
|
121
|
+
i0.ɵɵelementStart(0, "div", 30);
|
|
122
|
+
i0.ɵɵelement(1, "i", 55);
|
|
141
123
|
i0.ɵɵelementStart(2, "span");
|
|
142
124
|
i0.ɵɵtext(3, "All columns are visible");
|
|
143
125
|
i0.ɵɵelementEnd()();
|
|
144
126
|
} }
|
|
145
|
-
function
|
|
146
|
-
|
|
147
|
-
i0.ɵɵ
|
|
148
|
-
i0.ɵɵelement(3, "i", 25);
|
|
127
|
+
function ViewConfigPanelComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
128
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 25)(2, "div", 26);
|
|
129
|
+
i0.ɵɵelement(3, "i", 27);
|
|
149
130
|
i0.ɵɵelementStart(4, "span");
|
|
150
|
-
i0.ɵɵtext(5, "
|
|
151
|
-
i0.ɵɵelementEnd()();
|
|
152
|
-
i0.ɵɵelementStart(6, "div", 26)(7, "select", 27);
|
|
153
|
-
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_25_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.sortField, $event) || (ctx_r1.sortField = $event); return i0.ɵɵresetView($event); });
|
|
154
|
-
i0.ɵɵelementStart(8, "option", 28);
|
|
155
|
-
i0.ɵɵtext(9, "No default sort");
|
|
156
|
-
i0.ɵɵelementEnd();
|
|
157
|
-
i0.ɵɵrepeaterCreate(10, ViewConfigPanelComponent_Conditional_25_For_11_Template, 2, 2, "option", 28, _forTrack0);
|
|
158
|
-
i0.ɵɵelementEnd();
|
|
159
|
-
i0.ɵɵtemplate(12, ViewConfigPanelComponent_Conditional_25_Conditional_12_Template, 5, 4, "div", 29);
|
|
160
|
-
i0.ɵɵelementEnd()();
|
|
161
|
-
i0.ɵɵelementStart(13, "div", 23)(14, "div", 24);
|
|
162
|
-
i0.ɵɵelement(15, "i", 30);
|
|
163
|
-
i0.ɵɵelementStart(16, "span");
|
|
164
|
-
i0.ɵɵtext(17, "Visible Columns");
|
|
131
|
+
i0.ɵɵtext(5, "Visible Columns");
|
|
165
132
|
i0.ɵɵelementEnd();
|
|
166
|
-
i0.ɵɵelementStart(
|
|
167
|
-
i0.ɵɵtext(
|
|
133
|
+
i0.ɵɵelementStart(6, "span", 28);
|
|
134
|
+
i0.ɵɵtext(7);
|
|
168
135
|
i0.ɵɵelementEnd()();
|
|
169
|
-
i0.ɵɵelementStart(
|
|
170
|
-
i0.ɵɵrepeaterCreate(
|
|
171
|
-
i0.ɵɵtemplate(
|
|
136
|
+
i0.ɵɵelementStart(8, "div", 29);
|
|
137
|
+
i0.ɵɵrepeaterCreate(9, ViewConfigPanelComponent_Conditional_30_For_10_Template, 18, 11, null, null, _forTrack0);
|
|
138
|
+
i0.ɵɵtemplate(11, ViewConfigPanelComponent_Conditional_30_Conditional_11_Template, 4, 0, "div", 30);
|
|
172
139
|
i0.ɵɵelementEnd()();
|
|
173
|
-
i0.ɵɵelementStart(
|
|
174
|
-
i0.ɵɵelement(
|
|
175
|
-
i0.ɵɵelementStart(
|
|
176
|
-
i0.ɵɵtext(
|
|
140
|
+
i0.ɵɵelementStart(12, "div", 25)(13, "div", 26);
|
|
141
|
+
i0.ɵɵelement(14, "i", 31);
|
|
142
|
+
i0.ɵɵelementStart(15, "span");
|
|
143
|
+
i0.ɵɵtext(16, "Hidden Columns");
|
|
177
144
|
i0.ɵɵelementEnd();
|
|
178
|
-
i0.ɵɵelementStart(
|
|
179
|
-
i0.ɵɵtext(
|
|
145
|
+
i0.ɵɵelementStart(17, "span", 28);
|
|
146
|
+
i0.ɵɵtext(18);
|
|
180
147
|
i0.ɵɵelementEnd()();
|
|
181
|
-
i0.ɵɵtemplate(
|
|
182
|
-
i0.ɵɵelementStart(
|
|
183
|
-
i0.ɵɵrepeaterCreate(
|
|
184
|
-
i0.ɵɵtemplate(
|
|
148
|
+
i0.ɵɵtemplate(19, ViewConfigPanelComponent_Conditional_30_Conditional_19_Template, 3, 1, "div", 32);
|
|
149
|
+
i0.ɵɵelementStart(20, "div", 33);
|
|
150
|
+
i0.ɵɵrepeaterCreate(21, ViewConfigPanelComponent_Conditional_30_For_22_Template, 5, 1, "div", 34, _forTrack0);
|
|
151
|
+
i0.ɵɵtemplate(23, ViewConfigPanelComponent_Conditional_30_Conditional_23_Template, 4, 0, "div", 30);
|
|
185
152
|
i0.ɵɵelementEnd()()();
|
|
186
153
|
} if (rf & 2) {
|
|
187
154
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
188
155
|
i0.ɵɵadvance(7);
|
|
189
|
-
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.sortField);
|
|
190
|
-
i0.ɵɵadvance();
|
|
191
|
-
i0.ɵɵproperty("value", null);
|
|
192
|
-
i0.ɵɵadvance(2);
|
|
193
|
-
i0.ɵɵrepeater(ctx_r1.sortableFields);
|
|
194
|
-
i0.ɵɵadvance(2);
|
|
195
|
-
i0.ɵɵconditional(ctx_r1.sortField ? 12 : -1);
|
|
196
|
-
i0.ɵɵadvance(7);
|
|
197
156
|
i0.ɵɵtextInterpolate(ctx_r1.visibleColumns.length);
|
|
198
157
|
i0.ɵɵadvance(2);
|
|
199
158
|
i0.ɵɵrepeater(ctx_r1.visibleColumns);
|
|
200
159
|
i0.ɵɵadvance(2);
|
|
201
|
-
i0.ɵɵconditional(ctx_r1.visibleColumns.length === 0 ?
|
|
160
|
+
i0.ɵɵconditional(ctx_r1.visibleColumns.length === 0 ? 11 : -1);
|
|
202
161
|
i0.ɵɵadvance(7);
|
|
203
162
|
i0.ɵɵtextInterpolate(ctx_r1.hiddenColumns.length);
|
|
204
163
|
i0.ɵɵadvance();
|
|
205
|
-
i0.ɵɵconditional(ctx_r1.hiddenColumns.length > 5 ?
|
|
164
|
+
i0.ɵɵconditional(ctx_r1.hiddenColumns.length > 5 ? 19 : -1);
|
|
206
165
|
i0.ɵɵadvance(2);
|
|
207
166
|
i0.ɵɵrepeater(ctx_r1.filteredHiddenColumns);
|
|
208
167
|
i0.ɵɵadvance(2);
|
|
209
|
-
i0.ɵɵconditional(ctx_r1.hiddenColumns.length === 0 ?
|
|
168
|
+
i0.ɵɵconditional(ctx_r1.hiddenColumns.length === 0 ? 23 : -1);
|
|
210
169
|
} }
|
|
211
|
-
function
|
|
212
|
-
const
|
|
213
|
-
i0.ɵɵelementStart(0, "div",
|
|
170
|
+
function ViewConfigPanelComponent_Conditional_31_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
171
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
172
|
+
i0.ɵɵelementStart(0, "div", 65)(1, "small", 101);
|
|
214
173
|
i0.ɵɵtext(2);
|
|
215
174
|
i0.ɵɵelementEnd();
|
|
216
|
-
i0.ɵɵelementStart(3, "button",
|
|
217
|
-
i0.ɵɵlistener("click", function
|
|
175
|
+
i0.ɵɵelementStart(3, "button", 102);
|
|
176
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Conditional_16_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.userDisplayName = undefined); });
|
|
218
177
|
i0.ɵɵelement(4, "i", 8);
|
|
219
178
|
i0.ɵɵelementEnd()();
|
|
220
179
|
} if (rf & 2) {
|
|
@@ -222,40 +181,40 @@ function ViewConfigPanelComponent_Conditional_26_Conditional_16_Template(rf, ctx
|
|
|
222
181
|
i0.ɵɵadvance(2);
|
|
223
182
|
i0.ɵɵtextInterpolate1("Original: ", ctx_r1.formatEditingColumn.displayName, "");
|
|
224
183
|
} }
|
|
225
|
-
function
|
|
226
|
-
i0.ɵɵelementStart(0, "div",
|
|
184
|
+
function ViewConfigPanelComponent_Conditional_31_For_26_Template(rf, ctx) { if (rf & 1) {
|
|
185
|
+
i0.ɵɵelementStart(0, "div", 103);
|
|
227
186
|
i0.ɵɵtext(1);
|
|
228
187
|
i0.ɵɵelementEnd();
|
|
229
188
|
} if (rf & 2) {
|
|
230
|
-
const
|
|
189
|
+
const value_r11 = ctx.$implicit;
|
|
231
190
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
232
191
|
i0.ɵɵstyleProp("text-align", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.align) || "left")("font-weight", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.bold) ? "bold" : "normal")("font-style", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.italic) ? "italic" : "normal")("text-decoration", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.underline) ? "underline" : "none")("color", ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.color)("background-color", ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.backgroundColor);
|
|
233
192
|
i0.ɵɵadvance();
|
|
234
|
-
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPreviewValue(
|
|
193
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.formatPreviewValue(value_r11, ctx_r1.formatEditingColumn.format), " ");
|
|
235
194
|
} }
|
|
236
|
-
function
|
|
237
|
-
const
|
|
238
|
-
i0.ɵɵelementStart(0, "div",
|
|
195
|
+
function ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
196
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
197
|
+
i0.ɵɵelementStart(0, "div", 63)(1, "label");
|
|
239
198
|
i0.ɵɵtext(2, "Currency");
|
|
240
199
|
i0.ɵɵelementEnd();
|
|
241
|
-
i0.ɵɵelementStart(3, "select",
|
|
242
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
243
|
-
i0.ɵɵelementStart(4, "option",
|
|
200
|
+
i0.ɵɵelementStart(3, "select", 72);
|
|
201
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template_select_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.currencyCode, $event) || (ctx_r1.formatEditingColumn.format.currencyCode = $event); return i0.ɵɵresetView($event); });
|
|
202
|
+
i0.ɵɵelementStart(4, "option", 107);
|
|
244
203
|
i0.ɵɵtext(5, "USD ($)");
|
|
245
204
|
i0.ɵɵelementEnd();
|
|
246
|
-
i0.ɵɵelementStart(6, "option",
|
|
205
|
+
i0.ɵɵelementStart(6, "option", 108);
|
|
247
206
|
i0.ɵɵtext(7, "EUR (\u20AC)");
|
|
248
207
|
i0.ɵɵelementEnd();
|
|
249
|
-
i0.ɵɵelementStart(8, "option",
|
|
208
|
+
i0.ɵɵelementStart(8, "option", 109);
|
|
250
209
|
i0.ɵɵtext(9, "GBP (\u00A3)");
|
|
251
210
|
i0.ɵɵelementEnd();
|
|
252
|
-
i0.ɵɵelementStart(10, "option",
|
|
211
|
+
i0.ɵɵelementStart(10, "option", 110);
|
|
253
212
|
i0.ɵɵtext(11, "JPY (\u00A5)");
|
|
254
213
|
i0.ɵɵelementEnd();
|
|
255
|
-
i0.ɵɵelementStart(12, "option",
|
|
214
|
+
i0.ɵɵelementStart(12, "option", 111);
|
|
256
215
|
i0.ɵɵtext(13, "CAD ($)");
|
|
257
216
|
i0.ɵɵelementEnd();
|
|
258
|
-
i0.ɵɵelementStart(14, "option",
|
|
217
|
+
i0.ɵɵelementStart(14, "option", 112);
|
|
259
218
|
i0.ɵɵtext(15, "AUD ($)");
|
|
260
219
|
i0.ɵɵelementEnd()()();
|
|
261
220
|
} if (rf & 2) {
|
|
@@ -263,25 +222,25 @@ function ViewConfigPanelComponent_Conditional_26_Conditional_49_Conditional_9_Te
|
|
|
263
222
|
i0.ɵɵadvance(3);
|
|
264
223
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.currencyCode);
|
|
265
224
|
} }
|
|
266
|
-
function
|
|
267
|
-
const
|
|
268
|
-
i0.ɵɵelementStart(0, "div",
|
|
269
|
-
i0.ɵɵelement(2, "i",
|
|
225
|
+
function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template(rf, ctx) { if (rf & 1) {
|
|
226
|
+
const _r12 = i0.ɵɵgetCurrentView();
|
|
227
|
+
i0.ɵɵelementStart(0, "div", 60)(1, "div", 61);
|
|
228
|
+
i0.ɵɵelement(2, "i", 104);
|
|
270
229
|
i0.ɵɵelementStart(3, "span");
|
|
271
230
|
i0.ɵɵtext(4, "Number Options");
|
|
272
231
|
i0.ɵɵelementEnd()();
|
|
273
|
-
i0.ɵɵelementStart(5, "div",
|
|
232
|
+
i0.ɵɵelementStart(5, "div", 63)(6, "label");
|
|
274
233
|
i0.ɵɵtext(7, "Decimal Places");
|
|
275
234
|
i0.ɵɵelementEnd();
|
|
276
|
-
i0.ɵɵelementStart(8, "input",
|
|
277
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
235
|
+
i0.ɵɵelementStart(8, "input", 105);
|
|
236
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.decimals, $event) || (ctx_r1.formatEditingColumn.format.decimals = $event); return i0.ɵɵresetView($event); });
|
|
278
237
|
i0.ɵɵelementEnd()();
|
|
279
|
-
i0.ɵɵtemplate(9,
|
|
280
|
-
i0.ɵɵelementStart(10, "div",
|
|
238
|
+
i0.ɵɵtemplate(9, ViewConfigPanelComponent_Conditional_31_Conditional_49_Conditional_9_Template, 16, 1, "div", 63);
|
|
239
|
+
i0.ɵɵelementStart(10, "div", 63)(11, "label");
|
|
281
240
|
i0.ɵɵtext(12, "Thousands Separator");
|
|
282
241
|
i0.ɵɵelementEnd();
|
|
283
|
-
i0.ɵɵelementStart(13, "input",
|
|
284
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
242
|
+
i0.ɵɵelementStart(13, "input", 106);
|
|
243
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_49_Template_input_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.thousandsSeparator, $event) || (ctx_r1.formatEditingColumn.format.thousandsSeparator = $event); return i0.ɵɵresetView($event); });
|
|
285
244
|
i0.ɵɵelementEnd()()();
|
|
286
245
|
} if (rf & 2) {
|
|
287
246
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -292,34 +251,34 @@ function ViewConfigPanelComponent_Conditional_26_Conditional_49_Template(rf, ctx
|
|
|
292
251
|
i0.ɵɵadvance(4);
|
|
293
252
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.thousandsSeparator);
|
|
294
253
|
} }
|
|
295
|
-
function
|
|
296
|
-
const
|
|
297
|
-
i0.ɵɵelementStart(0, "div",
|
|
298
|
-
i0.ɵɵelement(2, "i",
|
|
254
|
+
function ViewConfigPanelComponent_Conditional_31_Conditional_50_Template(rf, ctx) { if (rf & 1) {
|
|
255
|
+
const _r14 = i0.ɵɵgetCurrentView();
|
|
256
|
+
i0.ɵɵelementStart(0, "div", 60)(1, "div", 61);
|
|
257
|
+
i0.ɵɵelement(2, "i", 113);
|
|
299
258
|
i0.ɵɵelementStart(3, "span");
|
|
300
259
|
i0.ɵɵtext(4, "Date Options");
|
|
301
260
|
i0.ɵɵelementEnd()();
|
|
302
|
-
i0.ɵɵelementStart(5, "div",
|
|
261
|
+
i0.ɵɵelementStart(5, "div", 63)(6, "label");
|
|
303
262
|
i0.ɵɵtext(7, "Format");
|
|
304
263
|
i0.ɵɵelementEnd();
|
|
305
|
-
i0.ɵɵelementStart(8, "select",
|
|
306
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
307
|
-
i0.ɵɵelementStart(9, "option",
|
|
264
|
+
i0.ɵɵelementStart(8, "select", 72);
|
|
265
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_50_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.dateFormat, $event) || (ctx_r1.formatEditingColumn.format.dateFormat = $event); return i0.ɵɵresetView($event); });
|
|
266
|
+
i0.ɵɵelementStart(9, "option", 114);
|
|
308
267
|
i0.ɵɵtext(10, "Short (1/15/25)");
|
|
309
268
|
i0.ɵɵelementEnd();
|
|
310
|
-
i0.ɵɵelementStart(11, "option",
|
|
269
|
+
i0.ɵɵelementStart(11, "option", 115);
|
|
311
270
|
i0.ɵɵtext(12, "Short + Day (Wed, 1/15/25)");
|
|
312
271
|
i0.ɵɵelementEnd();
|
|
313
|
-
i0.ɵɵelementStart(13, "option",
|
|
272
|
+
i0.ɵɵelementStart(13, "option", 116);
|
|
314
273
|
i0.ɵɵtext(14, "Medium (Jan 15, 2025)");
|
|
315
274
|
i0.ɵɵelementEnd();
|
|
316
|
-
i0.ɵɵelementStart(15, "option",
|
|
275
|
+
i0.ɵɵelementStart(15, "option", 117);
|
|
317
276
|
i0.ɵɵtext(16, "Medium + Day (Wed, Jan 15, 2025)");
|
|
318
277
|
i0.ɵɵelementEnd();
|
|
319
|
-
i0.ɵɵelementStart(17, "option",
|
|
278
|
+
i0.ɵɵelementStart(17, "option", 118);
|
|
320
279
|
i0.ɵɵtext(18, "Long (January 15, 2025)");
|
|
321
280
|
i0.ɵɵelementEnd();
|
|
322
|
-
i0.ɵɵelementStart(19, "option",
|
|
281
|
+
i0.ɵɵelementStart(19, "option", 119);
|
|
323
282
|
i0.ɵɵtext(20, "Long + Day (Wednesday, January 15, 2025)");
|
|
324
283
|
i0.ɵɵelementEnd()()()();
|
|
325
284
|
} if (rf & 2) {
|
|
@@ -327,37 +286,37 @@ function ViewConfigPanelComponent_Conditional_26_Conditional_50_Template(rf, ctx
|
|
|
327
286
|
i0.ɵɵadvance(8);
|
|
328
287
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.dateFormat);
|
|
329
288
|
} }
|
|
330
|
-
function
|
|
331
|
-
const
|
|
332
|
-
i0.ɵɵelementStart(0, "div",
|
|
333
|
-
i0.ɵɵelement(2, "i",
|
|
289
|
+
function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template(rf, ctx) { if (rf & 1) {
|
|
290
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
291
|
+
i0.ɵɵelementStart(0, "div", 60)(1, "div", 61);
|
|
292
|
+
i0.ɵɵelement(2, "i", 120);
|
|
334
293
|
i0.ɵɵelementStart(3, "span");
|
|
335
294
|
i0.ɵɵtext(4, "Boolean Options");
|
|
336
295
|
i0.ɵɵelementEnd()();
|
|
337
|
-
i0.ɵɵelementStart(5, "div",
|
|
296
|
+
i0.ɵɵelementStart(5, "div", 63)(6, "label");
|
|
338
297
|
i0.ɵɵtext(7, "True Label");
|
|
339
298
|
i0.ɵɵelementEnd();
|
|
340
|
-
i0.ɵɵelementStart(8, "input",
|
|
341
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
299
|
+
i0.ɵɵelementStart(8, "input", 121);
|
|
300
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.trueLabel, $event) || (ctx_r1.formatEditingColumn.format.trueLabel = $event); return i0.ɵɵresetView($event); });
|
|
342
301
|
i0.ɵɵelementEnd()();
|
|
343
|
-
i0.ɵɵelementStart(9, "div",
|
|
302
|
+
i0.ɵɵelementStart(9, "div", 63)(10, "label");
|
|
344
303
|
i0.ɵɵtext(11, "False Label");
|
|
345
304
|
i0.ɵɵelementEnd();
|
|
346
|
-
i0.ɵɵelementStart(12, "input",
|
|
347
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
305
|
+
i0.ɵɵelementStart(12, "input", 122);
|
|
306
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.falseLabel, $event) || (ctx_r1.formatEditingColumn.format.falseLabel = $event); return i0.ɵɵresetView($event); });
|
|
348
307
|
i0.ɵɵelementEnd()();
|
|
349
|
-
i0.ɵɵelementStart(13, "div",
|
|
308
|
+
i0.ɵɵelementStart(13, "div", 63)(14, "label");
|
|
350
309
|
i0.ɵɵtext(15, "Display As");
|
|
351
310
|
i0.ɵɵelementEnd();
|
|
352
|
-
i0.ɵɵelementStart(16, "select",
|
|
353
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
354
|
-
i0.ɵɵelementStart(17, "option",
|
|
311
|
+
i0.ɵɵelementStart(16, "select", 72);
|
|
312
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Conditional_51_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.booleanDisplay, $event) || (ctx_r1.formatEditingColumn.format.booleanDisplay = $event); return i0.ɵɵresetView($event); });
|
|
313
|
+
i0.ɵɵelementStart(17, "option", 74);
|
|
355
314
|
i0.ɵɵtext(18, "Text");
|
|
356
315
|
i0.ɵɵelementEnd();
|
|
357
|
-
i0.ɵɵelementStart(19, "option",
|
|
316
|
+
i0.ɵɵelementStart(19, "option", 123);
|
|
358
317
|
i0.ɵɵtext(20, "Checkbox");
|
|
359
318
|
i0.ɵɵelementEnd();
|
|
360
|
-
i0.ɵɵelementStart(21, "option",
|
|
319
|
+
i0.ɵɵelementStart(21, "option", 124);
|
|
361
320
|
i0.ɵɵtext(22, "Icon");
|
|
362
321
|
i0.ɵɵelementEnd()()()();
|
|
363
322
|
} if (rf & 2) {
|
|
@@ -369,148 +328,148 @@ function ViewConfigPanelComponent_Conditional_26_Conditional_51_Template(rf, ctx
|
|
|
369
328
|
i0.ɵɵadvance(4);
|
|
370
329
|
i0.ɵɵtwoWayProperty("ngModel", ctx_r1.formatEditingColumn.format.booleanDisplay);
|
|
371
330
|
} }
|
|
372
|
-
function
|
|
373
|
-
const
|
|
374
|
-
i0.ɵɵelementStart(0, "div",
|
|
375
|
-
i0.ɵɵlistener("click", function
|
|
376
|
-
i0.ɵɵelement(3, "i",
|
|
331
|
+
function ViewConfigPanelComponent_Conditional_31_Template(rf, ctx) { if (rf & 1) {
|
|
332
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
333
|
+
i0.ɵɵelementStart(0, "div", 18)(1, "div", 56)(2, "button", 57);
|
|
334
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
|
|
335
|
+
i0.ɵɵelement(3, "i", 58);
|
|
377
336
|
i0.ɵɵelementEnd();
|
|
378
|
-
i0.ɵɵelementStart(4, "div",
|
|
337
|
+
i0.ɵɵelementStart(4, "div", 59)(5, "span");
|
|
379
338
|
i0.ɵɵtext(6);
|
|
380
339
|
i0.ɵɵelementEnd()()();
|
|
381
|
-
i0.ɵɵelementStart(7, "div",
|
|
382
|
-
i0.ɵɵelement(9, "i",
|
|
340
|
+
i0.ɵɵelementStart(7, "div", 60)(8, "div", 61);
|
|
341
|
+
i0.ɵɵelement(9, "i", 62);
|
|
383
342
|
i0.ɵɵelementStart(10, "span");
|
|
384
343
|
i0.ɵɵtext(11, "Column Name");
|
|
385
344
|
i0.ɵɵelementEnd()();
|
|
386
|
-
i0.ɵɵelementStart(12, "div",
|
|
345
|
+
i0.ɵɵelementStart(12, "div", 63)(13, "label");
|
|
387
346
|
i0.ɵɵtext(14, "Display As");
|
|
388
347
|
i0.ɵɵelementEnd();
|
|
389
|
-
i0.ɵɵelementStart(15, "input",
|
|
390
|
-
i0.ɵɵlistener("input", function
|
|
348
|
+
i0.ɵɵelementStart(15, "input", 64);
|
|
349
|
+
i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_15_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateUserDisplayName($event.target.value)); });
|
|
391
350
|
i0.ɵɵelementEnd()();
|
|
392
|
-
i0.ɵɵtemplate(16,
|
|
351
|
+
i0.ɵɵtemplate(16, ViewConfigPanelComponent_Conditional_31_Conditional_16_Template, 5, 1, "div", 65);
|
|
393
352
|
i0.ɵɵelementEnd();
|
|
394
|
-
i0.ɵɵelementStart(17, "div",
|
|
395
|
-
i0.ɵɵelement(19, "i",
|
|
353
|
+
i0.ɵɵelementStart(17, "div", 66)(18, "div", 67);
|
|
354
|
+
i0.ɵɵelement(19, "i", 27);
|
|
396
355
|
i0.ɵɵelementStart(20, "span");
|
|
397
356
|
i0.ɵɵtext(21, "Preview");
|
|
398
357
|
i0.ɵɵelementEnd()();
|
|
399
|
-
i0.ɵɵelementStart(22, "div",
|
|
358
|
+
i0.ɵɵelementStart(22, "div", 68)(23, "div", 69);
|
|
400
359
|
i0.ɵɵtext(24);
|
|
401
360
|
i0.ɵɵelementEnd();
|
|
402
|
-
i0.ɵɵrepeaterCreate(25,
|
|
361
|
+
i0.ɵɵrepeaterCreate(25, ViewConfigPanelComponent_Conditional_31_For_26_Template, 2, 13, "div", 70, i0.ɵɵrepeaterTrackByIndex);
|
|
403
362
|
i0.ɵɵelementEnd()();
|
|
404
|
-
i0.ɵɵelementStart(27, "div",
|
|
405
|
-
i0.ɵɵelement(29, "i",
|
|
363
|
+
i0.ɵɵelementStart(27, "div", 60)(28, "div", 61);
|
|
364
|
+
i0.ɵɵelement(29, "i", 71);
|
|
406
365
|
i0.ɵɵelementStart(30, "span");
|
|
407
366
|
i0.ɵɵtext(31, "Format Type");
|
|
408
367
|
i0.ɵɵelementEnd()();
|
|
409
|
-
i0.ɵɵelementStart(32, "select",
|
|
410
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
411
|
-
i0.ɵɵelementStart(33, "option",
|
|
368
|
+
i0.ɵɵelementStart(32, "select", 72);
|
|
369
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_31_Template_select_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.formatEditingColumn.format.type, $event) || (ctx_r1.formatEditingColumn.format.type = $event); return i0.ɵɵresetView($event); });
|
|
370
|
+
i0.ɵɵelementStart(33, "option", 73);
|
|
412
371
|
i0.ɵɵtext(34, "Auto (Smart Default)");
|
|
413
372
|
i0.ɵɵelementEnd();
|
|
414
|
-
i0.ɵɵelementStart(35, "option",
|
|
373
|
+
i0.ɵɵelementStart(35, "option", 74);
|
|
415
374
|
i0.ɵɵtext(36, "Text");
|
|
416
375
|
i0.ɵɵelementEnd();
|
|
417
|
-
i0.ɵɵelementStart(37, "option",
|
|
376
|
+
i0.ɵɵelementStart(37, "option", 75);
|
|
418
377
|
i0.ɵɵtext(38, "Number");
|
|
419
378
|
i0.ɵɵelementEnd();
|
|
420
|
-
i0.ɵɵelementStart(39, "option",
|
|
379
|
+
i0.ɵɵelementStart(39, "option", 76);
|
|
421
380
|
i0.ɵɵtext(40, "Currency");
|
|
422
381
|
i0.ɵɵelementEnd();
|
|
423
|
-
i0.ɵɵelementStart(41, "option",
|
|
382
|
+
i0.ɵɵelementStart(41, "option", 77);
|
|
424
383
|
i0.ɵɵtext(42, "Percent");
|
|
425
384
|
i0.ɵɵelementEnd();
|
|
426
|
-
i0.ɵɵelementStart(43, "option",
|
|
385
|
+
i0.ɵɵelementStart(43, "option", 78);
|
|
427
386
|
i0.ɵɵtext(44, "Date");
|
|
428
387
|
i0.ɵɵelementEnd();
|
|
429
|
-
i0.ɵɵelementStart(45, "option",
|
|
388
|
+
i0.ɵɵelementStart(45, "option", 79);
|
|
430
389
|
i0.ɵɵtext(46, "Date & Time");
|
|
431
390
|
i0.ɵɵelementEnd();
|
|
432
|
-
i0.ɵɵelementStart(47, "option",
|
|
391
|
+
i0.ɵɵelementStart(47, "option", 80);
|
|
433
392
|
i0.ɵɵtext(48, "Boolean");
|
|
434
393
|
i0.ɵɵelementEnd()()();
|
|
435
|
-
i0.ɵɵtemplate(49,
|
|
436
|
-
i0.ɵɵelementStart(52, "div",
|
|
437
|
-
i0.ɵɵelement(54, "i",
|
|
394
|
+
i0.ɵɵtemplate(49, ViewConfigPanelComponent_Conditional_31_Conditional_49_Template, 14, 3, "div", 60)(50, ViewConfigPanelComponent_Conditional_31_Conditional_50_Template, 21, 1, "div", 60)(51, ViewConfigPanelComponent_Conditional_31_Conditional_51_Template, 23, 3, "div", 60);
|
|
395
|
+
i0.ɵɵelementStart(52, "div", 60)(53, "div", 61);
|
|
396
|
+
i0.ɵɵelement(54, "i", 81);
|
|
438
397
|
i0.ɵɵelementStart(55, "span");
|
|
439
398
|
i0.ɵɵtext(56, "Alignment");
|
|
440
399
|
i0.ɵɵelementEnd()();
|
|
441
|
-
i0.ɵɵelementStart(57, "div",
|
|
442
|
-
i0.ɵɵlistener("click", function
|
|
443
|
-
i0.ɵɵelement(59, "i",
|
|
400
|
+
i0.ɵɵelementStart(57, "div", 82)(58, "button", 83);
|
|
401
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_58_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "left"); });
|
|
402
|
+
i0.ɵɵelement(59, "i", 81);
|
|
444
403
|
i0.ɵɵelementEnd();
|
|
445
|
-
i0.ɵɵelementStart(60, "button",
|
|
446
|
-
i0.ɵɵlistener("click", function
|
|
447
|
-
i0.ɵɵelement(61, "i",
|
|
404
|
+
i0.ɵɵelementStart(60, "button", 84);
|
|
405
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_60_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "center"); });
|
|
406
|
+
i0.ɵɵelement(61, "i", 85);
|
|
448
407
|
i0.ɵɵelementEnd();
|
|
449
|
-
i0.ɵɵelementStart(62, "button",
|
|
450
|
-
i0.ɵɵlistener("click", function
|
|
451
|
-
i0.ɵɵelement(63, "i",
|
|
408
|
+
i0.ɵɵelementStart(62, "button", 86);
|
|
409
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_62_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.formatEditingColumn.format.align = "right"); });
|
|
410
|
+
i0.ɵɵelement(63, "i", 87);
|
|
452
411
|
i0.ɵɵelementEnd()()();
|
|
453
|
-
i0.ɵɵelementStart(64, "div",
|
|
454
|
-
i0.ɵɵelement(66, "i",
|
|
412
|
+
i0.ɵɵelementStart(64, "div", 60)(65, "div", 61);
|
|
413
|
+
i0.ɵɵelement(66, "i", 88);
|
|
455
414
|
i0.ɵɵelementStart(67, "span");
|
|
456
415
|
i0.ɵɵtext(68, "Header Style");
|
|
457
416
|
i0.ɵɵelementEnd()();
|
|
458
|
-
i0.ɵɵelementStart(69, "div",
|
|
459
|
-
i0.ɵɵlistener("click", function
|
|
460
|
-
i0.ɵɵelement(71, "i",
|
|
417
|
+
i0.ɵɵelementStart(69, "div", 89)(70, "button", 90);
|
|
418
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_70_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("bold")); });
|
|
419
|
+
i0.ɵɵelement(71, "i", 91);
|
|
461
420
|
i0.ɵɵelementEnd();
|
|
462
|
-
i0.ɵɵelementStart(72, "button",
|
|
463
|
-
i0.ɵɵlistener("click", function
|
|
464
|
-
i0.ɵɵelement(73, "i",
|
|
421
|
+
i0.ɵɵelementStart(72, "button", 92);
|
|
422
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_72_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("italic")); });
|
|
423
|
+
i0.ɵɵelement(73, "i", 93);
|
|
465
424
|
i0.ɵɵelementEnd();
|
|
466
|
-
i0.ɵɵelementStart(74, "button",
|
|
467
|
-
i0.ɵɵlistener("click", function
|
|
468
|
-
i0.ɵɵelement(75, "i",
|
|
425
|
+
i0.ɵɵelementStart(74, "button", 94);
|
|
426
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_74_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleHeaderStyle("underline")); });
|
|
427
|
+
i0.ɵɵelement(75, "i", 95);
|
|
469
428
|
i0.ɵɵelementEnd()();
|
|
470
|
-
i0.ɵɵelementStart(76, "div",
|
|
429
|
+
i0.ɵɵelementStart(76, "div", 63)(77, "label");
|
|
471
430
|
i0.ɵɵtext(78, "Text Color");
|
|
472
431
|
i0.ɵɵelementEnd();
|
|
473
|
-
i0.ɵɵelementStart(79, "input",
|
|
474
|
-
i0.ɵɵlistener("input", function
|
|
432
|
+
i0.ɵɵelementStart(79, "input", 96);
|
|
433
|
+
i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_79_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("color", $event.target.value)); });
|
|
475
434
|
i0.ɵɵelementEnd()();
|
|
476
|
-
i0.ɵɵelementStart(80, "div",
|
|
435
|
+
i0.ɵɵelementStart(80, "div", 63)(81, "label");
|
|
477
436
|
i0.ɵɵtext(82, "Background");
|
|
478
437
|
i0.ɵɵelementEnd();
|
|
479
|
-
i0.ɵɵelementStart(83, "input",
|
|
480
|
-
i0.ɵɵlistener("input", function
|
|
438
|
+
i0.ɵɵelementStart(83, "input", 96);
|
|
439
|
+
i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_83_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateHeaderColor("backgroundColor", $event.target.value)); });
|
|
481
440
|
i0.ɵɵelementEnd()()();
|
|
482
|
-
i0.ɵɵelementStart(84, "div",
|
|
483
|
-
i0.ɵɵelement(86, "i",
|
|
441
|
+
i0.ɵɵelementStart(84, "div", 60)(85, "div", 61);
|
|
442
|
+
i0.ɵɵelement(86, "i", 97);
|
|
484
443
|
i0.ɵɵelementStart(87, "span");
|
|
485
444
|
i0.ɵɵtext(88, "Cell Style");
|
|
486
445
|
i0.ɵɵelementEnd()();
|
|
487
|
-
i0.ɵɵelementStart(89, "div",
|
|
488
|
-
i0.ɵɵlistener("click", function
|
|
489
|
-
i0.ɵɵelement(91, "i",
|
|
446
|
+
i0.ɵɵelementStart(89, "div", 89)(90, "button", 90);
|
|
447
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_90_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("bold")); });
|
|
448
|
+
i0.ɵɵelement(91, "i", 91);
|
|
490
449
|
i0.ɵɵelementEnd();
|
|
491
|
-
i0.ɵɵelementStart(92, "button",
|
|
492
|
-
i0.ɵɵlistener("click", function
|
|
493
|
-
i0.ɵɵelement(93, "i",
|
|
450
|
+
i0.ɵɵelementStart(92, "button", 92);
|
|
451
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_92_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("italic")); });
|
|
452
|
+
i0.ɵɵelement(93, "i", 93);
|
|
494
453
|
i0.ɵɵelementEnd();
|
|
495
|
-
i0.ɵɵelementStart(94, "button",
|
|
496
|
-
i0.ɵɵlistener("click", function
|
|
497
|
-
i0.ɵɵelement(95, "i",
|
|
454
|
+
i0.ɵɵelementStart(94, "button", 94);
|
|
455
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_94_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCellStyle("underline")); });
|
|
456
|
+
i0.ɵɵelement(95, "i", 95);
|
|
498
457
|
i0.ɵɵelementEnd()();
|
|
499
|
-
i0.ɵɵelementStart(96, "div",
|
|
458
|
+
i0.ɵɵelementStart(96, "div", 63)(97, "label");
|
|
500
459
|
i0.ɵɵtext(98, "Text Color");
|
|
501
460
|
i0.ɵɵelementEnd();
|
|
502
|
-
i0.ɵɵelementStart(99, "input",
|
|
503
|
-
i0.ɵɵlistener("input", function
|
|
461
|
+
i0.ɵɵelementStart(99, "input", 96);
|
|
462
|
+
i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_99_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("color", $event.target.value)); });
|
|
504
463
|
i0.ɵɵelementEnd()();
|
|
505
|
-
i0.ɵɵelementStart(100, "div",
|
|
464
|
+
i0.ɵɵelementStart(100, "div", 63)(101, "label");
|
|
506
465
|
i0.ɵɵtext(102, "Background");
|
|
507
466
|
i0.ɵɵelementEnd();
|
|
508
|
-
i0.ɵɵelementStart(103, "input",
|
|
509
|
-
i0.ɵɵlistener("input", function
|
|
467
|
+
i0.ɵɵelementStart(103, "input", 96);
|
|
468
|
+
i0.ɵɵlistener("input", function ViewConfigPanelComponent_Conditional_31_Template_input_input_103_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.updateCellColor("backgroundColor", $event.target.value)); });
|
|
510
469
|
i0.ɵɵelementEnd()()();
|
|
511
|
-
i0.ɵɵelementStart(104, "div",
|
|
512
|
-
i0.ɵɵlistener("click", function
|
|
513
|
-
i0.ɵɵelement(106, "i",
|
|
470
|
+
i0.ɵɵelementStart(104, "div", 98)(105, "button", 99);
|
|
471
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_31_Template_button_click_105_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.clearColumnFormat(ctx_r1.formatEditingColumn); return i0.ɵɵresetView(ctx_r1.closeFormatEditor()); });
|
|
472
|
+
i0.ɵɵelement(106, "i", 100);
|
|
514
473
|
i0.ɵɵtext(107, " Clear Formatting ");
|
|
515
474
|
i0.ɵɵelementEnd()()();
|
|
516
475
|
} if (rf & 2) {
|
|
@@ -562,15 +521,134 @@ function ViewConfigPanelComponent_Conditional_26_Template(rf, ctx) { if (rf & 1)
|
|
|
562
521
|
i0.ɵɵadvance(4);
|
|
563
522
|
i0.ɵɵproperty("value", (ctx_r1.formatEditingColumn.format == null ? null : ctx_r1.formatEditingColumn.format.cellStyle == null ? null : ctx_r1.formatEditingColumn.format.cellStyle.backgroundColor) || "#ffffff");
|
|
564
523
|
} }
|
|
565
|
-
function
|
|
566
|
-
i0.ɵɵelement(0, "
|
|
524
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
525
|
+
i0.ɵɵelement(0, "div", 132);
|
|
567
526
|
} }
|
|
568
|
-
function
|
|
569
|
-
i0.ɵɵ
|
|
527
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_For_8_Template(rf, ctx) { if (rf & 1) {
|
|
528
|
+
i0.ɵɵelementStart(0, "option", 137);
|
|
529
|
+
i0.ɵɵtext(1);
|
|
530
|
+
i0.ɵɵelementEnd();
|
|
531
|
+
} if (rf & 2) {
|
|
532
|
+
const field_r19 = ctx.$implicit;
|
|
533
|
+
i0.ɵɵproperty("value", field_r19.Name);
|
|
534
|
+
i0.ɵɵadvance();
|
|
535
|
+
i0.ɵɵtextInterpolate(field_r19.DisplayNameOrName);
|
|
536
|
+
} }
|
|
537
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
538
|
+
i0.ɵɵelement(0, "div", 132);
|
|
570
539
|
} }
|
|
571
|
-
function
|
|
572
|
-
i0.ɵɵ
|
|
573
|
-
i0.ɵɵ
|
|
540
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
541
|
+
const _r17 = i0.ɵɵgetCurrentView();
|
|
542
|
+
i0.ɵɵtemplate(0, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_0_Template, 1, 0, "div", 132);
|
|
543
|
+
i0.ɵɵelementStart(1, "div", 133);
|
|
544
|
+
i0.ɵɵlistener("dragstart", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragstart_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragStart($event, sortItem_r18)); })("dragover", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragover_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragOver($event, sortItem_r18)); })("dragleave", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragleave_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragLeave($event)); })("drop", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_drop_1_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDrop($event, sortItem_r18)); })("dragend", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_div_dragend_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDragEnd($event)); });
|
|
545
|
+
i0.ɵɵelementStart(2, "div", 134);
|
|
546
|
+
i0.ɵɵtext(3);
|
|
547
|
+
i0.ɵɵelementEnd();
|
|
548
|
+
i0.ɵɵelementStart(4, "div", 135);
|
|
549
|
+
i0.ɵɵelement(5, "i", 38);
|
|
550
|
+
i0.ɵɵelementEnd();
|
|
551
|
+
i0.ɵɵelementStart(6, "select", 136);
|
|
552
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; i0.ɵɵtwoWayBindingSet(sortItem_r18.field, $event) || (sortItem_r18.field = $event); return i0.ɵɵresetView($event); });
|
|
553
|
+
i0.ɵɵlistener("ngModelChange", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_select_ngModelChange_6_listener($event) { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortFieldChange(sortItem_r18, $event)); });
|
|
554
|
+
i0.ɵɵrepeaterCreate(7, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_For_8_Template, 2, 2, "option", 137, _forTrack1);
|
|
555
|
+
i0.ɵɵelementEnd();
|
|
556
|
+
i0.ɵɵelementStart(9, "div", 138)(10, "button", 139);
|
|
557
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_10_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r18, "asc")); });
|
|
558
|
+
i0.ɵɵelement(11, "i", 140);
|
|
559
|
+
i0.ɵɵelementEnd();
|
|
560
|
+
i0.ɵɵelementStart(12, "button", 141);
|
|
561
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_12_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSortDirectionChange(sortItem_r18, "desc")); });
|
|
562
|
+
i0.ɵɵelement(13, "i", 142);
|
|
563
|
+
i0.ɵɵelementEnd()();
|
|
564
|
+
i0.ɵɵelementStart(14, "button", 143);
|
|
565
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template_button_click_14_listener() { const sortItem_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSortLevel(sortItem_r18)); });
|
|
566
|
+
i0.ɵɵelement(15, "i", 8);
|
|
567
|
+
i0.ɵɵelementEnd()();
|
|
568
|
+
i0.ɵɵtemplate(16, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Conditional_16_Template, 1, 0, "div", 132);
|
|
569
|
+
} if (rf & 2) {
|
|
570
|
+
const sortItem_r18 = ctx.$implicit;
|
|
571
|
+
const ɵ$index_505_r20 = ctx.$index;
|
|
572
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
573
|
+
i0.ɵɵconditional(ctx_r1.isSortDropBefore(sortItem_r18) ? 0 : -1);
|
|
574
|
+
i0.ɵɵadvance();
|
|
575
|
+
i0.ɵɵclassProp("dragging", ctx_r1.draggedSortItem === sortItem_r18)("drop-target", ctx_r1.dropTargetSortItem === sortItem_r18);
|
|
576
|
+
i0.ɵɵadvance(2);
|
|
577
|
+
i0.ɵɵtextInterpolate(ɵ$index_505_r20 + 1);
|
|
578
|
+
i0.ɵɵadvance(3);
|
|
579
|
+
i0.ɵɵtwoWayProperty("ngModel", sortItem_r18.field);
|
|
580
|
+
i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
|
|
581
|
+
i0.ɵɵadvance();
|
|
582
|
+
i0.ɵɵrepeater(ctx_r1.sortableFields);
|
|
583
|
+
i0.ɵɵadvance(3);
|
|
584
|
+
i0.ɵɵclassProp("active", sortItem_r18.direction === "asc");
|
|
585
|
+
i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
|
|
586
|
+
i0.ɵɵadvance(2);
|
|
587
|
+
i0.ɵɵclassProp("active", sortItem_r18.direction === "desc");
|
|
588
|
+
i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
|
|
589
|
+
i0.ɵɵadvance(2);
|
|
590
|
+
i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
|
|
591
|
+
i0.ɵɵadvance(2);
|
|
592
|
+
i0.ɵɵconditional(ctx_r1.isSortDropAfter(sortItem_r18) && ɵ$index_505_r20 === ctx_r1.sortItems.length - 1 ? 16 : -1);
|
|
593
|
+
} }
|
|
594
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
595
|
+
i0.ɵɵelementStart(0, "div", 131);
|
|
596
|
+
i0.ɵɵelement(1, "i", 50);
|
|
597
|
+
i0.ɵɵelementStart(2, "span");
|
|
598
|
+
i0.ɵɵtext(3, "Drag items to change priority. Records sort by first level, then second, etc.");
|
|
599
|
+
i0.ɵɵelementEnd()();
|
|
600
|
+
} }
|
|
601
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_9_Template(rf, ctx) { if (rf & 1) {
|
|
602
|
+
i0.ɵɵelementStart(0, "div", 130);
|
|
603
|
+
i0.ɵɵrepeaterCreate(1, ViewConfigPanelComponent_Conditional_32_Conditional_9_For_2_Template, 17, 16, null, null, i0.ɵɵrepeaterTrackByIndex);
|
|
604
|
+
i0.ɵɵelementEnd();
|
|
605
|
+
i0.ɵɵtemplate(3, ViewConfigPanelComponent_Conditional_32_Conditional_9_Conditional_3_Template, 4, 0, "div", 131);
|
|
606
|
+
} if (rf & 2) {
|
|
607
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
608
|
+
i0.ɵɵadvance();
|
|
609
|
+
i0.ɵɵrepeater(ctx_r1.sortItems);
|
|
610
|
+
i0.ɵɵadvance(2);
|
|
611
|
+
i0.ɵɵconditional(ctx_r1.sortItems.length > 1 ? 3 : -1);
|
|
612
|
+
} }
|
|
613
|
+
function ViewConfigPanelComponent_Conditional_32_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
614
|
+
i0.ɵɵelementStart(0, "div", 129);
|
|
615
|
+
i0.ɵɵelement(1, "i", 12);
|
|
616
|
+
i0.ɵɵelementStart(2, "span");
|
|
617
|
+
i0.ɵɵtext(3, "No sorting configured");
|
|
618
|
+
i0.ɵɵelementEnd();
|
|
619
|
+
i0.ɵɵelementStart(4, "p", 144);
|
|
620
|
+
i0.ɵɵtext(5, "Click \"Add Sort Level\" to define how records should be ordered");
|
|
621
|
+
i0.ɵɵelementEnd()();
|
|
622
|
+
} }
|
|
623
|
+
function ViewConfigPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1) {
|
|
624
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
625
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 125)(2, "div", 126)(3, "p", 127);
|
|
626
|
+
i0.ɵɵtext(4, " Define how records should be ordered. Add multiple levels to sort by secondary fields when values are equal. ");
|
|
627
|
+
i0.ɵɵelementEnd()();
|
|
628
|
+
i0.ɵɵelementStart(5, "button", 128);
|
|
629
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_32_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addSortLevel()); });
|
|
630
|
+
i0.ɵɵelement(6, "i", 54);
|
|
631
|
+
i0.ɵɵelementStart(7, "span");
|
|
632
|
+
i0.ɵɵtext(8, "Add Sort Level");
|
|
633
|
+
i0.ɵɵelementEnd()();
|
|
634
|
+
i0.ɵɵtemplate(9, ViewConfigPanelComponent_Conditional_32_Conditional_9_Template, 4, 1)(10, ViewConfigPanelComponent_Conditional_32_Conditional_10_Template, 6, 0, "div", 129);
|
|
635
|
+
i0.ɵɵelementEnd()();
|
|
636
|
+
} if (rf & 2) {
|
|
637
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
638
|
+
i0.ɵɵadvance(5);
|
|
639
|
+
i0.ɵɵproperty("disabled", !ctx_r1.canEdit || ctx_r1.sortItems.length >= ctx_r1.sortableFields.length);
|
|
640
|
+
i0.ɵɵadvance(4);
|
|
641
|
+
i0.ɵɵconditional(ctx_r1.sortItems.length > 0 ? 9 : 10);
|
|
642
|
+
} }
|
|
643
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
644
|
+
i0.ɵɵelement(0, "i", 152);
|
|
645
|
+
} }
|
|
646
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_19_Template(rf, ctx) { if (rf & 1) {
|
|
647
|
+
i0.ɵɵelement(0, "i", 152);
|
|
648
|
+
} }
|
|
649
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
650
|
+
i0.ɵɵelementStart(0, "div", 158);
|
|
651
|
+
i0.ɵɵelement(1, "i", 169);
|
|
574
652
|
i0.ɵɵelementStart(2, "span");
|
|
575
653
|
i0.ɵɵtext(3);
|
|
576
654
|
i0.ɵɵelementEnd()();
|
|
@@ -579,42 +657,42 @@ function ViewConfigPanelComponent_Conditional_27_Conditional_20_Conditional_5_Te
|
|
|
579
657
|
i0.ɵɵadvance(3);
|
|
580
658
|
i0.ɵɵtextInterpolate(ctx_r1.smartFilterExplanation);
|
|
581
659
|
} }
|
|
582
|
-
function
|
|
583
|
-
const
|
|
584
|
-
i0.ɵɵelementStart(0, "div",
|
|
585
|
-
i0.ɵɵelement(3, "i",
|
|
660
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template(rf, ctx) { if (rf & 1) {
|
|
661
|
+
const _r22 = i0.ɵɵgetCurrentView();
|
|
662
|
+
i0.ɵɵelementStart(0, "div", 153)(1, "div", 155)(2, "div", 156);
|
|
663
|
+
i0.ɵɵelement(3, "i", 148);
|
|
586
664
|
i0.ɵɵelementEnd();
|
|
587
|
-
i0.ɵɵelementStart(4, "textarea",
|
|
588
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
665
|
+
i0.ɵɵelementStart(4, "textarea", 157);
|
|
666
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_textarea_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.smartFilterPrompt, $event) || (ctx_r1.smartFilterPrompt = $event); return i0.ɵɵresetView($event); });
|
|
589
667
|
i0.ɵɵelementEnd()();
|
|
590
|
-
i0.ɵɵtemplate(5,
|
|
591
|
-
i0.ɵɵelementStart(6, "div",
|
|
592
|
-
i0.ɵɵelement(8, "i",
|
|
668
|
+
i0.ɵɵtemplate(5, ViewConfigPanelComponent_Conditional_33_Conditional_20_Conditional_5_Template, 4, 1, "div", 158);
|
|
669
|
+
i0.ɵɵelementStart(6, "div", 159)(7, "div", 160);
|
|
670
|
+
i0.ɵɵelement(8, "i", 161);
|
|
593
671
|
i0.ɵɵelementStart(9, "span");
|
|
594
672
|
i0.ɵɵtext(10, "Try these examples:");
|
|
595
673
|
i0.ɵɵelementEnd()();
|
|
596
|
-
i0.ɵɵelementStart(11, "div",
|
|
597
|
-
i0.ɵɵlistener("click", function
|
|
598
|
-
i0.ɵɵelement(13, "i",
|
|
674
|
+
i0.ɵɵelementStart(11, "div", 162)(12, "button", 163);
|
|
675
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Show records created in the last 30 days")); });
|
|
676
|
+
i0.ɵɵelement(13, "i", 164);
|
|
599
677
|
i0.ɵɵtext(14, " Last 30 days ");
|
|
600
678
|
i0.ɵɵelementEnd();
|
|
601
|
-
i0.ɵɵelementStart(15, "button",
|
|
602
|
-
i0.ɵɵlistener("click", function
|
|
603
|
-
i0.ɵɵelement(16, "i",
|
|
679
|
+
i0.ɵɵelementStart(15, "button", 163);
|
|
680
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Active records only")); });
|
|
681
|
+
i0.ɵɵelement(16, "i", 165);
|
|
604
682
|
i0.ɵɵtext(17, " Active only ");
|
|
605
683
|
i0.ɵɵelementEnd();
|
|
606
|
-
i0.ɵɵelementStart(18, "button",
|
|
607
|
-
i0.ɵɵlistener("click", function
|
|
608
|
-
i0.ɵɵelement(19, "i",
|
|
684
|
+
i0.ɵɵelementStart(18, "button", 163);
|
|
685
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records with high priority")); });
|
|
686
|
+
i0.ɵɵelement(19, "i", 166);
|
|
609
687
|
i0.ɵɵtext(20, " High priority ");
|
|
610
688
|
i0.ɵɵelementEnd();
|
|
611
|
-
i0.ɵɵelementStart(21, "button",
|
|
612
|
-
i0.ɵɵlistener("click", function
|
|
613
|
-
i0.ɵɵelement(22, "i",
|
|
689
|
+
i0.ɵɵelementStart(21, "button", 163);
|
|
690
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_20_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.applySmartFilterExample("Records modified this week")); });
|
|
691
|
+
i0.ɵɵelement(22, "i", 167);
|
|
614
692
|
i0.ɵɵtext(23, " Modified this week ");
|
|
615
693
|
i0.ɵɵelementEnd()()();
|
|
616
|
-
i0.ɵɵelementStart(24, "div",
|
|
617
|
-
i0.ɵɵelement(25, "i",
|
|
694
|
+
i0.ɵɵelementStart(24, "div", 168);
|
|
695
|
+
i0.ɵɵelement(25, "i", 50);
|
|
618
696
|
i0.ɵɵelementStart(26, "span");
|
|
619
697
|
i0.ɵɵtext(27, "The AI will interpret your description and create the appropriate filter when you save the view.");
|
|
620
698
|
i0.ɵɵelementEnd()()();
|
|
@@ -634,11 +712,11 @@ function ViewConfigPanelComponent_Conditional_27_Conditional_20_Template(rf, ctx
|
|
|
634
712
|
i0.ɵɵadvance(3);
|
|
635
713
|
i0.ɵɵproperty("disabled", !ctx_r1.canEdit);
|
|
636
714
|
} }
|
|
637
|
-
function
|
|
638
|
-
i0.ɵɵelementStart(0, "span",
|
|
715
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
716
|
+
i0.ɵɵelementStart(0, "span", 179);
|
|
639
717
|
i0.ɵɵtext(1);
|
|
640
718
|
i0.ɵɵelementEnd();
|
|
641
|
-
i0.ɵɵelementStart(2, "span",
|
|
719
|
+
i0.ɵɵelementStart(2, "span", 180);
|
|
642
720
|
i0.ɵɵtext(3);
|
|
643
721
|
i0.ɵɵelementEnd();
|
|
644
722
|
} if (rf & 2) {
|
|
@@ -648,33 +726,33 @@ function ViewConfigPanelComponent_Conditional_27_Conditional_21_Conditional_4_Te
|
|
|
648
726
|
i0.ɵɵadvance(2);
|
|
649
727
|
i0.ɵɵtextInterpolate(ctx_r1.getFilterSummary());
|
|
650
728
|
} }
|
|
651
|
-
function
|
|
652
|
-
i0.ɵɵelementStart(0, "span",
|
|
729
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
730
|
+
i0.ɵɵelementStart(0, "span", 173);
|
|
653
731
|
i0.ɵɵtext(1, "No filters configured");
|
|
654
732
|
i0.ɵɵelementEnd();
|
|
655
733
|
} }
|
|
656
|
-
function
|
|
657
|
-
const
|
|
658
|
-
i0.ɵɵelementStart(0, "button",
|
|
659
|
-
i0.ɵɵlistener("click", function
|
|
734
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
735
|
+
const _r24 = i0.ɵɵgetCurrentView();
|
|
736
|
+
i0.ɵɵelementStart(0, "button", 181);
|
|
737
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
|
|
660
738
|
i0.ɵɵelement(1, "i", 8);
|
|
661
739
|
i0.ɵɵtext(2, " Clear ");
|
|
662
740
|
i0.ɵɵelementEnd();
|
|
663
741
|
} }
|
|
664
|
-
function
|
|
665
|
-
const
|
|
666
|
-
i0.ɵɵelementStart(0, "div",
|
|
667
|
-
i0.ɵɵtemplate(4,
|
|
668
|
-
i0.ɵɵelementEnd();
|
|
669
|
-
i0.ɵɵelementStart(6, "div",
|
|
670
|
-
i0.ɵɵtemplate(7,
|
|
671
|
-
i0.ɵɵelementStart(8, "button",
|
|
672
|
-
i0.ɵɵlistener("click", function
|
|
673
|
-
i0.ɵɵelement(9, "i",
|
|
742
|
+
function ViewConfigPanelComponent_Conditional_33_Conditional_21_Template(rf, ctx) { if (rf & 1) {
|
|
743
|
+
const _r23 = i0.ɵɵgetCurrentView();
|
|
744
|
+
i0.ɵɵelementStart(0, "div", 154)(1, "div", 170)(2, "div", 171)(3, "div", 172);
|
|
745
|
+
i0.ɵɵtemplate(4, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_4_Template, 4, 2)(5, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_5_Template, 2, 0, "span", 173);
|
|
746
|
+
i0.ɵɵelementEnd();
|
|
747
|
+
i0.ɵɵelementStart(6, "div", 174);
|
|
748
|
+
i0.ɵɵtemplate(7, ViewConfigPanelComponent_Conditional_33_Conditional_21_Conditional_7_Template, 3, 0, "button", 175);
|
|
749
|
+
i0.ɵɵelementStart(8, "button", 176);
|
|
750
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Conditional_21_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openFilterDialog()); });
|
|
751
|
+
i0.ɵɵelement(9, "i", 177);
|
|
674
752
|
i0.ɵɵtext(10);
|
|
675
753
|
i0.ɵɵelementEnd()()()();
|
|
676
|
-
i0.ɵɵelementStart(11, "div",
|
|
677
|
-
i0.ɵɵelement(12, "i",
|
|
754
|
+
i0.ɵɵelementStart(11, "div", 178);
|
|
755
|
+
i0.ɵɵelement(12, "i", 50);
|
|
678
756
|
i0.ɵɵelementStart(13, "span");
|
|
679
757
|
i0.ɵɵtext(14, "Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.");
|
|
680
758
|
i0.ɵɵelementEnd()()();
|
|
@@ -689,35 +767,35 @@ function ViewConfigPanelComponent_Conditional_27_Conditional_21_Template(rf, ctx
|
|
|
689
767
|
i0.ɵɵadvance(2);
|
|
690
768
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.getFilterCount() > 0 ? "Edit Filters" : "Add Filters", " ");
|
|
691
769
|
} }
|
|
692
|
-
function
|
|
693
|
-
const
|
|
694
|
-
i0.ɵɵelementStart(0, "div",
|
|
695
|
-
i0.ɵɵlistener("click", function
|
|
696
|
-
i0.ɵɵelementStart(3, "div",
|
|
697
|
-
i0.ɵɵelement(4, "i",
|
|
698
|
-
i0.ɵɵelementEnd();
|
|
699
|
-
i0.ɵɵelementStart(5, "div",
|
|
770
|
+
function ViewConfigPanelComponent_Conditional_33_Template(rf, ctx) { if (rf & 1) {
|
|
771
|
+
const _r21 = i0.ɵɵgetCurrentView();
|
|
772
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 145)(2, "button", 146);
|
|
773
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("smart")); });
|
|
774
|
+
i0.ɵɵelementStart(3, "div", 147);
|
|
775
|
+
i0.ɵɵelement(4, "i", 148);
|
|
776
|
+
i0.ɵɵelementEnd();
|
|
777
|
+
i0.ɵɵelementStart(5, "div", 149)(6, "span", 150);
|
|
700
778
|
i0.ɵɵtext(7, "Smart Filter");
|
|
701
779
|
i0.ɵɵelementEnd();
|
|
702
|
-
i0.ɵɵelementStart(8, "span",
|
|
780
|
+
i0.ɵɵelementStart(8, "span", 151);
|
|
703
781
|
i0.ɵɵtext(9, "Use AI to filter with natural language");
|
|
704
782
|
i0.ɵɵelementEnd()();
|
|
705
|
-
i0.ɵɵtemplate(10,
|
|
783
|
+
i0.ɵɵtemplate(10, ViewConfigPanelComponent_Conditional_33_Conditional_10_Template, 1, 0, "i", 152);
|
|
706
784
|
i0.ɵɵelementEnd();
|
|
707
|
-
i0.ɵɵelementStart(11, "button",
|
|
708
|
-
i0.ɵɵlistener("click", function
|
|
709
|
-
i0.ɵɵelementStart(12, "div",
|
|
710
|
-
i0.ɵɵelement(13, "i",
|
|
785
|
+
i0.ɵɵelementStart(11, "button", 146);
|
|
786
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_33_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilterMode("traditional")); });
|
|
787
|
+
i0.ɵɵelementStart(12, "div", 147);
|
|
788
|
+
i0.ɵɵelement(13, "i", 104);
|
|
711
789
|
i0.ɵɵelementEnd();
|
|
712
|
-
i0.ɵɵelementStart(14, "div",
|
|
790
|
+
i0.ɵɵelementStart(14, "div", 149)(15, "span", 150);
|
|
713
791
|
i0.ɵɵtext(16, "Traditional Filter");
|
|
714
792
|
i0.ɵɵelementEnd();
|
|
715
|
-
i0.ɵɵelementStart(17, "span",
|
|
793
|
+
i0.ɵɵelementStart(17, "span", 151);
|
|
716
794
|
i0.ɵɵtext(18, "Build filters with field/operator/value");
|
|
717
795
|
i0.ɵɵelementEnd()();
|
|
718
|
-
i0.ɵɵtemplate(19,
|
|
796
|
+
i0.ɵɵtemplate(19, ViewConfigPanelComponent_Conditional_33_Conditional_19_Template, 1, 0, "i", 152);
|
|
719
797
|
i0.ɵɵelementEnd()();
|
|
720
|
-
i0.ɵɵtemplate(20,
|
|
798
|
+
i0.ɵɵtemplate(20, ViewConfigPanelComponent_Conditional_33_Conditional_20_Template, 28, 7, "div", 153)(21, ViewConfigPanelComponent_Conditional_33_Conditional_21_Template, 15, 4, "div", 154);
|
|
721
799
|
i0.ɵɵelementEnd();
|
|
722
800
|
} if (rf & 2) {
|
|
723
801
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -736,54 +814,54 @@ function ViewConfigPanelComponent_Conditional_27_Template(rf, ctx) { if (rf & 1)
|
|
|
736
814
|
i0.ɵɵadvance();
|
|
737
815
|
i0.ɵɵconditional(ctx_r1.filterMode === "traditional" ? 21 : -1);
|
|
738
816
|
} }
|
|
739
|
-
function
|
|
740
|
-
const
|
|
741
|
-
i0.ɵɵelementStart(0, "div",
|
|
742
|
-
i0.ɵɵelement(2, "i",
|
|
817
|
+
function ViewConfigPanelComponent_Conditional_34_Conditional_26_Template(rf, ctx) { if (rf & 1) {
|
|
818
|
+
const _r26 = i0.ɵɵgetCurrentView();
|
|
819
|
+
i0.ɵɵelementStart(0, "div", 191)(1, "div", 26);
|
|
820
|
+
i0.ɵɵelement(2, "i", 192);
|
|
743
821
|
i0.ɵɵelementStart(3, "span");
|
|
744
822
|
i0.ɵɵtext(4, "Danger Zone");
|
|
745
823
|
i0.ɵɵelementEnd()();
|
|
746
|
-
i0.ɵɵelementStart(5, "button",
|
|
747
|
-
i0.ɵɵlistener("click", function
|
|
748
|
-
i0.ɵɵelement(6, "i",
|
|
824
|
+
i0.ɵɵelementStart(5, "button", 193);
|
|
825
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_34_Conditional_26_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDelete()); });
|
|
826
|
+
i0.ɵɵelement(6, "i", 194);
|
|
749
827
|
i0.ɵɵelementStart(7, "span");
|
|
750
828
|
i0.ɵɵtext(8, "Delete View");
|
|
751
829
|
i0.ɵɵelementEnd()()();
|
|
752
830
|
} }
|
|
753
|
-
function
|
|
754
|
-
const
|
|
755
|
-
i0.ɵɵelementStart(0, "div",
|
|
756
|
-
i0.ɵɵelement(3, "i",
|
|
831
|
+
function ViewConfigPanelComponent_Conditional_34_Template(rf, ctx) { if (rf & 1) {
|
|
832
|
+
const _r25 = i0.ɵɵgetCurrentView();
|
|
833
|
+
i0.ɵɵelementStart(0, "div", 17)(1, "div", 25)(2, "div", 26);
|
|
834
|
+
i0.ɵɵelement(3, "i", 50);
|
|
757
835
|
i0.ɵɵelementStart(4, "span");
|
|
758
836
|
i0.ɵɵtext(5, "View Details");
|
|
759
837
|
i0.ɵɵelementEnd()();
|
|
760
|
-
i0.ɵɵelementStart(6, "div",
|
|
838
|
+
i0.ɵɵelementStart(6, "div", 182)(7, "label", 183);
|
|
761
839
|
i0.ɵɵtext(8, "Name");
|
|
762
840
|
i0.ɵɵelementEnd();
|
|
763
|
-
i0.ɵɵelementStart(9, "input",
|
|
764
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
841
|
+
i0.ɵɵelementStart(9, "input", 184);
|
|
842
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_34_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewName, $event) || (ctx_r1.viewName = $event); return i0.ɵɵresetView($event); });
|
|
765
843
|
i0.ɵɵelementEnd()();
|
|
766
|
-
i0.ɵɵelementStart(10, "div",
|
|
844
|
+
i0.ɵɵelementStart(10, "div", 182)(11, "label", 185);
|
|
767
845
|
i0.ɵɵtext(12, "Description");
|
|
768
846
|
i0.ɵɵelementEnd();
|
|
769
|
-
i0.ɵɵelementStart(13, "textarea",
|
|
770
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
847
|
+
i0.ɵɵelementStart(13, "textarea", 186);
|
|
848
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_34_Template_textarea_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.viewDescription, $event) || (ctx_r1.viewDescription = $event); return i0.ɵɵresetView($event); });
|
|
771
849
|
i0.ɵɵelementEnd()()();
|
|
772
|
-
i0.ɵɵelementStart(14, "div",
|
|
773
|
-
i0.ɵɵelement(16, "i",
|
|
850
|
+
i0.ɵɵelementStart(14, "div", 25)(15, "div", 26);
|
|
851
|
+
i0.ɵɵelement(16, "i", 187);
|
|
774
852
|
i0.ɵɵelementStart(17, "span");
|
|
775
853
|
i0.ɵɵtext(18, "Sharing");
|
|
776
854
|
i0.ɵɵelementEnd()();
|
|
777
|
-
i0.ɵɵelementStart(19, "label",
|
|
778
|
-
i0.ɵɵtwoWayListener("ngModelChange", function
|
|
855
|
+
i0.ɵɵelementStart(19, "label", 188)(20, "input", 189);
|
|
856
|
+
i0.ɵɵtwoWayListener("ngModelChange", function ViewConfigPanelComponent_Conditional_34_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.isShared, $event) || (ctx_r1.isShared = $event); return i0.ɵɵresetView($event); });
|
|
779
857
|
i0.ɵɵelementEnd();
|
|
780
|
-
i0.ɵɵelementStart(21, "span",
|
|
858
|
+
i0.ɵɵelementStart(21, "span", 190)(22, "strong");
|
|
781
859
|
i0.ɵɵtext(23, "Share with others");
|
|
782
860
|
i0.ɵɵelementEnd();
|
|
783
861
|
i0.ɵɵelementStart(24, "small");
|
|
784
862
|
i0.ɵɵtext(25, "Allow other users to use this view");
|
|
785
863
|
i0.ɵɵelementEnd()()()();
|
|
786
|
-
i0.ɵɵtemplate(26,
|
|
864
|
+
i0.ɵɵtemplate(26, ViewConfigPanelComponent_Conditional_34_Conditional_26_Template, 9, 0, "div", 191);
|
|
787
865
|
i0.ɵɵelementEnd();
|
|
788
866
|
} if (rf & 2) {
|
|
789
867
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -799,17 +877,17 @@ function ViewConfigPanelComponent_Conditional_28_Template(rf, ctx) { if (rf & 1)
|
|
|
799
877
|
i0.ɵɵadvance(6);
|
|
800
878
|
i0.ɵɵconditional(ctx_r1.viewEntity && ctx_r1.canDelete ? 26 : -1);
|
|
801
879
|
} }
|
|
802
|
-
function
|
|
803
|
-
i0.ɵɵelement(0, "i",
|
|
880
|
+
function ViewConfigPanelComponent_Conditional_37_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
881
|
+
i0.ɵɵelement(0, "i", 196);
|
|
804
882
|
} }
|
|
805
|
-
function
|
|
806
|
-
i0.ɵɵelement(0, "i",
|
|
883
|
+
function ViewConfigPanelComponent_Conditional_37_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
884
|
+
i0.ɵɵelement(0, "i", 197);
|
|
807
885
|
} }
|
|
808
|
-
function
|
|
809
|
-
const
|
|
810
|
-
i0.ɵɵelementStart(0, "button",
|
|
811
|
-
i0.ɵɵlistener("click", function
|
|
812
|
-
i0.ɵɵtemplate(1,
|
|
886
|
+
function ViewConfigPanelComponent_Conditional_37_Template(rf, ctx) { if (rf & 1) {
|
|
887
|
+
const _r27 = i0.ɵɵgetCurrentView();
|
|
888
|
+
i0.ɵɵelementStart(0, "button", 195);
|
|
889
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_37_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
|
|
890
|
+
i0.ɵɵtemplate(1, ViewConfigPanelComponent_Conditional_37_Conditional_1_Template, 1, 0, "i", 196)(2, ViewConfigPanelComponent_Conditional_37_Conditional_2_Template, 1, 0, "i", 197);
|
|
813
891
|
i0.ɵɵtext(3);
|
|
814
892
|
i0.ɵɵelementEnd();
|
|
815
893
|
} if (rf & 2) {
|
|
@@ -820,28 +898,28 @@ function ViewConfigPanelComponent_Conditional_31_Template(rf, ctx) { if (rf & 1)
|
|
|
820
898
|
i0.ɵɵadvance(2);
|
|
821
899
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Saving..." : "Save", " ");
|
|
822
900
|
} }
|
|
823
|
-
function
|
|
824
|
-
i0.ɵɵelement(0, "i",
|
|
901
|
+
function ViewConfigPanelComponent_Conditional_38_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
902
|
+
i0.ɵɵelement(0, "i", 196);
|
|
825
903
|
} }
|
|
826
|
-
function
|
|
827
|
-
i0.ɵɵelement(0, "i",
|
|
904
|
+
function ViewConfigPanelComponent_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
905
|
+
i0.ɵɵelement(0, "i", 197);
|
|
828
906
|
} }
|
|
829
|
-
function
|
|
830
|
-
i0.ɵɵelement(0, "i",
|
|
907
|
+
function ViewConfigPanelComponent_Conditional_38_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
908
|
+
i0.ɵɵelement(0, "i", 196);
|
|
831
909
|
} }
|
|
832
|
-
function
|
|
833
|
-
i0.ɵɵelement(0, "i",
|
|
910
|
+
function ViewConfigPanelComponent_Conditional_38_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
911
|
+
i0.ɵɵelement(0, "i", 54);
|
|
834
912
|
} }
|
|
835
|
-
function
|
|
836
|
-
const
|
|
837
|
-
i0.ɵɵelementStart(0, "button",
|
|
838
|
-
i0.ɵɵlistener("click", function
|
|
839
|
-
i0.ɵɵtemplate(1,
|
|
913
|
+
function ViewConfigPanelComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
|
|
914
|
+
const _r28 = i0.ɵɵgetCurrentView();
|
|
915
|
+
i0.ɵɵelementStart(0, "button", 195);
|
|
916
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_38_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveDefaults()); });
|
|
917
|
+
i0.ɵɵtemplate(1, ViewConfigPanelComponent_Conditional_38_Conditional_1_Template, 1, 0, "i", 196)(2, ViewConfigPanelComponent_Conditional_38_Conditional_2_Template, 1, 0, "i", 197);
|
|
840
918
|
i0.ɵɵtext(3);
|
|
841
919
|
i0.ɵɵelementEnd();
|
|
842
|
-
i0.ɵɵelementStart(4, "button",
|
|
843
|
-
i0.ɵɵlistener("click", function
|
|
844
|
-
i0.ɵɵtemplate(5,
|
|
920
|
+
i0.ɵɵelementStart(4, "button", 198);
|
|
921
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_38_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAsNew()); });
|
|
922
|
+
i0.ɵɵtemplate(5, ViewConfigPanelComponent_Conditional_38_Conditional_5_Template, 1, 0, "i", 196)(6, ViewConfigPanelComponent_Conditional_38_Conditional_6_Template, 1, 0, "i", 54);
|
|
845
923
|
i0.ɵɵtext(7);
|
|
846
924
|
i0.ɵɵelementEnd();
|
|
847
925
|
} if (rf & 2) {
|
|
@@ -858,17 +936,17 @@ function ViewConfigPanelComponent_Conditional_32_Template(rf, ctx) { if (rf & 1)
|
|
|
858
936
|
i0.ɵɵadvance(2);
|
|
859
937
|
i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Creating..." : "Save As New", " ");
|
|
860
938
|
} }
|
|
861
|
-
function
|
|
862
|
-
i0.ɵɵelement(0, "i",
|
|
939
|
+
function ViewConfigPanelComponent_Conditional_39_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
940
|
+
i0.ɵɵelement(0, "i", 196);
|
|
863
941
|
} }
|
|
864
|
-
function
|
|
865
|
-
i0.ɵɵelement(0, "i",
|
|
942
|
+
function ViewConfigPanelComponent_Conditional_39_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
943
|
+
i0.ɵɵelement(0, "i", 54);
|
|
866
944
|
} }
|
|
867
|
-
function
|
|
868
|
-
const
|
|
869
|
-
i0.ɵɵelementStart(0, "button",
|
|
870
|
-
i0.ɵɵlistener("click", function
|
|
871
|
-
i0.ɵɵtemplate(1,
|
|
945
|
+
function ViewConfigPanelComponent_Conditional_39_Template(rf, ctx) { if (rf & 1) {
|
|
946
|
+
const _r29 = i0.ɵɵgetCurrentView();
|
|
947
|
+
i0.ɵɵelementStart(0, "button", 198);
|
|
948
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Conditional_39_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSaveAsNew()); });
|
|
949
|
+
i0.ɵɵtemplate(1, ViewConfigPanelComponent_Conditional_39_Conditional_1_Template, 1, 0, "i", 196)(2, ViewConfigPanelComponent_Conditional_39_Conditional_2_Template, 1, 0, "i", 54);
|
|
872
950
|
i0.ɵɵtext(3, " Save As New ");
|
|
873
951
|
i0.ɵɵelementEnd();
|
|
874
952
|
} if (rf & 2) {
|
|
@@ -941,8 +1019,21 @@ export class ViewConfigPanelComponent {
|
|
|
941
1019
|
viewDescription = '';
|
|
942
1020
|
isShared = false;
|
|
943
1021
|
columns = [];
|
|
1022
|
+
/** @deprecated Use sortItems instead */
|
|
944
1023
|
sortField = null;
|
|
1024
|
+
/** @deprecated Use sortItems instead */
|
|
945
1025
|
sortDirection = 'asc';
|
|
1026
|
+
/** Multi-column sort configuration (ordered by priority) */
|
|
1027
|
+
sortItems = [];
|
|
1028
|
+
// Sort drag state
|
|
1029
|
+
draggedSortItem = null;
|
|
1030
|
+
dropTargetSortItem = null;
|
|
1031
|
+
sortDropPosition = null;
|
|
1032
|
+
// Available sort directions for dropdown
|
|
1033
|
+
sortDirections = [
|
|
1034
|
+
{ name: 'Ascending', value: 'asc' },
|
|
1035
|
+
{ name: 'Descending', value: 'desc' }
|
|
1036
|
+
];
|
|
946
1037
|
// Smart Filter state
|
|
947
1038
|
smartFilterEnabled = false;
|
|
948
1039
|
smartFilterPrompt = '';
|
|
@@ -964,10 +1055,10 @@ export class ViewConfigPanelComponent {
|
|
|
964
1055
|
formatEditingColumn = null;
|
|
965
1056
|
// Panel resize state
|
|
966
1057
|
isResizing = false;
|
|
967
|
-
panelWidth =
|
|
968
|
-
MIN_PANEL_WIDTH =
|
|
1058
|
+
panelWidth = 450;
|
|
1059
|
+
MIN_PANEL_WIDTH = 360;
|
|
969
1060
|
MAX_PANEL_WIDTH = 800;
|
|
970
|
-
DEFAULT_PANEL_WIDTH =
|
|
1061
|
+
DEFAULT_PANEL_WIDTH = 450;
|
|
971
1062
|
resizeStartX = 0;
|
|
972
1063
|
resizeStartWidth = 0;
|
|
973
1064
|
metadata = new Metadata();
|
|
@@ -1072,11 +1163,19 @@ export class ViewConfigPanelComponent {
|
|
|
1072
1163
|
// Priority 1: Use currentGridState if available (reflects live grid state including resizes)
|
|
1073
1164
|
if (this.currentGridState?.columnSettings && this.currentGridState.columnSettings.length > 0) {
|
|
1074
1165
|
this.applyGridStateToColumns(this.currentGridState.columnSettings);
|
|
1075
|
-
// Also apply sort from currentGridState
|
|
1166
|
+
// Also apply sort from currentGridState (supports multi-sort)
|
|
1076
1167
|
if (this.currentGridState.sortSettings && this.currentGridState.sortSettings.length > 0) {
|
|
1168
|
+
this.sortItems = this.currentGridState.sortSettings.map(s => ({
|
|
1169
|
+
field: s.field,
|
|
1170
|
+
direction: s.dir
|
|
1171
|
+
}));
|
|
1172
|
+
// Keep legacy fields in sync for backward compatibility
|
|
1077
1173
|
this.sortField = this.currentGridState.sortSettings[0].field;
|
|
1078
1174
|
this.sortDirection = this.currentGridState.sortSettings[0].dir;
|
|
1079
1175
|
}
|
|
1176
|
+
else {
|
|
1177
|
+
this.sortItems = [];
|
|
1178
|
+
}
|
|
1080
1179
|
}
|
|
1081
1180
|
// Priority 2: If we have a view, apply its column configuration
|
|
1082
1181
|
else if (this.viewEntity) {
|
|
@@ -1104,12 +1203,20 @@ export class ViewConfigPanelComponent {
|
|
|
1104
1203
|
// Sort by orderIndex
|
|
1105
1204
|
this.columns.sort((a, b) => a.orderIndex - b.orderIndex);
|
|
1106
1205
|
}
|
|
1107
|
-
// Apply view's sort configuration
|
|
1206
|
+
// Apply view's sort configuration (supports multi-sort)
|
|
1108
1207
|
const sortInfo = this.viewEntity.ViewSortInfo;
|
|
1109
1208
|
if (sortInfo && sortInfo.length > 0) {
|
|
1209
|
+
this.sortItems = sortInfo.map(s => ({
|
|
1210
|
+
field: s.field,
|
|
1211
|
+
direction: s.direction === 'Desc' ? 'desc' : 'asc'
|
|
1212
|
+
}));
|
|
1213
|
+
// Keep legacy fields in sync for backward compatibility
|
|
1110
1214
|
this.sortField = sortInfo[0].field;
|
|
1111
1215
|
this.sortDirection = sortInfo[0].direction === 'Desc' ? 'desc' : 'asc';
|
|
1112
1216
|
}
|
|
1217
|
+
else {
|
|
1218
|
+
this.sortItems = [];
|
|
1219
|
+
}
|
|
1113
1220
|
}
|
|
1114
1221
|
// Initialize filter fields from entity
|
|
1115
1222
|
this.filterFields = this.buildFilterFields();
|
|
@@ -1146,6 +1253,7 @@ export class ViewConfigPanelComponent {
|
|
|
1146
1253
|
if (!this.currentGridState?.sortSettings?.length) {
|
|
1147
1254
|
this.sortField = null;
|
|
1148
1255
|
this.sortDirection = 'asc';
|
|
1256
|
+
this.sortItems = [];
|
|
1149
1257
|
}
|
|
1150
1258
|
this.smartFilterPrompt = '';
|
|
1151
1259
|
this.smartFilterExplanation = '';
|
|
@@ -1517,6 +1625,175 @@ export class ViewConfigPanelComponent {
|
|
|
1517
1625
|
return this.dropTargetColumn === column && this.dropPosition === 'after';
|
|
1518
1626
|
}
|
|
1519
1627
|
// ========================================
|
|
1628
|
+
// MULTI-SORT MANAGEMENT
|
|
1629
|
+
// ========================================
|
|
1630
|
+
/**
|
|
1631
|
+
* Add a new sort level
|
|
1632
|
+
*/
|
|
1633
|
+
addSortLevel() {
|
|
1634
|
+
// Find the first sortable field not already in use
|
|
1635
|
+
const usedFields = new Set(this.sortItems.map(s => s.field));
|
|
1636
|
+
const availableField = this.sortableFields.find(f => !usedFields.has(f.Name));
|
|
1637
|
+
if (availableField) {
|
|
1638
|
+
this.sortItems.push({
|
|
1639
|
+
field: availableField.Name,
|
|
1640
|
+
direction: 'asc'
|
|
1641
|
+
});
|
|
1642
|
+
this.syncLegacySortFields();
|
|
1643
|
+
this.cdr.detectChanges();
|
|
1644
|
+
}
|
|
1645
|
+
}
|
|
1646
|
+
/**
|
|
1647
|
+
* Remove a sort level
|
|
1648
|
+
*/
|
|
1649
|
+
removeSortLevel(sortItem) {
|
|
1650
|
+
const index = this.sortItems.indexOf(sortItem);
|
|
1651
|
+
if (index > -1) {
|
|
1652
|
+
this.sortItems.splice(index, 1);
|
|
1653
|
+
this.syncLegacySortFields();
|
|
1654
|
+
this.cdr.detectChanges();
|
|
1655
|
+
}
|
|
1656
|
+
}
|
|
1657
|
+
/**
|
|
1658
|
+
* Get the display name for a field
|
|
1659
|
+
*/
|
|
1660
|
+
getFieldDisplayName(fieldName) {
|
|
1661
|
+
const field = this.sortableFields.find(f => f.Name === fieldName);
|
|
1662
|
+
return field?.DisplayNameOrName || fieldName;
|
|
1663
|
+
}
|
|
1664
|
+
/**
|
|
1665
|
+
* Get fields available for a sort item (excludes already selected fields except current)
|
|
1666
|
+
*/
|
|
1667
|
+
getAvailableFieldsForSort(currentSortItem) {
|
|
1668
|
+
const usedFields = new Set(this.sortItems.map(s => s.field));
|
|
1669
|
+
return this.sortableFields.filter(f => f.Name === currentSortItem.field || !usedFields.has(f.Name));
|
|
1670
|
+
}
|
|
1671
|
+
/**
|
|
1672
|
+
* Handle sort field change
|
|
1673
|
+
*/
|
|
1674
|
+
onSortFieldChange(sortItem, fieldName) {
|
|
1675
|
+
sortItem.field = fieldName;
|
|
1676
|
+
this.syncLegacySortFields();
|
|
1677
|
+
this.cdr.detectChanges();
|
|
1678
|
+
}
|
|
1679
|
+
/**
|
|
1680
|
+
* Handle sort direction change
|
|
1681
|
+
*/
|
|
1682
|
+
onSortDirectionChange(sortItem, direction) {
|
|
1683
|
+
sortItem.direction = direction;
|
|
1684
|
+
this.syncLegacySortFields();
|
|
1685
|
+
this.cdr.detectChanges();
|
|
1686
|
+
}
|
|
1687
|
+
/**
|
|
1688
|
+
* Keep legacy sortField/sortDirection in sync with sortItems[0]
|
|
1689
|
+
*/
|
|
1690
|
+
syncLegacySortFields() {
|
|
1691
|
+
if (this.sortItems.length > 0) {
|
|
1692
|
+
this.sortField = this.sortItems[0].field;
|
|
1693
|
+
this.sortDirection = this.sortItems[0].direction;
|
|
1694
|
+
}
|
|
1695
|
+
else {
|
|
1696
|
+
this.sortField = null;
|
|
1697
|
+
this.sortDirection = 'asc';
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1700
|
+
// ----------------------------------------
|
|
1701
|
+
// Sort Drag & Drop
|
|
1702
|
+
// ----------------------------------------
|
|
1703
|
+
/**
|
|
1704
|
+
* Handle drag start for sort item reordering
|
|
1705
|
+
*/
|
|
1706
|
+
onSortDragStart(event, sortItem) {
|
|
1707
|
+
this.draggedSortItem = sortItem;
|
|
1708
|
+
if (event.dataTransfer) {
|
|
1709
|
+
event.dataTransfer.effectAllowed = 'move';
|
|
1710
|
+
event.dataTransfer.setData('text/plain', sortItem.field);
|
|
1711
|
+
}
|
|
1712
|
+
event.target.classList.add('dragging');
|
|
1713
|
+
}
|
|
1714
|
+
/**
|
|
1715
|
+
* Handle drag over for sort item reordering
|
|
1716
|
+
*/
|
|
1717
|
+
onSortDragOver(event, sortItem) {
|
|
1718
|
+
event.preventDefault();
|
|
1719
|
+
if (event.dataTransfer) {
|
|
1720
|
+
event.dataTransfer.dropEffect = 'move';
|
|
1721
|
+
}
|
|
1722
|
+
if (!this.draggedSortItem || this.draggedSortItem === sortItem) {
|
|
1723
|
+
this.dropTargetSortItem = null;
|
|
1724
|
+
this.sortDropPosition = null;
|
|
1725
|
+
return;
|
|
1726
|
+
}
|
|
1727
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
1728
|
+
const y = event.clientY - rect.top;
|
|
1729
|
+
const threshold = rect.height / 2;
|
|
1730
|
+
this.dropTargetSortItem = sortItem;
|
|
1731
|
+
this.sortDropPosition = y < threshold ? 'before' : 'after';
|
|
1732
|
+
}
|
|
1733
|
+
/**
|
|
1734
|
+
* Handle drag leave for sort item
|
|
1735
|
+
*/
|
|
1736
|
+
onSortDragLeave(event) {
|
|
1737
|
+
const relatedTarget = event.relatedTarget;
|
|
1738
|
+
const currentTarget = event.currentTarget;
|
|
1739
|
+
if (!currentTarget.contains(relatedTarget)) {
|
|
1740
|
+
this.dropTargetSortItem = null;
|
|
1741
|
+
this.sortDropPosition = null;
|
|
1742
|
+
}
|
|
1743
|
+
}
|
|
1744
|
+
/**
|
|
1745
|
+
* Handle drop for sort item reordering
|
|
1746
|
+
*/
|
|
1747
|
+
onSortDrop(event, targetSortItem) {
|
|
1748
|
+
event.preventDefault();
|
|
1749
|
+
if (this.draggedSortItem && this.draggedSortItem !== targetSortItem && this.sortDropPosition) {
|
|
1750
|
+
const draggedIndex = this.sortItems.indexOf(this.draggedSortItem);
|
|
1751
|
+
let targetIndex = this.sortItems.indexOf(targetSortItem);
|
|
1752
|
+
// Adjust target index based on drop position
|
|
1753
|
+
if (this.sortDropPosition === 'after') {
|
|
1754
|
+
targetIndex++;
|
|
1755
|
+
}
|
|
1756
|
+
// If dragging from before target, adjust for removal
|
|
1757
|
+
if (draggedIndex < targetIndex) {
|
|
1758
|
+
targetIndex--;
|
|
1759
|
+
}
|
|
1760
|
+
// Remove from old position
|
|
1761
|
+
this.sortItems.splice(draggedIndex, 1);
|
|
1762
|
+
// Insert at new position
|
|
1763
|
+
this.sortItems.splice(targetIndex, 0, this.draggedSortItem);
|
|
1764
|
+
this.syncLegacySortFields();
|
|
1765
|
+
}
|
|
1766
|
+
this.clearSortDragState();
|
|
1767
|
+
}
|
|
1768
|
+
/**
|
|
1769
|
+
* Handle drag end for sort item
|
|
1770
|
+
*/
|
|
1771
|
+
onSortDragEnd(event) {
|
|
1772
|
+
event.target.classList.remove('dragging');
|
|
1773
|
+
this.clearSortDragState();
|
|
1774
|
+
}
|
|
1775
|
+
/**
|
|
1776
|
+
* Clear sort drag state
|
|
1777
|
+
*/
|
|
1778
|
+
clearSortDragState() {
|
|
1779
|
+
this.draggedSortItem = null;
|
|
1780
|
+
this.dropTargetSortItem = null;
|
|
1781
|
+
this.sortDropPosition = null;
|
|
1782
|
+
this.cdr.detectChanges();
|
|
1783
|
+
}
|
|
1784
|
+
/**
|
|
1785
|
+
* Check if drop indicator should show before a sort item
|
|
1786
|
+
*/
|
|
1787
|
+
isSortDropBefore(sortItem) {
|
|
1788
|
+
return this.dropTargetSortItem === sortItem && this.sortDropPosition === 'before';
|
|
1789
|
+
}
|
|
1790
|
+
/**
|
|
1791
|
+
* Check if drop indicator should show after a sort item
|
|
1792
|
+
*/
|
|
1793
|
+
isSortDropAfter(sortItem) {
|
|
1794
|
+
return this.dropTargetSortItem === sortItem && this.sortDropPosition === 'after';
|
|
1795
|
+
}
|
|
1796
|
+
// ========================================
|
|
1520
1797
|
// COLUMN FORMAT EDITOR
|
|
1521
1798
|
// ========================================
|
|
1522
1799
|
/**
|
|
@@ -1737,6 +2014,7 @@ export class ViewConfigPanelComponent {
|
|
|
1737
2014
|
columns: this.visibleColumns,
|
|
1738
2015
|
sortField: this.sortField,
|
|
1739
2016
|
sortDirection: this.sortDirection,
|
|
2017
|
+
sortItems: [...this.sortItems],
|
|
1740
2018
|
smartFilterEnabled: this.smartFilterEnabled,
|
|
1741
2019
|
smartFilterPrompt: this.smartFilterPrompt,
|
|
1742
2020
|
filterState: this.hasActiveFilters() ? this.filterState : null
|
|
@@ -1757,6 +2035,7 @@ export class ViewConfigPanelComponent {
|
|
|
1757
2035
|
columns: this.visibleColumns,
|
|
1758
2036
|
sortField: this.sortField,
|
|
1759
2037
|
sortDirection: this.sortDirection,
|
|
2038
|
+
sortItems: [...this.sortItems],
|
|
1760
2039
|
smartFilterEnabled: this.smartFilterEnabled,
|
|
1761
2040
|
smartFilterPrompt: this.smartFilterPrompt,
|
|
1762
2041
|
filterState: this.hasActiveFilters() ? this.filterState : null
|
|
@@ -1778,6 +2057,7 @@ export class ViewConfigPanelComponent {
|
|
|
1778
2057
|
columns: this.visibleColumns,
|
|
1779
2058
|
sortField: this.sortField,
|
|
1780
2059
|
sortDirection: this.sortDirection,
|
|
2060
|
+
sortItems: [...this.sortItems],
|
|
1781
2061
|
smartFilterEnabled: this.smartFilterEnabled,
|
|
1782
2062
|
smartFilterPrompt: this.smartFilterPrompt,
|
|
1783
2063
|
filterState: this.hasActiveFilters() ? this.filterState : null
|
|
@@ -1896,10 +2176,10 @@ export class ViewConfigPanelComponent {
|
|
|
1896
2176
|
format.cellStyle[prop] = value;
|
|
1897
2177
|
this.cdr.detectChanges();
|
|
1898
2178
|
}
|
|
1899
|
-
static ɵfac = function ViewConfigPanelComponent_Factory(
|
|
2179
|
+
static ɵfac = function ViewConfigPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ViewConfigPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
|
|
1900
2180
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewConfigPanelComponent, selectors: [["mj-view-config-panel"]], hostBindings: function ViewConfigPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
|
|
1901
2181
|
i0.ɵɵlistener("keydown.escape", function ViewConfigPanelComponent_keydown_escape_HostBindingHandler() { return ctx.handleEscape(); }, false, i0.ɵɵresolveDocument);
|
|
1902
|
-
} }, inputs: { entity: "entity", viewEntity: "viewEntity", isOpen: "isOpen", currentGridState: "currentGridState", sampleData: "sampleData", externalFilterState: "externalFilterState", isSaving: "isSaving" }, outputs: { close: "close", save: "save", saveDefaults: "saveDefaults", delete: "delete", openFilterDialogRequest: "openFilterDialogRequest" }, features: [i0.ɵɵNgOnChangesFeature], decls:
|
|
2182
|
+
} }, inputs: { entity: "entity", viewEntity: "viewEntity", isOpen: "isOpen", currentGridState: "currentGridState", sampleData: "sampleData", externalFilterState: "externalFilterState", isSaving: "isSaving" }, outputs: { close: "close", save: "save", saveDefaults: "saveDefaults", delete: "delete", openFilterDialogRequest: "openFilterDialogRequest" }, features: [i0.ɵɵNgOnChangesFeature], decls: 42, vars: 25, consts: [[1, "panel-backdrop"], [1, "config-panel"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "panel-header"], [1, "header-title"], [1, "fa-solid", "fa-sliders-h"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tab-nav"], [1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-columns"], [1, "fa-solid", "fa-arrow-up-wide-short"], [1, "tab-badge"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-cog"], [1, "panel-content"], [1, "tab-content"], [1, "format-editor"], [1, "panel-footer"], [1, "footer-left"], [1, "footer-btn", "save-btn", "primary", 3, "disabled"], [1, "footer-btn", "save-as-btn", 3, "disabled"], [1, "footer-btn", "cancel-btn", 3, "click"], [1, "panel-backdrop", 3, "click"], [1, "config-section"], [1, "section-header"], [1, "fa-solid", "fa-eye"], [1, "column-count"], [1, "column-list", "visible-columns"], [1, "empty-list"], [1, "fa-solid", "fa-eye-slash"], [1, "column-search"], [1, "column-list", "hidden-columns"], [1, "column-item", "hidden"], [1, "drop-indicator"], ["draggable", "true", 1, "column-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "drag-handle"], [1, "fa-solid", "fa-grip-vertical"], [1, "column-name"], [1, "fa-solid", "fa-pen-nib", "alias-indicator", 3, "title"], ["title", "Custom formatting applied", 1, "fa-solid", "fa-paintbrush", "format-indicator"], [1, "column-actions"], ["title", "Format column", 1, "action-btn", "format-btn", 3, "click"], [1, "fa-solid", "fa-paintbrush"], ["title", "Move up", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["title", "Hide column", 1, "action-btn", "hide-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search columns...", 3, "ngModelChange", "ngModel"], ["title", "Show column", 1, "action-btn", "show-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-check-circle"], [1, "format-editor-header"], [1, "back-btn", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "format-editor-title"], [1, "format-section"], [1, "format-section-header"], [1, "fa-solid", "fa-pen-nib"], [1, "format-row"], ["type", "text", 1, "format-input", 3, "input", "value", "placeholder"], [1, "format-row", "alias-info"], [1, "format-preview-section"], [1, "preview-header"], [1, "preview-table"], [1, "preview-header-cell"], [1, "preview-cell", 3, "text-align", "font-weight", "font-style", "text-decoration", "color", "background-color"], [1, "fa-solid", "fa-hashtag"], [1, "format-select", 3, "ngModelChange", "ngModel"], ["value", "auto"], ["value", "text"], ["value", "number"], ["value", "currency"], ["value", "percent"], ["value", "date"], ["value", "datetime"], ["value", "boolean"], [1, "fa-solid", "fa-align-left"], [1, "alignment-toggle"], ["title", "Left", 1, "align-btn", 3, "click"], ["title", "Center", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-center"], ["title", "Right", 1, "align-btn", 3, "click"], [1, "fa-solid", "fa-align-right"], [1, "fa-solid", "fa-heading"], [1, "style-buttons"], ["title", "Bold", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-bold"], ["title", "Italic", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-italic"], ["title", "Underline", 1, "style-btn", 3, "click"], [1, "fa-solid", "fa-underline"], ["type", "color", 1, "color-input", 3, "input", "value"], [1, "fa-solid", "fa-table-cells"], [1, "format-actions"], [1, "clear-format-btn", 3, "click"], [1, "fa-solid", "fa-eraser"], [1, "muted-text"], ["title", "Clear alias", 1, "clear-alias-btn", 3, "click"], [1, "preview-cell"], [1, "fa-solid", "fa-sliders"], ["type", "number", "min", "0", "max", "10", 1, "format-input", "small", 3, "ngModelChange", "ngModel"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], ["value", "USD"], ["value", "EUR"], ["value", "GBP"], ["value", "JPY"], ["value", "CAD"], ["value", "AUD"], [1, "fa-solid", "fa-calendar"], ["value", "short"], ["value", "short-weekday"], ["value", "medium"], ["value", "medium-weekday"], ["value", "long"], ["value", "long-weekday"], [1, "fa-solid", "fa-toggle-on"], ["type", "text", "placeholder", "Yes", 1, "format-input", 3, "ngModelChange", "ngModel"], ["type", "text", "placeholder", "No", 1, "format-input", 3, "ngModelChange", "ngModel"], ["value", "checkbox"], ["value", "icon"], [1, "config-section", "sorting-section"], [1, "sorting-header"], [1, "sorting-description"], ["title", "Add another sort level", 1, "add-sort-btn", 3, "click", "disabled"], [1, "sort-empty-state"], [1, "sort-items-list"], [1, "sort-hint"], [1, "sort-drop-indicator"], ["draggable", "true", 1, "sort-item", 3, "dragstart", "dragover", "dragleave", "drop", "dragend"], [1, "sort-priority-badge"], ["title", "Drag to reorder", 1, "sort-drag-handle"], [1, "sort-field-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "value"], [1, "sort-direction-toggle"], ["title", "Ascending (A-Z, 1-9)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Descending (Z-A, 9-1)", 1, "direction-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-down"], ["title", "Remove sort level", 1, "sort-remove-btn", 3, "click", "disabled"], [1, "sort-empty-hint"], [1, "filter-mode-selector"], [1, "filter-mode-btn", 3, "click", "disabled"], [1, "mode-icon"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "mode-content"], [1, "mode-title"], [1, "mode-subtitle"], [1, "fa-solid", "fa-check", "mode-check"], [1, "config-section", "smart-filter-section"], [1, "config-section", "traditional-filter-section"], [1, "smart-filter-input-container"], [1, "smart-filter-icon"], ["id", "smartFilterPrompt", "placeholder", "Describe what you're looking for...", "rows", "3", 1, "smart-filter-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "smart-filter-explanation"], [1, "smart-filter-examples"], [1, "examples-header"], [1, "fa-solid", "fa-lightbulb"], [1, "example-chips"], [1, "example-chip", 3, "click", "disabled"], [1, "fa-regular", "fa-calendar"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "smart-filter-tip"], [1, "fa-solid", "fa-robot"], [1, "filter-summary-container"], [1, "filter-summary"], [1, "summary-info"], [1, "summary-text", "no-filters"], [1, "summary-actions"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn"], ["title", "Edit filters", 1, "summary-btn", "edit-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-pen"], [1, "traditional-filter-tip"], [1, "filter-badge"], [1, "summary-text"], ["title", "Clear all filters", 1, "summary-btn", "clear-btn", 3, "click"], [1, "form-group"], ["for", "viewName"], ["id", "viewName", "type", "text", "placeholder", "Enter view name...", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["for", "viewDescription"], ["id", "viewDescription", "placeholder", "Describe this view...", "rows", "3", 1, "form-input", "form-textarea", 3, "ngModelChange", "ngModel", "disabled"], [1, "fa-solid", "fa-share-alt"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel", "disabled"], [1, "checkbox-text"], [1, "config-section", "danger-zone"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "footer-btn", "save-btn", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"], [1, "footer-btn", "save-as-btn", 3, "click", "disabled"]], template: function ViewConfigPanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1903
2183
|
i0.ɵɵtemplate(0, ViewConfigPanelComponent_Conditional_0_Template, 1, 0, "div", 0);
|
|
1904
2184
|
i0.ɵɵelementStart(1, "div", 1)(2, "div", 2);
|
|
1905
2185
|
i0.ɵɵlistener("mousedown", function ViewConfigPanelComponent_Template_div_mousedown_2_listener($event) { return ctx.onResizeStart($event); });
|
|
@@ -1921,26 +2201,34 @@ export class ViewConfigPanelComponent {
|
|
|
1921
2201
|
i0.ɵɵtext(15, "Columns");
|
|
1922
2202
|
i0.ɵɵelementEnd()();
|
|
1923
2203
|
i0.ɵɵelementStart(16, "button", 10);
|
|
1924
|
-
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_16_listener() { return ctx.setActiveTab("
|
|
2204
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_16_listener() { return ctx.setActiveTab("sorting"); });
|
|
1925
2205
|
i0.ɵɵelement(17, "i", 12);
|
|
1926
2206
|
i0.ɵɵelementStart(18, "span");
|
|
1927
|
-
i0.ɵɵtext(19, "
|
|
2207
|
+
i0.ɵɵtext(19, "Sorting");
|
|
2208
|
+
i0.ɵɵelementEnd();
|
|
2209
|
+
i0.ɵɵtemplate(20, ViewConfigPanelComponent_Conditional_20_Template, 2, 1, "span", 13);
|
|
2210
|
+
i0.ɵɵelementEnd();
|
|
2211
|
+
i0.ɵɵelementStart(21, "button", 10);
|
|
2212
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_21_listener() { return ctx.setActiveTab("filters"); });
|
|
2213
|
+
i0.ɵɵelement(22, "i", 14);
|
|
2214
|
+
i0.ɵɵelementStart(23, "span");
|
|
2215
|
+
i0.ɵɵtext(24, "Filters");
|
|
1928
2216
|
i0.ɵɵelementEnd()();
|
|
1929
|
-
i0.ɵɵelementStart(
|
|
1930
|
-
i0.ɵɵlistener("click", function
|
|
1931
|
-
i0.ɵɵelement(
|
|
1932
|
-
i0.ɵɵelementStart(
|
|
1933
|
-
i0.ɵɵtext(
|
|
2217
|
+
i0.ɵɵelementStart(25, "button", 10);
|
|
2218
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_25_listener() { return ctx.setActiveTab("settings"); });
|
|
2219
|
+
i0.ɵɵelement(26, "i", 15);
|
|
2220
|
+
i0.ɵɵelementStart(27, "span");
|
|
2221
|
+
i0.ɵɵtext(28, "Settings");
|
|
1934
2222
|
i0.ɵɵelementEnd()()();
|
|
1935
|
-
i0.ɵɵelementStart(
|
|
1936
|
-
i0.ɵɵtemplate(
|
|
2223
|
+
i0.ɵɵelementStart(29, "div", 16);
|
|
2224
|
+
i0.ɵɵtemplate(30, ViewConfigPanelComponent_Conditional_30_Template, 24, 5, "div", 17)(31, ViewConfigPanelComponent_Conditional_31_Template, 108, 41, "div", 18)(32, ViewConfigPanelComponent_Conditional_32_Template, 11, 2, "div", 17)(33, ViewConfigPanelComponent_Conditional_33_Template, 22, 10, "div", 17)(34, ViewConfigPanelComponent_Conditional_34_Template, 27, 7, "div", 17);
|
|
1937
2225
|
i0.ɵɵelementEnd();
|
|
1938
|
-
i0.ɵɵelementStart(
|
|
1939
|
-
i0.ɵɵtemplate(
|
|
2226
|
+
i0.ɵɵelementStart(35, "div", 19)(36, "div", 20);
|
|
2227
|
+
i0.ɵɵtemplate(37, ViewConfigPanelComponent_Conditional_37_Template, 4, 3, "button", 21)(38, ViewConfigPanelComponent_Conditional_38_Template, 8, 6)(39, ViewConfigPanelComponent_Conditional_39_Template, 4, 2, "button", 22);
|
|
1940
2228
|
i0.ɵɵelementEnd();
|
|
1941
|
-
i0.ɵɵelementStart(
|
|
1942
|
-
i0.ɵɵlistener("click", function
|
|
1943
|
-
i0.ɵɵtext(
|
|
2229
|
+
i0.ɵɵelementStart(40, "button", 23);
|
|
2230
|
+
i0.ɵɵlistener("click", function ViewConfigPanelComponent_Template_button_click_40_listener() { return ctx.onClose(); });
|
|
2231
|
+
i0.ɵɵtext(41, " Cancel ");
|
|
1944
2232
|
i0.ɵɵelementEnd()()();
|
|
1945
2233
|
} if (rf & 2) {
|
|
1946
2234
|
i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
|
|
@@ -1952,28 +2240,34 @@ export class ViewConfigPanelComponent {
|
|
|
1952
2240
|
i0.ɵɵadvance(4);
|
|
1953
2241
|
i0.ɵɵclassProp("active", ctx.activeTab === "columns");
|
|
1954
2242
|
i0.ɵɵadvance(4);
|
|
2243
|
+
i0.ɵɵclassProp("active", ctx.activeTab === "sorting");
|
|
2244
|
+
i0.ɵɵadvance(4);
|
|
2245
|
+
i0.ɵɵconditional(ctx.sortItems.length > 0 ? 20 : -1);
|
|
2246
|
+
i0.ɵɵadvance();
|
|
1955
2247
|
i0.ɵɵclassProp("active", ctx.activeTab === "filters");
|
|
1956
2248
|
i0.ɵɵadvance(4);
|
|
1957
2249
|
i0.ɵɵclassProp("active", ctx.activeTab === "settings");
|
|
1958
2250
|
i0.ɵɵadvance(5);
|
|
1959
|
-
i0.ɵɵconditional(ctx.activeTab === "columns" && !ctx.formatEditingColumn ?
|
|
2251
|
+
i0.ɵɵconditional(ctx.activeTab === "columns" && !ctx.formatEditingColumn ? 30 : -1);
|
|
2252
|
+
i0.ɵɵadvance();
|
|
2253
|
+
i0.ɵɵconditional(ctx.activeTab === "columns" && ctx.formatEditingColumn ? 31 : -1);
|
|
1960
2254
|
i0.ɵɵadvance();
|
|
1961
|
-
i0.ɵɵconditional(ctx.activeTab === "
|
|
2255
|
+
i0.ɵɵconditional(ctx.activeTab === "sorting" ? 32 : -1);
|
|
1962
2256
|
i0.ɵɵadvance();
|
|
1963
|
-
i0.ɵɵconditional(ctx.activeTab === "filters" ?
|
|
2257
|
+
i0.ɵɵconditional(ctx.activeTab === "filters" ? 33 : -1);
|
|
1964
2258
|
i0.ɵɵadvance();
|
|
1965
|
-
i0.ɵɵconditional(ctx.activeTab === "settings" ?
|
|
2259
|
+
i0.ɵɵconditional(ctx.activeTab === "settings" ? 34 : -1);
|
|
1966
2260
|
i0.ɵɵadvance(3);
|
|
1967
|
-
i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ?
|
|
2261
|
+
i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ? 37 : -1);
|
|
1968
2262
|
i0.ɵɵadvance();
|
|
1969
|
-
i0.ɵɵconditional(!ctx.viewEntity ?
|
|
2263
|
+
i0.ɵɵconditional(!ctx.viewEntity ? 38 : -1);
|
|
1970
2264
|
i0.ɵɵadvance();
|
|
1971
|
-
i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ?
|
|
1972
|
-
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 400px;\n min-width: 320px;\n max-width: min(800px, 100vw);\n height: 100%;\n background: white;\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n transition: none;\n user-select: none;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%] .resize-handle[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: #cbd5e1;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%] .resize-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: #1976d2;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n\n\n.tab-nav[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n border-bottom: 2px solid transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n color: #1976d2;\n border-bottom-color: #1976d2;\n background: transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n margin-left: auto;\n background: #e3f2fd;\n color: #1976d2;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n}\n\n\n\n.sort-config[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.sort-field-select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover {\n color: #333;\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #1976d2;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.column-list[_ngcontent-%COMP%] {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n background: #fafafa;\n}\n\n.column-list.visible-columns[_ngcontent-%COMP%] {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.column-list.hidden-columns[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 100px;\n overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%]:last-child {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n margin-bottom: 0;\n}\n\n.column-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border-bottom: 1px solid #f0f0f0;\n transition: background 0.1s ease;\n position: relative;\n}\n\n.column-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n background: #f5f7fa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n background: #fafafa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n}\n\n\n\n\n\n\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: _ngcontent-%COMP%_dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_dropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.column-item.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n background: #e3f2fd;\n}\n\n\n\n.column-item.drag-over[_ngcontent-%COMP%] {\n background: #f5f7fa;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n cursor: grab;\n color: #999;\n padding: 4px;\n transition: color 0.15s ease;\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n color: #666;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n cursor: grabbing;\n color: #1976d2;\n}\n\n.column-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 14px;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.column-name[_ngcontent-%COMP%] .format-indicator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #1976d2;\n opacity: 0.7;\n}\n\n.column-name[_ngcontent-%COMP%] .alias-indicator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #7b1fa2;\n opacity: 0.8;\n}\n\n.column-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n background: #ffebee;\n color: #c62828;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.action-btn.format-btn.has-format[_ngcontent-%COMP%] {\n color: #1976d2;\n background: #e3f2fd;\n}\n\n.empty-list[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 20px;\n color: #999;\n font-size: 13px;\n}\n\n\n\n.column-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #999;\n font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n outline: none;\n font-size: 14px;\n}\n\n\n\n\n\n\n.format-editor-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: white;\n z-index: 100;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideInFromRight 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-back-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.format-back-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.format-header-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-child {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:last-child {\n font-size: 12px;\n color: #666;\n}\n\n.format-editor-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n padding: 16px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 12px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.preview-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.preview-samples[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.preview-sample[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #94a3b8;\n min-width: 60px;\n}\n\n.preview-value[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 14px;\n font-family: 'SF Mono', 'Monaco', monospace;\n color: #1e293b;\n}\n\n\n\n.format-type-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.format-type-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-type-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n}\n\n.format-type-btn[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding: 12px 8px;\n border: 2px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-type-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.format-type-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.format-type-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: #1d4ed8;\n}\n\n\n\n.format-options-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.format-options-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.format-option-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] input[_ngcontent-%COMP%], \n.format-option-group[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.format-option-group[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus, \n.format-option-group[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-option-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n}\n\n.format-option-row[_ngcontent-%COMP%] .format-option-group[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.format-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n\n\n.alignment-options[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #3b82f6;\n}\n\n.align-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n\n\n.style-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.style-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.style-toggle-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #64748b;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.color-picker-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n\n.color-picker-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.color-picker-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #64748b;\n min-width: 80px;\n}\n\n.color-picker-group[_ngcontent-%COMP%] input[type=\"color\"][_ngcontent-%COMP%] {\n width: 40px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n}\n\n.color-clear-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.color-clear-btn[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n color: #666;\n}\n\n\n\n.format-editor-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-footer-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%] {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%] {\n color: #c62828;\n border-color: #c62828;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #c62828;\n color: white;\n}\n\n\n\n.filter-summary-container[_ngcontent-%COMP%] {\n padding: 4px 0;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: #f5f7fa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n background: #1976d2;\n color: white;\n font-size: 12px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 10px;\n min-width: 20px;\n text-align: center;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n color: #999;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.summary-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%] {\n background: transparent;\n color: #c62828;\n border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #ffebee;\n border-color: #c62828;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%] {\n background: #1976d2;\n color: white;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n}\n\n\n\n\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background: #f3f4f6;\n color: #6b7280;\n font-size: 16px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] .mode-icon[_ngcontent-%COMP%] {\n background: #3b82f6;\n color: white;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6b7280;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] .mode-title[_ngcontent-%COMP%] {\n color: #1d4ed8;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-check[_ngcontent-%COMP%] {\n color: #3b82f6;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n border: 1px solid #bae6fd;\n border-radius: 12px;\n margin-bottom: 16px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n border-radius: 10px;\n color: white;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n background: white;\n border-radius: 8px;\n padding: 12px;\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n min-height: 60px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n color: #9ca3af;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 12px;\n background: #e3f2fd;\n border-radius: 6px;\n margin-bottom: 12px;\n font-size: 13px;\n color: #1565c0;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 14px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 500;\n color: #6b7280;\n}\n\n.examples-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #f59e0b;\n}\n\n.example-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n background: white;\n font-size: 12px;\n font-weight: 500;\n color: #4b5563;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #1d4ed8;\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #9ca3af;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n\n\n.smart-filter-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n}\n\n.smart-filter-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n margin-top: 12px;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%] {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #2563eb;\n border-color: #2563eb;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n background: #f5f5f5;\n color: #999;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 80px;\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n.checkbox-text[_ngcontent-%COMP%] small[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #666;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n padding-top: 16px;\n border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n color: #c62828;\n}\n\n.danger-zone[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #c62828;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #c62828;\n background: transparent;\n border-radius: 6px;\n color: #c62828;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n background: #c62828;\n color: white;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.footer-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n\n\n\n.format-editor[_ngcontent-%COMP%] {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n.format-editor[_ngcontent-%COMP%] .format-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0 16px 0;\n border-bottom: 1px solid #e0e0e0;\n margin-bottom: 16px;\n}\n\n.format-editor[_ngcontent-%COMP%] .back-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.format-editor[_ngcontent-%COMP%] .back-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%] .format-editor-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n\n\n.format-editor[_ngcontent-%COMP%] .preview-table[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 12px;\n}\n\n.format-editor[_ngcontent-%COMP%] .preview-header-cell[_ngcontent-%COMP%] {\n padding: 10px 14px;\n background: #f1f5f9;\n border-radius: 6px;\n font-weight: 600;\n font-size: 13px;\n color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%] .preview-cell[_ngcontent-%COMP%] {\n padding: 8px 14px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n font-size: 14px;\n color: #333;\n}\n\n\n\n.format-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n\n\n.format-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.format-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.format-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #555;\n flex-shrink: 0;\n}\n\n\n\n.format-select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n min-width: 120px;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n width: 80px;\n}\n\n\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n justify-content: flex-start;\n gap: 8px;\n}\n\n.format-row.alias-info[_ngcontent-%COMP%] .muted-text[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: none;\n background: #f0f0f0;\n border-radius: 50%;\n color: #888;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #c62828;\n}\n\n\n\n.color-input[_ngcontent-%COMP%] {\n width: 50px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n background: white;\n}\n\n.color-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n width: 40px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.align-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n\n\n.style-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.style-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #64748b;\n}\n\n.style-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n\n\n.format-section-collapsible[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n background: #f8fafc;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n list-style: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::-webkit-details-marker {\n display: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::before {\n content: '\\f054';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 10px;\n color: #999;\n transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open][_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::before {\n transform: rotate(90deg);\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.format-section-content[_ngcontent-%COMP%] {\n padding: 14px;\n background: white;\n border-top: 1px solid #e0e0e0;\n}\n\n\n\n.format-actions[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n color: #666;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n background: #fff5f5;\n border-color: #f87171;\n color: #dc2626;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n@media (max-width: 768px) {\n .config-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n max-width: 100vw !important;\n }\n\n \n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-btn[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .format-type-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\n\n@media (min-width: 769px) and (max-width: 1200px) {\n .config-panel[_ngcontent-%COMP%] {\n max-width: min(600px, 80vw);\n }\n}"] });
|
|
2265
|
+
i0.ɵɵconditional(ctx.viewEntity && ctx.canEdit ? 39 : -1);
|
|
2266
|
+
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.config-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n width: 450px;\n min-width: 360px;\n max-width: min(800px, 100vw);\n height: 100%;\n background: white;\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open[_ngcontent-%COMP%] {\n transform: translateX(0);\n}\n\n.config-panel.resizing[_ngcontent-%COMP%] {\n transition: none;\n user-select: none;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.config-panel.resizing[_ngcontent-%COMP%] .resize-handle[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n width: 3px;\n height: 40px;\n background: #cbd5e1;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-grip[_ngcontent-%COMP%], \n.config-panel.resizing[_ngcontent-%COMP%] .resize-grip[_ngcontent-%COMP%] {\n opacity: 1;\n background: #1976d2;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n\n\n.tab-nav[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n border-bottom: 2px solid transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n color: #1976d2;\n border-bottom-color: #1976d2;\n background: transparent;\n}\n\n.tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n background: #1976d2;\n color: white;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: 8px;\n margin-left: 4px;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.tab-content[_ngcontent-%COMP%] {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n.column-count[_ngcontent-%COMP%] {\n margin-left: auto;\n background: #e3f2fd;\n color: #1976d2;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n}\n\n\n\n.sort-config[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.sort-field-select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-direction-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.direction-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.direction-btn[_ngcontent-%COMP%]:hover {\n color: #333;\n}\n\n.direction-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #1976d2;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n\n\n\n.add-sort-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border: 1px dashed #ccc;\n border-radius: 8px;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n width: 100%;\n justify-content: center;\n margin-bottom: 12px;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: #1976d2;\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.add-sort-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.add-sort-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.sort-items-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n\n\n.sort-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n transition: all 0.15s ease;\n}\n\n.sort-item[_ngcontent-%COMP%]:hover {\n border-color: #bdbdbd;\n background: #fafafa;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n background: #e3f2fd;\n border-color: #1976d2;\n}\n\n.sort-item.drop-target[_ngcontent-%COMP%] {\n border-color: #1976d2;\n}\n\n\n\n.sort-priority-badge[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n height: 24px;\n padding: 0 6px;\n font-size: 12px;\n font-weight: 700;\n color: white;\n background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n flex-shrink: 0;\n}\n\n\n\n.sort-drag-handle[_ngcontent-%COMP%] {\n color: #bdbdbd;\n cursor: grab;\n padding: 4px;\n transition: color 0.15s ease;\n flex-shrink: 0;\n}\n\n.sort-drag-handle[_ngcontent-%COMP%]:hover {\n color: #757575;\n}\n\n.sort-item.dragging[_ngcontent-%COMP%] .sort-drag-handle[_ngcontent-%COMP%] {\n cursor: grabbing;\n color: #1976d2;\n}\n\n\n\n.sort-field-dropdown[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 120px;\n padding: 8px 10px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 13px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-field-dropdown[_ngcontent-%COMP%]:disabled {\n background: #f5f5f5;\n color: #999;\n cursor: not-allowed;\n}\n\n\n\n.sort-remove-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #bdbdbd;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #ffebee;\n color: #c62828;\n}\n\n.sort-remove-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n\n\n.sort-drop-indicator[_ngcontent-%COMP%] {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: _ngcontent-%COMP%_sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_sortDropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.sort-hint[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 10px 12px;\n background: #f5f7fa;\n border-radius: 6px;\n font-size: 12px;\n color: #666;\n}\n\n.sort-hint[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n\n\n.sorting-section[_ngcontent-%COMP%] {\n padding-top: 0;\n}\n\n.sorting-header[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.sorting-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #666;\n line-height: 1.5;\n margin: 0;\n}\n\n\n\n.sort-empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 40px 20px;\n color: #999;\n font-size: 14px;\n text-align: center;\n}\n\n.sort-empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n opacity: 0.4;\n margin-bottom: 8px;\n}\n\n.sort-empty-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #bbb;\n margin: 0;\n}\n\n\n\n.column-list[_ngcontent-%COMP%] {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n background: #fafafa;\n}\n\n.column-list.visible-columns[_ngcontent-%COMP%] {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.column-list.hidden-columns[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 100px;\n overflow-y: auto;\n}\n\n\n\n.config-section[_ngcontent-%COMP%]:last-child {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n margin-bottom: 0;\n}\n\n.column-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border-bottom: 1px solid #f0f0f0;\n transition: background 0.1s ease;\n position: relative;\n}\n\n.column-item[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.column-item[_ngcontent-%COMP%]:hover {\n background: #f5f7fa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%] {\n background: #fafafa;\n}\n\n.column-item.hidden[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n}\n\n\n\n\n\n\n\n\n.drop-indicator[_ngcontent-%COMP%] {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: _ngcontent-%COMP%_dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_dropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n\n\n.column-item.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n background: #e3f2fd;\n}\n\n\n\n.column-item.drag-over[_ngcontent-%COMP%] {\n background: #f5f7fa;\n}\n\n.drag-handle[_ngcontent-%COMP%] {\n cursor: grab;\n color: #999;\n padding: 4px;\n transition: color 0.15s ease;\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n color: #666;\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n cursor: grabbing;\n color: #1976d2;\n}\n\n.column-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 14px;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.column-name[_ngcontent-%COMP%] .format-indicator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #1976d2;\n opacity: 0.7;\n}\n\n.column-name[_ngcontent-%COMP%] .alias-indicator[_ngcontent-%COMP%] {\n font-size: 10px;\n color: #7b1fa2;\n opacity: 0.8;\n}\n\n.column-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.action-btn.hide-btn[_ngcontent-%COMP%]:hover {\n background: #ffebee;\n color: #c62828;\n}\n\n.action-btn.show-btn[_ngcontent-%COMP%]:hover {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.action-btn.format-btn[_ngcontent-%COMP%]:hover {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.action-btn.format-btn.has-format[_ngcontent-%COMP%] {\n color: #1976d2;\n background: #e3f2fd;\n}\n\n.empty-list[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 20px;\n color: #999;\n font-size: 13px;\n}\n\n\n\n.column-search[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n margin-bottom: 8px;\n}\n\n.column-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #999;\n font-size: 12px;\n}\n\n.column-search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n outline: none;\n font-size: 14px;\n}\n\n\n\n\n\n\n.format-editor-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: white;\n z-index: 100;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_slideInFromRight 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.format-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-back-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.format-back-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.format-header-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-child {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.format-header-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:last-child {\n font-size: 12px;\n color: #666;\n}\n\n.format-editor-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n\n\n.format-preview-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n padding: 16px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 12px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.preview-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.preview-samples[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.preview-sample[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #94a3b8;\n min-width: 60px;\n}\n\n.preview-value[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 14px;\n font-family: 'SF Mono', 'Monaco', monospace;\n color: #1e293b;\n}\n\n\n\n.format-type-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.format-type-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-type-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n}\n\n.format-type-btn[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding: 12px 8px;\n border: 2px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-type-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.format-type-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.format-type-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n}\n\n.format-type-btn.active[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: #1d4ed8;\n}\n\n\n\n.format-options-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.format-options-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.format-option-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.format-option-group[_ngcontent-%COMP%] input[_ngcontent-%COMP%], \n.format-option-group[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.format-option-group[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus, \n.format-option-group[_ngcontent-%COMP%] select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-option-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n}\n\n.format-option-row[_ngcontent-%COMP%] .format-option-group[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.format-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.format-checkbox[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n\n\n.alignment-options[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #3b82f6;\n}\n\n.align-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n\n\n.style-section[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.style-section[_ngcontent-%COMP%] .section-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.style-toggle-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.style-toggle-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #64748b;\n}\n\n.style-toggle-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n.color-picker-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n\n.color-picker-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.color-picker-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #64748b;\n min-width: 80px;\n}\n\n.color-picker-group[_ngcontent-%COMP%] input[type=\"color\"][_ngcontent-%COMP%] {\n width: 40px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n}\n\n.color-clear-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.color-clear-btn[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n color: #666;\n}\n\n\n\n.format-editor-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-footer-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%] {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.format-footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%] {\n color: #c62828;\n border-color: #c62828;\n}\n\n.format-footer-btn.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #c62828;\n color: white;\n}\n\n\n\n.filter-summary-container[_ngcontent-%COMP%] {\n padding: 4px 0;\n}\n\n.filter-summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: #f5f7fa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.summary-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n background: #1976d2;\n color: white;\n font-size: 12px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 10px;\n min-width: 20px;\n text-align: center;\n}\n\n.summary-text[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n.summary-text.no-filters[_ngcontent-%COMP%] {\n color: #999;\n}\n\n.summary-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.summary-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.summary-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.summary-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%] {\n background: transparent;\n color: #c62828;\n border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #ffebee;\n border-color: #c62828;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%] {\n background: #1976d2;\n color: white;\n}\n\n.summary-btn.edit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n}\n\n\n\n\n\n\n.filter-mode-selector[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] {\n border-color: #3b82f6;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background: #f3f4f6;\n color: #6b7280;\n font-size: 16px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] .mode-icon[_ngcontent-%COMP%] {\n background: #3b82f6;\n color: white;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-subtitle[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6b7280;\n}\n\n.filter-mode-btn.active[_ngcontent-%COMP%] .mode-title[_ngcontent-%COMP%] {\n color: #1d4ed8;\n}\n\n.filter-mode-btn[_ngcontent-%COMP%] .mode-check[_ngcontent-%COMP%] {\n color: #3b82f6;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.smart-filter-section[_ngcontent-%COMP%] {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n border: 1px solid #bae6fd;\n border-radius: 12px;\n margin-bottom: 16px;\n}\n\n.smart-filter-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n border-radius: 10px;\n color: white;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n background: white;\n border-radius: 8px;\n padding: 12px;\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n min-height: 60px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container[_ngcontent-%COMP%] .smart-filter-textarea[_ngcontent-%COMP%]::placeholder {\n color: #9ca3af;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 12px;\n background: #e3f2fd;\n border-radius: 6px;\n margin-bottom: 12px;\n font-size: 13px;\n color: #1565c0;\n}\n\n.smart-filter-explanation[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 14px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n\n\n.smart-filter-examples[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.examples-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 500;\n color: #6b7280;\n}\n\n.examples-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #f59e0b;\n}\n\n.example-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.example-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n background: white;\n font-size: 12px;\n font-weight: 500;\n color: #4b5563;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #1d4ed8;\n}\n\n.example-chip[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.example-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #9ca3af;\n}\n\n.example-chip[_ngcontent-%COMP%]:hover:not(:disabled) i[_ngcontent-%COMP%] {\n color: #3b82f6;\n}\n\n\n\n.smart-filter-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n}\n\n.smart-filter-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n\n\n\n\n\n.traditional-filter-section[_ngcontent-%COMP%] {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n margin-top: 12px;\n}\n\n.traditional-filter-tip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%] {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #2563eb;\n border-color: #2563eb;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.form-input[_ngcontent-%COMP%]:disabled {\n background: #f5f5f5;\n color: #999;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 80px;\n}\n\n\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #333;\n}\n\n.checkbox-text[_ngcontent-%COMP%] small[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #666;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n padding-top: 16px;\n border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n color: #c62828;\n}\n\n.danger-zone[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #c62828;\n}\n\n.delete-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #c62828;\n background: transparent;\n border-radius: 6px;\n color: #c62828;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.delete-btn[_ngcontent-%COMP%]:hover {\n background: #c62828;\n color: white;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.footer-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.footer-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.footer-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%] {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.footer-btn.primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.footer-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n\n\n\n.format-editor[_ngcontent-%COMP%] {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n.format-editor[_ngcontent-%COMP%] .format-editor-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0 16px 0;\n border-bottom: 1px solid #e0e0e0;\n margin-bottom: 16px;\n}\n\n.format-editor[_ngcontent-%COMP%] .back-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.format-editor[_ngcontent-%COMP%] .back-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%] .format-editor-title[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n\n\n.format-editor[_ngcontent-%COMP%] .preview-table[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 12px;\n}\n\n.format-editor[_ngcontent-%COMP%] .preview-header-cell[_ngcontent-%COMP%] {\n padding: 10px 14px;\n background: #f1f5f9;\n border-radius: 6px;\n font-weight: 600;\n font-size: 13px;\n color: #333;\n}\n\n.format-editor[_ngcontent-%COMP%] .preview-cell[_ngcontent-%COMP%] {\n padding: 8px 14px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n font-size: 14px;\n color: #333;\n}\n\n\n\n.format-section[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.format-section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n\n\n.format-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.format-row[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.format-row[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #555;\n flex-shrink: 0;\n}\n\n\n\n.format-select[_ngcontent-%COMP%] {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n min-width: 120px;\n}\n\n.format-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n}\n\n.format-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input.small[_ngcontent-%COMP%] {\n width: 80px;\n}\n\n\n\n.format-row.alias-info[_ngcontent-%COMP%] {\n justify-content: flex-start;\n gap: 8px;\n}\n\n.format-row.alias-info[_ngcontent-%COMP%] .muted-text[_ngcontent-%COMP%] {\n color: #888;\n font-size: 12px;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n border: none;\n background: #f0f0f0;\n border-radius: 50%;\n color: #888;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n transition: all 0.15s ease;\n}\n\n.clear-alias-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #c62828;\n}\n\n\n\n.color-input[_ngcontent-%COMP%] {\n width: 50px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n background: white;\n}\n\n.color-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n\n\n.alignment-toggle[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.align-btn[_ngcontent-%COMP%] {\n width: 40px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.align-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active[_ngcontent-%COMP%] {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.align-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #64748b;\n}\n\n.align-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n\n\n.style-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-btn[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-btn[_ngcontent-%COMP%]:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-btn.active[_ngcontent-%COMP%] {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.style-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #64748b;\n}\n\n.style-btn.active[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n}\n\n\n\n.format-section-collapsible[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n background: #f8fafc;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n list-style: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::-webkit-details-marker {\n display: none;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::before {\n content: '\\f054';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 10px;\n color: #999;\n transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open][_ngcontent-%COMP%] summary[_ngcontent-%COMP%]::before {\n transform: rotate(90deg);\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1976d2;\n font-size: 12px;\n}\n\n.format-section-collapsible[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.format-section-content[_ngcontent-%COMP%] {\n padding: 14px;\n background: white;\n border-top: 1px solid #e0e0e0;\n}\n\n\n\n.format-actions[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n color: #666;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clear-format-btn[_ngcontent-%COMP%]:hover {\n background: #fff5f5;\n border-color: #f87171;\n color: #dc2626;\n}\n\n.clear-format-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n@media (max-width: 768px) {\n .config-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n max-width: 100vw !important;\n }\n\n \n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-btn[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n display: none;\n }\n\n .tab-btn[_ngcontent-%COMP%] {\n padding: 14px;\n }\n\n .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n }\n\n .format-type-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\n\n@media (min-width: 769px) and (max-width: 1200px) {\n .config-panel[_ngcontent-%COMP%] {\n max-width: min(600px, 80vw);\n }\n}"] });
|
|
1973
2267
|
}
|
|
1974
2268
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewConfigPanelComponent, [{
|
|
1975
2269
|
type: Component,
|
|
1976
|
-
args: [{ selector: 'mj-view-config-panel', template: "<!-- Backdrop -->\n@if (isOpen) {\n <div class=\"panel-backdrop\" (click)=\"onClose()\"></div>\n}\n\n<!-- Sliding Panel -->\n<div class=\"config-panel\"\n [class.open]=\"isOpen\"\n [class.resizing]=\"isResizing\"\n [style.width.px]=\"panelWidth\">\n <!-- Resize Handle -->\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-sliders-h\"></i>\n <span>{{ viewEntity ? 'Edit View' : 'Configure View' }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tab-nav\">\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'columns'\"\n (click)=\"setActiveTab('columns')\">\n <i class=\"fa-solid fa-columns\"></i>\n <span>Columns</span>\n </button>\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'filters'\"\n (click)=\"setActiveTab('filters')\">\n <i class=\"fa-solid fa-filter\"></i>\n <span>Filters</span>\n </button>\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'settings'\"\n (click)=\"setActiveTab('settings')\">\n <i class=\"fa-solid fa-cog\"></i>\n <span>Settings</span>\n </button>\n </div>\n\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Columns Tab -->\n @if (activeTab === 'columns' && !formatEditingColumn) {\n <div class=\"tab-content\">\n <!-- Sort Configuration -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-sort\"></i>\n <span>Default Sort</span>\n </div>\n <div class=\"sort-config\">\n <select\n class=\"sort-field-select\"\n [(ngModel)]=\"sortField\">\n <option [value]=\"null\">No default sort</option>\n @for (field of sortableFields; track field.ID) {\n <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n }\n </select>\n @if (sortField) {\n <div class=\"sort-direction-toggle\">\n <button\n class=\"direction-btn\"\n [class.active]=\"sortDirection === 'asc'\"\n (click)=\"sortDirection = 'asc'\"\n title=\"Ascending\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"direction-btn\"\n [class.active]=\"sortDirection === 'desc'\"\n (click)=\"sortDirection = 'desc'\"\n title=\"Descending\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n }\n </div>\n </div>\n\n <!-- Visible Columns -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-eye\"></i>\n <span>Visible Columns</span>\n <span class=\"column-count\">{{ visibleColumns.length }}</span>\n </div>\n <div class=\"column-list visible-columns\">\n @for (column of visibleColumns; track column.fieldId; let i = $index) {\n <!-- Drop indicator before -->\n @if (isDropBefore(column)) {\n <div class=\"drop-indicator\"></div>\n }\n <div\n class=\"column-item\"\n [class.dragging]=\"draggedColumn === column\"\n [class.drop-target]=\"dropTargetColumn === column\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, column)\"\n (dragover)=\"onDragOver($event, column)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, column)\"\n (dragend)=\"onDragEnd($event)\">\n <div class=\"drag-handle\">\n <i class=\"fa-solid fa-grip-vertical\"></i>\n </div>\n <span class=\"column-name\">\n {{ column.userDisplayName || column.displayName }}\n @if (column.userDisplayName) {\n <i class=\"fa-solid fa-pen-nib alias-indicator\" title=\"Custom name: {{ column.userDisplayName }}\"></i>\n }\n @if (hasCustomFormat(column)) {\n <i class=\"fa-solid fa-paintbrush format-indicator\" title=\"Custom formatting applied\"></i>\n }\n </span>\n <div class=\"column-actions\">\n <button\n class=\"action-btn format-btn\"\n (click)=\"openFormatEditor(column)\"\n title=\"Format column\">\n <i class=\"fa-solid fa-paintbrush\"></i>\n </button>\n <button\n class=\"action-btn\"\n [disabled]=\"i === 0\"\n (click)=\"moveColumnUp(column)\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button\n class=\"action-btn\"\n [disabled]=\"i === visibleColumns.length - 1\"\n (click)=\"moveColumnDown(column)\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n <button\n class=\"action-btn hide-btn\"\n (click)=\"toggleColumnVisibility(column)\"\n title=\"Hide column\">\n <i class=\"fa-solid fa-eye-slash\"></i>\n </button>\n </div>\n </div>\n <!-- Drop indicator after (only for last item) -->\n @if (isDropAfter(column) && i === visibleColumns.length - 1) {\n <div class=\"drop-indicator\"></div>\n }\n }\n @if (visibleColumns.length === 0) {\n <div class=\"empty-list\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>No columns visible. Add columns from below.</span>\n </div>\n }\n </div>\n </div>\n\n <!-- Hidden Columns -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-eye-slash\"></i>\n <span>Hidden Columns</span>\n <span class=\"column-count\">{{ hiddenColumns.length }}</span>\n </div>\n @if (hiddenColumns.length > 5) {\n <div class=\"column-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input\n type=\"text\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearchText\"\n />\n </div>\n }\n <div class=\"column-list hidden-columns\">\n @for (column of filteredHiddenColumns; track column.fieldId) {\n <div class=\"column-item hidden\">\n <span class=\"column-name\">{{ column.displayName }}</span>\n <button\n class=\"action-btn show-btn\"\n (click)=\"toggleColumnVisibility(column)\"\n title=\"Show column\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </div>\n }\n @if (hiddenColumns.length === 0) {\n <div class=\"empty-list\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span>All columns are visible</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Column Format Editor Sub-Panel -->\n @if (activeTab === 'columns' && formatEditingColumn) {\n <div class=\"format-editor\">\n <!-- Format Editor Header -->\n <div class=\"format-editor-header\">\n <button class=\"back-btn\" (click)=\"closeFormatEditor()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"format-editor-title\">\n <span>Format: {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}</span>\n </div>\n </div>\n\n <!-- Column Alias Section -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-pen-nib\"></i>\n <span>Column Name</span>\n </div>\n <div class=\"format-row\">\n <label>Display As</label>\n <input type=\"text\" class=\"format-input\"\n [value]=\"formatEditingColumn.userDisplayName || ''\"\n (input)=\"updateUserDisplayName($any($event.target).value)\"\n [placeholder]=\"formatEditingColumn.displayName\" />\n </div>\n @if (formatEditingColumn.userDisplayName) {\n <div class=\"format-row alias-info\">\n <small class=\"muted-text\">Original: {{ formatEditingColumn.displayName }}</small>\n <button class=\"clear-alias-btn\" (click)=\"formatEditingColumn.userDisplayName = undefined\" title=\"Clear alias\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n\n <!-- Preview Section -->\n <div class=\"format-preview-section\">\n <div class=\"preview-header\">\n <i class=\"fa-solid fa-eye\"></i>\n <span>Preview</span>\n </div>\n <div class=\"preview-table\">\n <div class=\"preview-header-cell\"\n [style.font-weight]=\"formatEditingColumn.format?.headerStyle?.bold ? 'bold' : 'normal'\"\n [style.font-style]=\"formatEditingColumn.format?.headerStyle?.italic ? 'italic' : 'normal'\"\n [style.text-decoration]=\"formatEditingColumn.format?.headerStyle?.underline ? 'underline' : 'none'\"\n [style.color]=\"formatEditingColumn.format?.headerStyle?.color\"\n [style.background-color]=\"formatEditingColumn.format?.headerStyle?.backgroundColor\">\n {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}\n </div>\n @for (value of getSampleValues(formatEditingColumn); track $index) {\n <div class=\"preview-cell\"\n [style.text-align]=\"formatEditingColumn.format?.align || 'left'\"\n [style.font-weight]=\"formatEditingColumn.format?.cellStyle?.bold ? 'bold' : 'normal'\"\n [style.font-style]=\"formatEditingColumn.format?.cellStyle?.italic ? 'italic' : 'normal'\"\n [style.text-decoration]=\"formatEditingColumn.format?.cellStyle?.underline ? 'underline' : 'none'\"\n [style.color]=\"formatEditingColumn.format?.cellStyle?.color\"\n [style.background-color]=\"formatEditingColumn.format?.cellStyle?.backgroundColor\">\n {{ formatPreviewValue(value, formatEditingColumn.format) }}\n </div>\n }\n </div>\n </div>\n\n <!-- Format Type -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-hashtag\"></i>\n <span>Format Type</span>\n </div>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.type\">\n <option value=\"auto\">Auto (Smart Default)</option>\n <option value=\"text\">Text</option>\n <option value=\"number\">Number</option>\n <option value=\"currency\">Currency</option>\n <option value=\"percent\">Percent</option>\n <option value=\"date\">Date</option>\n <option value=\"datetime\">Date & Time</option>\n <option value=\"boolean\">Boolean</option>\n </select>\n </div>\n\n <!-- Type-Specific Options -->\n @if (formatEditingColumn.format?.type === 'number' || formatEditingColumn.format?.type === 'currency' || formatEditingColumn.format?.type === 'percent') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>Number Options</span>\n </div>\n <div class=\"format-row\">\n <label>Decimal Places</label>\n <input type=\"number\" class=\"format-input small\" min=\"0\" max=\"10\"\n [(ngModel)]=\"formatEditingColumn.format!.decimals\" />\n </div>\n @if (formatEditingColumn.format?.type === 'currency') {\n <div class=\"format-row\">\n <label>Currency</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.currencyCode\">\n <option value=\"USD\">USD ($)</option>\n <option value=\"EUR\">EUR (\u20AC)</option>\n <option value=\"GBP\">GBP (\u00A3)</option>\n <option value=\"JPY\">JPY (\u00A5)</option>\n <option value=\"CAD\">CAD ($)</option>\n <option value=\"AUD\">AUD ($)</option>\n </select>\n </div>\n }\n <div class=\"format-row\">\n <label>Thousands Separator</label>\n <input type=\"checkbox\" [(ngModel)]=\"formatEditingColumn.format!.thousandsSeparator\" />\n </div>\n </div>\n }\n\n @if (formatEditingColumn.format?.type === 'date' || formatEditingColumn.format?.type === 'datetime') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-calendar\"></i>\n <span>Date Options</span>\n </div>\n <div class=\"format-row\">\n <label>Format</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.dateFormat\">\n <option value=\"short\">Short (1/15/25)</option>\n <option value=\"short-weekday\">Short + Day (Wed, 1/15/25)</option>\n <option value=\"medium\">Medium (Jan 15, 2025)</option>\n <option value=\"medium-weekday\">Medium + Day (Wed, Jan 15, 2025)</option>\n <option value=\"long\">Long (January 15, 2025)</option>\n <option value=\"long-weekday\">Long + Day (Wednesday, January 15, 2025)</option>\n </select>\n </div>\n </div>\n }\n\n @if (formatEditingColumn.format?.type === 'boolean') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n <span>Boolean Options</span>\n </div>\n <div class=\"format-row\">\n <label>True Label</label>\n <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.trueLabel\" placeholder=\"Yes\" />\n </div>\n <div class=\"format-row\">\n <label>False Label</label>\n <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.falseLabel\" placeholder=\"No\" />\n </div>\n <div class=\"format-row\">\n <label>Display As</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.booleanDisplay\">\n <option value=\"text\">Text</option>\n <option value=\"checkbox\">Checkbox</option>\n <option value=\"icon\">Icon</option>\n </select>\n </div>\n </div>\n }\n\n <!-- Alignment -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-align-left\"></i>\n <span>Alignment</span>\n </div>\n <div class=\"alignment-toggle\">\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'left' || !formatEditingColumn.format?.align\"\n (click)=\"formatEditingColumn.format!.align = 'left'\" title=\"Left\">\n <i class=\"fa-solid fa-align-left\"></i>\n </button>\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'center'\"\n (click)=\"formatEditingColumn.format!.align = 'center'\" title=\"Center\">\n <i class=\"fa-solid fa-align-center\"></i>\n </button>\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'right'\"\n (click)=\"formatEditingColumn.format!.align = 'right'\" title=\"Right\">\n <i class=\"fa-solid fa-align-right\"></i>\n </button>\n </div>\n </div>\n\n <!-- Header Style -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-heading\"></i>\n <span>Header Style</span>\n </div>\n <div class=\"style-buttons\">\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.bold\"\n (click)=\"toggleHeaderStyle('bold')\"\n title=\"Bold\">\n <i class=\"fa-solid fa-bold\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.italic\"\n (click)=\"toggleHeaderStyle('italic')\"\n title=\"Italic\">\n <i class=\"fa-solid fa-italic\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.underline\"\n (click)=\"toggleHeaderStyle('underline')\"\n title=\"Underline\">\n <i class=\"fa-solid fa-underline\"></i>\n </button>\n </div>\n <div class=\"format-row\">\n <label>Text Color</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.headerStyle?.color || '#000000'\"\n (input)=\"updateHeaderColor('color', $any($event.target).value)\" />\n </div>\n <div class=\"format-row\">\n <label>Background</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.headerStyle?.backgroundColor || '#ffffff'\"\n (input)=\"updateHeaderColor('backgroundColor', $any($event.target).value)\" />\n </div>\n </div>\n\n <!-- Cell Style -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-table-cells\"></i>\n <span>Cell Style</span>\n </div>\n <div class=\"style-buttons\">\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.bold\"\n (click)=\"toggleCellStyle('bold')\"\n title=\"Bold\">\n <i class=\"fa-solid fa-bold\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.italic\"\n (click)=\"toggleCellStyle('italic')\"\n title=\"Italic\">\n <i class=\"fa-solid fa-italic\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.underline\"\n (click)=\"toggleCellStyle('underline')\"\n title=\"Underline\">\n <i class=\"fa-solid fa-underline\"></i>\n </button>\n </div>\n <div class=\"format-row\">\n <label>Text Color</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.cellStyle?.color || '#000000'\"\n (input)=\"updateCellColor('color', $any($event.target).value)\" />\n </div>\n <div class=\"format-row\">\n <label>Background</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.cellStyle?.backgroundColor || '#ffffff'\"\n (input)=\"updateCellColor('backgroundColor', $any($event.target).value)\" />\n </div>\n </div>\n\n <!-- Clear Format Button -->\n <div class=\"format-actions\">\n <button class=\"clear-format-btn\" (click)=\"clearColumnFormat(formatEditingColumn); closeFormatEditor()\">\n <i class=\"fa-solid fa-eraser\"></i>\n Clear Formatting\n </button>\n </div>\n </div>\n }\n\n <!-- Filters Tab -->\n @if (activeTab === 'filters') {\n <div class=\"tab-content\">\n <!-- Filter Mode Selection -->\n <div class=\"filter-mode-selector\">\n <button\n class=\"filter-mode-btn\"\n [class.active]=\"filterMode === 'smart'\"\n (click)=\"setFilterMode('smart')\"\n [disabled]=\"!canEdit\">\n <div class=\"mode-icon\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n </div>\n <div class=\"mode-content\">\n <span class=\"mode-title\">Smart Filter</span>\n <span class=\"mode-subtitle\">Use AI to filter with natural language</span>\n </div>\n @if (filterMode === 'smart') {\n <i class=\"fa-solid fa-check mode-check\"></i>\n }\n </button>\n <button\n class=\"filter-mode-btn\"\n [class.active]=\"filterMode === 'traditional'\"\n (click)=\"setFilterMode('traditional')\"\n [disabled]=\"!canEdit\">\n <div class=\"mode-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"mode-content\">\n <span class=\"mode-title\">Traditional Filter</span>\n <span class=\"mode-subtitle\">Build filters with field/operator/value</span>\n </div>\n @if (filterMode === 'traditional') {\n <i class=\"fa-solid fa-check mode-check\"></i>\n }\n </button>\n </div>\n\n <!-- Smart Filter Section -->\n @if (filterMode === 'smart') {\n <div class=\"config-section smart-filter-section\">\n <div class=\"smart-filter-input-container\">\n <div class=\"smart-filter-icon\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n </div>\n <textarea\n id=\"smartFilterPrompt\"\n class=\"smart-filter-textarea\"\n placeholder=\"Describe what you're looking for...\"\n [(ngModel)]=\"smartFilterPrompt\"\n [disabled]=\"!canEdit\"\n rows=\"3\"\n ></textarea>\n </div>\n\n @if (smartFilterExplanation) {\n <div class=\"smart-filter-explanation\">\n <i class=\"fa-solid fa-robot\"></i>\n <span>{{ smartFilterExplanation }}</span>\n </div>\n }\n\n <!-- Example Prompts -->\n <div class=\"smart-filter-examples\">\n <div class=\"examples-header\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Try these examples:</span>\n </div>\n <div class=\"example-chips\">\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Show records created in the last 30 days')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-regular fa-calendar\"></i>\n Last 30 days\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Active records only')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Active only\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Records with high priority')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-star\"></i>\n High priority\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Records modified this week')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n Modified this week\n </button>\n </div>\n </div>\n\n <div class=\"smart-filter-tip\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>The AI will interpret your description and create the appropriate filter when you save the view.</span>\n </div>\n </div>\n }\n\n <!-- Traditional Filter Section -->\n @if (filterMode === 'traditional') {\n <div class=\"config-section traditional-filter-section\">\n <div class=\"filter-summary-container\">\n <div class=\"filter-summary\">\n <div class=\"summary-info\">\n @if (getFilterCount() > 0) {\n <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n <span class=\"summary-text\">{{ getFilterSummary() }}</span>\n } @else {\n <span class=\"summary-text no-filters\">No filters configured</span>\n }\n </div>\n <div class=\"summary-actions\">\n @if (getFilterCount() > 0 && canEdit) {\n <button\n class=\"summary-btn clear-btn\"\n (click)=\"clearFilters()\"\n title=\"Clear all filters\">\n <i class=\"fa-solid fa-times\"></i>\n Clear\n </button>\n }\n <button\n class=\"summary-btn edit-btn primary\"\n (click)=\"openFilterDialog()\"\n [disabled]=\"!canEdit && getFilterCount() === 0\"\n title=\"Edit filters\">\n <i class=\"fa-solid fa-pen\"></i>\n {{ getFilterCount() > 0 ? 'Edit Filters' : 'Add Filters' }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"traditional-filter-tip\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.</span>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Settings Tab -->\n @if (activeTab === 'settings') {\n <div class=\"tab-content\">\n <!-- View Name & Description -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>View Details</span>\n </div>\n <div class=\"form-group\">\n <label for=\"viewName\">Name</label>\n <input\n id=\"viewName\"\n type=\"text\"\n class=\"form-input\"\n placeholder=\"Enter view name...\"\n [(ngModel)]=\"viewName\"\n [disabled]=\"!canEdit\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"viewDescription\">Description</label>\n <textarea\n id=\"viewDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"Describe this view...\"\n [(ngModel)]=\"viewDescription\"\n [disabled]=\"!canEdit\"\n rows=\"3\"\n ></textarea>\n </div>\n </div>\n\n <!-- Sharing -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-share-alt\"></i>\n <span>Sharing</span>\n </div>\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"isShared\"\n [disabled]=\"!canEdit\"\n />\n <span class=\"checkbox-text\">\n <strong>Share with others</strong>\n <small>Allow other users to use this view</small>\n </span>\n </label>\n </div>\n\n <!-- Danger Zone -->\n @if (viewEntity && canDelete) {\n <div class=\"config-section danger-zone\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <span>Danger Zone</span>\n </div>\n <button class=\"delete-btn\" (click)=\"onDelete()\">\n <i class=\"fa-solid fa-trash\"></i>\n <span>Delete View</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Panel Footer -->\n <div class=\"panel-footer\">\n <!-- Action buttons on LEFT -->\n <div class=\"footer-left\">\n @if (viewEntity && canEdit) {\n <!-- Editing an existing saved view -->\n <button\n class=\"footer-btn save-btn primary\"\n (click)=\"onSave()\"\n [disabled]=\"isSaving || !viewName\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ isSaving ? 'Saving...' : 'Save' }}\n </button>\n }\n @if (!viewEntity) {\n <!-- Default/Dynamic view - Save to user settings -->\n <button\n class=\"footer-btn save-btn primary\"\n (click)=\"onSaveDefaults()\"\n [disabled]=\"isSaving\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ isSaving ? 'Saving...' : 'Save' }}\n </button>\n <!-- Save As New - creates a named view -->\n <button\n class=\"footer-btn save-as-btn\"\n (click)=\"onSaveAsNew()\"\n [disabled]=\"isSaving || !viewName\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n {{ isSaving ? 'Creating...' : 'Save As New' }}\n </button>\n }\n @if (viewEntity && canEdit) {\n <!-- Save As New for existing view -->\n <button\n class=\"footer-btn save-as-btn\"\n (click)=\"onSaveAsNew()\"\n [disabled]=\"isSaving\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n Save As New\n </button>\n }\n </div>\n <!-- Cancel button on RIGHT -->\n <button class=\"footer-btn cancel-btn\" (click)=\"onClose()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Backdrop */\n.panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Sliding Panel */\n.config-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 400px;\n min-width: 320px;\n max-width: min(800px, 100vw);\n height: 100%;\n background: white;\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open {\n transform: translateX(0);\n}\n\n.config-panel.resizing {\n transition: none;\n user-select: none;\n}\n\n/* Resize Handle */\n.resize-handle {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle:hover,\n.config-panel.resizing .resize-handle {\n background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip {\n width: 3px;\n height: 40px;\n background: #cbd5e1;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.config-panel.resizing .resize-grip {\n opacity: 1;\n background: #1976d2;\n}\n\n/* Panel Header */\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n.header-title i {\n color: #1976d2;\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n/* Tab Navigation */\n.tab-nav {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.tab-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n border-bottom: 2px solid transparent;\n}\n\n.tab-btn:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.tab-btn.active {\n color: #1976d2;\n border-bottom-color: #1976d2;\n background: transparent;\n}\n\n.tab-btn i {\n font-size: 12px;\n}\n\n/* Panel Content */\n.panel-content {\n flex: 1;\n overflow: hidden;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.tab-content {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n/* Config Sections */\n.config-section {\n margin-bottom: 24px;\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.section-header i {\n color: #1976d2;\n font-size: 12px;\n}\n\n.column-count {\n margin-left: auto;\n background: #e3f2fd;\n color: #1976d2;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n}\n\n/* Sort Configuration */\n.sort-config {\n display: flex;\n gap: 8px;\n}\n\n.sort-field-select {\n flex: 1;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-direction-toggle {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.direction-btn {\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.direction-btn:hover {\n color: #333;\n}\n\n.direction-btn.active {\n background: white;\n color: #1976d2;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Column Lists */\n.column-list {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n background: #fafafa;\n}\n\n.column-list.visible-columns {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.column-list.hidden-columns {\n flex: 1;\n min-height: 100px;\n overflow-y: auto;\n}\n\n/* Hidden columns section should expand to fill available space */\n.config-section:last-child {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n margin-bottom: 0;\n}\n\n.column-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border-bottom: 1px solid #f0f0f0;\n transition: background 0.1s ease;\n position: relative;\n}\n\n.column-item:last-child {\n border-bottom: none;\n}\n\n.column-item:hover {\n background: #f5f7fa;\n}\n\n.column-item.hidden {\n background: #fafafa;\n}\n\n.column-item.hidden:hover {\n background: #f0f0f0;\n}\n\n/* ========================================\n DRAG & DROP INDICATOR STYLES\n ======================================== */\n\n/* Drop indicator line element - shows where the column will be placed */\n.drop-indicator {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes dropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Highlight the column being dragged */\n.column-item.dragging {\n opacity: 0.5;\n background: #e3f2fd;\n}\n\n/* Visual feedback during drag over */\n.column-item.drag-over {\n background: #f5f7fa;\n}\n\n.drag-handle {\n cursor: grab;\n color: #999;\n padding: 4px;\n transition: color 0.15s ease;\n}\n\n.drag-handle:hover {\n color: #666;\n}\n\n.drag-handle:active {\n cursor: grabbing;\n color: #1976d2;\n}\n\n.column-name {\n flex: 1;\n font-size: 14px;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.column-name .format-indicator {\n font-size: 10px;\n color: #1976d2;\n opacity: 0.7;\n}\n\n.column-name .alias-indicator {\n font-size: 10px;\n color: #7b1fa2;\n opacity: 0.8;\n}\n\n.column-actions {\n display: flex;\n gap: 4px;\n}\n\n.action-btn {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.action-btn:hover:not(:disabled) {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.action-btn.hide-btn:hover {\n background: #ffebee;\n color: #c62828;\n}\n\n.action-btn.show-btn:hover {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.action-btn.format-btn:hover {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.action-btn.format-btn.has-format {\n color: #1976d2;\n background: #e3f2fd;\n}\n\n.empty-list {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 20px;\n color: #999;\n font-size: 13px;\n}\n\n/* Column Search */\n.column-search {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n margin-bottom: 8px;\n}\n\n.column-search i {\n color: #999;\n font-size: 12px;\n}\n\n.column-search input {\n flex: 1;\n border: none;\n outline: none;\n font-size: 14px;\n}\n\n/* ========================================\n COLUMN FORMAT EDITOR SUB-PANEL\n ======================================== */\n\n.format-editor-panel {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: white;\n z-index: 100;\n display: flex;\n flex-direction: column;\n animation: slideInFromRight 0.2s ease;\n}\n\n@keyframes slideInFromRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.format-editor-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-back-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.format-back-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.format-header-title span:first-child {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.format-header-title span:last-child {\n font-size: 12px;\n color: #666;\n}\n\n.format-editor-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Format Preview Section */\n.format-preview-section {\n margin-bottom: 24px;\n padding: 16px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n}\n\n.preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 12px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.preview-header i {\n color: #3b82f6;\n}\n\n.preview-samples {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.preview-sample {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label {\n font-size: 12px;\n color: #94a3b8;\n min-width: 60px;\n}\n\n.preview-value {\n flex: 1;\n font-size: 14px;\n font-family: 'SF Mono', 'Monaco', monospace;\n color: #1e293b;\n}\n\n/* Format Type Selection */\n.format-type-section {\n margin-bottom: 24px;\n}\n\n.format-type-section .section-label {\n display: block;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-type-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n}\n\n.format-type-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding: 12px 8px;\n border: 2px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-type-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.format-type-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.format-type-btn i {\n font-size: 18px;\n color: #64748b;\n}\n\n.format-type-btn.active i {\n color: #3b82f6;\n}\n\n.format-type-btn span {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n}\n\n.format-type-btn.active span {\n color: #1d4ed8;\n}\n\n/* Format Options Section */\n.format-options-section {\n margin-bottom: 24px;\n}\n\n.format-options-section .section-label {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-option-group {\n margin-bottom: 16px;\n}\n\n.format-option-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.format-option-group input,\n.format-option-group select {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.format-option-group input:focus,\n.format-option-group select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-option-row {\n display: flex;\n gap: 12px;\n}\n\n.format-option-row .format-option-group {\n flex: 1;\n}\n\n.format-checkbox {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n\n.format-checkbox input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.format-checkbox span {\n font-size: 14px;\n color: #333;\n}\n\n/* Alignment Options */\n.alignment-options {\n display: flex;\n gap: 8px;\n}\n\n.align-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.align-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #3b82f6;\n}\n\n.align-btn i {\n font-size: 16px;\n color: #64748b;\n}\n\n.align-btn.active i {\n color: #3b82f6;\n}\n\n/* Style Section */\n.style-section {\n margin-bottom: 24px;\n}\n\n.style-section .section-label {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.style-toggle-group {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-toggle-btn {\n width: 40px;\n height: 40px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-toggle-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-toggle-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.style-toggle-btn i {\n font-size: 16px;\n color: #64748b;\n}\n\n.style-toggle-btn.active i {\n color: #3b82f6;\n}\n\n.color-picker-row {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n\n.color-picker-group {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.color-picker-group label {\n font-size: 13px;\n color: #64748b;\n min-width: 80px;\n}\n\n.color-picker-group input[type=\"color\"] {\n width: 40px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n}\n\n.color-clear-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.color-clear-btn:hover {\n background: #f5f5f5;\n color: #666;\n}\n\n/* Format Editor Footer */\n.format-editor-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-footer-left {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-right {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-footer-btn:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.format-footer-btn.primary {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.format-footer-btn.primary:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.format-footer-btn.danger {\n color: #c62828;\n border-color: #c62828;\n}\n\n.format-footer-btn.danger:hover:not(:disabled) {\n background: #c62828;\n color: white;\n}\n\n/* Filter Summary Container */\n.filter-summary-container {\n padding: 4px 0;\n}\n\n.filter-summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: #f5f7fa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.summary-info {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-badge {\n background: #1976d2;\n color: white;\n font-size: 12px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 10px;\n min-width: 20px;\n text-align: center;\n}\n\n.summary-text {\n font-size: 14px;\n color: #333;\n}\n\n.summary-text.no-filters {\n color: #999;\n}\n\n.summary-actions {\n display: flex;\n gap: 8px;\n}\n\n.summary-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.summary-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.summary-btn i {\n font-size: 11px;\n}\n\n.summary-btn.clear-btn {\n background: transparent;\n color: #c62828;\n border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn:hover:not(:disabled) {\n background: #ffebee;\n border-color: #c62828;\n}\n\n.summary-btn.edit-btn {\n background: #1976d2;\n color: white;\n}\n\n.summary-btn.edit-btn:hover:not(:disabled) {\n background: #1565c0;\n}\n\n/* ========================================\n FILTER MODE SELECTOR\n ======================================== */\n\n.filter-mode-selector {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.filter-mode-btn {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.filter-mode-btn:hover:not(:disabled) {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.filter-mode-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.filter-mode-btn.active {\n border-color: #3b82f6;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn .mode-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background: #f3f4f6;\n color: #6b7280;\n font-size: 16px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active .mode-icon {\n background: #3b82f6;\n color: white;\n}\n\n.filter-mode-btn .mode-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.filter-mode-btn .mode-title {\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.filter-mode-btn .mode-subtitle {\n font-size: 12px;\n color: #6b7280;\n}\n\n.filter-mode-btn.active .mode-title {\n color: #1d4ed8;\n}\n\n.filter-mode-btn .mode-check {\n color: #3b82f6;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n/* ========================================\n SMART FILTER SECTION\n ======================================== */\n\n.smart-filter-section {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.smart-filter-input-container {\n display: flex;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n border: 1px solid #bae6fd;\n border-radius: 12px;\n margin-bottom: 16px;\n}\n\n.smart-filter-icon {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n border-radius: 10px;\n color: white;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.smart-filter-input-container .smart-filter-textarea {\n flex: 1;\n border: none;\n background: white;\n border-radius: 8px;\n padding: 12px;\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n min-height: 60px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea:focus {\n outline: none;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea::placeholder {\n color: #9ca3af;\n}\n\n.smart-filter-explanation {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 12px;\n background: #e3f2fd;\n border-radius: 6px;\n margin-bottom: 12px;\n font-size: 13px;\n color: #1565c0;\n}\n\n.smart-filter-explanation i {\n color: #1976d2;\n font-size: 14px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Smart Filter Examples */\n.smart-filter-examples {\n margin-bottom: 16px;\n}\n\n.examples-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 500;\n color: #6b7280;\n}\n\n.examples-header i {\n color: #f59e0b;\n}\n\n.example-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.example-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n background: white;\n font-size: 12px;\n font-weight: 500;\n color: #4b5563;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.example-chip:hover:not(:disabled) {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #1d4ed8;\n}\n\n.example-chip:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.example-chip i {\n font-size: 11px;\n color: #9ca3af;\n}\n\n.example-chip:hover:not(:disabled) i {\n color: #3b82f6;\n}\n\n/* Smart Filter Tip */\n.smart-filter-tip {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n}\n\n.smart-filter-tip i {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n/* ========================================\n TRADITIONAL FILTER SECTION\n ======================================== */\n\n.traditional-filter-section {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.traditional-filter-tip {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n margin-top: 12px;\n}\n\n.traditional-filter-tip i {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary:hover:not(:disabled) {\n background: #2563eb;\n border-color: #2563eb;\n}\n\n/* Form Elements */\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.form-input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.form-input:disabled {\n background: #f5f5f5;\n color: #999;\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 80px;\n}\n\n/* Checkbox */\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n}\n\n.checkbox-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text strong {\n font-size: 14px;\n color: #333;\n}\n\n.checkbox-text small {\n font-size: 12px;\n color: #666;\n}\n\n/* Danger Zone */\n.danger-zone {\n padding-top: 16px;\n border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone .section-header {\n color: #c62828;\n}\n\n.danger-zone .section-header i {\n color: #c62828;\n}\n\n.delete-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #c62828;\n background: transparent;\n border-radius: 6px;\n color: #c62828;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.delete-btn:hover {\n background: #c62828;\n color: white;\n}\n\n/* Panel Footer */\n.panel-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.footer-left {\n display: flex;\n gap: 8px;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n.footer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.footer-btn:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.footer-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.footer-btn.primary {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.footer-btn.primary:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.footer-btn i {\n font-size: 12px;\n}\n\n/* ========================================\n FORMAT EDITOR INLINE STYLES\n ======================================== */\n\n.format-editor {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n.format-editor .format-editor-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0 16px 0;\n border-bottom: 1px solid #e0e0e0;\n margin-bottom: 16px;\n}\n\n.format-editor .back-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.format-editor .back-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-editor .format-editor-title {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n/* Preview Table */\n.format-editor .preview-table {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 12px;\n}\n\n.format-editor .preview-header-cell {\n padding: 10px 14px;\n background: #f1f5f9;\n border-radius: 6px;\n font-weight: 600;\n font-size: 13px;\n color: #333;\n}\n\n.format-editor .preview-cell {\n padding: 8px 14px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n font-size: 14px;\n color: #333;\n}\n\n/* Format Section */\n.format-section {\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section:last-child {\n border-bottom: none;\n}\n\n.format-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-section-header i {\n color: #1976d2;\n font-size: 12px;\n}\n\n/* Format Row */\n.format-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.format-row:last-child {\n margin-bottom: 0;\n}\n\n.format-row label {\n font-size: 13px;\n color: #555;\n flex-shrink: 0;\n}\n\n/* Format Inputs */\n.format-select {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n min-width: 120px;\n}\n\n.format-select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input {\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n}\n\n.format-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input.small {\n width: 80px;\n}\n\n/* Alias Info Row */\n.format-row.alias-info {\n justify-content: flex-start;\n gap: 8px;\n}\n\n.format-row.alias-info .muted-text {\n color: #888;\n font-size: 12px;\n}\n\n.clear-alias-btn {\n width: 20px;\n height: 20px;\n border: none;\n background: #f0f0f0;\n border-radius: 50%;\n color: #888;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n transition: all 0.15s ease;\n}\n\n.clear-alias-btn:hover {\n background: #e0e0e0;\n color: #c62828;\n}\n\n/* Color Input */\n.color-input {\n width: 50px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n background: white;\n}\n\n.color-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n/* Alignment Toggle */\n.alignment-toggle {\n display: flex;\n gap: 8px;\n}\n\n.align-btn {\n width: 40px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.align-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.align-btn i {\n font-size: 14px;\n color: #64748b;\n}\n\n.align-btn.active i {\n color: #1976d2;\n}\n\n/* Style Buttons */\n.style-buttons {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-btn {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-btn.active {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.style-btn i {\n font-size: 14px;\n color: #64748b;\n}\n\n.style-btn.active i {\n color: #1976d2;\n}\n\n/* Collapsible Format Sections */\n.format-section-collapsible {\n margin-bottom: 12px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.format-section-collapsible summary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n background: #f8fafc;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n list-style: none;\n}\n\n.format-section-collapsible summary::-webkit-details-marker {\n display: none;\n}\n\n.format-section-collapsible summary::before {\n content: '\\f054';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 10px;\n color: #999;\n transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open] summary::before {\n transform: rotate(90deg);\n}\n\n.format-section-collapsible summary i {\n color: #1976d2;\n font-size: 12px;\n}\n\n.format-section-collapsible summary span {\n flex: 1;\n}\n\n.format-section-content {\n padding: 14px;\n background: white;\n border-top: 1px solid #e0e0e0;\n}\n\n/* Format Actions */\n.format-actions {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n color: #666;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clear-format-btn:hover {\n background: #fff5f5;\n border-color: #f87171;\n color: #dc2626;\n}\n\n.clear-format-btn i {\n font-size: 12px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .config-panel {\n width: 100% !important;\n max-width: 100vw !important;\n }\n\n /* Hide resize handle on mobile - panel is full width */\n .resize-handle {\n display: none;\n }\n\n .tab-btn span {\n display: none;\n }\n\n .tab-btn {\n padding: 14px;\n }\n\n .tab-btn i {\n font-size: 16px;\n }\n\n .format-type-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n/* Medium screens - limit max resize width */\n@media (min-width: 769px) and (max-width: 1200px) {\n .config-panel {\n max-width: min(600px, 80vw);\n }\n}\n"] }]
|
|
2270
|
+
args: [{ selector: 'mj-view-config-panel', template: "<!-- Backdrop -->\n@if (isOpen) {\n <div class=\"panel-backdrop\" (click)=\"onClose()\"></div>\n}\n\n<!-- Sliding Panel -->\n<div class=\"config-panel\"\n [class.open]=\"isOpen\"\n [class.resizing]=\"isResizing\"\n [style.width.px]=\"panelWidth\">\n <!-- Resize Handle -->\n <div class=\"resize-handle\"\n (mousedown)=\"onResizeStart($event)\"\n title=\"Drag to resize\">\n <div class=\"resize-grip\"></div>\n </div>\n\n <!-- Panel Header -->\n <div class=\"panel-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-sliders-h\"></i>\n <span>{{ viewEntity ? 'Edit View' : 'Configure View' }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tab-nav\">\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'columns'\"\n (click)=\"setActiveTab('columns')\">\n <i class=\"fa-solid fa-columns\"></i>\n <span>Columns</span>\n </button>\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'sorting'\"\n (click)=\"setActiveTab('sorting')\">\n <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n <span>Sorting</span>\n @if (sortItems.length > 0) {\n <span class=\"tab-badge\">{{ sortItems.length }}</span>\n }\n </button>\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'filters'\"\n (click)=\"setActiveTab('filters')\">\n <i class=\"fa-solid fa-filter\"></i>\n <span>Filters</span>\n </button>\n <button\n class=\"tab-btn\"\n [class.active]=\"activeTab === 'settings'\"\n (click)=\"setActiveTab('settings')\">\n <i class=\"fa-solid fa-cog\"></i>\n <span>Settings</span>\n </button>\n </div>\n\n <!-- Panel Content -->\n <div class=\"panel-content\">\n <!-- Columns Tab -->\n @if (activeTab === 'columns' && !formatEditingColumn) {\n <div class=\"tab-content\">\n <!-- Visible Columns -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-eye\"></i>\n <span>Visible Columns</span>\n <span class=\"column-count\">{{ visibleColumns.length }}</span>\n </div>\n <div class=\"column-list visible-columns\">\n @for (column of visibleColumns; track column.fieldId; let i = $index) {\n <!-- Drop indicator before -->\n @if (isDropBefore(column)) {\n <div class=\"drop-indicator\"></div>\n }\n <div\n class=\"column-item\"\n [class.dragging]=\"draggedColumn === column\"\n [class.drop-target]=\"dropTargetColumn === column\"\n draggable=\"true\"\n (dragstart)=\"onDragStart($event, column)\"\n (dragover)=\"onDragOver($event, column)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event, column)\"\n (dragend)=\"onDragEnd($event)\">\n <div class=\"drag-handle\">\n <i class=\"fa-solid fa-grip-vertical\"></i>\n </div>\n <span class=\"column-name\">\n {{ column.userDisplayName || column.displayName }}\n @if (column.userDisplayName) {\n <i class=\"fa-solid fa-pen-nib alias-indicator\" title=\"Custom name: {{ column.userDisplayName }}\"></i>\n }\n @if (hasCustomFormat(column)) {\n <i class=\"fa-solid fa-paintbrush format-indicator\" title=\"Custom formatting applied\"></i>\n }\n </span>\n <div class=\"column-actions\">\n <button\n class=\"action-btn format-btn\"\n (click)=\"openFormatEditor(column)\"\n title=\"Format column\">\n <i class=\"fa-solid fa-paintbrush\"></i>\n </button>\n <button\n class=\"action-btn\"\n [disabled]=\"i === 0\"\n (click)=\"moveColumnUp(column)\"\n title=\"Move up\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button\n class=\"action-btn\"\n [disabled]=\"i === visibleColumns.length - 1\"\n (click)=\"moveColumnDown(column)\"\n title=\"Move down\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n <button\n class=\"action-btn hide-btn\"\n (click)=\"toggleColumnVisibility(column)\"\n title=\"Hide column\">\n <i class=\"fa-solid fa-eye-slash\"></i>\n </button>\n </div>\n </div>\n <!-- Drop indicator after (only for last item) -->\n @if (isDropAfter(column) && i === visibleColumns.length - 1) {\n <div class=\"drop-indicator\"></div>\n }\n }\n @if (visibleColumns.length === 0) {\n <div class=\"empty-list\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>No columns visible. Add columns from below.</span>\n </div>\n }\n </div>\n </div>\n\n <!-- Hidden Columns -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-eye-slash\"></i>\n <span>Hidden Columns</span>\n <span class=\"column-count\">{{ hiddenColumns.length }}</span>\n </div>\n @if (hiddenColumns.length > 5) {\n <div class=\"column-search\">\n <i class=\"fa-solid fa-search\"></i>\n <input\n type=\"text\"\n placeholder=\"Search columns...\"\n [(ngModel)]=\"columnSearchText\"\n />\n </div>\n }\n <div class=\"column-list hidden-columns\">\n @for (column of filteredHiddenColumns; track column.fieldId) {\n <div class=\"column-item hidden\">\n <span class=\"column-name\">{{ column.displayName }}</span>\n <button\n class=\"action-btn show-btn\"\n (click)=\"toggleColumnVisibility(column)\"\n title=\"Show column\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n </div>\n }\n @if (hiddenColumns.length === 0) {\n <div class=\"empty-list\">\n <i class=\"fa-solid fa-check-circle\"></i>\n <span>All columns are visible</span>\n </div>\n }\n </div>\n </div>\n </div>\n }\n\n <!-- Column Format Editor Sub-Panel -->\n @if (activeTab === 'columns' && formatEditingColumn) {\n <div class=\"format-editor\">\n <!-- Format Editor Header -->\n <div class=\"format-editor-header\">\n <button class=\"back-btn\" (click)=\"closeFormatEditor()\">\n <i class=\"fa-solid fa-arrow-left\"></i>\n </button>\n <div class=\"format-editor-title\">\n <span>Format: {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}</span>\n </div>\n </div>\n\n <!-- Column Alias Section -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-pen-nib\"></i>\n <span>Column Name</span>\n </div>\n <div class=\"format-row\">\n <label>Display As</label>\n <input type=\"text\" class=\"format-input\"\n [value]=\"formatEditingColumn.userDisplayName || ''\"\n (input)=\"updateUserDisplayName($any($event.target).value)\"\n [placeholder]=\"formatEditingColumn.displayName\" />\n </div>\n @if (formatEditingColumn.userDisplayName) {\n <div class=\"format-row alias-info\">\n <small class=\"muted-text\">Original: {{ formatEditingColumn.displayName }}</small>\n <button class=\"clear-alias-btn\" (click)=\"formatEditingColumn.userDisplayName = undefined\" title=\"Clear alias\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n </div>\n\n <!-- Preview Section -->\n <div class=\"format-preview-section\">\n <div class=\"preview-header\">\n <i class=\"fa-solid fa-eye\"></i>\n <span>Preview</span>\n </div>\n <div class=\"preview-table\">\n <div class=\"preview-header-cell\"\n [style.font-weight]=\"formatEditingColumn.format?.headerStyle?.bold ? 'bold' : 'normal'\"\n [style.font-style]=\"formatEditingColumn.format?.headerStyle?.italic ? 'italic' : 'normal'\"\n [style.text-decoration]=\"formatEditingColumn.format?.headerStyle?.underline ? 'underline' : 'none'\"\n [style.color]=\"formatEditingColumn.format?.headerStyle?.color\"\n [style.background-color]=\"formatEditingColumn.format?.headerStyle?.backgroundColor\">\n {{ formatEditingColumn.userDisplayName || formatEditingColumn.displayName }}\n </div>\n @for (value of getSampleValues(formatEditingColumn); track $index) {\n <div class=\"preview-cell\"\n [style.text-align]=\"formatEditingColumn.format?.align || 'left'\"\n [style.font-weight]=\"formatEditingColumn.format?.cellStyle?.bold ? 'bold' : 'normal'\"\n [style.font-style]=\"formatEditingColumn.format?.cellStyle?.italic ? 'italic' : 'normal'\"\n [style.text-decoration]=\"formatEditingColumn.format?.cellStyle?.underline ? 'underline' : 'none'\"\n [style.color]=\"formatEditingColumn.format?.cellStyle?.color\"\n [style.background-color]=\"formatEditingColumn.format?.cellStyle?.backgroundColor\">\n {{ formatPreviewValue(value, formatEditingColumn.format) }}\n </div>\n }\n </div>\n </div>\n\n <!-- Format Type -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-hashtag\"></i>\n <span>Format Type</span>\n </div>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.type\">\n <option value=\"auto\">Auto (Smart Default)</option>\n <option value=\"text\">Text</option>\n <option value=\"number\">Number</option>\n <option value=\"currency\">Currency</option>\n <option value=\"percent\">Percent</option>\n <option value=\"date\">Date</option>\n <option value=\"datetime\">Date & Time</option>\n <option value=\"boolean\">Boolean</option>\n </select>\n </div>\n\n <!-- Type-Specific Options -->\n @if (formatEditingColumn.format?.type === 'number' || formatEditingColumn.format?.type === 'currency' || formatEditingColumn.format?.type === 'percent') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-sliders\"></i>\n <span>Number Options</span>\n </div>\n <div class=\"format-row\">\n <label>Decimal Places</label>\n <input type=\"number\" class=\"format-input small\" min=\"0\" max=\"10\"\n [(ngModel)]=\"formatEditingColumn.format!.decimals\" />\n </div>\n @if (formatEditingColumn.format?.type === 'currency') {\n <div class=\"format-row\">\n <label>Currency</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.currencyCode\">\n <option value=\"USD\">USD ($)</option>\n <option value=\"EUR\">EUR (\u20AC)</option>\n <option value=\"GBP\">GBP (\u00A3)</option>\n <option value=\"JPY\">JPY (\u00A5)</option>\n <option value=\"CAD\">CAD ($)</option>\n <option value=\"AUD\">AUD ($)</option>\n </select>\n </div>\n }\n <div class=\"format-row\">\n <label>Thousands Separator</label>\n <input type=\"checkbox\" [(ngModel)]=\"formatEditingColumn.format!.thousandsSeparator\" />\n </div>\n </div>\n }\n\n @if (formatEditingColumn.format?.type === 'date' || formatEditingColumn.format?.type === 'datetime') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-calendar\"></i>\n <span>Date Options</span>\n </div>\n <div class=\"format-row\">\n <label>Format</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.dateFormat\">\n <option value=\"short\">Short (1/15/25)</option>\n <option value=\"short-weekday\">Short + Day (Wed, 1/15/25)</option>\n <option value=\"medium\">Medium (Jan 15, 2025)</option>\n <option value=\"medium-weekday\">Medium + Day (Wed, Jan 15, 2025)</option>\n <option value=\"long\">Long (January 15, 2025)</option>\n <option value=\"long-weekday\">Long + Day (Wednesday, January 15, 2025)</option>\n </select>\n </div>\n </div>\n }\n\n @if (formatEditingColumn.format?.type === 'boolean') {\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-toggle-on\"></i>\n <span>Boolean Options</span>\n </div>\n <div class=\"format-row\">\n <label>True Label</label>\n <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.trueLabel\" placeholder=\"Yes\" />\n </div>\n <div class=\"format-row\">\n <label>False Label</label>\n <input type=\"text\" class=\"format-input\" [(ngModel)]=\"formatEditingColumn.format!.falseLabel\" placeholder=\"No\" />\n </div>\n <div class=\"format-row\">\n <label>Display As</label>\n <select class=\"format-select\" [(ngModel)]=\"formatEditingColumn.format!.booleanDisplay\">\n <option value=\"text\">Text</option>\n <option value=\"checkbox\">Checkbox</option>\n <option value=\"icon\">Icon</option>\n </select>\n </div>\n </div>\n }\n\n <!-- Alignment -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-align-left\"></i>\n <span>Alignment</span>\n </div>\n <div class=\"alignment-toggle\">\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'left' || !formatEditingColumn.format?.align\"\n (click)=\"formatEditingColumn.format!.align = 'left'\" title=\"Left\">\n <i class=\"fa-solid fa-align-left\"></i>\n </button>\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'center'\"\n (click)=\"formatEditingColumn.format!.align = 'center'\" title=\"Center\">\n <i class=\"fa-solid fa-align-center\"></i>\n </button>\n <button class=\"align-btn\" [class.active]=\"formatEditingColumn.format?.align === 'right'\"\n (click)=\"formatEditingColumn.format!.align = 'right'\" title=\"Right\">\n <i class=\"fa-solid fa-align-right\"></i>\n </button>\n </div>\n </div>\n\n <!-- Header Style -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-heading\"></i>\n <span>Header Style</span>\n </div>\n <div class=\"style-buttons\">\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.bold\"\n (click)=\"toggleHeaderStyle('bold')\"\n title=\"Bold\">\n <i class=\"fa-solid fa-bold\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.italic\"\n (click)=\"toggleHeaderStyle('italic')\"\n title=\"Italic\">\n <i class=\"fa-solid fa-italic\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.headerStyle?.underline\"\n (click)=\"toggleHeaderStyle('underline')\"\n title=\"Underline\">\n <i class=\"fa-solid fa-underline\"></i>\n </button>\n </div>\n <div class=\"format-row\">\n <label>Text Color</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.headerStyle?.color || '#000000'\"\n (input)=\"updateHeaderColor('color', $any($event.target).value)\" />\n </div>\n <div class=\"format-row\">\n <label>Background</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.headerStyle?.backgroundColor || '#ffffff'\"\n (input)=\"updateHeaderColor('backgroundColor', $any($event.target).value)\" />\n </div>\n </div>\n\n <!-- Cell Style -->\n <div class=\"format-section\">\n <div class=\"format-section-header\">\n <i class=\"fa-solid fa-table-cells\"></i>\n <span>Cell Style</span>\n </div>\n <div class=\"style-buttons\">\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.bold\"\n (click)=\"toggleCellStyle('bold')\"\n title=\"Bold\">\n <i class=\"fa-solid fa-bold\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.italic\"\n (click)=\"toggleCellStyle('italic')\"\n title=\"Italic\">\n <i class=\"fa-solid fa-italic\"></i>\n </button>\n <button class=\"style-btn\" [class.active]=\"formatEditingColumn.format?.cellStyle?.underline\"\n (click)=\"toggleCellStyle('underline')\"\n title=\"Underline\">\n <i class=\"fa-solid fa-underline\"></i>\n </button>\n </div>\n <div class=\"format-row\">\n <label>Text Color</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.cellStyle?.color || '#000000'\"\n (input)=\"updateCellColor('color', $any($event.target).value)\" />\n </div>\n <div class=\"format-row\">\n <label>Background</label>\n <input type=\"color\" class=\"color-input\"\n [value]=\"formatEditingColumn.format?.cellStyle?.backgroundColor || '#ffffff'\"\n (input)=\"updateCellColor('backgroundColor', $any($event.target).value)\" />\n </div>\n </div>\n\n <!-- Clear Format Button -->\n <div class=\"format-actions\">\n <button class=\"clear-format-btn\" (click)=\"clearColumnFormat(formatEditingColumn); closeFormatEditor()\">\n <i class=\"fa-solid fa-eraser\"></i>\n Clear Formatting\n </button>\n </div>\n </div>\n }\n\n <!-- Sorting Tab -->\n @if (activeTab === 'sorting') {\n <div class=\"tab-content\">\n <div class=\"config-section sorting-section\">\n <div class=\"sorting-header\">\n <p class=\"sorting-description\">\n Define how records should be ordered. Add multiple levels to sort by secondary fields when values are equal.\n </p>\n </div>\n\n <!-- Add Sort Button -->\n <button\n class=\"add-sort-btn\"\n (click)=\"addSortLevel()\"\n [disabled]=\"!canEdit || sortItems.length >= sortableFields.length\"\n title=\"Add another sort level\">\n <i class=\"fa-solid fa-plus\"></i>\n <span>Add Sort Level</span>\n </button>\n\n <!-- Sort Items List -->\n @if (sortItems.length > 0) {\n <div class=\"sort-items-list\">\n @for (sortItem of sortItems; track $index; let i = $index) {\n <!-- Drop indicator before -->\n @if (isSortDropBefore(sortItem)) {\n <div class=\"sort-drop-indicator\"></div>\n }\n <div\n class=\"sort-item\"\n [class.dragging]=\"draggedSortItem === sortItem\"\n [class.drop-target]=\"dropTargetSortItem === sortItem\"\n draggable=\"true\"\n (dragstart)=\"onSortDragStart($event, sortItem)\"\n (dragover)=\"onSortDragOver($event, sortItem)\"\n (dragleave)=\"onSortDragLeave($event)\"\n (drop)=\"onSortDrop($event, sortItem)\"\n (dragend)=\"onSortDragEnd($event)\">\n <!-- Priority Badge -->\n <div class=\"sort-priority-badge\">{{ i + 1 }}</div>\n <!-- Drag Handle -->\n <div class=\"sort-drag-handle\" title=\"Drag to reorder\">\n <i class=\"fa-solid fa-grip-vertical\"></i>\n </div>\n <!-- Field Dropdown -->\n <select\n class=\"sort-field-dropdown\"\n [(ngModel)]=\"sortItem.field\"\n (ngModelChange)=\"onSortFieldChange(sortItem, $event)\"\n [disabled]=\"!canEdit\">\n @for (field of sortableFields; track field.ID) {\n <option [value]=\"field.Name\">{{ field.DisplayNameOrName }}</option>\n }\n </select>\n <!-- Direction Toggle -->\n <div class=\"sort-direction-toggle\">\n <button\n class=\"direction-btn\"\n [class.active]=\"sortItem.direction === 'asc'\"\n (click)=\"onSortDirectionChange(sortItem, 'asc')\"\n [disabled]=\"!canEdit\"\n title=\"Ascending (A-Z, 1-9)\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n </button>\n <button\n class=\"direction-btn\"\n [class.active]=\"sortItem.direction === 'desc'\"\n (click)=\"onSortDirectionChange(sortItem, 'desc')\"\n [disabled]=\"!canEdit\"\n title=\"Descending (Z-A, 9-1)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n </button>\n </div>\n <!-- Remove Button -->\n <button\n class=\"sort-remove-btn\"\n (click)=\"removeSortLevel(sortItem)\"\n [disabled]=\"!canEdit\"\n title=\"Remove sort level\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <!-- Drop indicator after (only for last item) -->\n @if (isSortDropAfter(sortItem) && i === sortItems.length - 1) {\n <div class=\"sort-drop-indicator\"></div>\n }\n }\n </div>\n <!-- Multi-sort hint -->\n @if (sortItems.length > 1) {\n <div class=\"sort-hint\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>Drag items to change priority. Records sort by first level, then second, etc.</span>\n </div>\n }\n } @else {\n <div class=\"sort-empty-state\">\n <i class=\"fa-solid fa-arrow-up-wide-short\"></i>\n <span>No sorting configured</span>\n <p class=\"sort-empty-hint\">Click \"Add Sort Level\" to define how records should be ordered</p>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Filters Tab -->\n @if (activeTab === 'filters') {\n <div class=\"tab-content\">\n <!-- Filter Mode Selection -->\n <div class=\"filter-mode-selector\">\n <button\n class=\"filter-mode-btn\"\n [class.active]=\"filterMode === 'smart'\"\n (click)=\"setFilterMode('smart')\"\n [disabled]=\"!canEdit\">\n <div class=\"mode-icon\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n </div>\n <div class=\"mode-content\">\n <span class=\"mode-title\">Smart Filter</span>\n <span class=\"mode-subtitle\">Use AI to filter with natural language</span>\n </div>\n @if (filterMode === 'smart') {\n <i class=\"fa-solid fa-check mode-check\"></i>\n }\n </button>\n <button\n class=\"filter-mode-btn\"\n [class.active]=\"filterMode === 'traditional'\"\n (click)=\"setFilterMode('traditional')\"\n [disabled]=\"!canEdit\">\n <div class=\"mode-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"mode-content\">\n <span class=\"mode-title\">Traditional Filter</span>\n <span class=\"mode-subtitle\">Build filters with field/operator/value</span>\n </div>\n @if (filterMode === 'traditional') {\n <i class=\"fa-solid fa-check mode-check\"></i>\n }\n </button>\n </div>\n\n <!-- Smart Filter Section -->\n @if (filterMode === 'smart') {\n <div class=\"config-section smart-filter-section\">\n <div class=\"smart-filter-input-container\">\n <div class=\"smart-filter-icon\">\n <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n </div>\n <textarea\n id=\"smartFilterPrompt\"\n class=\"smart-filter-textarea\"\n placeholder=\"Describe what you're looking for...\"\n [(ngModel)]=\"smartFilterPrompt\"\n [disabled]=\"!canEdit\"\n rows=\"3\"\n ></textarea>\n </div>\n\n @if (smartFilterExplanation) {\n <div class=\"smart-filter-explanation\">\n <i class=\"fa-solid fa-robot\"></i>\n <span>{{ smartFilterExplanation }}</span>\n </div>\n }\n\n <!-- Example Prompts -->\n <div class=\"smart-filter-examples\">\n <div class=\"examples-header\">\n <i class=\"fa-solid fa-lightbulb\"></i>\n <span>Try these examples:</span>\n </div>\n <div class=\"example-chips\">\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Show records created in the last 30 days')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-regular fa-calendar\"></i>\n Last 30 days\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Active records only')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Active only\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Records with high priority')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-star\"></i>\n High priority\n </button>\n <button\n class=\"example-chip\"\n (click)=\"applySmartFilterExample('Records modified this week')\"\n [disabled]=\"!canEdit\">\n <i class=\"fa-solid fa-clock-rotate-left\"></i>\n Modified this week\n </button>\n </div>\n </div>\n\n <div class=\"smart-filter-tip\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>The AI will interpret your description and create the appropriate filter when you save the view.</span>\n </div>\n </div>\n }\n\n <!-- Traditional Filter Section -->\n @if (filterMode === 'traditional') {\n <div class=\"config-section traditional-filter-section\">\n <div class=\"filter-summary-container\">\n <div class=\"filter-summary\">\n <div class=\"summary-info\">\n @if (getFilterCount() > 0) {\n <span class=\"filter-badge\">{{ getFilterCount() }}</span>\n <span class=\"summary-text\">{{ getFilterSummary() }}</span>\n } @else {\n <span class=\"summary-text no-filters\">No filters configured</span>\n }\n </div>\n <div class=\"summary-actions\">\n @if (getFilterCount() > 0 && canEdit) {\n <button\n class=\"summary-btn clear-btn\"\n (click)=\"clearFilters()\"\n title=\"Clear all filters\">\n <i class=\"fa-solid fa-times\"></i>\n Clear\n </button>\n }\n <button\n class=\"summary-btn edit-btn primary\"\n (click)=\"openFilterDialog()\"\n [disabled]=\"!canEdit && getFilterCount() === 0\"\n title=\"Edit filters\">\n <i class=\"fa-solid fa-pen\"></i>\n {{ getFilterCount() > 0 ? 'Edit Filters' : 'Add Filters' }}\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"traditional-filter-tip\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>Build precise filters by selecting fields, operators, and values. Use groups for complex AND/OR logic.</span>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Settings Tab -->\n @if (activeTab === 'settings') {\n <div class=\"tab-content\">\n <!-- View Name & Description -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-info-circle\"></i>\n <span>View Details</span>\n </div>\n <div class=\"form-group\">\n <label for=\"viewName\">Name</label>\n <input\n id=\"viewName\"\n type=\"text\"\n class=\"form-input\"\n placeholder=\"Enter view name...\"\n [(ngModel)]=\"viewName\"\n [disabled]=\"!canEdit\"\n />\n </div>\n <div class=\"form-group\">\n <label for=\"viewDescription\">Description</label>\n <textarea\n id=\"viewDescription\"\n class=\"form-input form-textarea\"\n placeholder=\"Describe this view...\"\n [(ngModel)]=\"viewDescription\"\n [disabled]=\"!canEdit\"\n rows=\"3\"\n ></textarea>\n </div>\n </div>\n\n <!-- Sharing -->\n <div class=\"config-section\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-share-alt\"></i>\n <span>Sharing</span>\n </div>\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"isShared\"\n [disabled]=\"!canEdit\"\n />\n <span class=\"checkbox-text\">\n <strong>Share with others</strong>\n <small>Allow other users to use this view</small>\n </span>\n </label>\n </div>\n\n <!-- Danger Zone -->\n @if (viewEntity && canDelete) {\n <div class=\"config-section danger-zone\">\n <div class=\"section-header\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <span>Danger Zone</span>\n </div>\n <button class=\"delete-btn\" (click)=\"onDelete()\">\n <i class=\"fa-solid fa-trash\"></i>\n <span>Delete View</span>\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Panel Footer -->\n <div class=\"panel-footer\">\n <!-- Action buttons on LEFT -->\n <div class=\"footer-left\">\n @if (viewEntity && canEdit) {\n <!-- Editing an existing saved view -->\n <button\n class=\"footer-btn save-btn primary\"\n (click)=\"onSave()\"\n [disabled]=\"isSaving || !viewName\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ isSaving ? 'Saving...' : 'Save' }}\n </button>\n }\n @if (!viewEntity) {\n <!-- Default/Dynamic view - Save to user settings -->\n <button\n class=\"footer-btn save-btn primary\"\n (click)=\"onSaveDefaults()\"\n [disabled]=\"isSaving\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-save\"></i>\n }\n {{ isSaving ? 'Saving...' : 'Save' }}\n </button>\n <!-- Save As New - creates a named view -->\n <button\n class=\"footer-btn save-as-btn\"\n (click)=\"onSaveAsNew()\"\n [disabled]=\"isSaving || !viewName\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n {{ isSaving ? 'Creating...' : 'Save As New' }}\n </button>\n }\n @if (viewEntity && canEdit) {\n <!-- Save As New for existing view -->\n <button\n class=\"footer-btn save-as-btn\"\n (click)=\"onSaveAsNew()\"\n [disabled]=\"isSaving\">\n @if (isSaving) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n } @else {\n <i class=\"fa-solid fa-plus\"></i>\n }\n Save As New\n </button>\n }\n </div>\n <!-- Cancel button on RIGHT -->\n <button class=\"footer-btn cancel-btn\" (click)=\"onClose()\">\n Cancel\n </button>\n </div>\n</div>\n", styles: ["/* Backdrop */\n.panel-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1000;\n animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* Sliding Panel */\n.config-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: 450px;\n min-width: 360px;\n max-width: min(800px, 100vw);\n height: 100%;\n background: white;\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.25s ease, width 0s;\n}\n\n.config-panel.open {\n transform: translateX(0);\n}\n\n.config-panel.resizing {\n transition: none;\n user-select: none;\n}\n\n/* Resize Handle */\n.resize-handle {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n cursor: ew-resize;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.resize-handle:hover,\n.config-panel.resizing .resize-handle {\n background: linear-gradient(90deg, rgba(25, 118, 210, 0.1) 0%, transparent 100%);\n}\n\n.resize-grip {\n width: 3px;\n height: 40px;\n background: #cbd5e1;\n border-radius: 3px;\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.config-panel.resizing .resize-grip {\n opacity: 1;\n background: #1976d2;\n}\n\n/* Panel Header */\n.panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n.header-title i {\n color: #1976d2;\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n/* Tab Navigation */\n.tab-nav {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n flex-shrink: 0;\n}\n\n.tab-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n border-bottom: 2px solid transparent;\n}\n\n.tab-btn:hover {\n background: #f5f5f5;\n color: #333;\n}\n\n.tab-btn.active {\n color: #1976d2;\n border-bottom-color: #1976d2;\n background: transparent;\n}\n\n.tab-btn i {\n font-size: 12px;\n}\n\n.tab-badge {\n background: #1976d2;\n color: white;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: 8px;\n margin-left: 4px;\n}\n\n/* Panel Content */\n.panel-content {\n flex: 1;\n overflow: hidden;\n padding: 16px 0;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n.tab-content {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n/* Config Sections */\n.config-section {\n margin-bottom: 24px;\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.section-header i {\n color: #1976d2;\n font-size: 12px;\n}\n\n.column-count {\n margin-left: auto;\n background: #e3f2fd;\n color: #1976d2;\n padding: 2px 8px;\n border-radius: 10px;\n font-size: 11px;\n}\n\n/* Sort Configuration */\n.sort-config {\n display: flex;\n gap: 8px;\n}\n\n.sort-field-select {\n flex: 1;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-direction-toggle {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.direction-btn {\n width: 36px;\n height: 36px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.direction-btn:hover {\n color: #333;\n}\n\n.direction-btn.active {\n background: white;\n color: #1976d2;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* ========================================\n MULTI-SORT CONFIGURATION\n ======================================== */\n\n.add-sort-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 14px;\n border: 1px dashed #ccc;\n border-radius: 8px;\n background: transparent;\n color: #666;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n width: 100%;\n justify-content: center;\n margin-bottom: 12px;\n}\n\n.add-sort-btn:hover:not(:disabled) {\n border-color: #1976d2;\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.add-sort-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.add-sort-btn i {\n font-size: 12px;\n}\n\n/* Sort Items List */\n.sort-items-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n/* Sort Item */\n.sort-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n transition: all 0.15s ease;\n}\n\n.sort-item:hover {\n border-color: #bdbdbd;\n background: #fafafa;\n}\n\n.sort-item.dragging {\n opacity: 0.5;\n background: #e3f2fd;\n border-color: #1976d2;\n}\n\n.sort-item.drop-target {\n border-color: #1976d2;\n}\n\n/* Priority Badge */\n.sort-priority-badge {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 24px;\n height: 24px;\n padding: 0 6px;\n font-size: 12px;\n font-weight: 700;\n color: white;\n background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n flex-shrink: 0;\n}\n\n/* Drag Handle */\n.sort-drag-handle {\n color: #bdbdbd;\n cursor: grab;\n padding: 4px;\n transition: color 0.15s ease;\n flex-shrink: 0;\n}\n\n.sort-drag-handle:hover {\n color: #757575;\n}\n\n.sort-item.dragging .sort-drag-handle {\n cursor: grabbing;\n color: #1976d2;\n}\n\n/* Sort Field Dropdown */\n.sort-field-dropdown {\n flex: 1;\n min-width: 120px;\n padding: 8px 10px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 13px;\n background: white;\n cursor: pointer;\n}\n\n.sort-field-dropdown:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.sort-field-dropdown:disabled {\n background: #f5f5f5;\n color: #999;\n cursor: not-allowed;\n}\n\n/* Sort Remove Button */\n.sort-remove-btn {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #bdbdbd;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.sort-remove-btn:hover:not(:disabled) {\n background: #ffebee;\n color: #c62828;\n}\n\n.sort-remove-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n/* Sort Drop Indicator */\n.sort-drop-indicator {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: sortDropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes sortDropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Sort Hint */\n.sort-hint {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 10px 12px;\n background: #f5f7fa;\n border-radius: 6px;\n font-size: 12px;\n color: #666;\n}\n\n.sort-hint i {\n color: #1976d2;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n/* Sorting Section Styles */\n.sorting-section {\n padding-top: 0;\n}\n\n.sorting-header {\n margin-bottom: 16px;\n}\n\n.sorting-description {\n font-size: 13px;\n color: #666;\n line-height: 1.5;\n margin: 0;\n}\n\n/* Sort Empty State */\n.sort-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 40px 20px;\n color: #999;\n font-size: 14px;\n text-align: center;\n}\n\n.sort-empty-state i {\n font-size: 48px;\n opacity: 0.4;\n margin-bottom: 8px;\n}\n\n.sort-empty-hint {\n font-size: 12px;\n color: #bbb;\n margin: 0;\n}\n\n/* Column Lists */\n.column-list {\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n background: #fafafa;\n}\n\n.column-list.visible-columns {\n max-height: 300px;\n overflow-y: auto;\n}\n\n.column-list.hidden-columns {\n flex: 1;\n min-height: 100px;\n overflow-y: auto;\n}\n\n/* Hidden columns section should expand to fill available space */\n.config-section:last-child {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n margin-bottom: 0;\n}\n\n.column-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 12px;\n background: white;\n border-bottom: 1px solid #f0f0f0;\n transition: background 0.1s ease;\n position: relative;\n}\n\n.column-item:last-child {\n border-bottom: none;\n}\n\n.column-item:hover {\n background: #f5f7fa;\n}\n\n.column-item.hidden {\n background: #fafafa;\n}\n\n.column-item.hidden:hover {\n background: #f0f0f0;\n}\n\n/* ========================================\n DRAG & DROP INDICATOR STYLES\n ======================================== */\n\n/* Drop indicator line element - shows where the column will be placed */\n.drop-indicator {\n height: 3px;\n background: linear-gradient(90deg, #1976d2 0%, #42a5f5 50%, #1976d2 100%);\n border-radius: 2px;\n margin: 0 12px;\n box-shadow: 0 0 8px rgba(25, 118, 210, 0.5);\n animation: dropIndicatorPulse 0.8s ease-in-out infinite;\n}\n\n@keyframes dropIndicatorPulse {\n 0%, 100% { opacity: 1; transform: scaleX(1); }\n 50% { opacity: 0.7; transform: scaleX(0.98); }\n}\n\n/* Highlight the column being dragged */\n.column-item.dragging {\n opacity: 0.5;\n background: #e3f2fd;\n}\n\n/* Visual feedback during drag over */\n.column-item.drag-over {\n background: #f5f7fa;\n}\n\n.drag-handle {\n cursor: grab;\n color: #999;\n padding: 4px;\n transition: color 0.15s ease;\n}\n\n.drag-handle:hover {\n color: #666;\n}\n\n.drag-handle:active {\n cursor: grabbing;\n color: #1976d2;\n}\n\n.column-name {\n flex: 1;\n font-size: 14px;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.column-name .format-indicator {\n font-size: 10px;\n color: #1976d2;\n opacity: 0.7;\n}\n\n.column-name .alias-indicator {\n font-size: 10px;\n color: #7b1fa2;\n opacity: 0.8;\n}\n\n.column-actions {\n display: flex;\n gap: 4px;\n}\n\n.action-btn {\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n border-radius: 4px;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.action-btn:hover:not(:disabled) {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn:disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n\n.action-btn.hide-btn:hover {\n background: #ffebee;\n color: #c62828;\n}\n\n.action-btn.show-btn:hover {\n background: #e8f5e9;\n color: #2e7d32;\n}\n\n.action-btn.format-btn:hover {\n background: #e3f2fd;\n color: #1976d2;\n}\n\n.action-btn.format-btn.has-format {\n color: #1976d2;\n background: #e3f2fd;\n}\n\n.empty-list {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 20px;\n color: #999;\n font-size: 13px;\n}\n\n/* Column Search */\n.column-search {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n margin-bottom: 8px;\n}\n\n.column-search i {\n color: #999;\n font-size: 12px;\n}\n\n.column-search input {\n flex: 1;\n border: none;\n outline: none;\n font-size: 14px;\n}\n\n/* ========================================\n COLUMN FORMAT EDITOR SUB-PANEL\n ======================================== */\n\n.format-editor-panel {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: white;\n z-index: 100;\n display: flex;\n flex-direction: column;\n animation: slideInFromRight 0.2s ease;\n}\n\n@keyframes slideInFromRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.format-editor-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-back-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n}\n\n.format-back-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-header-title {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.format-header-title span:first-child {\n font-size: 14px;\n font-weight: 600;\n color: #333;\n}\n\n.format-header-title span:last-child {\n font-size: 12px;\n color: #666;\n}\n\n.format-editor-content {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n}\n\n/* Format Preview Section */\n.format-preview-section {\n margin-bottom: 24px;\n padding: 16px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n}\n\n.preview-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 12px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.preview-header i {\n color: #3b82f6;\n}\n\n.preview-samples {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.preview-sample {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: white;\n border-radius: 8px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.preview-label {\n font-size: 12px;\n color: #94a3b8;\n min-width: 60px;\n}\n\n.preview-value {\n flex: 1;\n font-size: 14px;\n font-family: 'SF Mono', 'Monaco', monospace;\n color: #1e293b;\n}\n\n/* Format Type Selection */\n.format-type-section {\n margin-bottom: 24px;\n}\n\n.format-type-section .section-label {\n display: block;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-type-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 8px;\n}\n\n.format-type-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6px;\n padding: 12px 8px;\n border: 2px solid #e5e7eb;\n border-radius: 10px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-type-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.format-type-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.format-type-btn i {\n font-size: 18px;\n color: #64748b;\n}\n\n.format-type-btn.active i {\n color: #3b82f6;\n}\n\n.format-type-btn span {\n font-size: 11px;\n font-weight: 500;\n color: #64748b;\n}\n\n.format-type-btn.active span {\n color: #1d4ed8;\n}\n\n/* Format Options Section */\n.format-options-section {\n margin-bottom: 24px;\n}\n\n.format-options-section .section-label {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-option-group {\n margin-bottom: 16px;\n}\n\n.format-option-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.format-option-group input,\n.format-option-group select {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.format-option-group input:focus,\n.format-option-group select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-option-row {\n display: flex;\n gap: 12px;\n}\n\n.format-option-row .format-option-group {\n flex: 1;\n}\n\n.format-checkbox {\n display: flex;\n align-items: center;\n gap: 10px;\n cursor: pointer;\n}\n\n.format-checkbox input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n}\n\n.format-checkbox span {\n font-size: 14px;\n color: #333;\n}\n\n/* Alignment Options */\n.alignment-options {\n display: flex;\n gap: 8px;\n}\n\n.align-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.align-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #3b82f6;\n}\n\n.align-btn i {\n font-size: 16px;\n color: #64748b;\n}\n\n.align-btn.active i {\n color: #3b82f6;\n}\n\n/* Style Section */\n.style-section {\n margin-bottom: 24px;\n}\n\n.style-section .section-label {\n display: block;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.style-toggle-group {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-toggle-btn {\n width: 40px;\n height: 40px;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-toggle-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-toggle-btn.active {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.style-toggle-btn i {\n font-size: 16px;\n color: #64748b;\n}\n\n.style-toggle-btn.active i {\n color: #3b82f6;\n}\n\n.color-picker-row {\n display: flex;\n gap: 12px;\n align-items: center;\n}\n\n.color-picker-group {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.color-picker-group label {\n font-size: 13px;\n color: #64748b;\n min-width: 80px;\n}\n\n.color-picker-group input[type=\"color\"] {\n width: 40px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n}\n\n.color-clear-btn {\n width: 32px;\n height: 32px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n color: #999;\n transition: all 0.15s ease;\n}\n\n.color-clear-btn:hover {\n background: #f5f5f5;\n color: #666;\n}\n\n/* Format Editor Footer */\n.format-editor-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.format-footer-left {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-right {\n display: flex;\n gap: 8px;\n}\n\n.format-footer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.format-footer-btn:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.format-footer-btn.primary {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.format-footer-btn.primary:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.format-footer-btn.danger {\n color: #c62828;\n border-color: #c62828;\n}\n\n.format-footer-btn.danger:hover:not(:disabled) {\n background: #c62828;\n color: white;\n}\n\n/* Filter Summary Container */\n.filter-summary-container {\n padding: 4px 0;\n}\n\n.filter-summary {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: #f5f7fa;\n border-radius: 8px;\n border: 1px solid #e8e8e8;\n}\n\n.summary-info {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.filter-badge {\n background: #1976d2;\n color: white;\n font-size: 12px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 10px;\n min-width: 20px;\n text-align: center;\n}\n\n.summary-text {\n font-size: 14px;\n color: #333;\n}\n\n.summary-text.no-filters {\n color: #999;\n}\n\n.summary-actions {\n display: flex;\n gap: 8px;\n}\n\n.summary-btn {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 6px 12px;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.summary-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.summary-btn i {\n font-size: 11px;\n}\n\n.summary-btn.clear-btn {\n background: transparent;\n color: #c62828;\n border: 1px solid #e0e0e0;\n}\n\n.summary-btn.clear-btn:hover:not(:disabled) {\n background: #ffebee;\n border-color: #c62828;\n}\n\n.summary-btn.edit-btn {\n background: #1976d2;\n color: white;\n}\n\n.summary-btn.edit-btn:hover:not(:disabled) {\n background: #1565c0;\n}\n\n/* ========================================\n FILTER MODE SELECTOR\n ======================================== */\n\n.filter-mode-selector {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 16px;\n}\n\n.filter-mode-btn {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.filter-mode-btn:hover:not(:disabled) {\n border-color: #d1d5db;\n background: #f9fafb;\n}\n\n.filter-mode-btn:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.filter-mode-btn.active {\n border-color: #3b82f6;\n background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);\n}\n\n.filter-mode-btn .mode-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background: #f3f4f6;\n color: #6b7280;\n font-size: 16px;\n flex-shrink: 0;\n transition: all 0.2s ease;\n}\n\n.filter-mode-btn.active .mode-icon {\n background: #3b82f6;\n color: white;\n}\n\n.filter-mode-btn .mode-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.filter-mode-btn .mode-title {\n font-size: 14px;\n font-weight: 600;\n color: #1f2937;\n}\n\n.filter-mode-btn .mode-subtitle {\n font-size: 12px;\n color: #6b7280;\n}\n\n.filter-mode-btn.active .mode-title {\n color: #1d4ed8;\n}\n\n.filter-mode-btn .mode-check {\n color: #3b82f6;\n font-size: 16px;\n flex-shrink: 0;\n}\n\n/* ========================================\n SMART FILTER SECTION\n ======================================== */\n\n.smart-filter-section {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.smart-filter-input-container {\n display: flex;\n gap: 12px;\n padding: 16px;\n background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);\n border: 1px solid #bae6fd;\n border-radius: 12px;\n margin-bottom: 16px;\n}\n\n.smart-filter-icon {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);\n border-radius: 10px;\n color: white;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.smart-filter-input-container .smart-filter-textarea {\n flex: 1;\n border: none;\n background: white;\n border-radius: 8px;\n padding: 12px;\n font-size: 14px;\n line-height: 1.5;\n resize: none;\n min-height: 60px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea:focus {\n outline: none;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);\n}\n\n.smart-filter-input-container .smart-filter-textarea::placeholder {\n color: #9ca3af;\n}\n\n.smart-filter-explanation {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 12px;\n background: #e3f2fd;\n border-radius: 6px;\n margin-bottom: 12px;\n font-size: 13px;\n color: #1565c0;\n}\n\n.smart-filter-explanation i {\n color: #1976d2;\n font-size: 14px;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n/* Smart Filter Examples */\n.smart-filter-examples {\n margin-bottom: 16px;\n}\n\n.examples-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 10px;\n font-size: 13px;\n font-weight: 500;\n color: #6b7280;\n}\n\n.examples-header i {\n color: #f59e0b;\n}\n\n.example-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.example-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: 1px solid #e5e7eb;\n border-radius: 20px;\n background: white;\n font-size: 12px;\n font-weight: 500;\n color: #4b5563;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.example-chip:hover:not(:disabled) {\n border-color: #3b82f6;\n background: #eff6ff;\n color: #1d4ed8;\n}\n\n.example-chip:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.example-chip i {\n font-size: 11px;\n color: #9ca3af;\n}\n\n.example-chip:hover:not(:disabled) i {\n color: #3b82f6;\n}\n\n/* Smart Filter Tip */\n.smart-filter-tip {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n}\n\n.smart-filter-tip i {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n/* ========================================\n TRADITIONAL FILTER SECTION\n ======================================== */\n\n.traditional-filter-section {\n padding: 0;\n border: none;\n background: transparent;\n}\n\n.traditional-filter-tip {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 12px 14px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 12px;\n color: #64748b;\n line-height: 1.5;\n margin-top: 12px;\n}\n\n.traditional-filter-tip i {\n color: #94a3b8;\n margin-top: 1px;\n flex-shrink: 0;\n}\n\n.summary-btn.edit-btn.primary {\n background: #3b82f6;\n color: white;\n border-color: #3b82f6;\n}\n\n.summary-btn.edit-btn.primary:hover:not(:disabled) {\n background: #2563eb;\n border-color: #2563eb;\n}\n\n/* Form Elements */\n.form-group {\n margin-bottom: 16px;\n}\n\n.form-group label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n}\n\n.form-input {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s ease;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.form-input:disabled {\n background: #f5f5f5;\n color: #999;\n}\n\n.form-textarea {\n resize: vertical;\n min-height: 80px;\n}\n\n/* Checkbox */\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n}\n\n.checkbox-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.checkbox-text strong {\n font-size: 14px;\n color: #333;\n}\n\n.checkbox-text small {\n font-size: 12px;\n color: #666;\n}\n\n/* Danger Zone */\n.danger-zone {\n padding-top: 16px;\n border-top: 1px solid #ffcdd2;\n}\n\n.danger-zone .section-header {\n color: #c62828;\n}\n\n.danger-zone .section-header i {\n color: #c62828;\n}\n\n.delete-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #c62828;\n background: transparent;\n border-radius: 6px;\n color: #c62828;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.delete-btn:hover {\n background: #c62828;\n color: white;\n}\n\n/* Panel Footer */\n.panel-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n background: #fafafa;\n flex-shrink: 0;\n}\n\n.footer-left {\n display: flex;\n gap: 8px;\n}\n\n.footer-right {\n display: flex;\n gap: 8px;\n}\n\n.footer-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.footer-btn:hover:not(:disabled) {\n background: #f0f0f0;\n border-color: #ccc;\n}\n\n.footer-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.footer-btn.primary {\n background: #1976d2;\n border-color: #1976d2;\n color: white;\n}\n\n.footer-btn.primary:hover:not(:disabled) {\n background: #1565c0;\n border-color: #1565c0;\n}\n\n.footer-btn i {\n font-size: 12px;\n}\n\n/* ========================================\n FORMAT EDITOR INLINE STYLES\n ======================================== */\n\n.format-editor {\n padding: 0 20px;\n flex: 1;\n display: flex;\n flex-direction: column;\n min-height: 0;\n overflow-y: auto;\n}\n\n.format-editor .format-editor-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 0 16px 0;\n border-bottom: 1px solid #e0e0e0;\n margin-bottom: 16px;\n}\n\n.format-editor .back-btn {\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n border-radius: 6px;\n cursor: pointer;\n color: #666;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.format-editor .back-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.format-editor .format-editor-title {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n}\n\n/* Preview Table */\n.format-editor .preview-table {\n display: flex;\n flex-direction: column;\n gap: 4px;\n margin-top: 12px;\n}\n\n.format-editor .preview-header-cell {\n padding: 10px 14px;\n background: #f1f5f9;\n border-radius: 6px;\n font-weight: 600;\n font-size: 13px;\n color: #333;\n}\n\n.format-editor .preview-cell {\n padding: 8px 14px;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 4px;\n font-size: 14px;\n color: #333;\n}\n\n/* Format Section */\n.format-section {\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.format-section:last-child {\n border-bottom: none;\n}\n\n.format-section-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 12px;\n font-size: 13px;\n font-weight: 600;\n color: #333;\n}\n\n.format-section-header i {\n color: #1976d2;\n font-size: 12px;\n}\n\n/* Format Row */\n.format-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 10px;\n}\n\n.format-row:last-child {\n margin-bottom: 0;\n}\n\n.format-row label {\n font-size: 13px;\n color: #555;\n flex-shrink: 0;\n}\n\n/* Format Inputs */\n.format-select {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n cursor: pointer;\n min-width: 120px;\n}\n\n.format-select:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input {\n padding: 8px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: white;\n}\n\n.format-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.format-input.small {\n width: 80px;\n}\n\n/* Alias Info Row */\n.format-row.alias-info {\n justify-content: flex-start;\n gap: 8px;\n}\n\n.format-row.alias-info .muted-text {\n color: #888;\n font-size: 12px;\n}\n\n.clear-alias-btn {\n width: 20px;\n height: 20px;\n border: none;\n background: #f0f0f0;\n border-radius: 50%;\n color: #888;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n transition: all 0.15s ease;\n}\n\n.clear-alias-btn:hover {\n background: #e0e0e0;\n color: #c62828;\n}\n\n/* Color Input */\n.color-input {\n width: 50px;\n height: 32px;\n padding: 2px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n cursor: pointer;\n background: white;\n}\n\n.color-input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n/* Alignment Toggle */\n.alignment-toggle {\n display: flex;\n gap: 8px;\n}\n\n.align-btn {\n width: 40px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.align-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.align-btn.active {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.align-btn i {\n font-size: 14px;\n color: #64748b;\n}\n\n.align-btn.active i {\n color: #1976d2;\n}\n\n/* Style Buttons */\n.style-buttons {\n display: flex;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.style-btn {\n width: 36px;\n height: 36px;\n border: 2px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n cursor: pointer;\n transition: all 0.15s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.style-btn:hover {\n border-color: #cbd5e1;\n background: #f8fafc;\n}\n\n.style-btn.active {\n border-color: #1976d2;\n background: #e3f2fd;\n}\n\n.style-btn i {\n font-size: 14px;\n color: #64748b;\n}\n\n.style-btn.active i {\n color: #1976d2;\n}\n\n/* Collapsible Format Sections */\n.format-section-collapsible {\n margin-bottom: 12px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.format-section-collapsible summary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n background: #f8fafc;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: #333;\n list-style: none;\n}\n\n.format-section-collapsible summary::-webkit-details-marker {\n display: none;\n}\n\n.format-section-collapsible summary::before {\n content: '\\f054';\n font-family: 'Font Awesome 6 Free';\n font-weight: 900;\n font-size: 10px;\n color: #999;\n transition: transform 0.2s ease;\n}\n\n.format-section-collapsible[open] summary::before {\n transform: rotate(90deg);\n}\n\n.format-section-collapsible summary i {\n color: #1976d2;\n font-size: 12px;\n}\n\n.format-section-collapsible summary span {\n flex: 1;\n}\n\n.format-section-content {\n padding: 14px;\n background: white;\n border-top: 1px solid #e0e0e0;\n}\n\n/* Format Actions */\n.format-actions {\n margin-top: 20px;\n padding-top: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.clear-format-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border: 1px solid #e0e0e0;\n background: white;\n border-radius: 6px;\n color: #666;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.clear-format-btn:hover {\n background: #fff5f5;\n border-color: #f87171;\n color: #dc2626;\n}\n\n.clear-format-btn i {\n font-size: 12px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .config-panel {\n width: 100% !important;\n max-width: 100vw !important;\n }\n\n /* Hide resize handle on mobile - panel is full width */\n .resize-handle {\n display: none;\n }\n\n .tab-btn span {\n display: none;\n }\n\n .tab-btn {\n padding: 14px;\n }\n\n .tab-btn i {\n font-size: 16px;\n }\n\n .format-type-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n/* Medium screens - limit max resize width */\n@media (min-width: 769px) and (max-width: 1200px) {\n .config-panel {\n max-width: min(600px, 80vw);\n }\n}\n"] }]
|
|
1977
2271
|
}], () => [{ type: i0.ChangeDetectorRef }], { entity: [{
|
|
1978
2272
|
type: Input
|
|
1979
2273
|
}], viewEntity: [{
|
|
@@ -2002,5 +2296,5 @@ export class ViewConfigPanelComponent {
|
|
|
2002
2296
|
type: HostListener,
|
|
2003
2297
|
args: ['document:keydown.escape']
|
|
2004
2298
|
}] }); })();
|
|
2005
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewConfigPanelComponent, { className: "ViewConfigPanelComponent", filePath: "src/lib/view-config-panel/view-config-panel.component.ts", lineNumber:
|
|
2299
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ViewConfigPanelComponent, { className: "ViewConfigPanelComponent", filePath: "src/lib/view-config-panel/view-config-panel.component.ts", lineNumber: 82 }); })();
|
|
2006
2300
|
//# sourceMappingURL=view-config-panel.component.js.map
|