@memberjunction/ng-base-forms 5.23.0 → 5.24.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/__tests__/tag-count-badge.test.d.ts +2 -0
- package/dist/__tests__/tag-count-badge.test.d.ts.map +1 -0
- package/dist/__tests__/tag-count-badge.test.js +70 -0
- package/dist/__tests__/tag-count-badge.test.js.map +1 -0
- package/dist/lib/base-form-component.d.ts +11 -2
- package/dist/lib/base-form-component.d.ts.map +1 -1
- package/dist/lib/base-form-component.js +18 -1
- package/dist/lib/base-form-component.js.map +1 -1
- package/dist/lib/container/record-form-container.component.d.ts +43 -0
- package/dist/lib/container/record-form-container.component.d.ts.map +1 -1
- package/dist/lib/container/record-form-container.component.js +196 -24
- package/dist/lib/container/record-form-container.component.js.map +1 -1
- package/dist/lib/toolbar/form-toolbar.component.d.ts +10 -1
- package/dist/lib/toolbar/form-toolbar.component.d.ts.map +1 -1
- package/dist/lib/toolbar/form-toolbar.component.js +208 -147
- package/dist/lib/toolbar/form-toolbar.component.js.map +1 -1
- package/dist/lib/types/toolbar-config.d.ts +2 -0
- package/dist/lib/types/toolbar-config.d.ts.map +1 -1
- package/dist/lib/types/toolbar-config.js +2 -0
- package/dist/lib/types/toolbar-config.js.map +1 -1
- package/dist/module.d.ts +2 -1
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +7 -3
- package/dist/module.js.map +1 -1
- package/package.json +10 -8
|
@@ -86,15 +86,30 @@ function MjFormToolbarComponent_Conditional_1_Conditional_4_Template(rf, ctx) {
|
|
|
86
86
|
i0.ɵɵadvance();
|
|
87
87
|
i0.ɵɵclassMap(ctx_r1.IsFavorite ? "fa-solid fa-star mj-icon--favorite" : "fa-regular fa-star");
|
|
88
88
|
} }
|
|
89
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
90
|
+
i0.ɵɵelementStart(0, "span", 32);
|
|
91
|
+
i0.ɵɵtext(1);
|
|
92
|
+
i0.ɵɵelementEnd();
|
|
93
|
+
} if (rf & 2) {
|
|
94
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
95
|
+
i0.ɵɵadvance();
|
|
96
|
+
i0.ɵɵtextInterpolate1("v", ctx_r1.VersionCount);
|
|
97
|
+
} }
|
|
89
98
|
function MjFormToolbarComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
90
99
|
const _r6 = i0.ɵɵgetCurrentView();
|
|
91
100
|
i0.ɵɵelementStart(0, "button", 30);
|
|
92
101
|
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnHistory()); });
|
|
93
102
|
i0.ɵɵelement(1, "i", 31);
|
|
103
|
+
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_5_Conditional_2_Template, 2, 1, "span", 32);
|
|
94
104
|
i0.ɵɵelementEnd();
|
|
105
|
+
} if (rf & 2) {
|
|
106
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
107
|
+
i0.ɵɵproperty("title", ctx_r1.VersionCount > 0 ? ctx_r1.VersionCount + " version(s) tracked" : "Record Changes");
|
|
108
|
+
i0.ɵɵadvance(2);
|
|
109
|
+
i0.ɵɵconditional(ctx_r1.VersionCount > 0 ? 2 : -1);
|
|
95
110
|
} }
|
|
96
111
|
function MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
97
|
-
i0.ɵɵelementStart(0, "span",
|
|
112
|
+
i0.ɵɵelementStart(0, "span", 35);
|
|
98
113
|
i0.ɵɵtext(1);
|
|
99
114
|
i0.ɵɵelementEnd();
|
|
100
115
|
} if (rf & 2) {
|
|
@@ -104,10 +119,10 @@ function MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Templa
|
|
|
104
119
|
} }
|
|
105
120
|
function MjFormToolbarComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
106
121
|
const _r7 = i0.ɵɵgetCurrentView();
|
|
107
|
-
i0.ɵɵelementStart(0, "button",
|
|
122
|
+
i0.ɵɵelementStart(0, "button", 33);
|
|
108
123
|
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnListManagement()); });
|
|
109
|
-
i0.ɵɵelement(1, "i",
|
|
110
|
-
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template, 2, 1, "span",
|
|
124
|
+
i0.ɵɵelement(1, "i", 34);
|
|
125
|
+
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_6_Conditional_2_Template, 2, 1, "span", 35);
|
|
111
126
|
i0.ɵɵelementEnd();
|
|
112
127
|
} if (rf & 2) {
|
|
113
128
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -115,58 +130,80 @@ function MjFormToolbarComponent_Conditional_1_Conditional_6_Template(rf, ctx) {
|
|
|
115
130
|
i0.ɵɵadvance(2);
|
|
116
131
|
i0.ɵɵconditional(ctx_r1.ListCount > 0 ? 2 : -1);
|
|
117
132
|
} }
|
|
118
|
-
function
|
|
133
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
134
|
+
i0.ɵɵelementStart(0, "span", 35);
|
|
135
|
+
i0.ɵɵtext(1);
|
|
136
|
+
i0.ɵɵelementEnd();
|
|
137
|
+
} if (rf & 2) {
|
|
138
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
139
|
+
i0.ɵɵadvance();
|
|
140
|
+
i0.ɵɵtextInterpolate(ctx_r1.TagCount);
|
|
141
|
+
} }
|
|
142
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
119
143
|
const _r8 = i0.ɵɵgetCurrentView();
|
|
120
|
-
i0.ɵɵelementStart(0, "button",
|
|
121
|
-
i0.ɵɵlistener("click", function
|
|
144
|
+
i0.ɵɵelementStart(0, "button", 29);
|
|
145
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnTagsPanel()); });
|
|
146
|
+
i0.ɵɵelement(1, "i", 36);
|
|
147
|
+
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_7_Conditional_2_Template, 2, 1, "span", 35);
|
|
148
|
+
i0.ɵɵelementEnd();
|
|
149
|
+
} if (rf & 2) {
|
|
150
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
151
|
+
i0.ɵɵproperty("title", ctx_r1.TagCount > 0 ? ctx_r1.TagCount + " tag(s)" : "View tags");
|
|
152
|
+
i0.ɵɵadvance(2);
|
|
153
|
+
i0.ɵɵconditional(ctx_r1.TagCount > 0 ? 2 : -1);
|
|
154
|
+
} }
|
|
155
|
+
function MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
156
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
157
|
+
i0.ɵɵelementStart(0, "button", 38);
|
|
158
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const button_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCustomButtonClick(button_r10)); });
|
|
122
159
|
i0.ɵɵelement(1, "i");
|
|
123
160
|
i0.ɵɵelementEnd();
|
|
124
161
|
} if (rf & 2) {
|
|
125
|
-
const
|
|
126
|
-
i0.ɵɵclassMap(
|
|
127
|
-
i0.ɵɵproperty("disabled",
|
|
162
|
+
const button_r10 = i0.ɵɵnextContext().$implicit;
|
|
163
|
+
i0.ɵɵclassMap(button_r10.CssClass || "");
|
|
164
|
+
i0.ɵɵproperty("disabled", button_r10.Disabled || false)("title", button_r10.Description);
|
|
128
165
|
i0.ɵɵadvance();
|
|
129
|
-
i0.ɵɵclassMap(
|
|
166
|
+
i0.ɵɵclassMap(button_r10.Icon);
|
|
130
167
|
} }
|
|
131
|
-
function
|
|
132
|
-
i0.ɵɵconditionalCreate(0,
|
|
168
|
+
function MjFormToolbarComponent_Conditional_1_For_9_Template(rf, ctx) { if (rf & 1) {
|
|
169
|
+
i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_Conditional_1_For_9_Conditional_0_Template, 2, 6, "button", 37);
|
|
133
170
|
} if (rf & 2) {
|
|
134
|
-
const
|
|
135
|
-
i0.ɵɵconditional(
|
|
171
|
+
const button_r10 = ctx.$implicit;
|
|
172
|
+
i0.ɵɵconditional(button_r10.Visible !== false ? 0 : -1);
|
|
136
173
|
} }
|
|
137
|
-
function
|
|
174
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
|
|
138
175
|
i0.ɵɵelement(0, "div", 22);
|
|
139
176
|
} }
|
|
140
|
-
function
|
|
141
|
-
const
|
|
142
|
-
i0.ɵɵelementStart(0, "a",
|
|
143
|
-
i0.ɵɵlistener("click", function
|
|
144
|
-
i0.ɵɵelement(1, "i",
|
|
177
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
178
|
+
const _r11 = i0.ɵɵgetCurrentView();
|
|
179
|
+
i0.ɵɵelementStart(0, "a", 41);
|
|
180
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template_a_click_0_listener($event) { const parent_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnParentBadgeClick(parent_r12, $event)); });
|
|
181
|
+
i0.ɵɵelement(1, "i", 42);
|
|
145
182
|
i0.ɵɵtext(2);
|
|
146
183
|
i0.ɵɵelementEnd();
|
|
147
|
-
i0.ɵɵelementStart(3, "span",
|
|
148
|
-
i0.ɵɵelement(4, "i",
|
|
184
|
+
i0.ɵɵelementStart(3, "span", 43);
|
|
185
|
+
i0.ɵɵelement(4, "i", 44);
|
|
149
186
|
i0.ɵɵelementEnd();
|
|
150
187
|
} if (rf & 2) {
|
|
151
|
-
const
|
|
152
|
-
i0.ɵɵproperty("title", "Navigate to parent: " +
|
|
188
|
+
const parent_r12 = ctx.$implicit;
|
|
189
|
+
i0.ɵɵproperty("title", "Navigate to parent: " + parent_r12.Name);
|
|
153
190
|
i0.ɵɵadvance(2);
|
|
154
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
191
|
+
i0.ɵɵtextInterpolate1(" ", parent_r12.Name, " ");
|
|
155
192
|
} }
|
|
156
|
-
function
|
|
157
|
-
i0.ɵɵelementContainer(0,
|
|
193
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
194
|
+
i0.ɵɵelementContainer(0, 40);
|
|
158
195
|
} if (rf & 2) {
|
|
159
196
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
160
|
-
const
|
|
161
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
197
|
+
const descendantTreeTpl_r13 = i0.ɵɵreference(5);
|
|
198
|
+
i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, ctx_r1.DescendantTree));
|
|
162
199
|
} }
|
|
163
|
-
function
|
|
200
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
164
201
|
i0.ɵɵelementStart(0, "div", 23);
|
|
165
|
-
i0.ɵɵrepeaterCreate(1,
|
|
166
|
-
i0.ɵɵelementStart(3, "span",
|
|
202
|
+
i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_Conditional_1_Conditional_11_For_2_Template, 5, 2, null, null, _forTrack1);
|
|
203
|
+
i0.ɵɵelementStart(3, "span", 39);
|
|
167
204
|
i0.ɵɵtext(4);
|
|
168
205
|
i0.ɵɵelementEnd();
|
|
169
|
-
i0.ɵɵconditionalCreate(5,
|
|
206
|
+
i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_11_Conditional_5_Template, 1, 4, "ng-container", 40);
|
|
170
207
|
i0.ɵɵelementEnd();
|
|
171
208
|
} if (rf & 2) {
|
|
172
209
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -177,19 +214,19 @@ function MjFormToolbarComponent_Conditional_1_Conditional_10_Template(rf, ctx) {
|
|
|
177
214
|
i0.ɵɵadvance();
|
|
178
215
|
i0.ɵɵconditional(ctx_r1.DescendantTree.length > 0 ? 5 : -1);
|
|
179
216
|
} }
|
|
180
|
-
function
|
|
181
|
-
const
|
|
182
|
-
i0.ɵɵelementStart(0, "button",
|
|
183
|
-
i0.ɵɵlistener("click", function
|
|
184
|
-
i0.ɵɵelement(1, "i",
|
|
217
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
218
|
+
const _r16 = i0.ɵɵgetCurrentView();
|
|
219
|
+
i0.ɵɵelementStart(0, "button", 55);
|
|
220
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnClearFilter()); });
|
|
221
|
+
i0.ɵɵelement(1, "i", 56);
|
|
185
222
|
i0.ɵɵelementEnd();
|
|
186
223
|
} }
|
|
187
|
-
function
|
|
188
|
-
const
|
|
189
|
-
i0.ɵɵelementStart(0, "div",
|
|
190
|
-
i0.ɵɵlistener("input", function
|
|
224
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
225
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
226
|
+
i0.ɵɵelementStart(0, "div", 45)(1, "input", 53);
|
|
227
|
+
i0.ɵɵlistener("input", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnFilterInput($event)); });
|
|
191
228
|
i0.ɵɵelementEnd();
|
|
192
|
-
i0.ɵɵconditionalCreate(2,
|
|
229
|
+
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Conditional_2_Template, 2, 0, "button", 54);
|
|
193
230
|
i0.ɵɵelementEnd();
|
|
194
231
|
} if (rf & 2) {
|
|
195
232
|
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
@@ -199,36 +236,36 @@ function MjFormToolbarComponent_Conditional_1_Conditional_12_Conditional_1_Templ
|
|
|
199
236
|
i0.ɵɵadvance();
|
|
200
237
|
i0.ɵɵconditional(ctx_r1.SearchFilter ? 2 : -1);
|
|
201
238
|
} }
|
|
202
|
-
function
|
|
203
|
-
const _r16 = i0.ɵɵgetCurrentView();
|
|
204
|
-
i0.ɵɵelementStart(0, "button", 55);
|
|
205
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_12_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetSectionOrder()); });
|
|
206
|
-
i0.ɵɵelement(1, "i", 56);
|
|
207
|
-
i0.ɵɵelementEnd();
|
|
208
|
-
} }
|
|
209
|
-
function MjFormToolbarComponent_Conditional_1_Conditional_12_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
239
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
210
240
|
const _r17 = i0.ɵɵgetCurrentView();
|
|
211
241
|
i0.ɵɵelementStart(0, "button", 57);
|
|
212
|
-
i0.ɵɵlistener("click", function
|
|
242
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnResetSectionOrder()); });
|
|
213
243
|
i0.ɵɵelement(1, "i", 58);
|
|
214
244
|
i0.ɵɵelementEnd();
|
|
215
245
|
} }
|
|
216
|
-
function
|
|
217
|
-
const
|
|
246
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
247
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
248
|
+
i0.ɵɵelementStart(0, "button", 59);
|
|
249
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnManageSections()); });
|
|
250
|
+
i0.ɵɵelement(1, "i", 60);
|
|
251
|
+
i0.ɵɵelementEnd();
|
|
252
|
+
} }
|
|
253
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
254
|
+
const _r14 = i0.ɵɵgetCurrentView();
|
|
218
255
|
i0.ɵɵelementStart(0, "div", 24);
|
|
219
|
-
i0.ɵɵconditionalCreate(1,
|
|
220
|
-
i0.ɵɵelementStart(2, "button",
|
|
221
|
-
i0.ɵɵlistener("click", function
|
|
222
|
-
i0.ɵɵelement(3, "i",
|
|
256
|
+
i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_1_Template, 3, 4, "div", 45);
|
|
257
|
+
i0.ɵɵelementStart(2, "button", 46);
|
|
258
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnExpandAll()); });
|
|
259
|
+
i0.ɵɵelement(3, "i", 47);
|
|
223
260
|
i0.ɵɵelementEnd();
|
|
224
|
-
i0.ɵɵelementStart(4, "button",
|
|
225
|
-
i0.ɵɵlistener("click", function
|
|
226
|
-
i0.ɵɵelement(5, "i",
|
|
261
|
+
i0.ɵɵelementStart(4, "button", 48);
|
|
262
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnCollapseAll()); });
|
|
263
|
+
i0.ɵɵelement(5, "i", 49);
|
|
227
264
|
i0.ɵɵelementEnd();
|
|
228
|
-
i0.ɵɵconditionalCreate(6,
|
|
229
|
-
i0.ɵɵconditionalCreate(7,
|
|
230
|
-
i0.ɵɵelementStart(8, "button",
|
|
231
|
-
i0.ɵɵlistener("click", function
|
|
265
|
+
i0.ɵɵconditionalCreate(6, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_6_Template, 2, 0, "button", 50);
|
|
266
|
+
i0.ɵɵconditionalCreate(7, MjFormToolbarComponent_Conditional_1_Conditional_13_Conditional_7_Template, 2, 0, "button", 51);
|
|
267
|
+
i0.ɵɵelementStart(8, "button", 52);
|
|
268
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_1_Conditional_13_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleWidthMode()); });
|
|
232
269
|
i0.ɵɵelement(9, "i");
|
|
233
270
|
i0.ɵɵelementEnd()();
|
|
234
271
|
} if (rf & 2) {
|
|
@@ -248,7 +285,7 @@ function MjFormToolbarComponent_Conditional_1_Conditional_12_Template(rf, ctx) {
|
|
|
248
285
|
i0.ɵɵadvance();
|
|
249
286
|
i0.ɵɵclassMap(ctx_r1.WidthMode === "centered" ? "fa-solid fa-arrows-left-right-to-line" : "fa-solid fa-compress");
|
|
250
287
|
} }
|
|
251
|
-
function
|
|
288
|
+
function MjFormToolbarComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
|
|
252
289
|
i0.ɵɵelementContainer(0, 25);
|
|
253
290
|
} if (rf & 2) {
|
|
254
291
|
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
@@ -259,16 +296,17 @@ function MjFormToolbarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
259
296
|
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_1_Conditional_2_Template, 2, 0, "button", 17);
|
|
260
297
|
i0.ɵɵconditionalCreate(3, MjFormToolbarComponent_Conditional_1_Conditional_3_Template, 2, 0, "button", 18);
|
|
261
298
|
i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_Conditional_1_Conditional_4_Template, 2, 3, "button", 19);
|
|
262
|
-
i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_5_Template,
|
|
299
|
+
i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_Conditional_1_Conditional_5_Template, 3, 2, "button", 20);
|
|
263
300
|
i0.ɵɵconditionalCreate(6, MjFormToolbarComponent_Conditional_1_Conditional_6_Template, 3, 2, "button", 21);
|
|
264
|
-
i0.ɵɵ
|
|
301
|
+
i0.ɵɵconditionalCreate(7, MjFormToolbarComponent_Conditional_1_Conditional_7_Template, 3, 2, "button", 19);
|
|
302
|
+
i0.ɵɵrepeaterCreate(8, MjFormToolbarComponent_Conditional_1_For_9_Template, 1, 1, null, null, _forTrack0);
|
|
265
303
|
i0.ɵɵelementEnd();
|
|
266
|
-
i0.ɵɵconditionalCreate(
|
|
267
|
-
i0.ɵɵconditionalCreate(
|
|
268
|
-
i0.ɵɵelement(
|
|
269
|
-
i0.ɵɵconditionalCreate(
|
|
270
|
-
i0.ɵɵconditionalCreate(
|
|
271
|
-
i0.ɵɵprojection(
|
|
304
|
+
i0.ɵɵconditionalCreate(10, MjFormToolbarComponent_Conditional_1_Conditional_10_Template, 1, 0, "div", 22);
|
|
305
|
+
i0.ɵɵconditionalCreate(11, MjFormToolbarComponent_Conditional_1_Conditional_11_Template, 6, 2, "div", 23);
|
|
306
|
+
i0.ɵɵelement(12, "div", 4);
|
|
307
|
+
i0.ɵɵconditionalCreate(13, MjFormToolbarComponent_Conditional_1_Conditional_13_Template, 10, 8, "div", 24);
|
|
308
|
+
i0.ɵɵconditionalCreate(14, MjFormToolbarComponent_Conditional_1_Conditional_14_Template, 1, 1, "ng-container", 25);
|
|
309
|
+
i0.ɵɵprojection(15);
|
|
272
310
|
i0.ɵɵelementEnd();
|
|
273
311
|
} if (rf & 2) {
|
|
274
312
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
@@ -284,43 +322,45 @@ function MjFormToolbarComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
284
322
|
i0.ɵɵadvance();
|
|
285
323
|
i0.ɵɵconditional(ctx_r1.Config.ShowListButton ? 6 : -1);
|
|
286
324
|
i0.ɵɵadvance();
|
|
325
|
+
i0.ɵɵconditional(ctx_r1.Config.ShowTagsButton ? 7 : -1);
|
|
326
|
+
i0.ɵɵadvance();
|
|
287
327
|
i0.ɵɵrepeater(ctx_r1.Config.CustomButtons);
|
|
288
328
|
i0.ɵɵadvance(2);
|
|
289
|
-
i0.ɵɵconditional(ctx_r1.Config.ShowEntityHierarchy && ctx_r1.IsInHierarchy ? 9 : -1);
|
|
290
|
-
i0.ɵɵadvance();
|
|
291
329
|
i0.ɵɵconditional(ctx_r1.Config.ShowEntityHierarchy && ctx_r1.IsInHierarchy ? 10 : -1);
|
|
330
|
+
i0.ɵɵadvance();
|
|
331
|
+
i0.ɵɵconditional(ctx_r1.Config.ShowEntityHierarchy && ctx_r1.IsInHierarchy ? 11 : -1);
|
|
292
332
|
i0.ɵɵadvance(2);
|
|
293
|
-
i0.ɵɵconditional(ctx_r1.Config.ShowSectionControls ?
|
|
333
|
+
i0.ɵɵconditional(ctx_r1.Config.ShowSectionControls ? 13 : -1);
|
|
294
334
|
i0.ɵɵadvance();
|
|
295
|
-
i0.ɵɵconditional(ctx_r1.AdditionalActionsTemplate ?
|
|
335
|
+
i0.ɵɵconditional(ctx_r1.AdditionalActionsTemplate ? 14 : -1);
|
|
296
336
|
} }
|
|
297
337
|
function MjFormToolbarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
298
|
-
const
|
|
299
|
-
i0.ɵɵelementStart(0, "div",
|
|
300
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
301
|
-
i0.ɵɵelementStart(1, "div",
|
|
302
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
303
|
-
i0.ɵɵelementStart(2, "div",
|
|
338
|
+
const _r19 = i0.ɵɵgetCurrentView();
|
|
339
|
+
i0.ɵɵelementStart(0, "div", 61);
|
|
340
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
|
|
341
|
+
i0.ɵɵelementStart(1, "div", 62);
|
|
342
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
343
|
+
i0.ɵɵelementStart(2, "div", 63)(3, "h3");
|
|
304
344
|
i0.ɵɵtext(4, "Discard Changes?");
|
|
305
345
|
i0.ɵɵelementEnd();
|
|
306
|
-
i0.ɵɵelementStart(5, "button",
|
|
307
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(
|
|
308
|
-
i0.ɵɵelement(6, "i",
|
|
346
|
+
i0.ɵɵelementStart(5, "button", 64);
|
|
347
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
|
|
348
|
+
i0.ɵɵelement(6, "i", 56);
|
|
309
349
|
i0.ɵɵelementEnd()();
|
|
310
|
-
i0.ɵɵelementStart(7, "div",
|
|
350
|
+
i0.ɵɵelementStart(7, "div", 65)(8, "p");
|
|
311
351
|
i0.ɵɵtext(9, "You have ");
|
|
312
352
|
i0.ɵɵelementStart(10, "strong");
|
|
313
353
|
i0.ɵɵtext(11);
|
|
314
354
|
i0.ɵɵelementEnd();
|
|
315
355
|
i0.ɵɵtext(12);
|
|
316
356
|
i0.ɵɵelementEnd()();
|
|
317
|
-
i0.ɵɵelementStart(13, "div",
|
|
318
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(
|
|
357
|
+
i0.ɵɵelementStart(13, "div", 66)(14, "button", 67);
|
|
358
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardConfirm()); });
|
|
319
359
|
i0.ɵɵelement(15, "i", 10);
|
|
320
360
|
i0.ɵɵtext(16, " Discard Changes ");
|
|
321
361
|
i0.ɵɵelementEnd();
|
|
322
|
-
i0.ɵɵelementStart(17, "button",
|
|
323
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(
|
|
362
|
+
i0.ɵɵelementStart(17, "button", 68);
|
|
363
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDiscardCancel()); });
|
|
324
364
|
i0.ɵɵtext(18, " Keep Editing ");
|
|
325
365
|
i0.ɵɵelementEnd()()()();
|
|
326
366
|
} if (rf & 2) {
|
|
@@ -331,99 +371,99 @@ function MjFormToolbarComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
331
371
|
i0.ɵɵtextInterpolate2(" unsaved change", ctx_r1.DirtyFieldDisplayNames.length === 1 ? "" : "s", ". Are you sure you want to discard ", ctx_r1.DirtyFieldDisplayNames.length === 1 ? "it" : "them", "?");
|
|
332
372
|
} }
|
|
333
373
|
function MjFormToolbarComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
334
|
-
const
|
|
335
|
-
i0.ɵɵelementStart(0, "div",
|
|
336
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(
|
|
337
|
-
i0.ɵɵelementStart(1, "div",
|
|
338
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(
|
|
339
|
-
i0.ɵɵelementStart(2, "div",
|
|
374
|
+
const _r20 = i0.ɵɵgetCurrentView();
|
|
375
|
+
i0.ɵɵelementStart(0, "div", 61);
|
|
376
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
|
|
377
|
+
i0.ɵɵelementStart(1, "div", 62);
|
|
378
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
379
|
+
i0.ɵɵelementStart(2, "div", 63)(3, "h3");
|
|
340
380
|
i0.ɵɵtext(4, "Confirm Deletion");
|
|
341
381
|
i0.ɵɵelementEnd();
|
|
342
|
-
i0.ɵɵelementStart(5, "button",
|
|
343
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(
|
|
344
|
-
i0.ɵɵelement(6, "i",
|
|
382
|
+
i0.ɵɵelementStart(5, "button", 64);
|
|
383
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
|
|
384
|
+
i0.ɵɵelement(6, "i", 56);
|
|
345
385
|
i0.ɵɵelementEnd()();
|
|
346
|
-
i0.ɵɵelementStart(7, "div",
|
|
386
|
+
i0.ɵɵelementStart(7, "div", 65)(8, "p");
|
|
347
387
|
i0.ɵɵtext(9, "Are you sure you want to delete this record? This action cannot be undone.");
|
|
348
388
|
i0.ɵɵelementEnd()();
|
|
349
|
-
i0.ɵɵelementStart(10, "div",
|
|
350
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(
|
|
351
|
-
i0.ɵɵelement(12, "i",
|
|
389
|
+
i0.ɵɵelementStart(10, "div", 66)(11, "button", 67);
|
|
390
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteConfirm()); });
|
|
391
|
+
i0.ɵɵelement(12, "i", 69);
|
|
352
392
|
i0.ɵɵtext(13, " Delete ");
|
|
353
393
|
i0.ɵɵelementEnd();
|
|
354
|
-
i0.ɵɵelementStart(14, "button",
|
|
355
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_14_listener() { i0.ɵɵrestoreView(
|
|
394
|
+
i0.ɵɵelementStart(14, "button", 68);
|
|
395
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_Conditional_3_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDeleteCancel()); });
|
|
356
396
|
i0.ɵɵtext(15, " Cancel ");
|
|
357
397
|
i0.ɵɵelementEnd()()()();
|
|
358
398
|
} }
|
|
359
399
|
function MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
360
|
-
i0.ɵɵelementContainer(0,
|
|
400
|
+
i0.ɵɵelementContainer(0, 40);
|
|
361
401
|
} if (rf & 2) {
|
|
362
|
-
const
|
|
402
|
+
const items_r22 = i0.ɵɵnextContext(2).items;
|
|
363
403
|
i0.ɵɵnextContext();
|
|
364
|
-
const
|
|
365
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
404
|
+
const descendantTreeTpl_r13 = i0.ɵɵreference(5);
|
|
405
|
+
i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, items_r22[0].Children));
|
|
366
406
|
} }
|
|
367
407
|
function MjFormToolbarComponent_ng_template_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
368
|
-
const
|
|
369
|
-
i0.ɵɵelementStart(0, "span",
|
|
370
|
-
i0.ɵɵelement(1, "i",
|
|
408
|
+
const _r21 = i0.ɵɵgetCurrentView();
|
|
409
|
+
i0.ɵɵelementStart(0, "span", 43);
|
|
410
|
+
i0.ɵɵelement(1, "i", 44);
|
|
371
411
|
i0.ɵɵelementEnd();
|
|
372
|
-
i0.ɵɵelementStart(2, "a",
|
|
373
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_0_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(
|
|
374
|
-
i0.ɵɵelement(3, "i",
|
|
412
|
+
i0.ɵɵelementStart(2, "a", 71);
|
|
413
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_0_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r21); const items_r22 = i0.ɵɵnextContext().items; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(items_r22[0].EntityName, $event)); });
|
|
414
|
+
i0.ɵɵelement(3, "i", 72);
|
|
375
415
|
i0.ɵɵtext(4);
|
|
376
416
|
i0.ɵɵelementEnd();
|
|
377
|
-
i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template, 1, 4, "ng-container",
|
|
417
|
+
i0.ɵɵconditionalCreate(5, MjFormToolbarComponent_ng_template_4_Conditional_0_Conditional_5_Template, 1, 4, "ng-container", 40);
|
|
378
418
|
} if (rf & 2) {
|
|
379
|
-
const
|
|
419
|
+
const items_r22 = i0.ɵɵnextContext().items;
|
|
380
420
|
i0.ɵɵadvance(2);
|
|
381
|
-
i0.ɵɵproperty("title", "Navigate to: " +
|
|
421
|
+
i0.ɵɵproperty("title", "Navigate to: " + items_r22[0].EntityName);
|
|
382
422
|
i0.ɵɵadvance(2);
|
|
383
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
423
|
+
i0.ɵɵtextInterpolate1(" ", items_r22[0].EntityName, " ");
|
|
384
424
|
i0.ɵɵadvance();
|
|
385
|
-
i0.ɵɵconditional(
|
|
425
|
+
i0.ɵɵconditional(items_r22[0].Children.length > 0 ? 5 : -1);
|
|
386
426
|
} }
|
|
387
427
|
function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
388
|
-
i0.ɵɵelementContainer(0,
|
|
428
|
+
i0.ɵɵelementContainer(0, 40);
|
|
389
429
|
} if (rf & 2) {
|
|
390
|
-
const
|
|
430
|
+
const item_r24 = i0.ɵɵnextContext().$implicit;
|
|
391
431
|
i0.ɵɵnextContext(3);
|
|
392
|
-
const
|
|
393
|
-
i0.ɵɵproperty("ngTemplateOutlet",
|
|
432
|
+
const descendantTreeTpl_r13 = i0.ɵɵreference(5);
|
|
433
|
+
i0.ɵɵproperty("ngTemplateOutlet", descendantTreeTpl_r13)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, item_r24.Children));
|
|
394
434
|
} }
|
|
395
435
|
function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
396
|
-
const
|
|
397
|
-
i0.ɵɵelementStart(0, "div",
|
|
398
|
-
i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template_a_click_1_listener($event) { const
|
|
399
|
-
i0.ɵɵelement(2, "i",
|
|
436
|
+
const _r23 = i0.ɵɵgetCurrentView();
|
|
437
|
+
i0.ɵɵelementStart(0, "div", 73)(1, "a", 71);
|
|
438
|
+
i0.ɵɵlistener("click", function MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template_a_click_1_listener($event) { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDescendantBadgeClick(item_r24.EntityName, $event)); });
|
|
439
|
+
i0.ɵɵelement(2, "i", 72);
|
|
400
440
|
i0.ɵɵtext(3);
|
|
401
441
|
i0.ɵɵelementEnd();
|
|
402
|
-
i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template, 1, 4, "ng-container",
|
|
442
|
+
i0.ɵɵconditionalCreate(4, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Conditional_4_Template, 1, 4, "ng-container", 40);
|
|
403
443
|
i0.ɵɵelementEnd();
|
|
404
444
|
} if (rf & 2) {
|
|
405
|
-
const
|
|
445
|
+
const item_r24 = ctx.$implicit;
|
|
406
446
|
i0.ɵɵadvance();
|
|
407
|
-
i0.ɵɵproperty("title", "Navigate to: " +
|
|
447
|
+
i0.ɵɵproperty("title", "Navigate to: " + item_r24.EntityName);
|
|
408
448
|
i0.ɵɵadvance(2);
|
|
409
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
449
|
+
i0.ɵɵtextInterpolate1(" ", item_r24.EntityName, " ");
|
|
410
450
|
i0.ɵɵadvance();
|
|
411
|
-
i0.ɵɵconditional(
|
|
451
|
+
i0.ɵɵconditional(item_r24.Children.length > 0 ? 4 : -1);
|
|
412
452
|
} }
|
|
413
453
|
function MjFormToolbarComponent_ng_template_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
414
|
-
i0.ɵɵelementStart(0, "div",
|
|
415
|
-
i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template, 5, 3, "div",
|
|
454
|
+
i0.ɵɵelementStart(0, "div", 70);
|
|
455
|
+
i0.ɵɵrepeaterCreate(1, MjFormToolbarComponent_ng_template_4_Conditional_1_For_2_Template, 5, 3, "div", 73, _forTrack2);
|
|
416
456
|
i0.ɵɵelementEnd();
|
|
417
457
|
} if (rf & 2) {
|
|
418
|
-
const
|
|
458
|
+
const items_r22 = i0.ɵɵnextContext().items;
|
|
419
459
|
i0.ɵɵadvance();
|
|
420
|
-
i0.ɵɵrepeater(
|
|
460
|
+
i0.ɵɵrepeater(items_r22);
|
|
421
461
|
} }
|
|
422
462
|
function MjFormToolbarComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
423
|
-
i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_ng_template_4_Conditional_0_Template, 6, 3)(1, MjFormToolbarComponent_ng_template_4_Conditional_1_Template, 3, 0, "div",
|
|
463
|
+
i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_ng_template_4_Conditional_0_Template, 6, 3)(1, MjFormToolbarComponent_ng_template_4_Conditional_1_Template, 3, 0, "div", 70);
|
|
424
464
|
} if (rf & 2) {
|
|
425
|
-
const
|
|
426
|
-
i0.ɵɵconditional(
|
|
465
|
+
const items_r22 = ctx.items;
|
|
466
|
+
i0.ɵɵconditional(items_r22.length === 1 ? 0 : items_r22.length > 1 ? 1 : -1);
|
|
427
467
|
} }
|
|
428
468
|
/**
|
|
429
469
|
* Configurable form toolbar component.
|
|
@@ -479,6 +519,12 @@ export class MjFormToolbarComponent {
|
|
|
479
519
|
DirtyFieldNames = [];
|
|
480
520
|
/** Count of lists this record belongs to */
|
|
481
521
|
ListCount = 0;
|
|
522
|
+
/** Number of tags applied to this record */
|
|
523
|
+
TagCount = 0;
|
|
524
|
+
/** Whether the tags panel is currently open */
|
|
525
|
+
IsTagsPanelOpen = false;
|
|
526
|
+
/** Number of record change versions for this record (displayed as "vN" badge on history button) */
|
|
527
|
+
VersionCount = 0;
|
|
482
528
|
/** Entity info for IS-A hierarchy and metadata */
|
|
483
529
|
EntityInfo = null;
|
|
484
530
|
/** Toolbar configuration controlling visibility and behavior */
|
|
@@ -522,6 +568,8 @@ export class MjFormToolbarComponent {
|
|
|
522
568
|
BeforeListManagement = new EventEmitter();
|
|
523
569
|
/** Request to show list management */
|
|
524
570
|
ListManagementRequested = new EventEmitter();
|
|
571
|
+
/** Emitted when the Tags button is clicked */
|
|
572
|
+
TagsPanelToggled = new EventEmitter();
|
|
525
573
|
/** Request to show dirty field changes */
|
|
526
574
|
ShowChangesRequested = new EventEmitter();
|
|
527
575
|
/** Emitted when a custom toolbar button is clicked */
|
|
@@ -836,6 +884,11 @@ export class MjFormToolbarComponent {
|
|
|
836
884
|
return;
|
|
837
885
|
this.ListManagementRequested.emit();
|
|
838
886
|
}
|
|
887
|
+
OnTagsPanel() {
|
|
888
|
+
if (this.DispatchToFormRef('HandleTagsPanel'))
|
|
889
|
+
return;
|
|
890
|
+
this.TagsPanelToggled.emit();
|
|
891
|
+
}
|
|
839
892
|
OnCustomButtonClick(button) {
|
|
840
893
|
if (button.Disabled)
|
|
841
894
|
return;
|
|
@@ -947,10 +1000,10 @@ export class MjFormToolbarComponent {
|
|
|
947
1000
|
this.ManageSectionsRequested.emit();
|
|
948
1001
|
}
|
|
949
1002
|
static ɵfac = function MjFormToolbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjFormToolbarComponent)(); };
|
|
950
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { Form: "Form", _deprecatedForm: [0, "form", "_deprecatedForm"], Record: "Record", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", EntityInfo: "EntityInfo", Config: "Config", IsSaving: "IsSaving", VisibleSectionCount: "VisibleSectionCount", TotalSectionCount: "TotalSectionCount", ExpandedSectionCount: "ExpandedSectionCount", SearchFilter: "SearchFilter", ShowEmptyFields: "ShowEmptyFields", WidthMode: "WidthMode", HasCustomSectionOrder: "HasCustomSectionOrder", AdditionalActionsTemplate: "AdditionalActionsTemplate" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick", FilterChange: "FilterChange", ExpandAllRequested: "ExpandAllRequested", CollapseAllRequested: "CollapseAllRequested", ShowEmptyFieldsChange: "ShowEmptyFieldsChange", WidthModeChange: "WidthModeChange", ResetSectionOrderRequested: "ResetSectionOrderRequested", ManageSectionsRequested: "ManageSectionsRequested" }, standalone: false, ngContentSelectors: _c1, decls: 6, vars: 4, consts: [["descendantTreeTpl", ""], [1, "mj-forms-edit-banner"], [1, "mj-forms-toolbar", 3, "mj-forms-toolbar--sticky"], [1, "mj-dialog-overlay"], [1, "mj-forms-toolbar-spacer"], [1, "mj-forms-edit-banner-actions"], ["title", "Save Changes", 1, "mj-forms-btn", "mj-forms-btn--primary", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-forms-btn-text"], ["title", "Discard Changes", 1, "mj-forms-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], [1, "fa-solid", "fa-circle-exclamation", "mj-forms-edit-banner-icon--dirty"], [1, "mj-forms-edit-banner-dirty"], [1, "fa-solid", "fa-pen-to-square"], [1, "mj-forms-edit-banner-text"], [1, "mj-forms-toolbar"], [1, "mj-forms-toolbar-group"], ["title", "Edit this Record", 1, "mj-forms-btn"], ["title", "Delete this Record", 1, "mj-forms-btn"], [1, "mj-forms-btn", 3, "title"], [
|
|
1003
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjFormToolbarComponent, selectors: [["mj-form-toolbar"]], inputs: { Form: "Form", _deprecatedForm: [0, "form", "_deprecatedForm"], Record: "Record", EditMode: "EditMode", UserCanEdit: "UserCanEdit", UserCanDelete: "UserCanDelete", IsFavorite: "IsFavorite", FavoriteInitDone: "FavoriteInitDone", IsDirty: "IsDirty", DirtyFieldNames: "DirtyFieldNames", ListCount: "ListCount", TagCount: "TagCount", IsTagsPanelOpen: "IsTagsPanelOpen", VersionCount: "VersionCount", EntityInfo: "EntityInfo", Config: "Config", IsSaving: "IsSaving", VisibleSectionCount: "VisibleSectionCount", TotalSectionCount: "TotalSectionCount", ExpandedSectionCount: "ExpandedSectionCount", SearchFilter: "SearchFilter", ShowEmptyFields: "ShowEmptyFields", WidthMode: "WidthMode", HasCustomSectionOrder: "HasCustomSectionOrder", AdditionalActionsTemplate: "AdditionalActionsTemplate" }, outputs: { Navigate: "Navigate", EditModeChange: "EditModeChange", BeforeSave: "BeforeSave", SaveRequested: "SaveRequested", BeforeCancel: "BeforeCancel", CancelRequested: "CancelRequested", BeforeDelete: "BeforeDelete", DeleteRequested: "DeleteRequested", FavoriteToggled: "FavoriteToggled", BeforeHistoryView: "BeforeHistoryView", HistoryRequested: "HistoryRequested", BeforeListManagement: "BeforeListManagement", ListManagementRequested: "ListManagementRequested", TagsPanelToggled: "TagsPanelToggled", ShowChangesRequested: "ShowChangesRequested", CustomButtonClick: "CustomButtonClick", FilterChange: "FilterChange", ExpandAllRequested: "ExpandAllRequested", CollapseAllRequested: "CollapseAllRequested", ShowEmptyFieldsChange: "ShowEmptyFieldsChange", WidthModeChange: "WidthModeChange", ResetSectionOrderRequested: "ResetSectionOrderRequested", ManageSectionsRequested: "ManageSectionsRequested" }, standalone: false, ngContentSelectors: _c1, decls: 6, vars: 4, consts: [["descendantTreeTpl", ""], [1, "mj-forms-edit-banner"], [1, "mj-forms-toolbar", 3, "mj-forms-toolbar--sticky"], [1, "mj-dialog-overlay"], [1, "mj-forms-toolbar-spacer"], [1, "mj-forms-edit-banner-actions"], ["title", "Save Changes", 1, "mj-forms-btn", "mj-forms-btn--primary", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], [1, "mj-forms-btn-text"], ["title", "Discard Changes", 1, "mj-forms-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate-left"], [1, "fa-solid", "fa-circle-exclamation", "mj-forms-edit-banner-icon--dirty"], [1, "mj-forms-edit-banner-dirty"], [1, "fa-solid", "fa-pen-to-square"], [1, "mj-forms-edit-banner-text"], [1, "mj-forms-toolbar"], [1, "mj-forms-toolbar-group"], ["title", "Edit this Record", 1, "mj-forms-btn"], ["title", "Delete this Record", 1, "mj-forms-btn"], [1, "mj-forms-btn", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "title"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "title"], [1, "mj-forms-toolbar-separator"], [1, "mj-entity-hierarchy"], [1, "mj-forms-toolbar-group", "mj-section-controls"], [3, "ngTemplateOutlet"], ["title", "Edit this Record", 1, "mj-forms-btn", 3, "click"], ["title", "Delete this Record", 1, "mj-forms-btn", 3, "click"], [1, "fa-regular", "fa-trash-can"], [1, "mj-forms-btn", 3, "click", "title"], [1, "mj-forms-btn", "mj-forms-btn--history", 3, "click", "title"], [1, "fa-regular", "fa-clock"], [1, "mj-version-count-badge"], [1, "mj-forms-btn", "mj-forms-btn--list", 3, "click", "title"], [1, "fa-regular", "fa-bookmark"], [1, "mj-list-count-badge"], [1, "fa-solid", "fa-tags"], [1, "mj-forms-btn", 3, "class", "disabled", "title"], [1, "mj-forms-btn", 3, "click", "disabled", "title"], [1, "mj-entity-badge", "mj-entity-badge--current"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "mj-entity-badge", "mj-entity-badge--parent", 3, "click", "title"], [1, "fa-solid", "fa-arrow-up"], [1, "mj-hierarchy-arrow"], [1, "fa-solid", "fa-chevron-right"], [1, "mj-forms-search-wrapper"], ["title", "Expand all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all sections", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only"], [1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click", "title"], ["type", "text", "placeholder", "Search sections...", 1, "mj-section-search", 3, "input", "value"], ["title", "Clear search", 1, "mj-clear-search"], ["title", "Clear search", 1, "mj-clear-search", 3, "click"], [1, "fa-solid", "fa-xmark"], ["title", "Reset section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], ["title", "Manage section order", 1, "mj-forms-btn", "mj-forms-btn--ghost", "mj-forms-btn--icon-only", 3, "click"], [1, "fa-solid", "fa-bars-staggered"], [1, "mj-dialog-overlay", 3, "click"], [1, "mj-dialog", 3, "click"], [1, "mj-dialog-header"], [1, "mj-dialog-close", 3, "click"], [1, "mj-dialog-body"], [1, "mj-dialog-footer"], [1, "mj-forms-btn", "mj-forms-btn--danger", 3, "click"], [1, "mj-forms-btn", 3, "click"], [1, "fa-solid", "fa-trash-can"], [1, "mj-descendant-chains"], [1, "mj-entity-badge", "mj-entity-badge--child", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "mj-descendant-chain"]], template: function MjFormToolbarComponent_Template(rf, ctx) { if (rf & 1) {
|
|
951
1004
|
i0.ɵɵprojectionDef(_c0);
|
|
952
1005
|
i0.ɵɵconditionalCreate(0, MjFormToolbarComponent_Conditional_0_Template, 13, 3, "div", 1);
|
|
953
|
-
i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Template,
|
|
1006
|
+
i0.ɵɵconditionalCreate(1, MjFormToolbarComponent_Conditional_1_Template, 16, 12, "div", 2);
|
|
954
1007
|
i0.ɵɵconditionalCreate(2, MjFormToolbarComponent_Conditional_2_Template, 19, 3, "div", 3);
|
|
955
1008
|
i0.ɵɵconditionalCreate(3, MjFormToolbarComponent_Conditional_3_Template, 16, 0, "div", 3);
|
|
956
1009
|
i0.ɵɵtemplate(4, MjFormToolbarComponent_ng_template_4_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
|
|
@@ -962,11 +1015,11 @@ export class MjFormToolbarComponent {
|
|
|
962
1015
|
i0.ɵɵconditional(ctx.ShowDiscardDialog ? 2 : -1);
|
|
963
1016
|
i0.ɵɵadvance();
|
|
964
1017
|
i0.ɵɵconditional(ctx.ShowDeleteDialog ? 3 : -1);
|
|
965
|
-
} }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}"], changeDetection: 0 });
|
|
1018
|
+
} }, dependencies: [i1.NgTemplateOutlet], styles: ["\n\n\n\n[_nghost-%COMP%] {\n display: block;\n}\n\n\n\n\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n\n\n\n\n.mj-forms-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky[_ngcontent-%COMP%] {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled[_ngcontent-%COMP%] {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator[_ngcontent-%COMP%] {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n\n\n.mj-forms-btn[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%] {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only[_ngcontent-%COMP%] {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text[_ngcontent-%COMP%] {\n margin-left: 2px;\n}\n\n.mj-icon--favorite[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.mj-forms-btn--list[_ngcontent-%COMP%] {\n position: relative;\n}\n\n\n\n.mj-forms-btn--history[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.mj-version-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -10px;\n padding: 0 5px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 16px;\n border: 2px solid var(--mj-bg-surface-card);\n white-space: nowrap;\n line-height: 1;\n}\n\n.mj-list-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n\n\n\n\n.mj-entity-hierarchy[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-entity-badge--root[_ngcontent-%COMP%] {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n\n\n.mj-descendant-chains[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:first-child::after {\n top: 50%;\n}\n\n\n\n.mj-descendant-chain[_ngcontent-%COMP%]:last-child::after {\n bottom: 50%;\n}\n\n\n\n\n\n\n\n\n.mj-section-controls[_ngcontent-%COMP%] {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper[_ngcontent-%COMP%] {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search[_ngcontent-%COMP%] {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n\n.mj-section-search--active[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search[_ngcontent-%COMP%] {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n.mj-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_mj-fade-in 150ms ease;\n}\n\n.mj-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: _ngcontent-%COMP%_mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n.mj-dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes _ngcontent-%COMP%_mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}"], changeDetection: 0 });
|
|
966
1019
|
}
|
|
967
1020
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjFormToolbarComponent, [{
|
|
968
1021
|
type: Component,
|
|
969
|
-
args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n EDIT MODE BANNER (shows above toolbar when editing)\n ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n <div class=\"mj-forms-edit-banner\">\n @if (DirtyFieldDisplayNames.length > 0) {\n <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n <span class=\"mj-forms-edit-banner-dirty\">\n <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n — {{ DirtyFieldDisplayNames.join(', ') }}\n </span>\n } @else {\n <i class=\"fa-solid fa-pen-to-square\"></i>\n <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n }\n <div class=\"mj-forms-toolbar-spacer\"></div>\n <div class=\"mj-forms-edit-banner-actions\">\n <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n <i class=\"fa-solid fa-floppy-disk\"></i>\n <span class=\"mj-forms-btn-text\">Save Changes</span>\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n <span class=\"mj-forms-btn-text\">Discard</span>\n </button>\n </div>\n </div>\n}\n\n<!-- ============================================\n MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n ============================================ -->\n@if (!EditMode) {\n <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n <!-- Action buttons -->\n <div class=\"mj-forms-toolbar-group\">\n @if (Config.ShowEditButton && UserCanEdit) {\n <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n @if (Config.ShowDeleteButton && UserCanDelete) {\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n <i class=\"fa-regular fa-trash-can\"></i>\n </button>\n }\n @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n </button>\n }\n @if (Config.ShowHistoryButton && TracksChanges) {\n <button class=\"mj-forms-btn\" (click)=\"OnHistory()\" title=\"MJ: Record Changes\">\n <i class=\"fa-regular fa-clock\"></i>\n </button>\n }\n @if (Config.ShowListButton) {\n <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n <i class=\"fa-regular fa-bookmark\"></i>\n @if (ListCount > 0) {\n <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n }\n </button>\n }\n\n <!-- Custom toolbar buttons -->\n @for (button of Config.CustomButtons; track button.Key) {\n @if (button.Visible !== false) {\n <button class=\"mj-forms-btn\"\n [class]=\"button.CssClass || ''\"\n [disabled]=\"button.Disabled || false\"\n [title]=\"button.Description\"\n (click)=\"OnCustomButtonClick(button)\">\n <i [class]=\"button.Icon\"></i>\n </button>\n }\n }\n </div>\n\n <!-- Separator before hierarchy -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-forms-toolbar-separator\"></div>\n }\n\n <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-entity-hierarchy\">\n <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n @for (parent of ParentChain; track parent.ID) {\n <a class=\"mj-entity-badge mj-entity-badge--parent\"\n [title]=\"'Navigate to parent: ' + parent.Name\"\n (click)=\"OnParentBadgeClick(parent, $event)\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n {{ parent.Name }}\n </a>\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n }\n\n <!-- Current entity (always shown) -->\n <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n @if (DescendantTree.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n }\n </div>\n }\n\n <!-- Spacer pushes section controls to the right -->\n <div class=\"mj-forms-toolbar-spacer\"></div>\n\n <!-- Section Controls -->\n @if (Config.ShowSectionControls) {\n <div class=\"mj-forms-toolbar-group mj-section-controls\">\n @if (Config.ShowSectionFilter) {\n <div class=\"mj-forms-search-wrapper\">\n <input type=\"text\"\n class=\"mj-section-search\"\n [class.mj-section-search--active]=\"SearchFilter\"\n [value]=\"SearchFilter\"\n (input)=\"OnFilterInput($event)\"\n placeholder=\"Search sections...\">\n @if (SearchFilter) {\n <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount === 0\"\n (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n @if (HasCustomSectionOrder) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n </button>\n }\n @if (Config.ShowSectionManager) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnManageSections()\" title=\"Manage section order\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n </button>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnToggleWidthMode()\"\n [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n </button>\n </div>\n }\n\n <!-- Additional actions slot -->\n @if (AdditionalActionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n }\n <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n </div>\n}\n\n<!-- ============================================\n DISCARD CHANGES CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDiscardDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Discard Changes?</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n Discard Changes\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n Keep Editing\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- ============================================\n DELETE CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDeleteDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Confirm Deletion</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n <i class=\"fa-solid fa-trash-can\"></i>\n Delete\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n Single child at a level \u2192 inline with chevron.\n Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n @if (items.length === 1) {\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + items[0].EntityName\"\n (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ items[0].EntityName }}\n </a>\n @if (items[0].Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n }\n } @else if (items.length > 1) {\n <div class=\"mj-descendant-chains\">\n @for (item of items; track item.EntityName) {\n <div class=\"mj-descendant-chain\">\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + item.EntityName\"\n (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ item.EntityName }}\n </a>\n @if (item.Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: ["/* ============================================\n FORM TOOLBAR \u2014 uses global --mj-* design tokens\n ============================================ */\n:host {\n display: block;\n}\n\n/* ============================================\n EDIT BANNER\n ============================================ */\n.mj-forms-edit-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner > i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty strong {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions {\n display: flex;\n gap: 8px;\n}\n\n/* ============================================\n MAIN TOOLBAR\n ============================================ */\n.mj-forms-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n flex: 1;\n}\n\n/* ============================================\n BUTTONS\n ============================================ */\n.mj-forms-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm i {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text {\n margin-left: 2px;\n}\n\n.mj-icon--favorite {\n color: var(--mj-status-warning);\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n position: relative;\n}\n\n.mj-list-count-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* ============================================\n IS-A ENTITY HIERARCHY\n ============================================ */\n.mj-entity-hierarchy {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf {\n border-style: dashed;\n}\n\n.mj-entity-badge--root {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n SECTION CONTROLS\n ============================================ */\n.mj-section-controls {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n DIALOG (lightweight inline)\n ============================================ */\n.mj-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body p {\n margin: 0;\n}\n\n.mj-dialog-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n"] }]
|
|
1022
|
+
args: [{ standalone: false, selector: 'mj-form-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- ============================================\n EDIT MODE BANNER (shows above toolbar when editing)\n ============================================ -->\n@if (EditMode && Config.ShowEditBanner) {\n <div class=\"mj-forms-edit-banner\">\n @if (DirtyFieldDisplayNames.length > 0) {\n <i class=\"fa-solid fa-circle-exclamation mj-forms-edit-banner-icon--dirty\"></i>\n <span class=\"mj-forms-edit-banner-dirty\">\n <strong>{{ DirtyFieldDisplayNames.length }}</strong>\n field{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }} modified\n — {{ DirtyFieldDisplayNames.join(', ') }}\n </span>\n } @else {\n <i class=\"fa-solid fa-pen-to-square\"></i>\n <span class=\"mj-forms-edit-banner-text\">Editing: {{ RecordDisplayName }}</span>\n }\n <div class=\"mj-forms-toolbar-spacer\"></div>\n <div class=\"mj-forms-edit-banner-actions\">\n <button class=\"mj-forms-btn mj-forms-btn--primary\" (click)=\"OnSave()\" [disabled]=\"IsSaving\" title=\"Save Changes\">\n <i class=\"fa-solid fa-floppy-disk\"></i>\n <span class=\"mj-forms-btn-text\">Save Changes</span>\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnCancel()\" [disabled]=\"IsSaving\" title=\"Discard Changes\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n <span class=\"mj-forms-btn-text\">Discard</span>\n </button>\n </div>\n </div>\n}\n\n<!-- ============================================\n MAIN TOOLBAR (read mode only \u2014 hidden in edit mode)\n ============================================ -->\n@if (!EditMode) {\n <div class=\"mj-forms-toolbar\" [class.mj-forms-toolbar--sticky]=\"Config.StickyToolbar\">\n\n <!-- Action buttons -->\n <div class=\"mj-forms-toolbar-group\">\n @if (Config.ShowEditButton && UserCanEdit) {\n <button class=\"mj-forms-btn\" (click)=\"OnEdit()\" title=\"Edit this Record\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n @if (Config.ShowDeleteButton && UserCanDelete) {\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteClick()\" title=\"Delete this Record\">\n <i class=\"fa-regular fa-trash-can\"></i>\n </button>\n }\n @if (Config.ShowFavoriteButton && FavoriteInitDone) {\n <button class=\"mj-forms-btn\" (click)=\"OnFavoriteToggle()\" [title]=\"IsFavorite ? 'Remove Favorite' : 'Make Favorite'\">\n <i [class]=\"IsFavorite ? 'fa-solid fa-star mj-icon--favorite' : 'fa-regular fa-star'\"></i>\n </button>\n }\n @if (Config.ShowHistoryButton && TracksChanges) {\n <button class=\"mj-forms-btn mj-forms-btn--history\" (click)=\"OnHistory()\"\n [title]=\"VersionCount > 0 ? VersionCount + ' version(s) tracked' : 'Record Changes'\">\n <i class=\"fa-regular fa-clock\"></i>\n @if (VersionCount > 0) {\n <span class=\"mj-version-count-badge\">v{{ VersionCount }}</span>\n }\n </button>\n }\n @if (Config.ShowListButton) {\n <button class=\"mj-forms-btn mj-forms-btn--list\" (click)=\"OnListManagement()\"\n [title]=\"ListCount > 0 ? 'Member of ' + ListCount + ' list(s)' : 'Add to a list'\">\n <i class=\"fa-regular fa-bookmark\"></i>\n @if (ListCount > 0) {\n <span class=\"mj-list-count-badge\">{{ ListCount }}</span>\n }\n </button>\n }\n @if (Config.ShowTagsButton) {\n <button class=\"mj-forms-btn\" (click)=\"OnTagsPanel()\"\n [title]=\"TagCount > 0 ? TagCount + ' tag(s)' : 'View tags'\">\n <i class=\"fa-solid fa-tags\"></i>\n @if (TagCount > 0) {\n <span class=\"mj-list-count-badge\">{{ TagCount }}</span>\n }\n </button>\n }\n\n <!-- Custom toolbar buttons -->\n @for (button of Config.CustomButtons; track button.Key) {\n @if (button.Visible !== false) {\n <button class=\"mj-forms-btn\"\n [class]=\"button.CssClass || ''\"\n [disabled]=\"button.Disabled || false\"\n [title]=\"button.Description\"\n (click)=\"OnCustomButtonClick(button)\">\n <i [class]=\"button.Icon\"></i>\n </button>\n }\n }\n </div>\n\n <!-- Separator before hierarchy -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-forms-toolbar-separator\"></div>\n }\n\n <!-- IS-A Entity Hierarchy Breadcrumb (bidirectional: Root \u2192 ... \u2192 Current \u2192 ... \u2192 Leaf) -->\n @if (Config.ShowEntityHierarchy && IsInHierarchy) {\n <div class=\"mj-entity-hierarchy\">\n <!-- Parent chain (root \u2192 ... \u2192 immediate parent) -->\n @for (parent of ParentChain; track parent.ID) {\n <a class=\"mj-entity-badge mj-entity-badge--parent\"\n [title]=\"'Navigate to parent: ' + parent.Name\"\n (click)=\"OnParentBadgeClick(parent, $event)\">\n <i class=\"fa-solid fa-arrow-up\"></i>\n {{ parent.Name }}\n </a>\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n }\n\n <!-- Current entity (always shown) -->\n <span class=\"mj-entity-badge mj-entity-badge--current\">{{ EntityInfo?.Name }}</span>\n\n <!-- Descendant tree (recursive: inline for single paths, branching for multiple) -->\n @if (DescendantTree.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: DescendantTree }\"></ng-container>\n }\n </div>\n }\n\n <!-- Spacer pushes section controls to the right -->\n <div class=\"mj-forms-toolbar-spacer\"></div>\n\n <!-- Section Controls -->\n @if (Config.ShowSectionControls) {\n <div class=\"mj-forms-toolbar-group mj-section-controls\">\n @if (Config.ShowSectionFilter) {\n <div class=\"mj-forms-search-wrapper\">\n <input type=\"text\"\n class=\"mj-section-search\"\n [class.mj-section-search--active]=\"SearchFilter\"\n [value]=\"SearchFilter\"\n (input)=\"OnFilterInput($event)\"\n placeholder=\"Search sections...\">\n @if (SearchFilter) {\n <button class=\"mj-clear-search\" (click)=\"OnClearFilter()\" title=\"Clear search\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n }\n </div>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount >= VisibleSectionCount\"\n (click)=\"OnExpandAll()\" title=\"Expand all sections\">\n <i class=\"fa-solid fa-angles-down\"></i>\n </button>\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n [disabled]=\"ExpandedSectionCount === 0\"\n (click)=\"OnCollapseAll()\" title=\"Collapse all sections\">\n <i class=\"fa-solid fa-angles-up\"></i>\n </button>\n @if (HasCustomSectionOrder) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\" (click)=\"OnResetSectionOrder()\" title=\"Reset section order\">\n <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n </button>\n }\n @if (Config.ShowSectionManager) {\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnManageSections()\" title=\"Manage section order\">\n <i class=\"fa-solid fa-bars-staggered\"></i>\n </button>\n }\n <button class=\"mj-forms-btn mj-forms-btn--ghost mj-forms-btn--icon-only\"\n (click)=\"OnToggleWidthMode()\"\n [title]=\"WidthMode === 'centered' ? 'Expand to full width' : 'Center content'\">\n <i [class]=\"WidthMode === 'centered' ? 'fa-solid fa-arrows-left-right-to-line' : 'fa-solid fa-compress'\"></i>\n </button>\n </div>\n }\n\n <!-- Additional actions slot -->\n @if (AdditionalActionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"AdditionalActionsTemplate\"></ng-container>\n }\n <ng-content select=\"[toolbar-additional-controls]\"></ng-content>\n </div>\n}\n\n<!-- ============================================\n DISCARD CHANGES CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDiscardDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDiscardCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Discard Changes?</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDiscardCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>You have <strong>{{ DirtyFieldDisplayNames.length }}</strong> unsaved change{{ DirtyFieldDisplayNames.length === 1 ? '' : 's' }}. Are you sure you want to discard {{ DirtyFieldDisplayNames.length === 1 ? 'it' : 'them' }}?</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDiscardConfirm()\">\n <i class=\"fa-solid fa-rotate-left\"></i>\n Discard Changes\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDiscardCancel()\">\n Keep Editing\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- ============================================\n DELETE CONFIRMATION DIALOG\n ============================================ -->\n@if (ShowDeleteDialog) {\n <div class=\"mj-dialog-overlay\" (click)=\"OnDeleteCancel()\">\n <div class=\"mj-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"mj-dialog-header\">\n <h3>Confirm Deletion</h3>\n <button class=\"mj-dialog-close\" (click)=\"OnDeleteCancel()\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <div class=\"mj-dialog-body\">\n <p>Are you sure you want to delete this record? This action cannot be undone.</p>\n </div>\n <div class=\"mj-dialog-footer\">\n <button class=\"mj-forms-btn mj-forms-btn--danger\" (click)=\"OnDeleteConfirm()\">\n <i class=\"fa-solid fa-trash-can\"></i>\n Delete\n </button>\n <button class=\"mj-forms-btn\" (click)=\"OnDeleteCancel()\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n}\n\n<!-- Recursive template for IS-A descendant tree rendering.\n Single child at a level \u2192 inline with chevron.\n Multiple children at a level \u2192 tree branch with CSS connector lines. -->\n<ng-template #descendantTreeTpl let-items=\"items\">\n @if (items.length === 1) {\n <span class=\"mj-hierarchy-arrow\"><i class=\"fa-solid fa-chevron-right\"></i></span>\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + items[0].EntityName\"\n (click)=\"OnDescendantBadgeClick(items[0].EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ items[0].EntityName }}\n </a>\n @if (items[0].Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: items[0].Children }\"></ng-container>\n }\n } @else if (items.length > 1) {\n <div class=\"mj-descendant-chains\">\n @for (item of items; track item.EntityName) {\n <div class=\"mj-descendant-chain\">\n <a class=\"mj-entity-badge mj-entity-badge--child\"\n [title]=\"'Navigate to: ' + item.EntityName\"\n (click)=\"OnDescendantBadgeClick(item.EntityName, $event)\">\n <i class=\"fa-solid fa-arrow-down\"></i>\n {{ item.EntityName }}\n </a>\n @if (item.Children.length > 0) {\n <ng-container [ngTemplateOutlet]=\"descendantTreeTpl\"\n [ngTemplateOutletContext]=\"{ items: item.Children }\"></ng-container>\n }\n </div>\n }\n </div>\n }\n</ng-template>\n", styles: ["/* ============================================\n FORM TOOLBAR \u2014 uses global --mj-* design tokens\n ============================================ */\n:host {\n display: block;\n}\n\n/* ============================================\n EDIT BANNER\n ============================================ */\n.mj-forms-edit-banner {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 16px 16px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-bottom: 2px solid var(--mj-brand-primary);\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: var(--mj-font-medium);\n}\n\n.mj-forms-edit-banner > i {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-icon--dirty {\n color: var(--mj-status-warning);\n font-size: var(--mj-text-base);\n}\n\n.mj-forms-edit-banner-text {\n font-size: var(--mj-text-sm);\n}\n\n.mj-forms-edit-banner-dirty {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n\n.mj-forms-edit-banner-dirty strong {\n color: var(--mj-status-warning);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-forms-edit-banner-actions {\n display: flex;\n gap: 8px;\n}\n\n/* ============================================\n MAIN TOOLBAR\n ============================================ */\n.mj-forms-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 22px 16px;\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n flex-wrap: wrap;\n z-index: 40;\n}\n\n.mj-forms-toolbar--sticky {\n position: sticky;\n top: 0;\n}\n\n.mj-forms-toolbar--disabled {\n pointer-events: none;\n opacity: 0.7;\n}\n\n.mj-forms-toolbar-group {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.mj-forms-toolbar-separator {\n width: 1px;\n height: 24px;\n background: var(--mj-border-default);\n margin: 0 4px;\n}\n\n.mj-forms-toolbar-spacer {\n flex: 1;\n}\n\n/* ============================================\n BUTTONS\n ============================================ */\n.mj-forms-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: var(--mj-font-medium);\n border: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n white-space: nowrap;\n font-family: inherit;\n line-height: 1;\n}\n\n.mj-forms-btn:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-border-strong);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-forms-btn:active {\n transform: translateY(0);\n box-shadow: none;\n}\n\n.mj-forms-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mj-forms-btn i {\n font-size: 15px;\n line-height: 1;\n}\n\n.mj-forms-btn--primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-forms-btn--primary:hover {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.mj-forms-btn--danger {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n}\n\n.mj-forms-btn--danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n.mj-forms-btn--ghost {\n border-color: transparent;\n background: transparent;\n}\n\n.mj-forms-btn--ghost:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n border-color: transparent;\n}\n\n.mj-forms-btn--icon-only {\n padding: 7px 9px;\n}\n\n.mj-forms-btn--sm {\n padding: 5px 12px;\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn--sm i {\n font-size: var(--mj-text-xs);\n}\n\n.mj-forms-btn-text {\n margin-left: 2px;\n}\n\n.mj-icon--favorite {\n color: var(--mj-status-warning);\n}\n\n/* List button with count badge */\n.mj-forms-btn--list {\n position: relative;\n}\n\n/* History button with version badge */\n.mj-forms-btn--history {\n position: relative;\n}\n\n.mj-version-count-badge {\n position: absolute;\n top: -6px;\n right: -10px;\n padding: 0 5px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-success) 0%, color-mix(in srgb, var(--mj-status-success) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n height: 16px;\n border: 2px solid var(--mj-bg-surface-card);\n white-space: nowrap;\n line-height: 1;\n}\n\n.mj-list-count-badge {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n font-size: 10px;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n background: linear-gradient(135deg, var(--mj-status-info) 0%, color-mix(in srgb, var(--mj-status-info) 85%, black) 100%);\n border-radius: var(--mj-radius-full);\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--mj-bg-surface-card);\n}\n\n/* ============================================\n IS-A ENTITY HIERARCHY\n ============================================ */\n.mj-entity-hierarchy {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.mj-entity-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-semibold);\n border-radius: var(--mj-radius-sm);\n cursor: pointer;\n transition: all var(--mj-transition-base) ease;\n text-decoration: none;\n border: 1px solid transparent;\n}\n\n.mj-entity-badge i {\n font-size: 11px;\n}\n\n.mj-entity-badge--parent {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 10%, var(--mj-bg-surface));\n color: var(--mj-color-indigo-500);\n border-color: color-mix(in srgb, var(--mj-color-indigo-500) 25%, transparent);\n}\n\n.mj-entity-badge--parent:hover {\n background: color-mix(in srgb, var(--mj-color-indigo-500) 18%, var(--mj-bg-surface));\n border-color: var(--mj-color-indigo-500);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-color-indigo-500) 15%, transparent);\n}\n\n.mj-entity-badge--current {\n font-weight: var(--mj-font-semibold);\n font-size: 13px;\n color: var(--mj-text-primary);\n padding: 4px 8px;\n background: var(--mj-bg-surface-hover);\n border-radius: var(--mj-radius-sm);\n cursor: default;\n}\n\n.mj-entity-badge--child {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n border-color: color-mix(in srgb, var(--mj-status-info) 25%, transparent);\n}\n\n.mj-entity-badge--child:hover {\n background: color-mix(in srgb, var(--mj-status-info) 18%, var(--mj-bg-surface));\n border-color: var(--mj-status-info);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-info) 15%, transparent);\n}\n\n.mj-entity-badge--overlapping {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n border-color: color-mix(in srgb, var(--mj-status-warning) 40%, transparent);\n}\n\n.mj-entity-badge--overlapping:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 18%, var(--mj-bg-surface));\n border-color: color-mix(in srgb, var(--mj-status-warning) 85%, black);\n box-shadow: 0 2px 6px color-mix(in srgb, var(--mj-status-warning) 15%, transparent);\n}\n\n.mj-entity-badge-group {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n flex-wrap: wrap;\n}\n\n.mj-child-count {\n background: var(--mj-status-info);\n color: var(--mj-text-inverse);\n font-size: 10px;\n padding: 1px 5px;\n border-radius: var(--mj-radius-full);\n font-weight: var(--mj-font-bold);\n}\n\n.mj-entity-badge--leaf {\n border-style: dashed;\n}\n\n.mj-entity-badge--root {\n border-style: dashed;\n}\n\n.mj-hierarchy-arrow {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n\n/* Descendant chain tree (connecting lines when multiple chains branch) */\n.mj-descendant-chains {\n display: flex;\n flex-direction: column;\n gap: 6px;\n position: relative;\n padding-left: 20px;\n}\n\n/* Horizontal connector from parent entity badge to tree trunk */\n.mj-descendant-chains::before {\n content: '';\n position: absolute;\n left: -4px;\n top: 50%;\n width: 4px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n.mj-descendant-chain {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n position: relative;\n padding: 2px 0;\n}\n\n/* Horizontal branch line from trunk to chain content */\n.mj-descendant-chain::before {\n content: '';\n position: absolute;\n left: -20px;\n top: 50%;\n width: 18px;\n border-top: 1.5px solid var(--mj-text-muted);\n}\n\n/* Vertical trunk segment (each chain draws its portion) */\n.mj-descendant-chain::after {\n content: '';\n position: absolute;\n left: -20px;\n top: 0;\n bottom: 0;\n border-left: 1.5px solid var(--mj-text-muted);\n}\n\n/* First chain: trunk starts from center */\n.mj-descendant-chain:first-child::after {\n top: 50%;\n}\n\n/* Last chain: trunk ends at center */\n.mj-descendant-chain:last-child::after {\n bottom: 50%;\n}\n\n/* (dirty summary removed \u2014 now inline in edit banner) */\n\n/* ============================================\n SECTION CONTROLS\n ============================================ */\n.mj-section-controls {\n gap: 6px;\n}\n\n.mj-forms-search-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n}\n\n.mj-section-search {\n max-width: 180px;\n font-size: 13px;\n padding: 6px 28px 6px 8px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n background: var(--mj-bg-surface);\n outline: none;\n font-family: inherit;\n transition: all var(--mj-transition-base);\n}\n\n.mj-section-search:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Active filter highlight \u2014 matches the yellow used on matched panel/field names */\n.mj-section-search--active {\n background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 80%, black);\n font-weight: var(--mj-font-semibold);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n.mj-section-search::placeholder {\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.mj-clear-search {\n position: absolute;\n right: 4px;\n padding: 4px;\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: var(--mj-text-xs);\n line-height: 1;\n}\n\n.mj-clear-search:hover {\n color: var(--mj-text-secondary);\n}\n\n/* ============================================\n DIALOG (lightweight inline)\n ============================================ */\n.mj-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: mj-fade-in 150ms ease;\n}\n\n.mj-dialog {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-lg);\n min-width: 400px;\n max-width: 550px;\n animation: mj-slide-up 200ms ease;\n}\n\n.mj-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.mj-dialog-header h3 {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n}\n\n.mj-dialog-close {\n background: none;\n border: none;\n color: var(--mj-text-muted);\n cursor: pointer;\n padding: 4px;\n font-size: var(--mj-text-base);\n transition: color var(--mj-transition-base);\n}\n\n.mj-dialog-close:hover {\n color: var(--mj-text-primary);\n}\n\n.mj-dialog-body {\n padding: 20px;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-secondary);\n line-height: 1.6;\n}\n\n.mj-dialog-body p {\n margin: 0;\n}\n\n.mj-dialog-footer {\n display: flex;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n@keyframes mj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes mj-slide-up {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n"] }]
|
|
970
1023
|
}], null, { Form: [{
|
|
971
1024
|
type: Input
|
|
972
1025
|
}], _deprecatedForm: [{
|
|
@@ -990,6 +1043,12 @@ export class MjFormToolbarComponent {
|
|
|
990
1043
|
type: Input
|
|
991
1044
|
}], ListCount: [{
|
|
992
1045
|
type: Input
|
|
1046
|
+
}], TagCount: [{
|
|
1047
|
+
type: Input
|
|
1048
|
+
}], IsTagsPanelOpen: [{
|
|
1049
|
+
type: Input
|
|
1050
|
+
}], VersionCount: [{
|
|
1051
|
+
type: Input
|
|
993
1052
|
}], EntityInfo: [{
|
|
994
1053
|
type: Input
|
|
995
1054
|
}], Config: [{
|
|
@@ -1038,6 +1097,8 @@ export class MjFormToolbarComponent {
|
|
|
1038
1097
|
type: Output
|
|
1039
1098
|
}], ListManagementRequested: [{
|
|
1040
1099
|
type: Output
|
|
1100
|
+
}], TagsPanelToggled: [{
|
|
1101
|
+
type: Output
|
|
1041
1102
|
}], ShowChangesRequested: [{
|
|
1042
1103
|
type: Output
|
|
1043
1104
|
}], CustomButtonClick: [{
|