@memberjunction/ng-skip-chat 2.69.1 → 2.71.0

package/dist/lib/dynamic-report/dynamic-ui-component.js

@@ -1,21 +1,23 @@
 import { Component, EventEmitter, Input, Output, ViewChildren, HostListener } from '@angular/core';
-import { CompositeKey, LogError, Metadata, RunQuery, RunView } from '@memberjunction/core';
-import { SkipReactComponentHost } from './skip-react-component-host';
-import { MapEntityInfoToSkipEntityInfo, BuildSkipComponentCompleteCode } from '@memberjunction/skip-types';
+import { CompositeKey, LogError, Metadata } from '@memberjunction/core';
+import { BuildComponentCompleteCode } from '@memberjunction/interactive-component-types';
 import { DrillDownInfo } from '../drill-down-info';
 import { marked } from 'marked';
+import { MJReactComponent } from '@memberjunction/ng-react';
+import { createRuntimeUtilities, SetupStyles } from '@memberjunction/react-runtime';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/platform-browser";
 import * as i2 from "@angular/common";
 import * as i3 from "@progress/kendo-angular-layout";
 import * as i4 from "@progress/kendo-angular-buttons";
 import * as i5 from "@memberjunction/ng-code-editor";
-const _c0 = ["htmlContainer"];
+import * as i6 from "@memberjunction/ng-react";
+const _c0 = () => ({});
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 7);
+    i0.ɵɵelement(0, "i", 6);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template, 1, 0, "i", 7);
+    i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template, 1, 0, "i", 6);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
@@ -49,7 +51,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_butto
     i0.ɵɵelementEnd()();
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 11);
+    i0.ɵɵelement(0, "i", 10);
     i0.ɵɵtext(1, " Functional Requirements ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -63,14 +65,14 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r6), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("selected", true);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 13);
+    i0.ɵɵelement(0, "i", 12);
     i0.ɵɵtext(1, " Data Requirements ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -84,15 +86,15 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r6), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 15);
+    i0.ɵɵelement(0, "i", 14);
     i0.ɵɵtext(1, " Technical Design ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -106,15 +108,15 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r6), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 17);
+    i0.ɵɵelement(0, "i", 16);
     i0.ɵɵtext(1, " Code ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -128,8 +130,8 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵproperty("value", ctx_r1.getComponentCode(option_r6))("language", "javascript")("autoFocus", false)("indentWithTab", true)("readonly", true);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_2_Template, 2, 5, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_2_Template, 2, 5, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
@@ -138,7 +140,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "kendo-tabstrip", 29);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 4)(3, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 4)(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 4)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div", 30);
     i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template_div_touchstart_6_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
@@ -156,11 +158,21 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.showCode ? 5 : -1);
 } }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 36);
+    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStateChange(ɵ$index_4_r3, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r9); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onComponentEvent(ɵ$index_4_r3, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("component", ctx_r1.componentSpecs.get(ɵ$index_4_r3))("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(ɵ$index_4_r3) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
+} }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 44)(1, "summary", 50);
+    i0.ɵɵelementStart(0, "details", 45)(1, "summary", 51);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 51);
+    i0.ɵɵelementStart(3, "pre", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -169,20 +181,20 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 23)(1, "div", 36)(2, "div", 37)(3, "button", 38);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 39);
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 37)(2, "div", 38)(3, "button", 39);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 40);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 40);
-    i0.ɵɵelement(7, "span", 41);
+    i0.ɵɵelementStart(6, "h3", 41);
+    i0.ɵɵelement(7, "span", 42);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 42);
+    i0.ɵɵelementStart(9, "p", 43);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 43)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 44)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -191,12 +203,12 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵtext(17, "Details:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18);
-    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template, 5, 1, "details", 44);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template, 5, 1, "details", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 45)(21, "strong", 46);
+    i0.ɵɵelementStart(20, "div", 46)(21, "strong", 47);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 47)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 48)(24, "li");
     i0.ɵɵtext(25, "Try selecting a different report option from the tabs above");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "li");
@@ -205,9 +217,9 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵelementStart(28, "li");
     i0.ɵɵtext(29, "Contact your IT department if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(30, "button", 48);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(31, "span", 49);
+    i0.ɵɵelementStart(30, "button", 49);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(31, "span", 50);
     i0.ɵɵtext(32, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -221,37 +233,37 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8)(2, "div", 9)(3, "button", 10);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7)(2, "div", 8)(3, "button", 9);
     i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
-    i0.ɵɵelement(4, "i", 11);
+    i0.ɵɵelement(4, "i", 10);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6, "Functional");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵelementStart(7, "button", 11);
     i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
-    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵelement(8, "i", 12);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Data");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "button", 14);
+    i0.ɵɵelementStart(11, "button", 13);
     i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
-    i0.ɵɵelement(12, "i", 15);
+    i0.ɵɵelement(12, "i", 14);
     i0.ɵɵelementStart(13, "span");
     i0.ɵɵtext(14, "Technical");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "button", 16);
+    i0.ɵɵelementStart(15, "button", 15);
     i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
-    i0.ɵɵelement(16, "i", 17);
+    i0.ɵɵelement(16, "i", 16);
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18, "Code");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "div", 18);
-    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_20_Template, 4, 2, "button", 19)(21, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_21_Template, 4, 0, "button", 20);
+    i0.ɵɵelementStart(19, "div", 17);
+    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_20_Template, 4, 2, "button", 18)(21, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_21_Template, 4, 0, "button", 19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 21);
+    i0.ɵɵelementStart(22, "div", 20);
     i0.ɵɵtemplate(23, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template, 8, 6);
-    i0.ɵɵelementStart(24, "div", 22, 0);
-    i0.ɵɵtemplate(26, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template, 33, 3, "div", 23);
+    i0.ɵɵelementStart(24, "div", 21);
+    i0.ɵɵtemplate(25, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_25_Template, 1, 6, "mj-react-component", 22)(26, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template, 33, 3, "div", 23);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
@@ -272,12 +284,14 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
     i0.ɵɵconditional(ctx_r1.showFunctionalRequirements || ctx_r1.showDataRequirements || ctx_r1.showTechnicalDesign || ctx_r1.showCode ? 23 : -1);
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-tab-index", ɵ$index_4_r3);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.componentSpecs.has(ɵ$index_4_r3));
+    i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 26 : -1);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template, 2, 2, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template, 27, 13, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template, 2, 2, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template, 27, 14, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ɵ$index_4_r3 = ctx.$index;
@@ -286,9 +300,9 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_Template(rf, ctx) {
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-tabstrip", 3);
+    i0.ɵɵelementStart(0, "kendo-tabstrip", 2);
     i0.ɵɵlistener("tabSelect", function SkipDynamicUIComponentComponent_Conditional_0_Template_kendo_tabstrip_tabSelect_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTabSelect($event)); });
-    i0.ɵɵrepeaterCreate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_Template, 3, 1, "kendo-tabstrip-tab", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_Template, 3, 1, "kendo-tabstrip-tab", 3, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -297,9 +311,9 @@ function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵrepeater(ctx_r1.reportOptions);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
+    const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 24);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
     i0.ɵɵelement(1, "i", 25);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
@@ -308,19 +322,19 @@ function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template(rf, ct
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Create ", ctx_r1.reportOptions[0] ? ctx_r1.getComponentTypeName(ctx_r1.reportOptions[0]) : "Component", "");
+    i0.ɵɵtextInterpolate1("Create ", ctx_r1.firstOptionComponentTypeName, "");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_button_21_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
+    const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
     i0.ɵɵelement(1, "i", 27);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Print Report");
     i0.ɵɵelementEnd()();
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 11);
+    i0.ɵɵelement(0, "i", 10);
     i0.ɵɵtext(1, " Functional Requirements ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -333,14 +347,14 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditiona
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("selected", true);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 13);
+    i0.ɵɵelement(0, "i", 12);
     i0.ɵɵtext(1, " Data Requirements ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -353,15 +367,15 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditiona
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 15);
+    i0.ɵɵelement(0, "i", 14);
     i0.ɵɵtext(1, " Technical Design ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
@@ -374,20 +388,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditiona
     i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 17);
+    i0.ɵɵelement(0, "i", 16);
     i0.ɵɵtext(1, " Code ");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "mj-code-editor", 53);
+    i0.ɵɵelement(1, "mj-code-editor", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -395,20 +409,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditiona
     i0.ɵɵproperty("language", "javascript")("value", ctx_r1.getComponentCode(ctx_r1.reportOptions[0]))("autoFocus", false)("indentWithTab", true)("readonly", true);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_2_Template, 2, 5, "ng-template", 6);
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_2_Template, 2, 5, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements && !ctx_r1.showTechnicalDesign);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+    const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "kendo-tabstrip", 29);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 4)(3, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 4)(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 4)(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(6, "div", 30);
-    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_touchstart_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
+    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_touchstart_6_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
     i0.ɵɵelement(7, "div", 31);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -424,10 +438,10 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template(r
     i0.ɵɵconditional(ctx_r1.showCode && ctx_r1.reportOptions[0] ? 5 : -1);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 44)(1, "summary", 50);
+    i0.ɵɵelementStart(0, "details", 45)(1, "summary", 51);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 51);
+    i0.ɵɵelementStart(3, "pre", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -436,20 +450,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Conditiona
     i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 54)(2, "div", 37)(3, "button", 38);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 39);
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 55)(2, "div", 38)(3, "button", 39);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 40);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 40);
-    i0.ɵɵelement(7, "span", 41);
+    i0.ɵɵelementStart(6, "h3", 41);
+    i0.ɵɵelement(7, "span", 42);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 42);
+    i0.ɵɵelementStart(9, "p", 43);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 43)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 44)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -458,20 +472,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template(r
     i0.ɵɵtext(17, "Details:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18);
-    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Conditional_19_Template, 5, 1, "details", 44);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Conditional_19_Template, 5, 1, "details", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 45)(21, "strong", 46);
+    i0.ɵɵelementStart(20, "div", 46)(21, "strong", 47);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 47)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 48)(24, "li");
     i0.ɵɵtext(25, "Copy the error details and send them back to Skip in the chat to get a corrected version");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "li");
     i0.ɵɵtext(27, "Contact your IT department if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "button", 48);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(29, "span", 49);
+    i0.ɵɵelementStart(28, "button", 49);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(29, "span", 50);
     i0.ɵɵtext(30, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -483,40 +497,55 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template(r
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
 } }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 36);
+    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStateChange(0, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onComponentEvent(0, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("component", ctx_r1.componentSpecs.get(0))("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(0) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
+} }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 22, 0);
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_component_1_Template, 1, 6, "mj-react-component", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.componentSpecs.has(0));
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8)(2, "div", 9)(3, "button", 10);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
-    i0.ɵɵelement(4, "i", 11);
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7)(2, "div", 8)(3, "button", 9);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
+    i0.ɵɵelement(4, "i", 10);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6, "Functional");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 12);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
-    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵelementStart(7, "button", 11);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
+    i0.ɵɵelement(8, "i", 12);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Data");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "button", 14);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
-    i0.ɵɵelement(12, "i", 15);
+    i0.ɵɵelementStart(11, "button", 13);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
+    i0.ɵɵelement(12, "i", 14);
     i0.ɵɵelementStart(13, "span");
     i0.ɵɵtext(14, "Technical");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "button", 16);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
-    i0.ɵɵelement(16, "i", 17);
+    i0.ɵɵelementStart(15, "button", 15);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
+    i0.ɵɵelement(16, "i", 16);
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18, "Code");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "div", 18);
-    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_1_button_20_Template, 4, 2, "button", 19)(21, SkipDynamicUIComponentComponent_Conditional_1_button_21_Template, 4, 0, "button", 20);
+    i0.ɵɵelementStart(19, "div", 17);
+    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_1_button_20_Template, 4, 2, "button", 18)(21, SkipDynamicUIComponentComponent_Conditional_1_button_21_Template, 4, 0, "button", 19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 21);
-    i0.ɵɵtemplate(23, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template, 8, 6)(24, SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template, 31, 3, "div", 52)(25, SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_Template, 2, 0, "div", 22);
+    i0.ɵɵelementStart(22, "div", 20);
+    i0.ɵɵtemplate(23, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template, 8, 6)(24, SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template, 31, 3, "div", 53)(25, SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_Template, 2, 1, "div", 21);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -549,11 +578,13 @@ export class SkipDynamicUIComponentComponent {
     matchingReportID = null;
     DrillDownEvent = new EventEmitter();
     CreateReportRequested = new EventEmitter();
-    htmlContainers;
+    reactComponents;
     // Properties for handling multiple report options
     reportOptions = [];
     selectedReportOptionIndex = 0;
     currentError = null;
+    // Cached component type name to avoid expression change errors
+    _cachedComponentTypeName = 'Component';
     isCreatingReport = false;
     // Toggle states for showing/hiding component details
     showFunctionalRequirements = false;
@@ -565,15 +596,12 @@ export class SkipDynamicUIComponentComponent {
     isResizing = false;
     startY = 0;
     startHeight = 0;
-    // Cache for React component hosts - lazy loaded per option
-    reactHostCache = new Map();
-    currentHostIndex = null;
-    callbacks = {
-        RefreshData: () => this.handleRefreshData(),
-        OpenEntityRecord: (entityName, key) => this.handleOpenEntityRecord(entityName, key),
-        UpdateUserState: (userState) => this.handleUpdateUserState(userState),
-        NotifyEvent: (eventName, eventData) => this.handleNotifyEvent(eventName, eventData)
-    };
+    // Cache for component specs and user states
+    componentSpecs = new Map();
+    userStates = new Map();
+    utilities = null;
+    componentStyles = null;
+    // Event handlers from React components
     constructor(sanitizer, cdr, ngZone) {
         this.sanitizer = sanitizer;
         this.cdr = cdr;
@@ -631,15 +659,14 @@ export class SkipDynamicUIComponentComponent {
         this.currentError = null;
         try {
             // Update the component info - this can fail if placeholders are missing
-            this.UIComponentCode = BuildSkipComponentCompleteCode(selectedOption.option);
+            this.UIComponentCode = BuildComponentCompleteCode(selectedOption.option);
             this.ComponentObjectName = selectedOption.option.componentName;
-            // Simply create or reuse the React host for this option
-            // The tab component handles visibility automatically
-            if (!this.reactHostCache.has(this.selectedReportOptionIndex)) {
-                // Create a new host for this option
-                this.createReactHostForOption(this.selectedReportOptionIndex);
+            // Create or update the component spec for this option
+            if (!this.componentSpecs.has(this.selectedReportOptionIndex)) {
+                this.createComponentSpecForOption(this.selectedReportOptionIndex);
+                // Trigger change detection after modifying componentSpecs
+                this.cdr.detectChanges();
             }
-            this.currentHostIndex = this.selectedReportOptionIndex;
         }
         catch (error) {
             console.error('Failed to build component code:', error);
@@ -654,21 +681,22 @@ export class SkipDynamicUIComponentComponent {
         }
     }
     async PrintReport() {
-        const currentHost = this.getCurrentReactHost();
-        if (currentHost) {
-            currentHost.print();
+        const currentComponent = this.getCurrentReactComponent();
+        if (currentComponent) {
+            // React component handles printing internally
+            window.print();
         }
         else {
             window.print();
         }
     }
     /**
-     * Copy error details to clipboard for user to send back to Skip
+     * Copy error details to clipboard for user to send back to
      */
     copyErrorToClipboard() {
         if (!this.currentError)
             return;
-        const errorText = `Skip Component Error:
+        const errorText = `Component Error:
 Type: ${this.currentError.type}
 Message: ${this.currentError.message}
 ${this.currentError.technicalDetails ? `\nTechnical Details:\n${this.currentError.technicalDetails}` : ''}
@@ -676,26 +704,25 @@ ${this.currentError.technicalDetails ? `\nTechnical Details:\n${this.currentErro
 Component Option: ${this.selectedReportOptionIndex + 1}
 Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         navigator.clipboard.writeText(errorText).then(() => {
-            alert('Error details copied to clipboard. You can paste this in the Skip chat to get help.');
+            alert('Error details copied to clipboard. You can paste this in the chat to get help.');
         }).catch(err => {
             console.error('Failed to copy to clipboard:', err);
         });
     }
     /**
-     * Get the container element for a specific option index
+     * Get the React component for a specific option index
      */
-    getContainerForOption(optionIndex) {
-        if (!this.htmlContainers || this.htmlContainers.length === 0) {
+    getReactComponentForOption(optionIndex) {
+        if (!this.reactComponents || this.reactComponents.length === 0) {
             return null;
         }
         if (this.reportOptions.length === 1) {
-            // Single option - use the only container
-            return this.htmlContainers.first?.nativeElement || null;
+            // Single option - use the only component
+            return this.reactComponents.first || null;
         }
         else {
-            // Multiple options - find container by data-tab-index
-            const container = this.htmlContainers.find(ref => ref.nativeElement.getAttribute('data-tab-index') === optionIndex.toString());
-            return container?.nativeElement || null;
+            // Multiple options - find by index
+            return this.reactComponents.toArray()[optionIndex] || null;
         }
     }
     /**
@@ -704,16 +731,10 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     retryCurrentOption() {
         // Clear the error
         this.currentError = null;
-        // Remove the cached host for this option to force recreation
-        if (this.reactHostCache.has(this.selectedReportOptionIndex)) {
-            const host = this.reactHostCache.get(this.selectedReportOptionIndex);
-            if (host) {
-                host.destroy();
-            }
-            this.reactHostCache.delete(this.selectedReportOptionIndex);
-        }
-        // Try creating it again
-        this.createReactHostForOption(this.selectedReportOptionIndex);
+        // Re-create the component spec
+        this.createComponentSpecForOption(this.selectedReportOptionIndex);
+        // Trigger change detection
+        this.cdr.detectChanges();
     }
     /**
      * Handle create report request for a specific option
@@ -730,6 +751,12 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         const type = option.option.componentType || 'report';
         return type.charAt(0).toUpperCase() + type.slice(1);
     }
+    /**
+     * Get the cached component type name for the first option to avoid change detection errors
+     */
+    get firstOptionComponentTypeName() {
+        return this._cachedComponentTypeName;
+    }
     /**
      * Toggle methods for showing/hiding component details
      */
@@ -820,7 +847,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
      */
     getComponentCode(option) {
         try {
-            return BuildSkipComponentCompleteCode(option.option);
+            return BuildComponentCompleteCode(option.option);
         }
         catch (e) {
             return `// Error building complete component code:\n// ${e}`;
@@ -879,51 +906,40 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         if (this.SkipData) {
             this.setupReportOptions(this.SkipData);
         }
-        // Wait for ViewChildren to be available
-        setTimeout(() => {
-            if (this.UIComponentCode && this.ComponentObjectName && this.SkipData) {
-                // Create the initial React host for the first option
-                this.createReactHostForOption(this.selectedReportOptionIndex);
-            }
-        });
+        // Initialize utilities and styles once using React runtime
+        const runtimeUtils = createRuntimeUtilities();
+        this.utilities = runtimeUtils.buildUtilities();
+        this.componentStyles = SetupStyles();
+        // Create component specs for all options
+        // Use Promise.resolve to avoid ExpressionChangedAfterItHasBeenCheckedError
+        if (this.reportOptions.length > 0) {
+            Promise.resolve().then(() => {
+                this.reportOptions.forEach((_, index) => {
+                    this.createComponentSpecForOption(index);
+                });
+                this.cdr.detectChanges();
+            });
+        }
     }
     ngOnDestroy() {
-        // Clean up all cached React hosts
-        this.reactHostCache.forEach(host => {
-            try {
-                host.destroy();
-            }
-            catch (e) {
-                console.error('Error destroying React host:', e);
-            }
-        });
-        this.reactHostCache.clear();
-        // Clean up registered components from the GlobalComponentRegistry
-        // Note: We don't remove them as they might be used by other instances
-        // The registry is designed to be a singleton that persists across component instances
+        // Clean up component specs and states
+        this.componentSpecs.clear();
+        this.userStates.clear();
+        // The MJReactComponent handles its own cleanup
     }
     ngOnChanges(changes) {
-        if (changes['SkipData'] && !changes['SkipData'].firstChange) {
-            // Update all cached React components with new data
-            const newData = this.getFlattenedDataContext();
-            this.reactHostCache.forEach(host => {
-                try {
-                    host.updateState('data', newData);
-                }
-                catch (e) {
-                    console.error('Error updating React host data:', e);
-                }
-            });
+        if (changes['SkipData']) {
+            const skipData = changes['SkipData'].currentValue;
+            if (skipData) {
+                this.setupReportOptions(skipData);
+            }
         }
     }
     /**
-     * Get the currently active React host
+     * Get the currently active React component
      */
-    getCurrentReactHost() {
-        if (this.currentHostIndex !== null && this.reactHostCache.has(this.currentHostIndex)) {
-            return this.reactHostCache.get(this.currentHostIndex) || null;
-        }
-        return null;
+    getCurrentReactComponent() {
+        return this.getReactComponentForOption(this.selectedReportOptionIndex);
     }
     _skipData;
     get SkipData() {
@@ -937,7 +953,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             if (d.componentOptions && d.componentOptions.length > 0) {
                 // Use the first component option (or the highest ranked one)
                 const component = d.componentOptions[0];
-                this.UIComponentCode = BuildSkipComponentCompleteCode(component.option);
+                this.UIComponentCode = BuildComponentCompleteCode(component.option);
                 this.ComponentObjectName = component.option.componentName;
             }
             else {
@@ -967,67 +983,37 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             // Select the best option (first in sorted array)
             this.selectedReportOptionIndex = 0;
             const bestOption = this.reportOptions[0];
-            this.UIComponentCode = BuildSkipComponentCompleteCode(bestOption.option);
+            this.UIComponentCode = BuildComponentCompleteCode(bestOption.option);
             this.ComponentObjectName = bestOption.option.componentName;
+            // Update cached component type name after current change detection cycle
+            Promise.resolve().then(() => {
+                this._cachedComponentTypeName = this.getComponentTypeName(bestOption);
+                this.cdr.detectChanges();
+            });
         }
     }
     /**
-     * Create a React host for a specific option index
+     * Create a component spec for a specific option index
      */
-    async createReactHostForOption(optionIndex) {
+    createComponentSpecForOption(optionIndex) {
         const option = this.reportOptions[optionIndex];
         if (!option)
             return;
-        const container = this.getContainerForOption(optionIndex);
-        if (!container)
-            return;
         try {
             const component = option.option;
-            const md = new Metadata();
-            const data = this.getFlattenedDataContext();
-            // Create the React component host directly in the tab container
-            // The host will handle registration automatically
-            const reactHost = new SkipReactComponentHost({
-                component,
-                container: container,
-                callbacks: this.callbacks,
-                data: data,
-                utilities: this.SetupUtilities(md),
-                styles: this.SetupStyles()
-                // metadata will be auto-populated from component.childComponents
-            });
-            // Initialize and render the React component
-            await reactHost.initialize();
-            // Cache the host
-            this.reactHostCache.set(optionIndex, reactHost);
-            // Update current index if this is the selected option
-            if (optionIndex === this.selectedReportOptionIndex) {
-                this.currentHostIndex = optionIndex;
+            // Store the component spec
+            this.componentSpecs.set(optionIndex, component);
+            // Initialize user state if not exists
+            if (!this.userStates.has(optionIndex)) {
+                this.userStates.set(optionIndex, {});
             }
         }
         catch (e) {
-            console.error('Error creating React host:', e);
+            console.error('Error creating component spec:', e);
             // Determine the type of error and create a user-friendly message
-            let errorType = 'Component Initialization Error';
-            let errorMessage = 'Failed to initialize the React component.';
+            let errorType = 'Component Specification Error';
+            let errorMessage = 'Failed to create component specification.';
             let technicalDetails = e.toString();
-            if (e.message?.includes('JSX transpilation failed')) {
-                errorType = 'Code Compilation Error';
-                errorMessage = 'The component code could not be compiled. This usually indicates a syntax error in the generated code.';
-                technicalDetails = e.message;
-            }
-            else if (e.message?.includes('is not defined')) {
-                errorType = 'Missing Dependency';
-                errorMessage = 'The component is trying to use a feature or library that is not available.';
-            }
-            else if (e.message?.includes('Missing required child components')) {
-                errorType = 'Incomplete Component Specification';
-                errorMessage = e.message;
-            }
-            else if (e.message?.includes('Cannot read properties')) {
-                errorType = 'Property Access Error';
-                errorMessage = 'The component is trying to access data that doesn\'t exist. This often happens when property names don\'t match the data structure.';
-            }
             this.currentError = {
                 type: errorType,
                 message: errorMessage,
@@ -1036,6 +1022,40 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             LogError(e);
         }
     }
+    /**
+     * Handle state change events from React components
+     */
+    onStateChange(optionIndex, event) {
+        const currentState = this.userStates.get(optionIndex) || {};
+        this.userStates.set(optionIndex, {
+            ...currentState,
+            [event.path]: event.value
+        });
+        // Handle any additional state change logic
+        this.handleUpdateUserState({ [event.path]: event.value });
+    }
+    /**
+     * Handle component events from React components
+     */
+    onComponentEvent(optionIndex, event) {
+        if (event.type === 'error') {
+            this.currentError = {
+                type: event.payload.source || 'React Component Error',
+                message: event.payload.error || 'An unknown error occurred',
+                technicalDetails: event.payload.errorInfo || ''
+            };
+        }
+        else {
+            this.handleNotifyEvent(event.type, event.payload);
+        }
+    }
+    /**
+     * Handle open entity record events
+     */
+    onOpenEntityRecord(event) {
+        const key = new CompositeKey([{ FieldName: 'ID', Value: event.recordId }]);
+        this.handleOpenEntityRecord(event.entityName, key);
+    }
     getFlattenedDataContext() {
         const flattenedDataContext = {};
         if (this.SkipData?.dataContext) {
@@ -1086,162 +1106,11 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }
         // TODO: Handle other custom events as needed
     }
-    SetupUtilities(md) {
-        const rv = new RunView();
-        const rq = new RunQuery();
-        const u = {
-            md: this.CreateSimpleMetadata(md),
-            rv: this.CreateSimpleRunView(rv),
-            rq: this.CreateSimpleRunQuery(rq)
-        };
-        return u;
-    }
-    CreateSimpleMetadata(md) {
-        return {
-            entities: md.Entities.map(e => MapEntityInfoToSkipEntityInfo(e))
-        };
-    }
-    SetupStyles() {
-        // Return modern, contemporary styles for generated components
-        return {
-            colors: {
-                // Primary colors - modern purple/blue gradient feel
-                primary: '#5B4FE9',
-                primaryHover: '#4940D4',
-                primaryLight: '#E8E6FF',
-                // Secondary colors - sophisticated gray
-                secondary: '#64748B',
-                secondaryHover: '#475569',
-                // Status colors
-                success: '#10B981',
-                successLight: '#D1FAE5',
-                warning: '#F59E0B',
-                warningLight: '#FEF3C7',
-                error: '#EF4444',
-                errorLight: '#FEE2E2',
-                info: '#3B82F6',
-                infoLight: '#DBEAFE',
-                // Base colors
-                background: '#FFFFFF',
-                surface: '#F8FAFC',
-                surfaceHover: '#F1F5F9',
-                // Text colors with better contrast
-                text: '#1E293B',
-                textSecondary: '#64748B',
-                textTertiary: '#94A3B8',
-                textInverse: '#FFFFFF',
-                // Border colors
-                border: '#E2E8F0',
-                borderLight: '#F1F5F9',
-                borderFocus: '#5B4FE9',
-                // Shadows (as color strings for easy use)
-                shadow: 'rgba(0, 0, 0, 0.05)',
-                shadowMedium: 'rgba(0, 0, 0, 0.1)',
-                shadowLarge: 'rgba(0, 0, 0, 0.15)',
-            },
-            spacing: {
-                xs: '4px',
-                sm: '8px',
-                md: '16px',
-                lg: '24px',
-                xl: '32px',
-                xxl: '48px',
-                xxxl: '64px',
-            },
-            typography: {
-                fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
-                fontSize: {
-                    xs: '11px',
-                    sm: '12px',
-                    md: '14px',
-                    lg: '16px',
-                    xl: '20px',
-                    xxl: '24px',
-                    xxxl: '32px',
-                },
-                fontWeight: {
-                    light: '300',
-                    regular: '400',
-                    medium: '500',
-                    semibold: '600',
-                    bold: '700',
-                },
-                lineHeight: {
-                    tight: '1.25',
-                    normal: '1.5',
-                    relaxed: '1.75',
-                },
-            },
-            borders: {
-                radius: {
-                    sm: '6px',
-                    md: '8px',
-                    lg: '12px',
-                    xl: '16px',
-                    full: '9999px',
-                },
-                width: {
-                    thin: '1px',
-                    medium: '2px',
-                    thick: '3px',
-                },
-            },
-            shadows: {
-                sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-                md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-                lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-                xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-                inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-            },
-            transitions: {
-                fast: '150ms ease-in-out',
-                normal: '250ms ease-in-out',
-                slow: '350ms ease-in-out',
-            },
-            overflow: 'auto' // Default overflow style        
-        };
-    }
-    CreateSimpleRunQuery(rq) {
-        return {
-            runQuery: async (params) => {
-                // Run a single query and return the results
-                try {
-                    const result = await rq.RunQuery(params);
-                    return result;
-                }
-                catch (error) {
-                    LogError(error);
-                    throw error; // Re-throw to handle it in the caller
-                }
-            }
-        };
-    }
-    CreateSimpleRunView(rv) {
-        return {
-            runView: async (params) => {
-                // Run a single view and return the results
-                try {
-                    const result = await rv.RunView(params);
-                    return result;
-                }
-                catch (error) {
-                    LogError(error);
-                    throw error; // Re-throw to handle it in the caller
-                }
-            },
-            runViews: async (params) => {
-                // Runs multiple views and returns the results
-                try {
-                    const results = await rv.RunViews(params);
-                    return results;
-                }
-                catch (error) {
-                    LogError(error);
-                    throw error; // Re-throw to handle it in the caller
-                }
-            }
-        };
-    }
+    // SetupUtilities method removed - now using React runtime's RuntimeUtilities
+    // CreateSimpleMetadata method removed - now using React runtime's RuntimeUtilities
+    // SetupStyles method removed - now using React runtime's SetupStyles function
+    // CreateSimpleRunQuery method removed - now using React runtime's RuntimeUtilities
+    // CreateSimpleRunView method removed - now using React runtime's RuntimeUtilities
     SetupCallbacks() {
         const cb = {
             RefreshData: () => {
@@ -1282,28 +1151,24 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         return cb;
     }
     async refreshReport(data) {
-        const currentHost = this.getCurrentReactHost();
-        if (currentHost) {
-            currentHost.refresh(data);
-        }
-        else {
-            // If no React host is available, create one for the current option
-            this.createReactHostForOption(this.selectedReportOptionIndex);
+        const currentComponent = this.getCurrentReactComponent();
+        if (currentComponent) {
+            currentComponent.refresh(data);
         }
     }
     static ɵfac = function SkipDynamicUIComponentComponent_Factory(t) { return new (t || SkipDynamicUIComponentComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicUIComponentComponent, selectors: [["skip-dynamic-ui-component"]], viewQuery: function SkipDynamicUIComponentComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(MJReactComponent, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainers = _t);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponents = _t);
         } }, hostBindings: function SkipDynamicUIComponentComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("resize", function SkipDynamicUIComponentComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
-        } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [["htmlContainer", ""], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], ["title", "Toggle Functional Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Toggle Data Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-database"], ["title", "Toggle Technical Design", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-cogs"], ["title", "Toggle Code View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-code"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [2, "flex", "1", "position", "relative", "min-height", "0", "overflow", "auto"], [2, "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "value", "language", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "height", "500px", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"], [2, "position", "relative"], ["kendoButton", "", 2, "position", "absolute", "top", "0", "right", "0", "font-size", "12px", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "color", "#dc3545", "margin-top", "0", "margin-right", "150px", "font-size", "18px"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "margin-bottom", "10px", "font-size", "14px"], [2, "background-color", "#fff", "border", "1px solid #dee2e6", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px", "font-family", "'Courier New', monospace", "font-size", "12px"], [2, "margin-top", "8px"], [2, "background-color", "#e7f3ff", "border", "1px solid #b3d9ff", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px"], [2, "font-size", "14px"], [2, "margin", "8px 0 0 20px", "padding", "0", "font-size", "13px"], ["kendoButton", "", 2, "font-size", "13px", 3, "click"], [1, "fa-solid", "fa-rotate"], [2, "cursor", "pointer", "color", "#0056b3"], [2, "margin-top", "8px", "white-space", "pre-wrap", "word-break", "break-word", "font-size", "11px"], [2, "flex", "1", "display", "flex", "align-items", "center", "justify-content", "center", "min-height", "400px", "padding", "20px", "background", "rgba(255, 255, 255, 0.95)"], [2, "height", "100%", 3, "language", "value", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "max-height", "80vh", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 1)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 26, 12, "div", 2);
+        } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], ["title", "Toggle Functional Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Toggle Data Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-database"], ["title", "Toggle Technical Design", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-cogs"], ["title", "Toggle Code View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-code"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [2, "flex", "1", "position", "relative", "min-height", "0", "overflow", "auto"], ["style", "width: 100%; height: 100%;", 3, "component", "data", "state", "utilities", "styles", "stateChange", "componentEvent", "refreshData", "openEntityRecord", 4, "ngIf"], [2, "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "value", "language", "autoFocus", "indentWithTab", "readonly"], [2, "width", "100%", "height", "100%", 3, "stateChange", "componentEvent", "refreshData", "openEntityRecord", "component", "data", "state", "utilities", "styles"], [2, "width", "90%", "max-width", "600px", "height", "500px", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"], [2, "position", "relative"], ["kendoButton", "", 2, "position", "absolute", "top", "0", "right", "0", "font-size", "12px", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "color", "#dc3545", "margin-top", "0", "margin-right", "150px", "font-size", "18px"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "margin-bottom", "10px", "font-size", "14px"], [2, "background-color", "#fff", "border", "1px solid #dee2e6", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px", "font-family", "'Courier New', monospace", "font-size", "12px"], [2, "margin-top", "8px"], [2, "background-color", "#e7f3ff", "border", "1px solid #b3d9ff", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px"], [2, "font-size", "14px"], [2, "margin", "8px 0 0 20px", "padding", "0", "font-size", "13px"], ["kendoButton", "", 2, "font-size", "13px", 3, "click"], [1, "fa-solid", "fa-rotate"], [2, "cursor", "pointer", "color", "#0056b3"], [2, "margin-top", "8px", "white-space", "pre-wrap", "word-break", "break-word", "font-size", "11px"], [2, "flex", "1", "display", "flex", "align-items", "center", "justify-content", "center", "min-height", "400px", "padding", "20px", "background", "rgba(255, 255, 255, 0.95)"], [2, "height", "100%", 3, "language", "value", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "max-height", "80vh", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 0)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 26, 12, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
-        } }, dependencies: [i2.NgIf, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.CodeEditorComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
+        } }, dependencies: [i2.NgIf, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.CodeEditorComponent, i6.MJReactComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
         type: Component,
@@ -1447,9 +1312,21 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
                   }
                   
                   <!-- React component container -->
-                  <div #htmlContainer [attr.data-tab-index]="i" 
+                  <div [attr.data-tab-index]="i" 
                        style="flex: 1; position: relative; min-height: 0; overflow: auto;">
-                    <!-- Content will be rendered here by React host -->
+                    <mj-react-component
+                      *ngIf="!currentError && componentSpecs.has(i)"
+                      [component]="componentSpecs.get(i)!"
+                      [data]="getFlattenedDataContext()"
+                      [state]="userStates.get(i) || {}"
+                      [utilities]="utilities"
+                      [styles]="componentStyles || undefined"
+                      (stateChange)="onStateChange(i, $event)"
+                      (componentEvent)="onComponentEvent(i, $event)"
+                      (refreshData)="handleRefreshData()"
+                      (openEntityRecord)="onOpenEntityRecord($event)"
+                      style="width: 100%; height: 100%;">
+                    </mj-react-component>
                     
                     <!-- Error overlay for this tab (shown on top of content when needed) -->
                   @if (currentError && selectedReportOptionIndex === i) {
@@ -1563,7 +1440,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
                     (click)="createReportForOption(0)"
                     [disabled]="isCreatingReport">
               <i class="fa-solid fa-plus"></i>
-              <span>Create {{ reportOptions[0] ? getComponentTypeName(reportOptions[0]) : 'Component' }}</span>
+              <span>Create {{ firstOptionComponentTypeName }}</span>
             </button>
             <button class="tab-action-button print-button" 
                     *ngIf="ShowPrintReport" 
@@ -1702,8 +1579,20 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             </div>
           } @else {
             <!-- React component container (only shown when no error) -->
-            <div #htmlContainer style="flex: 1; position: relative; min-height: 0; overflow: auto;">
-              <!-- Content will be rendered here by React host -->
+            <div style="flex: 1; position: relative; min-height: 0; overflow: auto;">
+              <mj-react-component
+                *ngIf="componentSpecs.has(0)"
+                [component]="componentSpecs.get(0)!"
+                [data]="getFlattenedDataContext()"
+                [state]="userStates.get(0) || {}"
+                [utilities]="utilities"
+                [styles]="componentStyles || undefined"
+                (stateChange)="onStateChange(0, $event)"
+                (componentEvent)="onComponentEvent(0, $event)"
+                (refreshData)="handleRefreshData()"
+                (openEntityRecord)="onOpenEntityRecord($event)"
+                style="width: 100%; height: 100%;">
+              </mj-react-component>
             </div>
           }
         </div>
@@ -1727,14 +1616,14 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             type: Output
         }], CreateReportRequested: [{
             type: Output
-        }], htmlContainers: [{
+        }], reactComponents: [{
             type: ViewChildren,
-            args: ['htmlContainer']
+            args: [MJReactComponent]
         }], onWindowResize: [{
             type: HostListener,
             args: ['window:resize']
         }], SkipData: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 694 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 720 }); })();
 //# sourceMappingURL=dynamic-ui-component.js.map