@memberjunction/ng-artifacts 5.36.0 → 5.38.0

package/dist/lib/components/plugins/component-artifact-viewer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAE5H,OAAO,EAAE,iCAAiC,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAA8B,aAAa,EAAE,MAAM,6CAA6C,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAIlE;;;;;;;GAOG;AACH,qBAOa,gCAAiC,SAAQ,iCAAkC,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA6CrH,OAAO,CAAC,OAAO;IA5CE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IACrD,WAAW,qBAA4B;IACvC,gBAAgB;oBAAiC,MAAM;sBAAgB,YAAY;OAAK;IAG3F,SAAS,EAAE,aAAa,GAAG,IAAI,CAAQ;IACvC,aAAa,EAAE,MAAM,CAAM;IAC3B,aAAa,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAA8B;IAEzD,IAAW,qBAAqB,IAAI,aAAa,GAAG,IAAI,CAKvD;IAGM,iBAAiB,UAAS;IAG1B,QAAQ,UAAS;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAEzB;;;;;;;;OAQG;IACH,IAAoB,iBAAiB,IAAI,OAAO,CAG/C;gBAEmB,OAAO,EAAE,qBAAqB;IAI5C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAWxD;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB;IAmBzB;;;;;OAKG;IACG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAYzB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAItC;;OAEG;IACI,iBAAiB,IAAI,iBAAiB,EAAE;IA+D/C;;;OAGG;IACI,sBAAsB,IAAI,MAAM,EAAE;IAIzC,OAAO,CAAC,qBAAqB;IAS7B;;;;;;OAMG;IACH,2BAA2B,IAAI,IAAI;IASnC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAYtC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,YAAY,CAAA;KAAC,GAAG,IAAI;IAQxD,uBAAuB,IAAI,YAAY,GAAG,IAAI;IA8B9D;;OAEG;IACH,IAAoB,gBAAgB,IAAI,OAAO,CAE9C;IAED;;OAEG;IACa,kBAAkB,IAAI,IAAI;yCAlR/B,gCAAgC;2CAAhC,gCAAgC;CAqR5C"}
+{"version":3,"file":"component-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAE5H,OAAO,EAAE,iCAAiC,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAA8B,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAExG,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAqB,MAAM,sBAAsB,CAAC;;AAG7G;;;;;;;GAOG;AACH,qBAOa,gCAAiC,SAAQ,iCAAkC,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA4ErH,OAAO,CAAC,OAAO;IA3EE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IACrD,WAAW,qBAA4B;IACvC,gBAAgB;oBAAiC,MAAM;sBAAgB,YAAY;OAAK;IAElG;;;;;OAKG;IACO,kBAAkB;cAA4B,aAAa;oBAAc,MAAM;OAAM;IAI/F,uEAAuE;IAChE,cAAc,UAAS;IAE9B,kFAAkF;IAC3E,cAAc,EAAE,UAAU,GAAG,IAAI,CAAQ;IAEhD,sEAAsE;IAC/D,UAAU,EAAE,UAAU,GAAG,IAAI,CAAQ;IAE5C,yEAAyE;IAClE,gBAAgB,UAAS;IAEhC,yDAAyD;IAClD,eAAe,SAAM;IAE5B,uBAAuB;IAChB,gBAAgB,UAAS;IACzB,gBAAgB,SAAM;IACtB,mBAAmB,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAM;IAC/D,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGpC,SAAS,EAAE,aAAa,GAAG,IAAI,CAAQ;IACvC,aAAa,EAAE,MAAM,CAAM;IAC3B,aAAa,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAA8B;IAEzD,IAAW,qBAAqB,IAAI,aAAa,GAAG,IAAI,CAKvD;IAGM,iBAAiB,UAAS;IAG1B,QAAQ,UAAS;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAEzB;;;;;;;;OAQG;IACH,IAAoB,iBAAiB,IAAI,OAAO,CAG/C;gBAEmB,OAAO,EAAE,qBAAqB;IAI5C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAWxD;;;;;;;;;OASG;IACH,OAAO,CAAC,iBAAiB;IAwBzB;;;;;OAKG;IACG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAYzB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAItC;;OAEG;IACI,iBAAiB,IAAI,iBAAiB,EAAE;IA+D/C;;;OAGG;IACI,sBAAsB,IAAI,MAAM,EAAE;IAIzC,OAAO,CAAC,qBAAqB;IAS7B;;;;;;OAMG;IACH,2BAA2B,IAAI,IAAI;IASnC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAYtC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,YAAY,CAAA;KAAC,GAAG,IAAI;IAQxD,uBAAuB,IAAI,YAAY,GAAG,IAAI;IA8B9D;;OAEG;IACH,IAAoB,gBAAgB,IAAI,OAAO,CAE9C;IAED;;OAEG;IACa,kBAAkB,IAAI,IAAI;IAgB1C;;;;;OAKG;YACW,yBAAyB;IA0CvC;;;;;OAKG;YACW,gBAAgB;IAqB9B,gFAAgF;YAClE,kBAAkB;IAWhC,mFAAmF;IACnF,OAAO,CAAC,kBAAkB;IAU1B;;;OAGG;IACU,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAkC7D,gFAAgF;IACnE,cAAc,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAsB/E,+EAA+E;IACxE,cAAc,IAAI,IAAI;yCAtelB,gCAAgC;2CAAhC,gCAAgC;CA6e5C"}

package/dist/lib/components/plugins/component-artifact-viewer.component.js

@@ -8,13 +8,16 @@ import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
 import { RegisterClass, SafeJSONParse } from '@memberjunction/global';
 import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
 import { BuildComponentCompleteCode } from '@memberjunction/interactive-component-types';
-import { DataSnapshot } from '@memberjunction/core';
+import { isFormRole, getDeclaredFormEntityName } from '@memberjunction/interactive-component-types/forms';
+import { CompositeKey, DataSnapshot, LogError, RunView } from '@memberjunction/core';
 import { DataRequirementsViewerComponent } from './data-requirements-viewer/data-requirements-viewer.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-react";
 import * as i2 from "@angular/common";
-import * as i3 from "./component-feedback-panel/component-feedback-panel.component";
+import * as i3 from "@memberjunction/ng-base-forms";
+import * as i4 from "./component-feedback-panel/component-feedback-panel.component";
 const _c0 = ["reactComponent"];
+const _forTrack0 = ($index, $item) => $item.ID;
 function ComponentArtifactViewerComponent_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "details", 7)(1, "summary");
     i0.ɵɵtext(2, "Technical Details");
@@ -54,18 +57,159 @@ function ComponentArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (
     i0.ɵɵadvance(10);
     i0.ɵɵconditional(ctx_r0.errorDetails ? 13 : -1);
 } }
-function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵtext(1, "Mock");
+    i0.ɵɵelementEnd();
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.formEntityInfo.DisplayName || ctx_r0.formEntityInfo.Name);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵelement(1, "i", 21);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("title", ctx_r0.formInitError);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 22);
+    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()); });
+    i0.ɵɵelement(1, "i", 23);
+    i0.ɵɵtext(2, " Apply to my form ");
+    i0.ɵɵelementEnd();
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 29);
+    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)); });
+    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const r_r6 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(r_r6.Label);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 26);
+    i0.ɵɵrepeaterCreate(1, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_For_2_Template, 4, 1, "li", 28, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.recordSearchResults);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵtext(1, "No matches.");
+    i0.ɵɵelementEnd();
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵtext(1, "Start typing to search.");
+    i0.ɵɵelementEnd();
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "input", 25);
+    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)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_2_Template, 3, 0, "ul", 26)(3, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_3_Template, 2, 0, "div", 27)(4, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Conditional_4_Template, 2, 0, "div", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r0.recordSearchTerm);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.recordSearchResults.length > 0 ? 2 : ctx_r0.recordSearchTerm.length > 0 ? 3 : 4);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "mj-interactive-form", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("componentSpec", ctx_r0.component)("record", ctx_r0.formRecord);
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 32);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "Form preview unavailable");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r0.formInitError || "Could not bind a record to this form.");
+} }
+function ComponentArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 10, 0);
-    i0.ɵɵlistener("componentEvent", function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onComponentEvent($event)); })("openEntityRecord", function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("initialized", function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template_mj_react_component_initialized_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onReactComponentInitialized()); });
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "i", 9);
+    i0.ɵɵelementStart(2, "span", 10);
+    i0.ɵɵtext(3, "Previewing record:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 11);
+    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); });
+    i0.ɵɵelement(5, "i", 12);
+    i0.ɵɵelementStart(6, "strong");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, ComponentArtifactViewerComponent_Conditional_3_Conditional_8_Template, 2, 0, "span", 13);
+    i0.ɵɵelement(9, "i", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, ComponentArtifactViewerComponent_Conditional_3_Conditional_10_Template, 2, 1, "span", 15);
+    i0.ɵɵconditionalCreate(11, ComponentArtifactViewerComponent_Conditional_3_Conditional_11_Template, 2, 1, "span", 16);
+    i0.ɵɵelement(12, "span", 17);
+    i0.ɵɵconditionalCreate(13, ComponentArtifactViewerComponent_Conditional_3_Conditional_13_Template, 3, 0, "button", 18);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(14, ComponentArtifactViewerComponent_Conditional_3_Conditional_14_Template, 5, 2, "div", 19);
+    i0.ɵɵconditionalCreate(15, ComponentArtifactViewerComponent_Conditional_3_Conditional_15_Template, 2, 2, "div", 20)(16, ComponentArtifactViewerComponent_Conditional_3_Conditional_16_Template, 6, 1, "div", 3);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r0.formRecordLabel || "No record");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r0.formRecordIsReal ? 8 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.formEntityInfo ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.formInitError ? 11 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.formEntityInfo ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.showRecordPicker && ctx_r0.formEntityInfo ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.formRecord && ctx_r0.component ? 15 : 16);
+} }
+function ComponentArtifactViewerComponent_Conditional_4_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 35, 0);
+    i0.ɵɵlistener("componentEvent", function ComponentArtifactViewerComponent_Conditional_4_Conditional_0_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onComponentEvent($event)); })("openEntityRecord", function ComponentArtifactViewerComponent_Conditional_4_Conditional_0_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onOpenEntityRecord($event)); })("initialized", function ComponentArtifactViewerComponent_Conditional_4_Conditional_0_Template_mj_react_component_initialized_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onReactComponentInitialized()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("component", ctx_r0.component);
 } }
-function ComponentArtifactViewerComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "i", 11);
+function ComponentArtifactViewerComponent_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "Component Specification");
     i0.ɵɵelementEnd();
@@ -76,9 +220,9 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_1_Template(r
     i0.ɵɵtext(7, "View the Functional, Data, or Spec tabs for details.");
     i0.ɵɵelementEnd()();
 } }
-function ComponentArtifactViewerComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ComponentArtifactViewerComponent_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Component Loaded");
     i0.ɵɵelementEnd();
@@ -86,16 +230,16 @@ function ComponentArtifactViewerComponent_Conditional_3_Conditional_2_Template(r
     i0.ɵɵtext(5, "The component data is missing or invalid.");
     i0.ɵɵelementEnd()();
 } }
-function ComponentArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template, 2, 1, "mj-react-component", 8)(1, ComponentArtifactViewerComponent_Conditional_3_Conditional_1_Template, 8, 0, "div", 9)(2, ComponentArtifactViewerComponent_Conditional_3_Conditional_2_Template, 6, 0, "div", 3);
+function ComponentArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ComponentArtifactViewerComponent_Conditional_4_Conditional_0_Template, 2, 1, "mj-react-component", 33)(1, ComponentArtifactViewerComponent_Conditional_4_Conditional_1_Template, 8, 0, "div", 34)(2, ComponentArtifactViewerComponent_Conditional_4_Conditional_2_Template, 6, 0, "div", 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r0.component && (ctx_r0.component.code || ctx_r0.component.namespace) ? 0 : ctx_r0.component ? 1 : 2);
 } }
-function ComponentArtifactViewerComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-component-feedback-panel", 13);
-    i0.ɵɵlistener("Closed", function ComponentArtifactViewerComponent_Conditional_4_Template_mj_component_feedback_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowFeedbackPanel = false); });
+function ComponentArtifactViewerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-component-feedback-panel", 37);
+    i0.ɵɵlistener("Closed", function ComponentArtifactViewerComponent_Conditional_5_Template_mj_component_feedback_panel_Closed_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ShowFeedbackPanel = false); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -114,6 +258,29 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
     reactComponent;
     tabsChanged = new EventEmitter();
     openEntityRecord = new EventEmitter();
+    /**
+     * Emitted when the user clicks "Apply to my form" on a form-role artifact.
+     * Carries the spec (ready to hand to the agent's Create/Modify action) and
+     * the entity name. The host is responsible for confirming + invoking the
+     * actual server action.
+     */
+    applyFormRequested = new EventEmitter();
+    // ── Form-aware state (only populated when componentRole === 'form') ──
+    /** True when this artifact's spec declares `componentRole: 'form'`. */
+    isFormArtifact = false;
+    /** Entity the form targets — resolved from spec.entityName / dataRequirements. */
+    formEntityInfo = null;
+    /** The real or fixture record currently bound to the form preview. */
+    formRecord = null;
+    /** True iff `formRecord` is a real DB row (vs a fixture NewRecord()). */
+    formRecordIsReal = false;
+    /** Label for the chip (e.g. the record's Name field). */
+    formRecordLabel = '';
+    /** Picker UI state. */
+    showRecordPicker = false;
+    recordSearchTerm = '';
+    recordSearchResults = [];
+    formInitError = null;
     // Component data
     component = null;
     componentCode = "";
@@ -179,6 +346,11 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
             if (this.artifactVersion?.Content) {
                 this.component = SafeJSONParse(this.artifactVersion.Content);
                 this.extractComponentParts();
+                // Form-aware detection. Done here (not in ngAfterViewInit) so the
+                // template's `@if (isFormArtifact)` branch decides which preview
+                // to mount on the very first render — no flash of the non-form
+                // path before the form-aware UI takes over.
+                this.detectAndInitFormArtifact();
             }
             else {
                 throw new Error('Artifact content is empty');
@@ -360,25 +532,200 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
     AskUserForFeedback() {
         this.ShowFeedbackPanel = !this.ShowFeedbackPanel;
     }
+    // ════════════════════════════════════════════════════════════════════
+    // FORM-AWARE BRANCH
+    //
+    // When the artifact's spec declares `componentRole: 'form'`, the viewer
+    // delegates rendering to `<mj-interactive-form>` instead of the raw
+    // `<mj-react-component>` path. This gives the React form a proper
+    // FormHostProps binding (bound to a real DB record by default) and lets
+    // the user swap records via a search picker before applying.
+    //
+    // Triggered from `loadComponentSpec()` after the spec parses.
+    // ════════════════════════════════════════════════════════════════════
+    /**
+     * Detect form-role and kick off entity + record resolution. Failure modes
+     * (missing entity, RunView failure, entity has no rows) fall back to a
+     * synthetic record from `BaseEntity.NewRecord()` so the form still mounts
+     * against type-appropriate empty values.
+     */
+    async detectAndInitFormArtifact() {
+        this.isFormArtifact = false;
+        this.formEntityInfo = null;
+        this.formRecord = null;
+        this.formRecordIsReal = false;
+        this.formRecordLabel = '';
+        this.formInitError = null;
+        const spec = this.component;
+        if (!spec || !isFormRole(spec))
+            return;
+        this.isFormArtifact = true;
+        const entityName = getDeclaredFormEntityName(spec);
+        if (!entityName) {
+            this.formInitError = 'Form artifact has no declared entity. Showing without record context.';
+            return;
+        }
+        const provider = this.ProviderToUse;
+        const entity = provider?.EntityByName(entityName);
+        if (!entity) {
+            this.formInitError = `Entity "${entityName}" not registered with the active provider.`;
+            return;
+        }
+        this.formEntityInfo = entity;
+        // Load Top-1 record by default. If empty / fails, fall back to a fresh
+        // synthetic record. Either way the form mounts — failure to find a real
+        // record is informational, not fatal.
+        const record = await this.loadTopOneRecord(entity);
+        if (record) {
+            this.formRecord = record;
+            this.formRecordIsReal = true;
+            this.formRecordLabel = this.computeRecordLabel(record);
+        }
+        else {
+            this.formRecord = await this.buildFixtureRecord(entity);
+            this.formRecordIsReal = false;
+            this.formRecordLabel = 'Mock data';
+        }
+    }
+    /**
+     * Load the first row by NameField (then __mj_CreatedAt) so different users
+     * opening the same form-role artifact see the same record bound to the
+     * preview. (Retrospective fix #7 — un-ordered Top-1 was physical-order
+     * and non-deterministic.)
+     */
+    async loadTopOneRecord(entity) {
+        try {
+            const orderBy = entity.NameField?.Name
+                ? `${entity.NameField.Name} ASC`
+                : `__mj_CreatedAt DESC`;
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            const result = await rv.RunView({
+                EntityName: entity.Name,
+                MaxRows: 1,
+                OrderBy: orderBy,
+                ResultType: 'entity_object',
+            }, this.ProviderToUse.CurrentUser);
+            if (result.Success && (result.Results?.length ?? 0) > 0) {
+                return result.Results[0];
+            }
+        }
+        catch (err) {
+            LogError(`ComponentArtifactViewer: Top-1 RunView failed for ${entity.Name}: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        return null;
+    }
+    /** Synthetic "create-mode" record when no real row exists or RunView failed. */
+    async buildFixtureRecord(entity) {
+        try {
+            const fresh = await this.ProviderToUse.GetEntityObject(entity.Name, this.ProviderToUse.CurrentUser);
+            fresh.NewRecord();
+            return fresh;
+        }
+        catch (err) {
+            LogError(`ComponentArtifactViewer: failed to build fixture record for ${entity.Name}: ${err instanceof Error ? err.message : String(err)}`);
+            return null;
+        }
+    }
+    /** Pull a human-readable label from the record's NameField or first text field. */
+    computeRecordLabel(record) {
+        const nameField = record.EntityInfo.NameField?.Name;
+        if (nameField) {
+            const v = record.Get(nameField);
+            if (v != null && String(v).trim().length > 0)
+                return String(v);
+        }
+        if (record.PrimaryKey?.HasValue)
+            return record.PrimaryKey.ToConcatenatedString();
+        return record.EntityInfo.Name;
+    }
+    /**
+     * Search-as-you-type for the picker. Queries by name field (or any
+     * indexed string field, best-effort). Limits to 8 hits for tightness.
+     */
+    async onPickerSearchInput(term) {
+        this.recordSearchTerm = term;
+        if (!this.formEntityInfo || term.trim().length === 0) {
+            this.recordSearchResults = [];
+            return;
+        }
+        const nameField = this.formEntityInfo.NameField?.Name;
+        if (!nameField) {
+            this.recordSearchResults = [];
+            return;
+        }
+        try {
+            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
+            // Best-effort LIKE filter against the entity's name field. Wrap the
+            // term so we don't break SQL — RunView passes ExtraFilter as-is.
+            const safe = term.replace(/'/g, "''");
+            const result = await rv.RunView({
+                EntityName: this.formEntityInfo.Name,
+                ExtraFilter: `${nameField} LIKE '%${safe}%'`,
+                MaxRows: 8,
+                ResultType: 'entity_object',
+            }, this.ProviderToUse.CurrentUser);
+            if (result.Success) {
+                this.recordSearchResults = (result.Results ?? []).map(r => ({
+                    ID: r.PrimaryKey?.ToConcatenatedString() ?? '',
+                    Label: this.computeRecordLabel(r),
+                }));
+            }
+        }
+        catch (err) {
+            LogError(`ComponentArtifactViewer: picker search failed: ${err instanceof Error ? err.message : String(err)}`);
+            this.recordSearchResults = [];
+        }
+    }
+    /** User picked a different record from the search results. Re-bind the form. */
+    async onPickerSelect(item) {
+        if (!this.formEntityInfo)
+            return;
+        try {
+            const rec = await this.ProviderToUse.GetEntityObject(this.formEntityInfo.Name, this.ProviderToUse.CurrentUser);
+            const pk = new CompositeKey();
+            pk.LoadFromURLSegment(this.formEntityInfo, item.ID);
+            const loaded = await rec.InnerLoad(pk);
+            if (loaded) {
+                this.formRecord = rec;
+                this.formRecordIsReal = true;
+                this.formRecordLabel = item.Label;
+                this.showRecordPicker = false;
+                this.recordSearchTerm = '';
+                this.recordSearchResults = [];
+            }
+        }
+        catch (err) {
+            LogError(`ComponentArtifactViewer: failed to load picked record ${item.ID}: ${err instanceof Error ? err.message : String(err)}`);
+        }
+    }
+    /** Bubble Apply intent up to the host (Form Builder dashboard / Sage chat). */
+    onApplyClicked() {
+        if (!this.component || !this.formEntityInfo)
+            return;
+        this.applyFormRequested.emit({
+            spec: this.component,
+            entityName: this.formEntityInfo.Name,
+        });
+    }
     static ɵfac = function ComponentArtifactViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentArtifactViewerComponent)(i0.ɵɵdirectiveInject(i1.AngularAdapterService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentArtifactViewerComponent, selectors: [["mj-component-artifact-viewer"]], viewQuery: function ComponentArtifactViewerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponent = _t.first);
-        } }, outputs: { tabsChanged: "tabsChanged", openEntityRecord: "openEntityRecord" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 5, vars: 3, consts: [["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-preview"], [1, "error-state"], [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"], [3, "component"], [1, "no-code-state"], [3, "componentEvent", "openEntityRecord", "initialized", "component"], [1, "fa-solid", "fa-file-lines"], [1, "fa-solid", "fa-exclamation-circle"], [3, "Closed", "ComponentSpec", "ReactContainerElement"]], template: function ComponentArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, outputs: { tabsChanged: "tabsChanged", openEntityRecord: "openEntityRecord", applyFormRequested: "applyFormRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 6, vars: 3, consts: [["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-preview"], [1, "error-state"], [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"], [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) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
-            i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_2_Template, 14, 2, "div", 3)(3, ComponentArtifactViewerComponent_Conditional_3_Template, 3, 1);
+            i0.ɵɵconditionalCreate(2, ComponentArtifactViewerComponent_Conditional_2_Template, 14, 2, "div", 3)(3, ComponentArtifactViewerComponent_Conditional_3_Template, 17, 7)(4, ComponentArtifactViewerComponent_Conditional_4_Template, 3, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(4, ComponentArtifactViewerComponent_Conditional_4_Template, 1, 2, "mj-component-feedback-panel", 4);
+            i0.ɵɵconditionalCreate(5, ComponentArtifactViewerComponent_Conditional_5_Template, 1, 2, "mj-component-feedback-panel", 4);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cssClass);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.hasError ? 2 : 3);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.ShowFeedbackPanel && ctx.resolvedComponentSpec ? 4 : -1);
-        } }, dependencies: [i2.NgClass, i1.MJReactComponent, i3.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}"] });
+            i0.ɵɵconditional(ctx.hasError ? 2 : ctx.isFormArtifact ? 3 : 4);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.ShowFeedbackPanel && ctx.resolvedComponentSpec ? 5 : -1);
+        } }, 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}"] });
 };
 ComponentArtifactViewerComponent = __decorate([
     RegisterClass(BaseArtifactViewerPluginComponent, 'ComponentArtifactViewerPlugin')
@@ -386,7 +733,7 @@ ComponentArtifactViewerComponent = __decorate([
 export { ComponentArtifactViewerComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentArtifactViewerComponent, [{
         type: Component,
-        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 {\n      <!-- Only render React component if there's code to execute -->\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\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"] }]
+        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 {\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"] }]
     }], () => [{ type: i1.AngularAdapterService }], { reactComponent: [{
             type: ViewChild,
             args: ['reactComponent']
@@ -394,6 +741,8 @@ export { ComponentArtifactViewerComponent };
             type: Output
         }], openEntityRecord: [{
             type: Output
+        }], applyFormRequested: [{
+            type: Output
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentArtifactViewerComponent, { className: "ComponentArtifactViewerComponent", filePath: "src/lib/components/plugins/component-artifact-viewer.component.ts", lineNumber: 25 }); })();
 //# sourceMappingURL=component-artifact-viewer.component.js.map