@memberjunction/ng-artifacts 5.47.0 → 5.49.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.
Files changed (11) hide show
  1. package/dist/lib/components/plugins/component-artifact-viewer.component.d.ts +23 -2
  2. package/dist/lib/components/plugins/component-artifact-viewer.component.d.ts.map +1 -1
  3. package/dist/lib/components/plugins/component-artifact-viewer.component.js +140 -65
  4. package/dist/lib/components/plugins/component-artifact-viewer.component.js.map +1 -1
  5. package/dist/lib/components/plugins/data-artifact-viewer.component.d.ts.map +1 -1
  6. package/dist/lib/components/plugins/data-artifact-viewer.component.js +16 -7
  7. package/dist/lib/components/plugins/data-artifact-viewer.component.js.map +1 -1
  8. package/dist/lib/services/interactive-form-apply.service.d.ts.map +1 -1
  9. package/dist/lib/services/interactive-form-apply.service.js +17 -9
  10. package/dist/lib/services/interactive-form-apply.service.js.map +1 -1
  11. package/package.json +21 -21
package/dist/lib/components/plugins/component-artifact-viewer.component.js CHANGED
@@ -18,9 +18,10 @@ import * as i2 from "@angular/common";
18
18
  import * as i3 from "@memberjunction/ng-base-forms";
19
19
  import * as i4 from "./component-feedback-panel/component-feedback-panel.component";
20
20
  const _c0 = ["reactComponent"];
21
+ const _c1 = ["interactiveForm"];
21
22
  const _forTrack0 = ($index, $item) => $item.ID;
22
23
  function ComponentArtifactViewerComponent_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
23
- i0.ɵɵelementStart(0, "details", 8)(1, "summary");
24
+ i0.ɵɵelementStart(0, "details", 9)(1, "summary");
24
25
  i0.ɵɵtext(2, "Technical Details");
25
26
  i0.ɵɵelementEnd();
26
27
  i0.ɵɵelementStart(3, "pre");
@@ -32,15 +33,15 @@ function ComponentArtifactViewerComponent_Conditional_2_Conditional_13_Template(
32
33
  i0.ɵɵtextInterpolate(ctx_r0.errorDetails);
33
34
  } }
34
35
  function ComponentArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
35
- i0.ɵɵelementStart(0, "div", 3);
36
- i0.ɵɵelement(1, "i", 6);
36
+ i0.ɵɵelementStart(0, "div", 4);
37
+ i0.ɵɵelement(1, "i", 7);
37
38
  i0.ɵɵelementStart(2, "h3");
38
39
  i0.ɵɵtext(3);
39
40
  i0.ɵɵelementEnd();
40
41
  i0.ɵɵelementStart(4, "p");
41
42
  i0.ɵɵtext(5, "This component could not be loaded. This usually happens when:");
42
43
  i0.ɵɵelementEnd();
43
- i0.ɵɵelementStart(6, "ul", 7)(7, "li");
44
+ i0.ɵɵelementStart(6, "ul", 8)(7, "li");
44
45
  i0.ɵɵtext(8, "The component registry is unavailable or unreachable");
45
46
  i0.ɵɵelementEnd();
46
47
  i0.ɵɵelementStart(9, "li");
@@ -49,7 +50,7 @@ function ComponentArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (
49
50
  i0.ɵɵelementStart(11, "li");
50
51
  i0.ɵɵtext(12, "There was a network error during component retrieval");
51
52
  i0.ɵɵelementEnd()();
52
- i0.ɵɵconditionalCreate(13, ComponentArtifactViewerComponent_Conditional_2_Conditional_13_Template, 5, 1, "details", 8);
53
+ i0.ɵɵconditionalCreate(13, ComponentArtifactViewerComponent_Conditional_2_Conditional_13_Template, 5, 1, "details", 9);
53
54
  i0.ɵɵelementEnd();
54
55
  } if (rf & 2) {
55
56
  const ctx_r0 = i0.ɵɵnextContext();
@@ -59,12 +60,12 @@ function ComponentArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (
59
60
  i0.ɵɵconditional(ctx_r0.errorDetails ? 13 : -1);
60
61
  } }
61
62
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
62
- i0.ɵɵelementStart(0, "span", 14);
63
+ i0.ɵɵelementStart(0, "span", 15);
63
64
  i0.ɵɵtext(1, "Mock");
64
65
  i0.ɵɵelementEnd();
65
66
  } }
66
67
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
67
- i0.ɵɵelementStart(0, "span", 16);
68
+ i0.ɵɵelementStart(0, "span", 17);
68
69
  i0.ɵɵtext(1);
69
70
  i0.ɵɵelementEnd();
70
71
  } if (rf & 2) {
@@ -73,8 +74,8 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template(
73
74
  i0.ɵɵtextInterpolate(ctx_r0.formEntityInfo.DisplayName || ctx_r0.formEntityInfo.Name);
74
75
  } }
75
76
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
76
- i0.ɵɵelementStart(0, "span", 17);
77
- i0.ɵɵelement(1, "i", 22);
77
+ i0.ɵɵelementStart(0, "span", 18);
78
+ i0.ɵɵelement(1, "i", 23);
78
79
  i0.ɵɵelementEnd();
79
80
  } if (rf & 2) {
80
81
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -82,17 +83,17 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template(
82
83
  } }
83
84
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
84
85
  const _r3 = i0.ɵɵgetCurrentView();
85
- i0.ɵɵelementStart(0, "button", 23);
86
+ i0.ɵɵelementStart(0, "button", 24);
86
87
  i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onApplyClicked()); });
87
- i0.ɵɵelement(1, "i", 24);
88
+ i0.ɵɵelement(1, "i", 25);
88
89
  i0.ɵɵtext(2, " Apply to my form ");
89
90
  i0.ɵɵelementEnd();
90
91
  } }
91
92
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
92
93
  const _r5 = i0.ɵɵgetCurrentView();
93
- i0.ɵɵelementStart(0, "li", 30);
94
+ i0.ɵɵelementStart(0, "li", 31);
94
95
  i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template_li_click_0_listener() { const r_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onPickerSelect(r_r6)); });
95
- i0.ɵɵelement(1, "i", 31);
96
+ i0.ɵɵelement(1, "i", 32);
96
97
  i0.ɵɵelementStart(2, "span");
97
98
  i0.ɵɵtext(3);
98
99
  i0.ɵɵelementEnd()();
@@ -102,8 +103,8 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Condition
102
103
  i0.ɵɵtextInterpolate(r_r6.Label);
103
104
  } }
104
105
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
105
- i0.ɵɵelementStart(0, "ul", 27);
106
- i0.ɵɵrepeaterCreate(1, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template, 4, 1, "li", 29, _forTrack0);
106
+ i0.ɵɵelementStart(0, "ul", 28);
107
+ i0.ɵɵrepeaterCreate(1, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template, 4, 1, "li", 30, _forTrack0);
107
108
  i0.ɵɵelementEnd();
108
109
  } if (rf & 2) {
109
110
  const ctx_r0 = i0.ɵɵnextContext(3);
@@ -111,23 +112,23 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Condition
111
112
  i0.ɵɵrepeater(ctx_r0.recordSearchResults);
112
113
  } }
113
114
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
114
- i0.ɵɵelementStart(0, "div", 28);
115
+ i0.ɵɵelementStart(0, "div", 29);
115
116
  i0.ɵɵtext(1, "No matches.");
116
117
  i0.ɵɵelementEnd();
117
118
  } }
118
119
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
119
- i0.ɵɵelementStart(0, "div", 28);
120
+ i0.ɵɵelementStart(0, "div", 29);
120
121
  i0.ɵɵtext(1, "Start typing to search.");
121
122
  i0.ɵɵelementEnd();
122
123
  } }
123
124
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
124
125
  const _r4 = i0.ɵɵgetCurrentView();
125
- i0.ɵɵelementStart(0, "div", 25);
126
+ i0.ɵɵelementStart(0, "div", 26);
126
127
  i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
127
- i0.ɵɵelementStart(1, "input", 26);
128
+ i0.ɵɵelementStart(1, "input", 27);
128
129
  i0.ɵɵlistener("input", function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onPickerSearchInput($event.target.value)); });
129
130
  i0.ɵɵelementEnd();
130
- i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_Template, 3, 0, "ul", 27)(3, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_3_Template, 2, 0, "div", 28)(4, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_4_Template, 2, 0, "div", 28);
131
+ i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_Template, 3, 0, "ul", 28)(3, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_3_Template, 2, 0, "div", 29)(4, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_4_Template, 2, 0, "div", 29);
131
132
  i0.ɵɵelementEnd();
132
133
  } if (rf & 2) {
133
134
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -137,8 +138,8 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template(
137
138
  i0.ɵɵconditional(ctx_r0.recordSearchResults.length > 0 ? 2 : ctx_r0.recordSearchTerm.length > 0 ? 3 : 4);
138
139
  } }
139
140
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
140
- i0.ɵɵelementStart(0, "div", 21);
141
- i0.ɵɵelement(1, "mj-interactive-form", 32);
141
+ i0.ɵɵelementStart(0, "div", 22);
142
+ i0.ɵɵelement(1, "mj-interactive-form", 33, 0);
142
143
  i0.ɵɵelementEnd();
143
144
  } if (rf & 2) {
144
145
  const ctx_r0 = i0.ɵɵnextContext(2);
@@ -146,8 +147,8 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template(
146
147
  i0.ɵɵproperty("componentSpec", ctx_r0.component)("record", ctx_r0.formRecord);
147
148
  } }
148
149
  function ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
149
- i0.ɵɵelementStart(0, "div", 3);
150
- i0.ɵɵelement(1, "i", 33);
150
+ i0.ɵɵelementStart(0, "div", 4);
151
+ i0.ɵɵelement(1, "i", 34);
151
152
  i0.ɵɵelementStart(2, "h3");
152
153
  i0.ɵɵtext(3, "Form preview unavailable");
153
154
  i0.ɵɵelementEnd();
@@ -161,27 +162,27 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template(
161
162
  } }
162
163
  function ComponentArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
163
164
  const _r2 = i0.ɵɵgetCurrentView();
164
- i0.ɵɵelementStart(0, "div", 9);
165
- i0.ɵɵelement(1, "i", 10);
166
- i0.ɵɵelementStart(2, "span", 11);
165
+ i0.ɵɵelementStart(0, "div", 10);
166
+ i0.ɵɵelement(1, "i", 11);
167
+ i0.ɵɵelementStart(2, "span", 12);
167
168
  i0.ɵɵtext(3, "Previewing record:");
168
169
  i0.ɵɵelementEnd();
169
- i0.ɵɵelementStart(4, "button", 12);
170
+ i0.ɵɵelementStart(4, "button", 13);
170
171
  i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_3_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.showRecordPicker = !ctx_r0.showRecordPicker); });
171
- i0.ɵɵelement(5, "i", 13);
172
+ i0.ɵɵelement(5, "i", 14);
172
173
  i0.ɵɵelementStart(6, "strong");
173
174
  i0.ɵɵtext(7);
174
175
  i0.ɵɵelementEnd();
175
- i0.ɵɵconditionalCreate(8, ComponentArtifactViewerComponent_Conditional_3_Conditional_8_Template, 2, 0, "span", 14);
176
- i0.ɵɵelement(9, "i", 15);
176
+ i0.ɵɵconditionalCreate(8, ComponentArtifactViewerComponent_Conditional_3_Conditional_8_Template, 2, 0, "span", 15);
177
+ i0.ɵɵelement(9, "i", 16);
177
178
  i0.ɵɵelementEnd();
178
- i0.ɵɵconditionalCreate(10, ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template, 2, 1, "span", 16);
179
- i0.ɵɵconditionalCreate(11, ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template, 2, 1, "span", 17);
180
- i0.ɵɵelement(12, "span", 18);
181
- i0.ɵɵconditionalCreate(13, ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template, 3, 0, "button", 19);
179
+ i0.ɵɵconditionalCreate(10, ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template, 2, 1, "span", 17);
180
+ i0.ɵɵconditionalCreate(11, ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template, 2, 1, "span", 18);
181
+ i0.ɵɵelement(12, "span", 19);
182
+ i0.ɵɵconditionalCreate(13, ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template, 3, 0, "button", 20);
182
183
  i0.ɵɵelementEnd();
183
- i0.ɵɵconditionalCreate(14, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template, 5, 2, "div", 20);
184
- i0.ɵɵconditionalCreate(15, ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template, 2, 2, "div", 21)(16, ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template, 6, 1, "div", 3);
184
+ i0.ɵɵconditionalCreate(14, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template, 5, 2, "div", 21);
185
+ i0.ɵɵconditionalCreate(15, ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template, 3, 2, "div", 22)(16, ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template, 6, 1, "div", 4);
185
186
  } if (rf & 2) {
186
187
  const ctx_r0 = i0.ɵɵnextContext();
187
188
  i0.ɵɵadvance(7);
@@ -201,7 +202,7 @@ function ComponentArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (
201
202
  } }
202
203
  function ComponentArtifactViewerComponent_Conditional_4_Conditional_7_For_5_Template(rf, ctx) { if (rf & 1) {
203
204
  i0.ɵɵelementStart(0, "li");
204
- i0.ɵɵelement(1, "i", 39);
205
+ i0.ɵɵelement(1, "i", 40);
205
206
  i0.ɵɵtext(2);
206
207
  i0.ɵɵelementEnd();
207
208
  } if (rf & 2) {
@@ -210,7 +211,7 @@ function ComponentArtifactViewerComponent_Conditional_4_Conditional_7_For_5_Temp
210
211
  i0.ɵɵtextInterpolate1(" ", entity_r7);
211
212
  } }
212
213
  function ComponentArtifactViewerComponent_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
213
- i0.ɵɵelementStart(0, "div", 36)(1, "span", 38);
214
+ i0.ɵɵelementStart(0, "div", 37)(1, "span", 39);
214
215
  i0.ɵɵtext(2, "Entities");
215
216
  i0.ɵɵelementEnd();
216
217
  i0.ɵɵelementStart(3, "ul");
@@ -223,7 +224,7 @@ function ComponentArtifactViewerComponent_Conditional_4_Conditional_7_Template(r
223
224
  } }
224
225
  function ComponentArtifactViewerComponent_Conditional_4_Conditional_8_For_5_Template(rf, ctx) { if (rf & 1) {
225
226
  i0.ɵɵelementStart(0, "li");
226
- i0.ɵɵelement(1, "i", 40);
227
+ i0.ɵɵelement(1, "i", 41);
227
228
  i0.ɵɵtext(2);
228
229
  i0.ɵɵelementEnd();
229
230
  } if (rf & 2) {
@@ -232,7 +233,7 @@ function ComponentArtifactViewerComponent_Conditional_4_Conditional_8_For_5_Temp
232
233
  i0.ɵɵtextInterpolate1(" ", query_r8);
233
234
  } }
234
235
  function ComponentArtifactViewerComponent_Conditional_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
235
- i0.ɵɵelementStart(0, "div", 36)(1, "span", 38);
236
+ i0.ɵɵelementStart(0, "div", 37)(1, "span", 39);
236
237
  i0.ɵɵtext(2, "Queries");
237
238
  i0.ɵɵelementEnd();
238
239
  i0.ɵɵelementStart(3, "ul");
@@ -244,8 +245,8 @@ function ComponentArtifactViewerComponent_Conditional_4_Conditional_8_Template(r
244
245
  i0.ɵɵrepeater(ctx_r0.permissionResult.missingQueries);
245
246
  } }
246
247
  function ComponentArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
247
- i0.ɵɵelementStart(0, "div", 4)(1, "div", 34);
248
- i0.ɵɵelement(2, "i", 35);
248
+ i0.ɵɵelementStart(0, "div", 5)(1, "div", 35);
249
+ i0.ɵɵelement(2, "i", 36);
249
250
  i0.ɵɵelementEnd();
250
251
  i0.ɵɵelementStart(3, "h3");
251
252
  i0.ɵɵtext(4, "Insufficient Permissions");
@@ -253,9 +254,9 @@ function ComponentArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (
253
254
  i0.ɵɵelementStart(5, "p");
254
255
  i0.ɵɵtext(6, "This component requires data access that you don't currently have:");
255
256
  i0.ɵɵelementEnd();
256
- i0.ɵɵconditionalCreate(7, ComponentArtifactViewerComponent_Conditional_4_Conditional_7_Template, 6, 0, "div", 36);
257
- i0.ɵɵconditionalCreate(8, ComponentArtifactViewerComponent_Conditional_4_Conditional_8_Template, 6, 0, "div", 36);
258
- i0.ɵɵelementStart(9, "p", 37);
257
+ i0.ɵɵconditionalCreate(7, ComponentArtifactViewerComponent_Conditional_4_Conditional_7_Template, 6, 0, "div", 37);
258
+ i0.ɵɵconditionalCreate(8, ComponentArtifactViewerComponent_Conditional_4_Conditional_8_Template, 6, 0, "div", 37);
259
+ i0.ɵɵelementStart(9, "p", 38);
259
260
  i0.ɵɵtext(10, "Contact your administrator to request access.");
260
261
  i0.ɵɵelementEnd()();
261
262
  } if (rf & 2) {
@@ -267,7 +268,7 @@ function ComponentArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (
267
268
  } }
268
269
  function ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template(rf, ctx) { if (rf & 1) {
269
270
  const _r9 = i0.ɵɵgetCurrentView();
270
- i0.ɵɵelementStart(0, "mj-react-component", 43, 0);
271
+ i0.ɵɵelementStart(0, "mj-react-component", 44, 1);
271
272
  i0.ɵɵlistener("componentEvent", function ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onComponentEvent($event)); })("openEntityRecord", function ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("initialized", function ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template_mj_react_component_initialized_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onReactComponentInitialized()); });
272
273
  i0.ɵɵelementEnd();
273
274
  } if (rf & 2) {
@@ -275,8 +276,8 @@ function ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template(r
275
276
  i0.ɵɵproperty("component", ctx_r0.component);
276
277
  } }
277
278
  function ComponentArtifactViewerComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
278
- i0.ɵɵelementStart(0, "div", 42);
279
- i0.ɵɵelement(1, "i", 44);
279
+ i0.ɵɵelementStart(0, "div", 43);
280
+ i0.ɵɵelement(1, "i", 45);
280
281
  i0.ɵɵelementStart(2, "h3");
281
282
  i0.ɵɵtext(3, "Component Specification");
282
283
  i0.ɵɵelementEnd();
@@ -288,8 +289,8 @@ function ComponentArtifactViewerComponent_Conditional_5_Conditional_1_Template(r
288
289
  i0.ɵɵelementEnd()();
289
290
  } }
290
291
  function ComponentArtifactViewerComponent_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
291
- i0.ɵɵelementStart(0, "div", 3);
292
- i0.ɵɵelement(1, "i", 33);
292
+ i0.ɵɵelementStart(0, "div", 4);
293
+ i0.ɵɵelement(1, "i", 34);
293
294
  i0.ɵɵelementStart(2, "h3");
294
295
  i0.ɵɵtext(3, "No Component Loaded");
295
296
  i0.ɵɵelementEnd();
@@ -298,14 +299,14 @@ function ComponentArtifactViewerComponent_Conditional_5_Conditional_2_Template(r
298
299
  i0.ɵɵelementEnd()();
299
300
  } }
300
301
  function ComponentArtifactViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
301
- i0.ɵɵconditionalCreate(0, ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template, 2, 1, "mj-react-component", 41)(1, ComponentArtifactViewerComponent_Conditional_5_Conditional_1_Template, 8, 0, "div", 42)(2, ComponentArtifactViewerComponent_Conditional_5_Conditional_2_Template, 6, 0, "div", 3);
302
+ i0.ɵɵconditionalCreate(0, ComponentArtifactViewerComponent_Conditional_5_Conditional_0_Template, 2, 1, "mj-react-component", 42)(1, ComponentArtifactViewerComponent_Conditional_5_Conditional_1_Template, 8, 0, "div", 43)(2, ComponentArtifactViewerComponent_Conditional_5_Conditional_2_Template, 6, 0, "div", 4);
302
303
  } if (rf & 2) {
303
304
  const ctx_r0 = i0.ɵɵnextContext();
304
305
  i0.ɵɵconditional(ctx_r0.component && (ctx_r0.component.code || ctx_r0.component.namespace) ? 0 : ctx_r0.component ? 1 : 2);
305
306
  } }
306
307
  function ComponentArtifactViewerComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
307
308
  const _r10 = i0.ɵɵgetCurrentView();
308
- i0.ɵɵelementStart(0, "mj-component-feedback-panel", 45);
309
+ i0.ɵɵelementStart(0, "mj-component-feedback-panel", 46);
309
310
  i0.ɵɵlistener("Closed", function ComponentArtifactViewerComponent_Conditional_6_Template_mj_component_feedback_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowFeedbackPanel = false); });
310
311
  i0.ɵɵelementEnd();
311
312
  } if (rf & 2) {
@@ -324,6 +325,7 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
324
325
  adapter;
325
326
  cdr;
326
327
  reactComponent;
328
+ interactiveForm;
327
329
  tabsChanged = new EventEmitter();
328
330
  openEntityRecord = new EventEmitter();
329
331
  /**
@@ -801,26 +803,96 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
801
803
  LogError(`ComponentArtifactViewer: failed to load picked record ${item.ID}: ${err instanceof Error ? err.message : String(err)}`);
802
804
  }
803
805
  }
804
- /** Bubble Apply intent up to the host (Form Builder dashboard / Sage chat). */
805
- onApplyClicked() {
806
- if (!this.component || !this.formEntityInfo)
806
+ /**
807
+ * Bubble Apply intent up to the host (Form Builder dashboard / Sage chat).
808
+ *
809
+ * Resolves the full ComponentSpec (with code) from multiple sources:
810
+ * 1. resolvedComponentSpec — live React bridge or cached copy (best for non-form artifacts)
811
+ * 2. Re-parse artifact version Content — the agent stores the full spec including code
812
+ * 3. DB fallback — fetch from MJ: Components by name
813
+ *
814
+ * Source #2 covers the common form-artifact case where the React component lives inside
815
+ * <mj-interactive-form> and resolvedComponentSpec falls back to the stripped local spec.
816
+ */
817
+ async onApplyClicked() {
818
+ if (!this.formEntityInfo)
819
+ return;
820
+ const spec = await this.resolveSpecWithCode();
821
+ if (!spec)
807
822
  return;
808
823
  this.applyFormRequested.emit({
809
- spec: this.component,
824
+ spec,
810
825
  entityName: this.formEntityInfo.Name,
811
826
  });
812
827
  }
828
+ /**
829
+ * Resolve a ComponentSpec that includes code, trying multiple sources in order.
830
+ */
831
+ async resolveSpecWithCode() {
832
+ // 1. Prefer the live React bridge's resolved spec (non-form path).
833
+ const resolved = this.resolvedComponentSpec;
834
+ if (resolved?.code)
835
+ return resolved;
836
+ // 2. For form artifacts, the React component lives inside <mj-interactive-form>.
837
+ // Reach into it to get the resolved spec from the component registry.
838
+ const formReactSpec = this.interactiveForm?.reactComponent?.resolvedComponentSpec;
839
+ if (formReactSpec?.code)
840
+ return formReactSpec;
841
+ // 3. Re-parse the artifact version's Content directly — the agent stores the
842
+ // full spec including code. This handles the case where loadComponentSpec()
843
+ // parsed early (before Content was fully populated) and the in-memory
844
+ // `this.component` ended up without code.
845
+ if (this.artifactVersion?.Content) {
846
+ const freshParse = SafeJSONParse(this.artifactVersion.Content);
847
+ if (freshParse?.code)
848
+ return freshParse;
849
+ }
850
+ // 4. DB fallback — fetch from MJ: Components by name.
851
+ const name = resolved?.name ?? this.component?.name;
852
+ if (name) {
853
+ const dbSpec = await this.fetchFullSpecByName(name);
854
+ if (dbSpec?.code)
855
+ return dbSpec;
856
+ }
857
+ LogError('ComponentArtifactViewer: could not resolve spec with code for Apply');
858
+ return null;
859
+ }
860
+ /**
861
+ * Fetch the full ComponentSpec (including code) from the MJ: Components table
862
+ * by component name. Returns null if not found or on error.
863
+ */
864
+ async fetchFullSpecByName(name) {
865
+ try {
866
+ const rv = new RunView();
867
+ const result = await rv.RunView({
868
+ EntityName: 'MJ: Components',
869
+ ExtraFilter: `Name='${name.replace(/'/g, "''")}'`,
870
+ Fields: ['Specification'],
871
+ OrderBy: 'VersionSequence DESC',
872
+ MaxRows: 1,
873
+ ResultType: 'simple',
874
+ });
875
+ if (result.Success && result.Results?.length > 0 && result.Results[0].Specification) {
876
+ return JSON.parse(result.Results[0].Specification);
877
+ }
878
+ }
879
+ catch (err) {
880
+ LogError(`ComponentArtifactViewer: failed to fetch full spec for '${name}': ${err instanceof Error ? err.message : String(err)}`);
881
+ }
882
+ return null;
883
+ }
813
884
  static ɵfac = function ComponentArtifactViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentArtifactViewerComponent)(i0.ɵɵdirectiveInject(i1.AngularAdapterService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
814
885
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentArtifactViewerComponent, selectors: [["mj-component-artifact-viewer"]], viewQuery: function ComponentArtifactViewerComponent_Query(rf, ctx) { if (rf & 1) {
815
- i0.ɵɵviewQuery(_c0, 5);
886
+ i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
816
887
  } if (rf & 2) {
817
888
  let _t;
818
889
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponent = _t.first);
819
- } }, outputs: { tabsChanged: "tabsChanged", openEntityRecord: "openEntityRecord", applyFormRequested: "applyFormRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 7, vars: 3, consts: [["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-preview"], [1, "error-state"], [1, "permission-warning"], [3, "ComponentSpec", "ReactContainerElement"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "text-align", "left", "max-width", "500px", "color", "var(--mj-text-muted)", "line-height", "1.6"], [2, "margin-top", "20px"], [1, "form-artifact-toolstrip"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-info"], [1, "form-artifact-toolstrip-label"], ["type", "button", 1, "form-artifact-picker-chip", 3, "click"], [1, "fa-solid", "fa-magnifying-glass"], [1, "form-artifact-picker-chip-badge"], [1, "fa-solid", "fa-chevron-down"], [1, "form-artifact-toolstrip-entity"], [1, "form-artifact-toolstrip-warning", 3, "title"], [2, "flex", "1"], ["type", "button", 1, "form-artifact-apply-btn"], [1, "form-artifact-picker-panel"], [1, "form-artifact-form-host"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "button", 1, "form-artifact-apply-btn", 3, "click"], [1, "fa-solid", "fa-circle-check"], [1, "form-artifact-picker-panel", 3, "click"], ["type", "text", "placeholder", "Search records by name\u2026", 1, "form-artifact-picker-search", 3, "input", "value"], [1, "form-artifact-picker-results"], [1, "form-artifact-picker-empty"], [1, "form-artifact-picker-row"], [1, "form-artifact-picker-row", 3, "click"], [1, "fa-solid", "fa-circle-dot"], [3, "componentSpec", "record"], [1, "fa-solid", "fa-exclamation-circle"], [1, "permission-warning-icon"], [1, "fa-solid", "fa-shield-halved"], [1, "permission-warning-section"], [1, "permission-warning-hint"], [1, "permission-warning-section-label"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-database"], [3, "component"], [1, "no-code-state"], [3, "componentEvent", "openEntityRecord", "initialized", "component"], [1, "fa-solid", "fa-file-lines"], [3, "Closed", "ComponentSpec", "ReactContainerElement"]], template: function ComponentArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
820
- i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
821
- i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_2_Template, 14, 2, "div", 3)(3, ComponentArtifactViewerComponent_Conditional_3_Template, 17, 7)(4, ComponentArtifactViewerComponent_Conditional_4_Template, 11, 2, "div", 4)(5, ComponentArtifactViewerComponent_Conditional_5_Template, 3, 1);
890
+ i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.interactiveForm = _t.first);
891
+ } }, outputs: { tabsChanged: "tabsChanged", openEntityRecord: "openEntityRecord", applyFormRequested: "applyFormRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 7, vars: 3, consts: [["interactiveForm", ""], ["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-preview"], [1, "error-state"], [1, "permission-warning"], [3, "ComponentSpec", "ReactContainerElement"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "text-align", "left", "max-width", "500px", "color", "var(--mj-text-muted)", "line-height", "1.6"], [2, "margin-top", "20px"], [1, "form-artifact-toolstrip"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-info"], [1, "form-artifact-toolstrip-label"], ["type", "button", 1, "form-artifact-picker-chip", 3, "click"], [1, "fa-solid", "fa-magnifying-glass"], [1, "form-artifact-picker-chip-badge"], [1, "fa-solid", "fa-chevron-down"], [1, "form-artifact-toolstrip-entity"], [1, "form-artifact-toolstrip-warning", 3, "title"], [2, "flex", "1"], ["type", "button", 1, "form-artifact-apply-btn"], [1, "form-artifact-picker-panel"], [1, "form-artifact-form-host"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "button", 1, "form-artifact-apply-btn", 3, "click"], [1, "fa-solid", "fa-circle-check"], [1, "form-artifact-picker-panel", 3, "click"], ["type", "text", "placeholder", "Search records by name\u2026", 1, "form-artifact-picker-search", 3, "input", "value"], [1, "form-artifact-picker-results"], [1, "form-artifact-picker-empty"], [1, "form-artifact-picker-row"], [1, "form-artifact-picker-row", 3, "click"], [1, "fa-solid", "fa-circle-dot"], [3, "componentSpec", "record"], [1, "fa-solid", "fa-exclamation-circle"], [1, "permission-warning-icon"], [1, "fa-solid", "fa-shield-halved"], [1, "permission-warning-section"], [1, "permission-warning-hint"], [1, "permission-warning-section-label"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-database"], [3, "component"], [1, "no-code-state"], [3, "componentEvent", "openEntityRecord", "initialized", "component"], [1, "fa-solid", "fa-file-lines"], [3, "Closed", "ComponentSpec", "ReactContainerElement"]], template: function ComponentArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
892
+ i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
893
+ i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_2_Template, 14, 2, "div", 4)(3, ComponentArtifactViewerComponent_Conditional_3_Template, 17, 7)(4, ComponentArtifactViewerComponent_Conditional_4_Template, 11, 2, "div", 5)(5, ComponentArtifactViewerComponent_Conditional_5_Template, 3, 1);
822
894
  i0.ɵɵelementEnd();
823
- i0.ɵɵconditionalCreate(6, ComponentArtifactViewerComponent_Conditional_6_Template, 1, 2, "mj-component-feedback-panel", 5);
895
+ i0.ɵɵconditionalCreate(6, ComponentArtifactViewerComponent_Conditional_6_Template, 1, 2, "mj-component-feedback-panel", 6);
824
896
  i0.ɵɵelementEnd();
825
897
  } if (rf & 2) {
826
898
  i0.ɵɵproperty("ngClass", ctx.cssClass);
@@ -828,7 +900,7 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
828
900
  i0.ɵɵconditional(ctx.hasError ? 2 : ctx.isFormArtifact ? 3 : ctx.isPermissionBlocked ? 4 : 5);
829
901
  i0.ɵɵadvance(4);
830
902
  i0.ɵɵconditional(ctx.ShowFeedbackPanel && ctx.resolvedComponentSpec ? 6 : -1);
831
- } }, dependencies: [i2.NgClass, i1.MJReactComponent, i3.InteractiveFormComponent, i4.ComponentFeedbackPanelComponent], styles: [".component-artifact-viewer[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background: var(--mj-bg-surface);\n}\n\n.component-preview[_ngcontent-%COMP%] {\n flex: 1;\n padding: 15px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n\n\n.component-preview[_ngcontent-%COMP%] mj-react-component[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-status-error);\n flex: 1;\n min-height: 300px;\n}\n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n}\n.error-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n}\n.error-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n color: var(--mj-text-muted);\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] {\n margin-top: 16px;\n text-align: left;\n max-width: 600px;\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] {\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n border-radius: 4px;\n overflow-x: auto;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n.no-code-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-text-muted);\n flex: 1;\n}\n.no-code-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n.no-code-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-secondary);\n}\n.no-code-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n\n\n\n\n.form-artifact-toolstrip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n.form-artifact-toolstrip-label[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.form-artifact-toolstrip-entity[_ngcontent-%COMP%] {\n margin-left: 4px;\n padding: 2px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n border-radius: 999px;\n font-size: 11px;\n font-weight: 600;\n}\n.form-artifact-toolstrip-warning[_ngcontent-%COMP%] {\n color: var(--mj-status-warning-text);\n}\n\n.form-artifact-picker-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n.form-artifact-picker-chip[_ngcontent-%COMP%]:hover, \n.form-artifact-picker-chip[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-border-focus);\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-chip[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n.form-artifact-picker-chip-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning-text);\n border: 1px solid var(--mj-status-warning-border);\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 999px;\n}\n\n.form-artifact-apply-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse, #ffffff);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-md, 8px);\n padding: 5px 12px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n}\n.form-artifact-apply-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.form-artifact-picker-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 10px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.form-artifact-picker-search[_ngcontent-%COMP%] {\n width: 100%;\n padding: 7px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n background: var(--mj-bg-surface);\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n.form-artifact-picker-search[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-results[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.form-artifact-picker-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 13px;\n}\n.form-artifact-picker-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n.form-artifact-picker-row[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n.form-artifact-picker-empty[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n.form-artifact-form-host[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n background: var(--mj-bg-page);\n}\n\n\n\n\n\n\n\n\n.permission-warning[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n flex: 1;\n min-height: 300px;\n}\n.permission-warning-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-status-warning-text, #b45309);\n}\n.permission-warning[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-primary);\n}\n.permission-warning[_ngcontent-%COMP%] > p[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-text-muted);\n}\n.permission-warning-section[_ngcontent-%COMP%] {\n text-align: left;\n max-width: 400px;\n width: 100%;\n margin-bottom: 12px;\n}\n.permission-warning-section-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n.permission-warning-section[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.permission-warning-section[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken, var(--mj-bg-surface));\n border-radius: 6px;\n}\n.permission-warning-section[_ngcontent-%COMP%] li[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning-text, #b45309);\n font-size: 12px;\n}\n.permission-warning-hint[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}"] });
903
+ } }, dependencies: [i2.NgClass, i1.MJReactComponent, i3.InteractiveFormComponent, i4.ComponentFeedbackPanelComponent], styles: [".component-artifact-viewer[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background: var(--mj-bg-surface);\n}\n\n.component-preview[_ngcontent-%COMP%] {\n flex: 1;\n padding: 15px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n\n\n.component-preview[_ngcontent-%COMP%] mj-react-component[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.error-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-status-error);\n flex: 1;\n min-height: 300px;\n}\n.error-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n}\n.error-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n}\n.error-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n color: var(--mj-text-muted);\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] {\n margin-top: 16px;\n text-align: left;\n max-width: 600px;\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] summary[_ngcontent-%COMP%] {\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] summary[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n.error-state[_ngcontent-%COMP%] details[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n border-radius: 4px;\n overflow-x: auto;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n.no-code-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-text-muted);\n flex: 1;\n}\n.no-code-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n.no-code-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-secondary);\n}\n.no-code-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n\n\n\n\n.form-artifact-toolstrip[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n.form-artifact-toolstrip-label[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.form-artifact-toolstrip-entity[_ngcontent-%COMP%] {\n margin-left: 4px;\n padding: 2px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n border-radius: 999px;\n font-size: 11px;\n font-weight: 600;\n}\n.form-artifact-toolstrip-warning[_ngcontent-%COMP%] {\n color: var(--mj-status-warning-text);\n}\n\n.form-artifact-picker-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n.form-artifact-picker-chip[_ngcontent-%COMP%]:hover, \n.form-artifact-picker-chip[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-border-focus);\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-chip[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n.form-artifact-picker-chip-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning-text);\n border: 1px solid var(--mj-status-warning-border);\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 999px;\n}\n\n.form-artifact-apply-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse, #ffffff);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-md, 8px);\n padding: 5px 12px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n}\n.form-artifact-apply-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.form-artifact-picker-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 10px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.form-artifact-picker-search[_ngcontent-%COMP%] {\n width: 100%;\n padding: 7px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n background: var(--mj-bg-surface);\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n.form-artifact-picker-search[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-results[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.form-artifact-picker-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 13px;\n}\n.form-artifact-picker-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n.form-artifact-picker-row[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n.form-artifact-picker-empty[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n.form-artifact-form-host[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n background: var(--mj-bg-page);\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n\n\n\n\n\n\n\n.permission-warning[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n flex: 1;\n min-height: 300px;\n}\n.permission-warning-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-status-warning-text, #b45309);\n}\n.permission-warning[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-primary);\n}\n.permission-warning[_ngcontent-%COMP%] > p[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-text-muted);\n}\n.permission-warning-section[_ngcontent-%COMP%] {\n text-align: left;\n max-width: 400px;\n width: 100%;\n margin-bottom: 12px;\n}\n.permission-warning-section-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n.permission-warning-section[_ngcontent-%COMP%] ul[_ngcontent-%COMP%] {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.permission-warning-section[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken, var(--mj-bg-surface));\n border-radius: 6px;\n}\n.permission-warning-section[_ngcontent-%COMP%] li[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning-text, #b45309);\n font-size: 12px;\n}\n.permission-warning-hint[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}"] });
832
904
  };
833
905
  ComponentArtifactViewerComponent = __decorate([
834
906
  RegisterClass(BaseArtifactViewerPluginComponent, 'ComponentArtifactViewerPlugin')
@@ -836,10 +908,13 @@ ComponentArtifactViewerComponent = __decorate([
836
908
  export { ComponentArtifactViewerComponent };
837
909
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentArtifactViewerComponent, [{
838
910
  type: Component,
839
- args: [{ standalone: false, selector: 'mj-component-artifact-viewer', template: "<div class=\"component-artifact-viewer\" [ngClass]=\"cssClass\">\n <!-- Component Preview (full screen) -->\n <div class=\"component-preview\">\n @if (hasError) {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <h3>{{ errorMessage }}</h3>\n <p>This component could not be loaded. This usually happens when:</p>\n <ul style=\"text-align: left; max-width: 500px; color: var(--mj-text-muted); line-height: 1.6;\">\n <li>The component registry is unavailable or unreachable</li>\n <li>The component version does not exist in the registry</li>\n <li>There was a network error during component retrieval</li>\n </ul>\n @if (errorDetails) {\n <details style=\"margin-top: 20px;\">\n <summary>Technical Details</summary>\n <pre>{{ errorDetails }}</pre>\n </details>\n }\n </div>\n } @else if (isFormArtifact) {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FORM-AWARE BRANCH\n Spec declares componentRole: 'form'. Render via\n <mj-interactive-form> bound to a real Top-1 record\n (or a synthetic NewRecord fallback). Picker chip\n lets the user swap records; Apply promotes the\n spec to an EntityFormOverride.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"form-artifact-toolstrip\">\n <i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\"></i>\n <span class=\"form-artifact-toolstrip-label\">Previewing record:</span>\n <button\n type=\"button\"\n class=\"form-artifact-picker-chip\"\n (click)=\"showRecordPicker = !showRecordPicker\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <strong>{{ formRecordLabel || 'No record' }}</strong>\n @if (!formRecordIsReal) {\n <span class=\"form-artifact-picker-chip-badge\">Mock</span>\n }\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n @if (formEntityInfo) {\n <span class=\"form-artifact-toolstrip-entity\">{{ formEntityInfo.DisplayName || formEntityInfo.Name }}</span>\n }\n @if (formInitError) {\n <span class=\"form-artifact-toolstrip-warning\" [title]=\"formInitError\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n </span>\n }\n <span style=\"flex: 1;\"></span>\n @if (formEntityInfo) {\n <button\n type=\"button\"\n class=\"form-artifact-apply-btn\"\n (click)=\"onApplyClicked()\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Apply to my form\n </button>\n }\n </div>\n\n @if (showRecordPicker && formEntityInfo) {\n <div class=\"form-artifact-picker-panel\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"text\"\n class=\"form-artifact-picker-search\"\n placeholder=\"Search records by name\u2026\"\n [value]=\"recordSearchTerm\"\n (input)=\"onPickerSearchInput($any($event.target).value)\" />\n @if (recordSearchResults.length > 0) {\n <ul class=\"form-artifact-picker-results\">\n @for (r of recordSearchResults; track r.ID) {\n <li\n class=\"form-artifact-picker-row\"\n (click)=\"onPickerSelect(r)\">\n <i class=\"fa-solid fa-circle-dot\"></i>\n <span>{{ r.Label }}</span>\n </li>\n }\n </ul>\n } @else if (recordSearchTerm.length > 0) {\n <div class=\"form-artifact-picker-empty\">No matches.</div>\n } @else {\n <div class=\"form-artifact-picker-empty\">Start typing to search.</div>\n }\n </div>\n }\n\n @if (formRecord && component) {\n <div class=\"form-artifact-form-host\">\n <mj-interactive-form\n [componentSpec]=\"component\"\n [record]=\"formRecord\">\n </mj-interactive-form>\n </div>\n } @else {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <h3>Form preview unavailable</h3>\n <p>{{ formInitError || 'Could not bind a record to this form.' }}</p>\n </div>\n }\n } @else if (isPermissionBlocked) {\n <!-- Permission warning \u2014 user lacks access to one or more data sources -->\n <div class=\"permission-warning\">\n <div class=\"permission-warning-icon\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n </div>\n <h3>Insufficient Permissions</h3>\n <p>This component requires data access that you don't currently have:</p>\n\n @if (permissionResult!.missingEntities.length > 0) {\n <div class=\"permission-warning-section\">\n <span class=\"permission-warning-section-label\">Entities</span>\n <ul>\n @for (entity of permissionResult!.missingEntities; track entity) {\n <li><i class=\"fa-solid fa-table\"></i> {{ entity }}</li>\n }\n </ul>\n </div>\n }\n\n @if (permissionResult!.missingQueries.length > 0) {\n <div class=\"permission-warning-section\">\n <span class=\"permission-warning-section-label\">Queries</span>\n <ul>\n @for (query of permissionResult!.missingQueries; track query) {\n <li><i class=\"fa-solid fa-database\"></i> {{ query }}</li>\n }\n </ul>\n </div>\n }\n\n <p class=\"permission-warning-hint\">Contact your administrator to request access.</p>\n </div>\n } @else {\n <!-- Default (non-form) interactive component path -->\n @if (component && (component.code || component.namespace)) {\n <mj-react-component\n #reactComponent\n [component]=\"component\"\n (componentEvent)=\"onComponentEvent($event)\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (initialized)=\"onReactComponentInitialized()\">\n </mj-react-component>\n } @else if (component) {\n <!-- Component spec exists but no code - show informational message -->\n <div class=\"no-code-state\">\n <i class=\"fa-solid fa-file-lines\"></i>\n <h3>Component Specification</h3>\n <p>This component has specifications but no executable code yet.</p>\n <p>View the Functional, Data, or Spec tabs for details.</p>\n </div>\n } @else {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <h3>No Component Loaded</h3>\n <p>The component data is missing or invalid.</p>\n </div>\n }\n }\n </div>\n\n <!-- Feedback overlay panel (invoked from header button via AskUserForFeedback) -->\n @if (ShowFeedbackPanel && resolvedComponentSpec) {\n <mj-component-feedback-panel\n [ComponentSpec]=\"resolvedComponentSpec\"\n [ReactContainerElement]=\"reactComponent?.container?.nativeElement || null\"\n (Closed)=\"ShowFeedbackPanel = false\">\n </mj-component-feedback-panel>\n }\n</div>\n", styles: [".component-artifact-viewer {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background: var(--mj-bg-surface);\n}\n\n.component-preview {\n flex: 1;\n padding: 15px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n\n/* Ensure React component takes full height */\n.component-preview mj-react-component {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-status-error);\n flex: 1;\n min-height: 300px;\n}\n.error-state i {\n font-size: 48px;\n margin-bottom: 16px;\n}\n.error-state h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n}\n.error-state p {\n margin: 0 0 12px 0;\n color: var(--mj-text-muted);\n}\n.error-state details {\n margin-top: 16px;\n text-align: left;\n max-width: 600px;\n}\n.error-state details summary {\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.error-state details summary:hover {\n color: var(--mj-text-primary);\n}\n.error-state details pre {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n border-radius: 4px;\n overflow-x: auto;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n/* State for component spec without executable code */\n.no-code-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-text-muted);\n flex: 1;\n}\n.no-code-state i {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n.no-code-state h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-secondary);\n}\n.no-code-state p {\n margin: 0 0 8px 0;\n color: var(--mj-text-muted);\n}\n\n\n/* ====================================================================\n FORM-AWARE BRANCH (componentRole === 'form')\n Top strip: record-picker chip + Apply button.\n Below: dropdown picker panel.\n Below: <mj-interactive-form> bound to the picked record.\n ==================================================================== */\n\n.form-artifact-toolstrip {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n.form-artifact-toolstrip-label {\n font-weight: 600;\n}\n.form-artifact-toolstrip-entity {\n margin-left: 4px;\n padding: 2px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n border-radius: 999px;\n font-size: 11px;\n font-weight: 600;\n}\n.form-artifact-toolstrip-warning {\n color: var(--mj-status-warning-text);\n}\n\n.form-artifact-picker-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n.form-artifact-picker-chip:hover,\n.form-artifact-picker-chip:focus {\n border-color: var(--mj-border-focus);\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-chip strong {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n.form-artifact-picker-chip-badge {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning-text);\n border: 1px solid var(--mj-status-warning-border);\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 999px;\n}\n\n.form-artifact-apply-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse, #ffffff);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-md, 8px);\n padding: 5px 12px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n}\n.form-artifact-apply-btn:hover {\n background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.form-artifact-picker-panel {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 10px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.form-artifact-picker-search {\n width: 100%;\n padding: 7px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n background: var(--mj-bg-surface);\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n.form-artifact-picker-search:focus {\n outline: none;\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-results {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.form-artifact-picker-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 13px;\n}\n.form-artifact-picker-row:hover {\n background: var(--mj-bg-surface-hover);\n}\n.form-artifact-picker-row i {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n.form-artifact-picker-empty {\n color: var(--mj-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n.form-artifact-form-host {\n flex: 1;\n overflow: auto;\n background: var(--mj-bg-page);\n}\n\n/* ====================================================================\n PERMISSION WARNING\n Shown before rendering when the user lacks read access to one or\n more entities/queries required by the component.\n ==================================================================== */\n\n.permission-warning {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n flex: 1;\n min-height: 300px;\n}\n.permission-warning-icon {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-status-warning-text, #b45309);\n}\n.permission-warning h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-primary);\n}\n.permission-warning > p {\n margin: 0 0 16px 0;\n color: var(--mj-text-muted);\n}\n.permission-warning-section {\n text-align: left;\n max-width: 400px;\n width: 100%;\n margin-bottom: 12px;\n}\n.permission-warning-section-label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n.permission-warning-section ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.permission-warning-section li {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken, var(--mj-bg-surface));\n border-radius: 6px;\n}\n.permission-warning-section li i {\n color: var(--mj-status-warning-text, #b45309);\n font-size: 12px;\n}\n.permission-warning-hint {\n margin-top: 8px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n"] }]
911
+ args: [{ standalone: false, selector: 'mj-component-artifact-viewer', template: "<div class=\"component-artifact-viewer\" [ngClass]=\"cssClass\">\n <!-- Component Preview (full screen) -->\n <div class=\"component-preview\">\n @if (hasError) {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n <h3>{{ errorMessage }}</h3>\n <p>This component could not be loaded. This usually happens when:</p>\n <ul style=\"text-align: left; max-width: 500px; color: var(--mj-text-muted); line-height: 1.6;\">\n <li>The component registry is unavailable or unreachable</li>\n <li>The component version does not exist in the registry</li>\n <li>There was a network error during component retrieval</li>\n </ul>\n @if (errorDetails) {\n <details style=\"margin-top: 20px;\">\n <summary>Technical Details</summary>\n <pre>{{ errorDetails }}</pre>\n </details>\n }\n </div>\n } @else if (isFormArtifact) {\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FORM-AWARE BRANCH\n Spec declares componentRole: 'form'. Render via\n <mj-interactive-form> bound to a real Top-1 record\n (or a synthetic NewRecord fallback). Picker chip\n lets the user swap records; Apply promotes the\n spec to an EntityFormOverride.\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"form-artifact-toolstrip\">\n <i class=\"fa-solid fa-circle-info\" aria-hidden=\"true\"></i>\n <span class=\"form-artifact-toolstrip-label\">Previewing record:</span>\n <button\n type=\"button\"\n class=\"form-artifact-picker-chip\"\n (click)=\"showRecordPicker = !showRecordPicker\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n <strong>{{ formRecordLabel || 'No record' }}</strong>\n @if (!formRecordIsReal) {\n <span class=\"form-artifact-picker-chip-badge\">Mock</span>\n }\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n @if (formEntityInfo) {\n <span class=\"form-artifact-toolstrip-entity\">{{ formEntityInfo.DisplayName || formEntityInfo.Name }}</span>\n }\n @if (formInitError) {\n <span class=\"form-artifact-toolstrip-warning\" [title]=\"formInitError\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i>\n </span>\n }\n <span style=\"flex: 1;\"></span>\n @if (formEntityInfo) {\n <button\n type=\"button\"\n class=\"form-artifact-apply-btn\"\n (click)=\"onApplyClicked()\">\n <i class=\"fa-solid fa-circle-check\"></i>\n Apply to my form\n </button>\n }\n </div>\n\n @if (showRecordPicker && formEntityInfo) {\n <div class=\"form-artifact-picker-panel\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"text\"\n class=\"form-artifact-picker-search\"\n placeholder=\"Search records by name\u2026\"\n [value]=\"recordSearchTerm\"\n (input)=\"onPickerSearchInput($any($event.target).value)\" />\n @if (recordSearchResults.length > 0) {\n <ul class=\"form-artifact-picker-results\">\n @for (r of recordSearchResults; track r.ID) {\n <li\n class=\"form-artifact-picker-row\"\n (click)=\"onPickerSelect(r)\">\n <i class=\"fa-solid fa-circle-dot\"></i>\n <span>{{ r.Label }}</span>\n </li>\n }\n </ul>\n } @else if (recordSearchTerm.length > 0) {\n <div class=\"form-artifact-picker-empty\">No matches.</div>\n } @else {\n <div class=\"form-artifact-picker-empty\">Start typing to search.</div>\n }\n </div>\n }\n\n @if (formRecord && component) {\n <div class=\"form-artifact-form-host\">\n <mj-interactive-form\n #interactiveForm\n [componentSpec]=\"component\"\n [record]=\"formRecord\">\n </mj-interactive-form>\n </div>\n } @else {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <h3>Form preview unavailable</h3>\n <p>{{ formInitError || 'Could not bind a record to this form.' }}</p>\n </div>\n }\n } @else if (isPermissionBlocked) {\n <!-- Permission warning \u2014 user lacks access to one or more data sources -->\n <div class=\"permission-warning\">\n <div class=\"permission-warning-icon\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n </div>\n <h3>Insufficient Permissions</h3>\n <p>This component requires data access that you don't currently have:</p>\n\n @if (permissionResult!.missingEntities.length > 0) {\n <div class=\"permission-warning-section\">\n <span class=\"permission-warning-section-label\">Entities</span>\n <ul>\n @for (entity of permissionResult!.missingEntities; track entity) {\n <li><i class=\"fa-solid fa-table\"></i> {{ entity }}</li>\n }\n </ul>\n </div>\n }\n\n @if (permissionResult!.missingQueries.length > 0) {\n <div class=\"permission-warning-section\">\n <span class=\"permission-warning-section-label\">Queries</span>\n <ul>\n @for (query of permissionResult!.missingQueries; track query) {\n <li><i class=\"fa-solid fa-database\"></i> {{ query }}</li>\n }\n </ul>\n </div>\n }\n\n <p class=\"permission-warning-hint\">Contact your administrator to request access.</p>\n </div>\n } @else {\n <!-- Default (non-form) interactive component path -->\n @if (component && (component.code || component.namespace)) {\n <mj-react-component\n #reactComponent\n [component]=\"component\"\n (componentEvent)=\"onComponentEvent($event)\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (initialized)=\"onReactComponentInitialized()\">\n </mj-react-component>\n } @else if (component) {\n <!-- Component spec exists but no code - show informational message -->\n <div class=\"no-code-state\">\n <i class=\"fa-solid fa-file-lines\"></i>\n <h3>Component Specification</h3>\n <p>This component has specifications but no executable code yet.</p>\n <p>View the Functional, Data, or Spec tabs for details.</p>\n </div>\n } @else {\n <div class=\"error-state\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <h3>No Component Loaded</h3>\n <p>The component data is missing or invalid.</p>\n </div>\n }\n }\n </div>\n\n <!-- Feedback overlay panel (invoked from header button via AskUserForFeedback) -->\n @if (ShowFeedbackPanel && resolvedComponentSpec) {\n <mj-component-feedback-panel\n [ComponentSpec]=\"resolvedComponentSpec\"\n [ReactContainerElement]=\"reactComponent?.container?.nativeElement || null\"\n (Closed)=\"ShowFeedbackPanel = false\">\n </mj-component-feedback-panel>\n }\n</div>\n", styles: [".component-artifact-viewer {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n background: var(--mj-bg-surface);\n}\n\n.component-preview {\n flex: 1;\n padding: 15px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n min-height: 0;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* Ensure React component takes full height */\n.component-preview mj-react-component {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.error-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-status-error);\n flex: 1;\n min-height: 300px;\n}\n.error-state i {\n font-size: 48px;\n margin-bottom: 16px;\n}\n.error-state h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n}\n.error-state p {\n margin: 0 0 12px 0;\n color: var(--mj-text-muted);\n}\n.error-state details {\n margin-top: 16px;\n text-align: left;\n max-width: 600px;\n}\n.error-state details summary {\n cursor: pointer;\n color: var(--mj-text-secondary);\n font-weight: 500;\n margin-bottom: 8px;\n}\n.error-state details summary:hover {\n color: var(--mj-text-primary);\n}\n.error-state details pre {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n border-radius: 4px;\n overflow-x: auto;\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n/* State for component spec without executable code */\n.no-code-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n color: var(--mj-text-muted);\n flex: 1;\n}\n.no-code-state i {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-brand-primary);\n}\n.no-code-state h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-secondary);\n}\n.no-code-state p {\n margin: 0 0 8px 0;\n color: var(--mj-text-muted);\n}\n\n\n/* ====================================================================\n FORM-AWARE BRANCH (componentRole === 'form')\n Top strip: record-picker chip + Apply button.\n Below: dropdown picker panel.\n Below: <mj-interactive-form> bound to the picked record.\n ==================================================================== */\n\n.form-artifact-toolstrip {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 14px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n.form-artifact-toolstrip-label {\n font-weight: 600;\n}\n.form-artifact-toolstrip-entity {\n margin-left: 4px;\n padding: 2px 8px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n border-radius: 999px;\n font-size: 11px;\n font-weight: 600;\n}\n.form-artifact-toolstrip-warning {\n color: var(--mj-status-warning-text);\n}\n\n.form-artifact-picker-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n padding: 4px 10px;\n font-size: 12px;\n color: var(--mj-text-primary);\n cursor: pointer;\n}\n.form-artifact-picker-chip:hover,\n.form-artifact-picker-chip:focus {\n border-color: var(--mj-border-focus);\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-chip strong {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n.form-artifact-picker-chip-badge {\n background: var(--mj-status-warning-bg);\n color: var(--mj-status-warning-text);\n border: 1px solid var(--mj-status-warning-border);\n font-size: 10px;\n font-weight: 700;\n padding: 1px 6px;\n border-radius: 999px;\n}\n\n.form-artifact-apply-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse, #ffffff);\n border: 1px solid var(--mj-brand-primary);\n border-radius: var(--mj-radius-md, 8px);\n padding: 5px 12px;\n font-size: 12px;\n font-weight: 600;\n cursor: pointer;\n}\n.form-artifact-apply-btn:hover {\n background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n\n.form-artifact-picker-panel {\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n padding: 10px 14px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.form-artifact-picker-search {\n width: 100%;\n padding: 7px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md, 8px);\n background: var(--mj-bg-surface);\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n.form-artifact-picker-search:focus {\n outline: none;\n border-color: var(--mj-border-focus);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n.form-artifact-picker-results {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n.form-artifact-picker-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 13px;\n}\n.form-artifact-picker-row:hover {\n background: var(--mj-bg-surface-hover);\n}\n.form-artifact-picker-row i {\n color: var(--mj-text-muted);\n font-size: 10px;\n}\n.form-artifact-picker-empty {\n color: var(--mj-text-muted);\n font-size: 12px;\n font-style: italic;\n}\n\n.form-artifact-form-host {\n flex: 1;\n overflow: auto;\n background: var(--mj-bg-page);\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n/* ====================================================================\n PERMISSION WARNING\n Shown before rendering when the user lacks read access to one or\n more entities/queries required by the component.\n ==================================================================== */\n\n.permission-warning {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px;\n text-align: center;\n flex: 1;\n min-height: 300px;\n}\n.permission-warning-icon {\n font-size: 48px;\n margin-bottom: 16px;\n color: var(--mj-status-warning-text, #b45309);\n}\n.permission-warning h3 {\n margin: 0 0 8px 0;\n font-size: 20px;\n color: var(--mj-text-primary);\n}\n.permission-warning > p {\n margin: 0 0 16px 0;\n color: var(--mj-text-muted);\n}\n.permission-warning-section {\n text-align: left;\n max-width: 400px;\n width: 100%;\n margin-bottom: 12px;\n}\n.permission-warning-section-label {\n display: block;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--mj-text-muted);\n margin-bottom: 4px;\n}\n.permission-warning-section ul {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.permission-warning-section li {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px;\n font-size: 13px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken, var(--mj-bg-surface));\n border-radius: 6px;\n}\n.permission-warning-section li i {\n color: var(--mj-status-warning-text, #b45309);\n font-size: 12px;\n}\n.permission-warning-hint {\n margin-top: 8px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n"] }]
840
912
  }], () => [{ type: i1.AngularAdapterService }, { type: i0.ChangeDetectorRef }], { reactComponent: [{
841
913
  type: ViewChild,
842
914
  args: ['reactComponent']
915
+ }], interactiveForm: [{
916
+ type: ViewChild,
917
+ args: ['interactiveForm']
843
918
  }], tabsChanged: [{
844
919
  type: Output
845
920
  }], openEntityRecord: [{
@@ -847,5 +922,5 @@ export { ComponentArtifactViewerComponent };
847
922
  }], applyFormRequested: [{
848
923
  type: Output
849
924
  }] }); })();
850
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentArtifactViewerComponent, { className: "ComponentArtifactViewerComponent", filePath: "src/lib/components/plugins/component-artifact-viewer.component.ts", lineNumber: 26 }); })();
925
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentArtifactViewerComponent, { className: "ComponentArtifactViewerComponent", filePath: "src/lib/components/plugins/component-artifact-viewer.component.ts", lineNumber: 27 }); })();
851
926
  //# sourceMappingURL=component-artifact-viewer.component.js.map