@memberjunction/ng-skip-chat 2.96.0 → 2.98.0

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChildren, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChildren, ChangeDetectionStrategy } from '@angular/core';
 import { CompositeKey, LogError, Metadata } from '@memberjunction/core';
 import { BuildComponentCompleteCode } from '@memberjunction/interactive-component-types';
 import { DrillDownInfo } from '../drill-down-info';
@@ -27,11 +27,11 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Templ
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getTabTitle(ɵ$index_4_r3), " ");
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_24_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(ɵ$index_4_r3)); });
-    i0.ɵɵelement(1, "i", 27);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(ɵ$index_4_r3)); });
+    i0.ɵɵelement(1, "i", 16);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Save Report");
     i0.ɵɵelementEnd()();
@@ -39,192 +39,65 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_butto
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_25_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(ɵ$index_4_r3)); });
-    i0.ɵɵelement(1, "i", 29);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(ɵ$index_4_r3)); });
+    i0.ɵɵelement(1, "i", 18);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Open Saved Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_26_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
-    i0.ɵɵelement(1, "i", 31);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Print Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 10);
-    i0.ɵɵtext(1, " Functional Requirements ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r9 = i0.ɵɵnextContext(4).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r9), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_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_28_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 12);
-    i0.ɵɵtext(1, " Data Requirements ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r9 = i0.ɵɵnextContext(4).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r9), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_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_28_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
-    i0.ɵɵtext(1, " Technical Design ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const option_r9 = i0.ɵɵnextContext(4).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r9), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_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_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 21);
+    i0.ɵɵtext(1, " Component ");
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 16);
-    i0.ɵɵtext(1, " Code ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "mj-code-editor", 39);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const option_r9 = i0.ɵɵnextContext(4).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.getComponentCode(option_r9))("language", "javascript")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_ng_template_2_Template, 2, 6, "ng-template", 5);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
-    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements && !ctx_r1.showTechnicalDesign);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 16);
-    i0.ɵɵtext(1, " Spec ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "mj-code-editor", 39);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const option_r9 = i0.ɵɵnextContext(4).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.getComponentSpec(option_r9))("language", "json")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_ng_template_2_Template, 2, 6, "ng-template", 5);
-    i0.ɵɵelementEnd();
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "kendo-tabstrip", 33);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3)(6, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Conditional_6_Template, 3, 0, "kendo-tabstrip-tab");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Template_div_mousedown_7_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_28_Template_div_touchstart_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
-    i0.ɵɵelement(8, "div", 35);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵstyleProp("height", ctx_r1.detailsPanelHeight);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showDataRequirements ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showTechnicalDesign ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showCode ? 5 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showSpec ? 6 : -1);
-} }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_30_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 40);
-    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_30_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r12); 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_30_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r12); 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_30_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r12); 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_30_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_mj_react_component_1_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 25);
+    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_mj_react_component_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$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_ng_template_11_mj_react_component_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r7); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$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_ng_template_11_mj_react_component_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_mj_react_component_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index;
+    const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("component", ctx_r1.componentOptions[ɵ$index_4_r3].option)("styles", ctx_r1.componentStyles || undefined);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 49)(1, "summary", 55);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 34)(1, "summary", 40);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 56);
+    i0.ɵɵelementStart(3, "pre", 41);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(5);
+    const ctx_r1 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 41)(2, "div", 42)(3, "button", 43);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 44);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 26)(2, "div", 27)(3, "button", 28);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 29);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 45);
-    i0.ɵɵelement(7, "span", 46);
+    i0.ɵɵelementStart(6, "h3", 30);
+    i0.ɵɵelement(7, "span", 31);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 47);
+    i0.ɵɵelementStart(9, "p", 32);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 48)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 33)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -233,12 +106,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_31_Conditional_19_Template, 5, 1, "details", 49);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Conditional_19_Template, 5, 1, "details", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
+    i0.ɵɵelementStart(20, "div", 35)(21, "strong", 36);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 52)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 37)(24, "li");
     i0.ɵɵtext(25, "Try selecting a different report option from the tabs above");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "li");
@@ -247,13 +120,13 @@ 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", 53);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(31, "span", 54);
+    i0.ɵɵelementStart(30, "button", 38);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(31, "span", 39);
     i0.ɵɵtext(32, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(14);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
     i0.ɵɵadvance(4);
@@ -261,77 +134,128 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    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", 10);
-    i0.ɵɵelementStart(5, "span");
-    i0.ɵɵtext(6, "Functional");
-    i0.ɵɵelementEnd()();
-    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", 12);
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10, "Data");
-    i0.ɵɵelementEnd()();
-    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", 14);
-    i0.ɵɵelementStart(13, "span");
-    i0.ɵɵtext(14, "Technical");
-    i0.ɵɵelementEnd()();
-    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", 16);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Code");
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_mj_react_component_1_Template, 1, 2, "mj-react-component", 23)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Template, 33, 3, "div", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.componentOptions[ɵ$index_4_r3] && ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 2 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 42);
+    i0.ɵɵtext(1, " Functional ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r9 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r9), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵtext(1, " Technical ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r9 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r9), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+    i0.ɵɵtext(1, " Data Spec ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r9 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r9), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 47);
+    i0.ɵɵtext(1, " Code ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_23_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "mj-code-editor", 49);
+    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_23_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "button", 17);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowSpec()); });
-    i0.ɵɵelement(20, "i", 16);
-    i0.ɵɵelementStart(21, "span");
-    i0.ɵɵtext(22, "Spec");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 18);
-    i0.ɵɵtemplate(24, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_24_Template, 4, 1, "button", 19)(25, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_25_Template, 4, 0, "button", 20)(26, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_26_Template, 4, 0, "button", 21);
+} if (rf & 2) {
+    const option_r9 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentCode(option_r9))("language", "javascript")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
+    i0.ɵɵtext(1, " Spec ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_26_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "mj-code-editor", 49);
+    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_26_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 22);
-    i0.ɵɵtemplate(28, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_28_Template, 9, 7);
-    i0.ɵɵelementStart(29, "div", 23);
-    i0.ɵɵtemplate(30, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_30_Template, 1, 2, "mj-react-component", 24)(31, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Template, 33, 3, "div", 25);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
+    const option_r9 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.showFunctionalRequirements);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showDataRequirements);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showTechnicalDesign);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showCode);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentSpec(option_r9))("language", "json")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7);
+    i0.ɵɵelement(2, "div", 8);
+    i0.ɵɵelementStart(3, "div", 9);
+    i0.ɵɵtemplate(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template, 4, 1, "button", 10)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template, 4, 0, "button", 11)(6, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template, 4, 0, "button", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 13)(8, "kendo-tabstrip", 14)(9, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(10, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_10_Template, 2, 0, "ng-template", 4)(11, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Template, 3, 2, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(13, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_13_Template, 2, 0, "ng-template", 4)(14, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_14_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(16, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_16_Template, 2, 0, "ng-template", 4)(17, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_17_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_19_Template, 2, 0, "ng-template", 4)(20, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_20_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(22, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_22_Template, 2, 0, "ng-template", 4)(23, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_23_Template, 2, 6, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(25, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_25_Template, 2, 0, "ng-template", 4)(26, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_26_Template, 2, 6, "ng-template", 5);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showSpec);
-    i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements || ctx_r1.showDataRequirements || ctx_r1.showTechnicalDesign || ctx_r1.showCode ? 28 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("data-tab-index", ɵ$index_4_r3);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.componentOptions[ɵ$index_4_r3] && ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 31 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("selected", true);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     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, 32, 17, "ng-template", 5);
+    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, 4, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ɵ$index_4_r3 = ctx.$index;
@@ -350,192 +274,76 @@ function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.componentOptions);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_button_24_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
-    i0.ɵɵelement(1, "i", 27);
+function SkipDynamicUIComponentComponent_Conditional_1_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_4_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", 16);
     i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Create Report");
+    i0.ɵɵtext(3, "Save Report");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_button_25_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(0)); });
-    i0.ɵɵelement(1, "i", 29);
+function SkipDynamicUIComponentComponent_Conditional_1_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(0)); });
+    i0.ɵɵelement(1, "i", 18);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Open Saved Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_button_26_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_26_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
-    i0.ɵɵelement(1, "i", 31);
+function SkipDynamicUIComponentComponent_Conditional_1_button_6_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 20);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Print Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 10);
-    i0.ɵɵtext(1, " Functional Requirements ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_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_28_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 12);
-    i0.ɵɵtext(1, " Data Requirements ");
+function SkipDynamicUIComponentComponent_Conditional_1_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 21);
+    i0.ɵɵtext(1, " Component ");
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_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_28_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 14);
-    i0.ɵɵtext(1, " Technical Design ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "div", 37);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_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_28_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 16);
-    i0.ɵɵtext(1, " Code ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "mj-code-editor", 59);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("language", "javascript")("value", ctx_r1.getComponentCode(ctx_r1.componentOptions[0]))("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_ng_template_2_Template, 2, 6, "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_28_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
-    i0.ɵɵtext(1, " Spec ");
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "mj-code-editor", 39);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.getComponentSpec(ctx_r1.componentOptions[0]))("language", "json")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 3);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_ng_template_2_Template, 2, 6, "ng-template", 5);
+function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 25);
+    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStateChange(0, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onComponentEvent(0, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r15); 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("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements && !ctx_r1.showTechnicalDesign && !ctx_r1.showCode);
-} }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "kendo-tabstrip", 33);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3)(6, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_Template, 3, 1, "kendo-tabstrip-tab", 3);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template_div_mousedown_7_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template_div_touchstart_7_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
-    i0.ɵɵelement(8, "div", 35);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleProp("height", ctx_r1.detailsPanelHeight);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements && ctx_r1.componentOptions[0] ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showDataRequirements && ctx_r1.componentOptions[0] ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showTechnicalDesign && ctx_r1.componentOptions[0] ? 4 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showCode && ctx_r1.componentOptions[0] ? 5 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.showSpec && ctx_r1.componentOptions[0] ? 6 : -1);
+    i0.ɵɵproperty("component", ctx_r1.componentOptions[0].option)("styles", ctx_r1.componentStyles || undefined);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 49)(1, "summary", 55);
+function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 34)(1, "summary", 40);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 56);
+    i0.ɵɵelementStart(3, "pre", 41);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 60)(2, "div", 42)(3, "button", 43);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 44);
+function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 26)(2, "div", 27)(3, "button", 28);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 29);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 45);
-    i0.ɵɵelement(7, "span", 46);
+    i0.ɵɵelementStart(6, "h3", 30);
+    i0.ɵɵelement(7, "span", 31);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 47);
+    i0.ɵɵelementStart(9, "p", 32);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 48)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 33)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -544,24 +352,24 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template(r
     i0.ɵɵtext(17, "Details:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18);
-    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Conditional_19_Template, 5, 1, "details", 49);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Conditional_19_Template, 5, 1, "details", 34);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
+    i0.ɵɵelementStart(20, "div", 35)(21, "strong", 36);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 52)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 37)(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", 53);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(29, "span", 54);
+    i0.ɵɵelementStart(28, "button", 38);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(29, "span", 39);
     i0.ɵɵtext(30, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(14);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
     i0.ɵɵadvance(4);
@@ -569,84 +377,140 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template(r
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 40);
-    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStateChange(0, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onComponentEvent(0, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template, 1, 2, "mj-react-component", 51)(2, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template, 31, 3, "div", 24);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.currentError && ctx_r1.componentOptions[0] ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentError ? 2 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 42);
+    i0.ɵɵtext(1, " Functional ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("component", ctx_r1.componentOptions[0].option)("styles", ctx_r1.componentStyles || undefined);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_mj_react_component_1_Template, 1, 2, "mj-react-component", 24);
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_ng_template_2_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵtext(1, " Technical ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.componentOptions[0]);
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = 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(_r14); 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", 11);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
-    i0.ɵɵelement(8, "i", 12);
-    i0.ɵɵelementStart(9, "span");
-    i0.ɵɵtext(10, "Data");
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_ng_template_2_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+    i0.ɵɵtext(1, " Data Spec ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "div", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(ctx_r1.componentOptions[0]), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_ng_template_2_Template, 2, 1, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 47);
+    i0.ɵɵtext(1, " Code ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "mj-code-editor", 49);
+    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "button", 13);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
-    i0.ɵɵelement(12, "i", 14);
-    i0.ɵɵelementStart(13, "span");
-    i0.ɵɵtext(14, "Technical");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentCode(ctx_r1.componentOptions[0]))("language", "javascript")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_2_Template, 2, 6, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
+    i0.ɵɵtext(1, " Spec ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "mj-code-editor", 49);
+    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "button", 15);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
-    i0.ɵɵelement(16, "i", 16);
-    i0.ɵɵelementStart(17, "span");
-    i0.ɵɵtext(18, "Code");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentSpec(ctx_r1.componentOptions[0]))("language", "json")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab");
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_ng_template_2_Template, 2, 6, "ng-template", 5);
+    i0.ɵɵelementEnd();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 7);
+    i0.ɵɵelement(2, "div", 8);
+    i0.ɵɵelementStart(3, "div", 9);
+    i0.ɵɵtemplate(4, SkipDynamicUIComponentComponent_Conditional_1_button_4_Template, 4, 1, "button", 10)(5, SkipDynamicUIComponentComponent_Conditional_1_button_5_Template, 4, 0, "button", 11)(6, SkipDynamicUIComponentComponent_Conditional_1_button_6_Template, 4, 0, "button", 12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "button", 17);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowSpec()); });
-    i0.ɵɵelement(20, "i", 57);
-    i0.ɵɵelementStart(21, "span");
-    i0.ɵɵtext(22, "Spec");
+    i0.ɵɵelementStart(7, "div", 13)(8, "kendo-tabstrip", 14)(9, "kendo-tabstrip-tab", 3);
+    i0.ɵɵtemplate(10, SkipDynamicUIComponentComponent_Conditional_1_ng_template_10_Template, 2, 0, "ng-template", 4)(11, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Template, 3, 2, "ng-template", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_Template, 3, 0, "kendo-tabstrip-tab")(13, SkipDynamicUIComponentComponent_Conditional_1_Conditional_13_Template, 3, 0, "kendo-tabstrip-tab")(14, SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_Template, 3, 0, "kendo-tabstrip-tab")(15, SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_Template, 3, 0, "kendo-tabstrip-tab")(16, SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_Template, 3, 0, "kendo-tabstrip-tab");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(23, "div", 18);
-    i0.ɵɵtemplate(24, SkipDynamicUIComponentComponent_Conditional_1_button_24_Template, 4, 1, "button", 19)(25, SkipDynamicUIComponentComponent_Conditional_1_button_25_Template, 4, 0, "button", 20)(26, SkipDynamicUIComponentComponent_Conditional_1_button_26_Template, 4, 0, "button", 21);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 22);
-    i0.ɵɵtemplate(28, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template, 9, 7)(29, SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template, 31, 3, "div", 58)(30, SkipDynamicUIComponentComponent_Conditional_1_Conditional_30_Template, 2, 1, "div", 23);
-    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(3);
-    i0.ɵɵclassProp("active", ctx_r1.showFunctionalRequirements);
     i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showDataRequirements);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showTechnicalDesign);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showCode);
-    i0.ɵɵadvance(4);
-    i0.ɵɵclassProp("active", ctx_r1.showSpec);
-    i0.ɵɵadvance(5);
     i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements || ctx_r1.showDataRequirements || ctx_r1.showTechnicalDesign || ctx_r1.showCode || ctx_r1.showSpec ? 28 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("selected", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 13 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentError ? 29 : 30);
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 16 : -1);
 } }
 export class SkipDynamicUIComponentComponent {
     sanitizer;
@@ -671,22 +535,11 @@ export class SkipDynamicUIComponentComponent {
     // Cached component type name to avoid expression change errors
     _cachedComponentTypeName = 'Component';
     isCreatingReport = false;
-    // Toggle states for showing/hiding component details
-    showFunctionalRequirements = false;
-    showDataRequirements = false;
-    showTechnicalDesign = false;
-    showCode = false;
-    showSpec = false;
     // Toolbar configuration for code editors
     codeToolbarConfig = {
         enabled: true,
         buttons: [TOOLBAR_BUTTONS.COPY]
     };
-    // Details panel height for resizing
-    detailsPanelHeight = '300px';
-    isResizing = false;
-    startY = 0;
-    startHeight = 0;
     // Cache for user states only - component specs come from data
     userStates = new Map();
     // Note: utilities are now auto-initialized by mj-react-component if not provided
@@ -776,13 +629,144 @@ export class SkipDynamicUIComponentComponent {
             this.ComponentObjectName = null;
         }
     }
+    /**
+     * Print the current report
+     * Uses a hidden iframe to print only the component content without opening new windows
+     */
     async PrintReport() {
-        const currentComponent = this.getCurrentReactComponent();
-        if (currentComponent) {
-            // React component handles printing internally
-            window.print();
+        try {
+            // Find the currently visible React component
+            let componentElement = null;
+            const allComponents = document.querySelectorAll('mj-react-component');
+            for (const comp of Array.from(allComponents)) {
+                const rect = comp.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    const parent = comp.closest('.k-content.k-state-active');
+                    if (parent || allComponents.length === 1) {
+                        componentElement = comp;
+                        break;
+                    }
+                }
+            }
+            if (!componentElement) {
+                console.warn('No visible React component found to print');
+                window.print();
+                return;
+            }
+            // Create a hidden iframe for printing
+            const printFrame = document.createElement('iframe');
+            printFrame.style.position = 'absolute';
+            printFrame.style.width = '0';
+            printFrame.style.height = '0';
+            printFrame.style.border = 'none';
+            printFrame.style.left = '-9999px';
+            document.body.appendChild(printFrame);
+            const printDocument = printFrame.contentDocument || printFrame.contentWindow?.document;
+            if (!printDocument) {
+                console.error('Could not access iframe document');
+                document.body.removeChild(printFrame);
+                window.print();
+                return;
+            }
+            // Clone the component element to preserve current state
+            const clonedContent = componentElement.cloneNode(true);
+            // Get all stylesheets
+            const styleSheets = Array.from(document.styleSheets)
+                .map(sheet => {
+                try {
+                    return Array.from(sheet.cssRules || [])
+                        .map(rule => rule.cssText)
+                        .join('\n');
+                }
+                catch (e) {
+                    return '';
+                }
+            })
+                .filter(css => css.length > 0)
+                .join('\n');
+            // Get external stylesheet links
+            const styleLinks = Array.from(document.querySelectorAll('link[rel="stylesheet"]'))
+                .map(link => link.href)
+                .map(href => `<link rel="stylesheet" href="${href}">`)
+                .join('\n');
+            // Build the print document
+            printDocument.open();
+            printDocument.write(`
+                <!DOCTYPE html>
+                <html>
+                <head>
+                    <meta charset="utf-8">
+                    <title>Print Report</title>
+                    ${styleLinks}
+                    <style>
+                        ${styleSheets}
+                        
+                        /* Reset styles for print */
+                        body {
+                            margin: 0;
+                            padding: 20px;
+                            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+                            background: white;
+                        }
+                        
+                        /* Ensure proper print colors */
+                        * {
+                            -webkit-print-color-adjust: exact !important;
+                            print-color-adjust: exact !important;
+                            color-adjust: exact !important;
+                        }
+                        
+                        /* Make sure charts and tables are visible */
+                        canvas, svg {
+                            max-width: 100% !important;
+                            page-break-inside: avoid;
+                        }
+                        
+                        table {
+                            width: 100% !important;
+                            page-break-inside: auto;
+                        }
+                        
+                        tr {
+                            page-break-inside: avoid;
+                            page-break-after: auto;
+                        }
+                        
+                        /* Hide any remaining UI elements */
+                        .k-tabstrip-items,
+                        .tab-action-bar,
+                        button {
+                            display: none !important;
+                        }
+                        
+                        @media print {
+                            body {
+                                margin: 0;
+                                padding: 10px;
+                            }
+                        }
+                    </style>
+                </head>
+                <body></body>
+                </html>
+            `);
+            printDocument.close();
+            // Append the cloned content
+            printDocument.body.appendChild(clonedContent);
+            // Wait for content to render (especially important for charts)
+            await new Promise(resolve => setTimeout(resolve, 500));
+            // Trigger print for the iframe
+            if (printFrame.contentWindow) {
+                printFrame.contentWindow.focus();
+                printFrame.contentWindow.print();
+            }
+            // Clean up the iframe after a delay to ensure print dialog has opened
+            setTimeout(() => {
+                document.body.removeChild(printFrame);
+            }, 1000);
         }
-        else {
+        catch (error) {
+            console.error('Error printing report:', error);
             window.print();
         }
     }
@@ -870,42 +854,6 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     get firstOptionComponentTypeName() {
         return this._cachedComponentTypeName;
     }
-    /**
-     * Toggle methods for showing/hiding component details
-     */
-    toggleShowFunctionalRequirements() {
-        this.showFunctionalRequirements = !this.showFunctionalRequirements;
-        this.adjustDetailsPanelHeight();
-    }
-    toggleShowDataRequirements() {
-        this.showDataRequirements = !this.showDataRequirements;
-        this.adjustDetailsPanelHeight();
-    }
-    toggleShowTechnicalDesign() {
-        this.showTechnicalDesign = !this.showTechnicalDesign;
-        this.adjustDetailsPanelHeight();
-    }
-    toggleShowCode() {
-        this.showCode = !this.showCode;
-        this.adjustDetailsPanelHeight();
-    }
-    toggleShowSpec() {
-        this.showSpec = !this.showSpec;
-        this.adjustDetailsPanelHeight();
-    }
-    /**
-     * Adjust the details panel height when toggling views
-     */
-    adjustDetailsPanelHeight() {
-        const anyVisible = this.showFunctionalRequirements || this.showDataRequirements ||
-            this.showTechnicalDesign || this.showCode || this.showSpec;
-        if (anyVisible && this.detailsPanelHeight === '0px') {
-            this.detailsPanelHeight = '300px';
-        }
-        else if (!anyVisible) {
-            this.detailsPanelHeight = '0px';
-        }
-    }
     /**
      * Format functional requirements as HTML
      */
@@ -994,60 +942,11 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             return `// Error building complete component spec:\n// ${e}`;
         }
     }
-    /**
-     * Start resizing the details panel
-     */
-    startResize(event) {
-        event.preventDefault();
-        this.isResizing = true;
-        this.startY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        this.startHeight = parseInt(this.detailsPanelHeight, 10);
-        // Use NgZone to run outside Angular to prevent change detection during drag
-        this.ngZone.runOutsideAngular(() => {
-            document.addEventListener('mousemove', this.onResize);
-            document.addEventListener('mouseup', this.stopResize);
-            document.addEventListener('touchmove', this.onResize);
-            document.addEventListener('touchend', this.stopResize);
-        });
-    }
-    /**
-     * Handle resize movement
-     */
-    onResize = (event) => {
-        if (!this.isResizing)
-            return;
-        const currentY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-        const deltaY = currentY - this.startY;
-        const newHeight = Math.max(100, Math.min(600, this.startHeight + deltaY));
-        // Run inside Angular to update the binding
-        this.ngZone.run(() => {
-            this.detailsPanelHeight = `${newHeight}px`;
-            this.cdr.detectChanges();
-        });
-    };
-    /**
-     * Stop resizing
-     */
-    stopResize = () => {
-        this.isResizing = false;
-        document.removeEventListener('mousemove', this.onResize);
-        document.removeEventListener('mouseup', this.stopResize);
-        document.removeEventListener('touchmove', this.onResize);
-        document.removeEventListener('touchend', this.stopResize);
-    };
-    onWindowResize() {
-        // Ensure the details panel height remains valid on window resize
-        const currentHeight = parseInt(this.detailsPanelHeight, 10);
-        const maxHeight = window.innerHeight * 0.6;
-        if (currentHeight > maxHeight) {
-            this.detailsPanelHeight = `${maxHeight}px`;
-        }
-    }
     async ngAfterViewInit() {
         // Initialize libraries once per application if not already done
         if (!SkipDynamicUIComponentComponent.librariesInitialized) {
             try {
-                await this.adapter.initialize(undefined, SKIP_CHAT_ADDITIONAL_LIBRARIES);
+                await this.adapter.initialize(undefined, SKIP_CHAT_ADDITIONAL_LIBRARIES, { debug: true });
                 SkipDynamicUIComponentComponent.librariesInitialized = true;
             }
             catch (error) {
@@ -1076,10 +975,6 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     ngOnDestroy() {
         // Clean up user states
         this.userStates.clear();
-        // Ensure resize listeners are removed if still active
-        if (this.isResizing) {
-            this.stopResize();
-        }
         // The MJReactComponent handles its own cleanup
     }
     ngOnChanges(changes) {
@@ -1291,17 +1186,15 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         } if (rf & 2) {
             let _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", ShowOpenSavedReportButton: "ShowOpenSavedReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested", NavigateToMatchingReportRequested: "NavigateToMatchingReportRequested" }, 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"], ["title", "Toggle Spec View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button create-button", 3, "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", "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-save"], [1, "tab-action-button", "create-button", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["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, "toolbarAction", "value", "language", "autoFocus", "indentWithTab", "readonly", "toolbar"], [2, "width", "100%", "height", "100%", 3, "stateChange", "componentEvent", "refreshData", "openEntityRecord", "component", "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"], [1, "fa-solid", "fa-file-code"], [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, "toolbarAction", "language", "value", "autoFocus", "indentWithTab", "readonly", "toolbar"], [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, 31, 15, "div", 1);
+        } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", ShowOpenSavedReportButton: "ShowOpenSavedReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested", NavigateToMatchingReportRequested: "NavigateToMatchingReportRequested" }, 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"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button create-button", 3, "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [1, "inner-tabstrip-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [1, "inner-tabs", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-save"], [1, "tab-action-button", "create-button", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "fa-solid", "fa-chart-line"], [2, "height", "100%", "position", "relative", "overflow", "auto"], ["style", "width: 100%; height: 100%;", 3, "component", "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"], [2, "width", "100%", "height", "100%", 3, "stateChange", "componentEvent", "refreshData", "openEntityRecord", "component", "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"], [1, "fa-solid", "fa-list-check"], [1, "details-content", 2, "height", "100%", "overflow", "auto", "padding", "20px"], [3, "innerHTML"], [1, "fa-solid", "fa-cogs"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-code"], [1, "details-content", "code-content", 2, "height", "100%", "overflow", "hidden"], [2, "height", "100%", 3, "toolbarAction", "value", "language", "autoFocus", "indentWithTab", "readonly", "toolbar"], [1, "fa-solid", "fa-file-code"], [2, "width", "100%", "height", "100%", 3, "component", "styles"]], 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, 17, 9, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.componentOptions.length > 1 ? 0 : 1);
-        } }, dependencies: [i3.NgIf, i4.TabStripComponent, i4.TabStripTabComponent, i4.TabContentDirective, i4.TabTitleDirective, i5.ButtonComponent, i6.CodeEditorComponent, i2.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}"], changeDetection: 0 });
+        } }, dependencies: [i3.NgIf, i4.TabStripComponent, i4.TabStripTabComponent, i4.TabContentDirective, i4.TabTitleDirective, i5.ButtonComponent, i6.CodeEditorComponent, i2.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: 0;\n}\n\n  .k-tabstrip-items {\n  background: #f8f9fa;\n  border: none;\n  border-bottom: 1px solid #e0e0e0;\n  flex: 0 0 auto;\n  padding: 4px 8px 0 8px;\n  gap: 2px;\n  display: flex;\n  min-height: auto;\n  height: auto;\n}\n\n  .k-tabstrip-items-wrapper {\n  height: auto;\n  min-height: auto;\n}\n\n  .k-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 0;\n  background: white;\n  border: none;\n  min-height: 0;\n}\n\n  .k-tabstrip .k-item {\n  margin-right: 2px;\n  border: none;\n  background: transparent;\n  border-radius: 4px 4px 0 0;\n  padding: 0;\n  transition: all 0.2s ease;\n  height: auto;\n  min-height: auto;\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: 6px 12px;\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  display: flex;\n  align-items: center;\n  gap: 3px;\n  line-height: 1.2;\n  min-height: auto;\n  height: auto;\n}\n\n  .k-tabstrip .k-link i {\n  font-size: 12px;\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}\n\n\n\n  .inner-tabs .k-tabstrip-items-wrapper {\n  overflow-x: auto !important;\n  overflow-y: hidden !important;\n  max-width: 100%;\n}\n\n  .inner-tabs .k-tabstrip-items {\n  display: inline-flex !important;\n  flex-wrap: nowrap !important;\n  width: max-content !important;\n  padding: 4px 8px 0 8px;\n  background: #fff;\n  border-bottom: 1px solid #e8e8e8;\n}\n\n  .inner-tabs .k-tabstrip-item {\n  flex: 0 0 auto !important;\n  display: inline-block !important;\n  float: none !important;\n}\n\n  .inner-tabs .k-link {\n  padding: 6px 12px;\n  font-size: 12px;\n  white-space: nowrap !important;\n  display: inline-flex !important;\n  align-items: center;\n  gap: 4px;\n}\n\n\n\n  .inner-tabstrip-container .k-tabstrip-items {\n  min-width: max-content !important;\n}\n\n\n\n  .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n  height: 6px;\n}\n\n  .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n  .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 3px;\n}\n\n  .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n\n\n  .k-tabstrip .k-tabstrip {\n  margin: 0;\n}\n\n  .k-tabstrip .k-tabstrip .k-tabstrip-items {\n  display: inline-flex !important;\n  flex-wrap: nowrap !important;\n  width: max-content !important;\n}\n\n  .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n  overflow-x: auto !important;\n  overflow-y: hidden !important;\n}\n\n\n\n  .k-tabstrip .k-tabstrip .k-content {\n  border: none;\n  background: transparent;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
         type: Component,
-        args: [{ selector: 'skip-dynamic-ui-component', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentOptions.length > 1) {\n  <!-- Multiple options: show tabs -->\n  <kendo-tabstrip \n    (tabSelect)=\"onTabSelect($event)\"\n    [keepTabContent]=\"true\"\n    style=\"height: 100%; display: flex; flex-direction: column;\">\n    @for (option of componentOptions; track option; let i = $index) {\n      <kendo-tabstrip-tab [selected]=\"i === selectedReportOptionIndex\">\n        <ng-template kendoTabTitle>\n          @if (isTopRanked(i)) {\n            <i class=\"fa-solid fa-star star-icon\"></i>\n          }\n          {{ getTabTitle(i) }}\n        </ng-template>\n        <ng-template kendoTabContent>\n          <div style=\"height: 100%; display: flex; flex-direction: column;\">\n            <!-- Tab Action Bar -->\n            <div class=\"tab-action-bar\">\n              <div class=\"tab-actions-left\">\n                <!-- Toggle buttons for showing/hiding component details -->\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowFunctionalRequirements()\"\n                        [class.active]=\"showFunctionalRequirements\"\n                        title=\"Toggle Functional Requirements\">\n                  <i class=\"fa-solid fa-list-check\"></i>\n                  <span>Functional</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowDataRequirements()\"\n                        [class.active]=\"showDataRequirements\"\n                        title=\"Toggle Data Requirements\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  <span>Data</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowTechnicalDesign()\"\n                        [class.active]=\"showTechnicalDesign\"\n                        title=\"Toggle Technical Design\">\n                  <i class=\"fa-solid fa-cogs\"></i>\n                  <span>Technical</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowCode()\"\n                        [class.active]=\"showCode\"\n                        title=\"Toggle Code View\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  <span>Code</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowSpec()\"\n                        [class.active]=\"showSpec\"\n                        title=\"Toggle Spec View\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  <span>Spec</span>\n                </button>\n              </div>\n              <div class=\"tab-actions-right\">\n                <button class=\"tab-action-button create-button\" \n                        *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                        (click)=\"createReportForOption(i)\"\n                        [disabled]=\"isCreatingReport\">\n                  <i class=\"fa-solid fa-save\"></i>\n                  <span>Save Report</span>\n                </button>\n                <button class=\"tab-action-button create-button\" \n                        *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n                        (click)=\"openReportForOption(i)\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <span>Open Saved Report</span>\n                </button>\n                <button class=\"tab-action-button print-button\" \n                        *ngIf=\"ShowPrintReport\" \n                        (click)=\"PrintReport()\"\n                        title=\"Print Report\">\n                  <i class=\"fa-solid fa-print\"></i>\n                  <span>Print Report</span>\n                </button>\n              </div>\n            </div>\n            \n            <!-- Main content area with optional details panels -->\n            <div style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n              @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {\n                <!-- Details panel -->\n                <div class=\"details-panel\" [style.height]=\"detailsPanelHeight\">\n                  <kendo-tabstrip style=\"height: 100%;\">\n                    @if (showFunctionalRequirements) {\n                      <kendo-tabstrip-tab [selected]=\"true\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-list-check\"></i> Functional Requirements\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedFunctionalRequirements(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showDataRequirements) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-database\"></i> Data Requirements\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedDataRequirements(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showTechnicalDesign) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-cogs\"></i> Technical Design\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedTechnicalDesign(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showCode) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-code\"></i> Code\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content code-content\">\n                            <mj-code-editor\n                              [value]=\"getComponentCode(option)\"\n                              [language]=\"'javascript'\"\n                              [autoFocus]=\"false\"\n                              [indentWithTab]=\"true\"\n                              [readonly]=\"true\"\n                              [toolbar]=\"codeToolbarConfig\"\n                              (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                              style=\"height: 100%;\">\n                            </mj-code-editor>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showSpec) {\n                      <kendo-tabstrip-tab >\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-code\"></i> Spec\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content code-content\">\n                            <mj-code-editor\n                              [value]=\"getComponentSpec(option)\"\n                              [language]=\"'json'\"\n                              [autoFocus]=\"false\"\n                              [indentWithTab]=\"true\"\n                              [readonly]=\"true\"\n                              [toolbar]=\"codeToolbarConfig\"\n                              (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                              style=\"height: 100%;\">\n                            </mj-code-editor>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                  </kendo-tabstrip>\n                </div>\n                <!-- Resizer -->\n                <div class=\"panel-resizer\" \n                     (mousedown)=\"startResize($event)\"\n                     (touchstart)=\"startResize($event)\">\n                  <div class=\"resizer-handle\"></div>\n                </div>\n              }\n              \n              <!-- React component container -->\n              <div [attr.data-tab-index]=\"i\" \n                   style=\"flex: 1; position: relative; min-height: 0; overflow: auto;\">\n                <mj-react-component\n                  *ngIf=\"!currentError && componentOptions[i] && i === selectedReportOptionIndex\"\n                  [component]=\"componentOptions[i].option\"\n                  [styles]=\"componentStyles || undefined\"\n                  (stateChange)=\"onStateChange(i, $event)\"\n                  (componentEvent)=\"onComponentEvent(i, $event)\"\n                  (refreshData)=\"handleRefreshData()\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-react-component>\n                \n                <!-- Error overlay for this tab (shown on top of content when needed) -->\n              @if (currentError && selectedReportOptionIndex === i) {\n                <div style=\"top: 0; \n                            left: 0; \n                            right: 0; \n                            bottom: 0; \n                            display: flex;\n                            align-items: flex-start;\n                            justify-content: center;\n                            padding-top: 20px;\n                            background: rgba(255, 255, 255, 0.95);\n                            z-index: 10;\">\n                  <div style=\"width: 90%; \n                              max-width: 600px; \n                              height: 500px;\n                              background-color: #f8f9fa; \n                              border: 2px solid #dc3545; \n                              border-radius: 8px; \n                              padding: 20px;\n                              overflow-y: auto;\n                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n                    <div style=\"position: relative;\">\n                      <button kendoButton (click)=\"copyErrorToClipboard()\" \n                              style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                        <span class=\"fa-solid fa-copy\"></span>\n                        Copy Error Details\n                      </button>\n                      <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                        <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                        Component Rendering Error\n                      </h3>\n                    </div>\n                    <p style=\"margin-bottom: 10px; font-size: 14px;\">\n                      The selected component option could not be rendered due to the following error:\n                    </p>\n                    <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                                font-family: 'Courier New', monospace; font-size: 12px;\">\n                      <strong>Error Type:</strong> {{ currentError.type }}<br>\n                      <strong>Details:</strong> {{ currentError.message }}\n                      @if (currentError.technicalDetails) {\n                        <details style=\"margin-top: 8px;\">\n                          <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                          <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                        </details>\n                      }\n                    </div>\n                    <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n                      <strong style=\"font-size: 14px;\">What to do:</strong>\n                      <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                        <li>Try selecting a different report option from the tabs above</li>\n                        <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                        <li>Contact your IT department if the issue persists</li>\n                      </ol>\n                    </div>\n                    <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n                      <span class=\"fa-solid fa-rotate\"></span>\n                      Retry\n                    </button>\n                  </div>\n                </div>\n              }\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n} @else {\n  <!-- Single option: no tabs needed -->\n  <div style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Tab Action Bar -->\n    <div class=\"tab-action-bar\">\n      <div class=\"tab-actions-left\">\n        <!-- Toggle buttons for showing/hiding component details -->\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowFunctionalRequirements()\"\n                [class.active]=\"showFunctionalRequirements\"\n                title=\"Toggle Functional Requirements\">\n          <i class=\"fa-solid fa-list-check\"></i>\n          <span>Functional</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowDataRequirements()\"\n                [class.active]=\"showDataRequirements\"\n                title=\"Toggle Data Requirements\">\n          <i class=\"fa-solid fa-database\"></i>\n          <span>Data</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowTechnicalDesign()\"\n                [class.active]=\"showTechnicalDesign\"\n                title=\"Toggle Technical Design\">\n          <i class=\"fa-solid fa-cogs\"></i>\n          <span>Technical</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowCode()\"\n                [class.active]=\"showCode\"\n                title=\"Toggle Code View\">\n          <i class=\"fa-solid fa-code\"></i>\n          <span>Code</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowSpec()\"\n                [class.active]=\"showSpec\"\n                title=\"Toggle Spec View\">\n          <i class=\"fa-solid fa-file-code\"></i>\n          <span>Spec</span>\n        </button>\n      </div>\n      <div class=\"tab-actions-right\">\n        <button class=\"tab-action-button create-button\" \n                *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                (click)=\"createReportForOption(0)\"\n                [disabled]=\"isCreatingReport\">\n          <i class=\"fa-solid fa-save\"></i>\n          <span>Create Report</span>\n        </button>\n        <button class=\"tab-action-button create-button\" \n                *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n                (click)=\"openReportForOption(0)\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n          <span>Open Saved Report</span>\n        </button>\n        <button class=\"tab-action-button print-button\" \n                *ngIf=\"ShowPrintReport\" \n                (click)=\"PrintReport()\"\n                title=\"Print Report\">\n          <i class=\"fa-solid fa-print\"></i>\n          <span>Print Report</span>\n        </button>\n      </div>\n    </div>\n    \n    <!-- Main content area with optional details panels -->\n    <div style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n      @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode || showSpec) {\n        <!-- Details panel -->\n        <div class=\"details-panel\" [style.height]=\"detailsPanelHeight\">\n          <kendo-tabstrip style=\"height: 100%;\">\n            @if (showFunctionalRequirements && componentOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"true\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-list-check\"></i> Functional Requirements\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedFunctionalRequirements(componentOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showDataRequirements && componentOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-database\"></i> Data Requirements\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedDataRequirements(componentOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showTechnicalDesign && componentOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-cogs\"></i> Technical Design\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedTechnicalDesign(componentOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showCode && componentOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-code\"></i> Code\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content code-content\">\n                    <mj-code-editor\n                      [language]=\"'javascript'\"\n                      [value]=\"getComponentCode(componentOptions[0])\"\n                      [autoFocus]=\"false\"\n                      [indentWithTab]=\"true\"\n                      [readonly]=\"true\"\n                      [toolbar]=\"codeToolbarConfig\"\n                      (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                      style=\"height: 100%;\">\n                    </mj-code-editor>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showSpec && componentOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign && !showCode\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-file-code\"></i> Spec\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content code-content\">\n                    <mj-code-editor\n                      [value]=\"getComponentSpec(componentOptions[0])\"\n                      [language]=\"'json'\"\n                      [autoFocus]=\"false\"\n                      [indentWithTab]=\"true\"\n                      [readonly]=\"true\"\n                      [toolbar]=\"codeToolbarConfig\"\n                      (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                      style=\"height: 100%;\">\n                    </mj-code-editor>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n          </kendo-tabstrip>\n        </div>\n        <!-- Resizer -->\n        <div class=\"panel-resizer\" \n             (mousedown)=\"startResize($event)\"\n             (touchstart)=\"startResize($event)\">\n          <div class=\"resizer-handle\"></div>\n        </div>\n      }\n      \n      <!-- React component container or error display -->\n      @if (currentError) {\n        <!-- Error display container with proper height -->\n        <div style=\"flex: 1; display: flex; align-items: center; justify-content: center; \n                    min-height: 400px; padding: 20px; background: rgba(255, 255, 255, 0.95);\">\n          <div style=\"width: 90%; \n                      max-width: 600px; \n                      max-height: 80vh;\n                      background-color: #f8f9fa; \n                      border: 2px solid #dc3545; \n                      border-radius: 8px; \n                      padding: 20px;\n                      overflow-y: auto;\n                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n            <div style=\"position: relative;\">\n              <button kendoButton (click)=\"copyErrorToClipboard()\" \n                      style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                <span class=\"fa-solid fa-copy\"></span>\n                Copy Error Details\n              </button>\n              <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                Component Rendering Error\n              </h3>\n            </div>\n            <p style=\"margin-bottom: 10px; font-size: 14px;\">\n              The selected component option could not be rendered due to the following error:\n            </p>\n            <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                        border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                        font-family: 'Courier New', monospace; font-size: 12px;\">\n              <strong>Error Type:</strong> {{ currentError.type }}<br>\n              <strong>Details:</strong> {{ currentError.message }}\n              @if (currentError.technicalDetails) {\n                <details style=\"margin-top: 8px;\">\n                  <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                  <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                </details>\n              }\n            </div>\n            <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                        border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n              <strong style=\"font-size: 14px;\">What to do:</strong>\n              <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                <li>Contact your IT department if the issue persists</li>\n              </ol>\n            </div>\n            <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n              <span class=\"fa-solid fa-rotate\"></span>\n              Retry\n            </button>\n          </div>\n        </div>\n      } @else {\n        <!-- React component container (only shown when no error) -->\n        <div style=\"flex: 1; position: relative; min-height: 0; overflow: auto;\">\n          <mj-react-component\n            *ngIf=\"componentOptions[0]\"\n            [component]=\"componentOptions[0].option\"\n            [styles]=\"componentStyles || undefined\"\n            (stateChange)=\"onStateChange(0, $event)\"\n            (componentEvent)=\"onComponentEvent(0, $event)\"\n            (refreshData)=\"handleRefreshData()\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            style=\"width: 100%; height: 100%;\">\n          </mj-react-component>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: [":host {\n  display: block;\n  height: 100%;\n  position: relative;\n}\n\n/* Tab Action Bar */\n.tab-action-bar {\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,\n.tab-actions-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Tab Action Buttons */\n.tab-action-button {\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:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n.tab-action-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tab-action-button i {\n  font-size: 12px;\n}\n\n/* Both buttons use the same white/secondary style */\n.tab-action-button.create-button,\n.tab-action-button.print-button {\n  background-color: white;\n  color: #333;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.create-button:hover:not(:disabled),\n.tab-action-button.print-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n/* Toggle buttons styling */\n.tab-action-button.toggle-button {\n  background-color: white;\n  color: #666;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.toggle-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n  color: #333;\n}\n\n.tab-action-button.toggle-button.active {\n  background-color: #5B4FE9;\n  color: white;\n  border-color: #5B4FE9;\n}\n\n.tab-action-button.toggle-button.active:hover:not(:disabled) {\n  background-color: #4940D4;\n  border-color: #4940D4;\n}\n\n/* Details panel styling */\n.details-panel {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  overflow: hidden;\n  transition: height 0.3s ease;\n}\n\n.details-content {\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 {\n  padding: 0;\n}\n\n/* Panel resizer */\n.panel-resizer {\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:hover {\n  background-color: #d0d0d0;\n}\n\n.resizer-handle {\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/* Markdown content styling */\n.details-content :deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n.details-content :deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(ul), .details-content :deep(ol) { margin-left: 1.5em; }\n.details-content :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 :deep(pre) { \n  background-color: #f4f4f4; \n  padding: 12px; \n  border-radius: 4px; \n  overflow-x: auto; \n}\n.details-content :deep(blockquote) { \n  border-left: 4px solid #e0e0e0; \n  padding-left: 16px; \n  margin-left: 0; \n  color: #666; \n}\n\n/* Tab styling */\n::ng-deep .k-tabstrip {\n  border: none;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 10px 5px 5px 5px;\n}\n\n::ng-deep .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::ng-deep .k-tabstrip-items-wrapper {\n  height: 100%;\n}\n\n::ng-deep .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::ng-deep .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::ng-deep .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::ng-deep .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::ng-deep .k-tabstrip .k-link:first-letter {\n  text-transform: uppercase;\n}\n\n::ng-deep .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n  color: #333;\n  background: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .k-tabstrip .k-item.k-selected .k-link {\n  color: #1976d2;\n  font-weight: 600;\n  background: white;\n}\n\n/* Star icon styling */\n::ng-deep .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/* Hide default Kendo tab styling */\n::ng-deep .k-tabstrip-items::before,\n::ng-deep .k-tabstrip-items::after {\n  display: none;\n}\n\n::ng-deep .k-tabstrip .k-item::before,\n::ng-deep .k-tabstrip .k-item::after {\n  display: none;\n}\n\n/* Remove focus outline */\n::ng-deep .k-tabstrip .k-link:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Make sure tab content fills available space */\n::ng-deep .k-tabstrip .k-content.k-state-active {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* React host container */\n.react-host-container {\n  width: 100%;\n  height: 100%;\n}"] }]
+        args: [{ selector: 'skip-dynamic-ui-component', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentOptions.length > 1) {\n  <!-- Multiple options: show tabs -->\n  <kendo-tabstrip \n    (tabSelect)=\"onTabSelect($event)\"\n    [keepTabContent]=\"true\"\n    style=\"height: 100%; display: flex; flex-direction: column;\">\n    @for (option of componentOptions; track option; let i = $index) {\n      <kendo-tabstrip-tab [selected]=\"i === selectedReportOptionIndex\">\n        <ng-template kendoTabTitle>\n          @if (isTopRanked(i)) {\n            <i class=\"fa-solid fa-star star-icon\"></i>\n          }\n          {{ getTabTitle(i) }}\n        </ng-template>\n        <ng-template kendoTabContent>\n          <div style=\"height: 100%; display: flex; flex-direction: column;\">\n            <!-- Tab Action Bar -->\n            <div class=\"tab-action-bar\">\n              <div class=\"tab-actions-left\">\n                <!-- Empty for now - actions moved to individual tabs -->\n              </div>\n              <div class=\"tab-actions-right\">\n                <button class=\"tab-action-button create-button\" \n                        *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                        (click)=\"createReportForOption(i)\"\n                        [disabled]=\"isCreatingReport\">\n                  <i class=\"fa-solid fa-save\"></i>\n                  <span>Save Report</span>\n                </button>\n                <button class=\"tab-action-button create-button\" \n                        *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n                        (click)=\"openReportForOption(i)\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <span>Open Saved Report</span>\n                </button>\n                <button class=\"tab-action-button print-button\" \n                        *ngIf=\"ShowPrintReport\" \n                        (click)=\"PrintReport()\"\n                        title=\"Print Report\">\n                  <i class=\"fa-solid fa-print\"></i>\n                  <span>Print Report</span>\n                </button>\n              </div>\n            </div>\n            \n            <!-- Inner tab strip for Component, Functional, Technical, Data, Code tabs -->\n            <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n              <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n                <!-- Component Tab (always first) -->\n                <kendo-tabstrip-tab [selected]=\"true\">\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-chart-line\"></i> Component\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div style=\"height: 100%; position: relative; overflow: auto;\">\n                      <mj-react-component\n                        *ngIf=\"!currentError && componentOptions[i] && i === selectedReportOptionIndex\"\n                        [component]=\"componentOptions[i].option\"\n                        [styles]=\"componentStyles || undefined\"\n                        (stateChange)=\"onStateChange(i, $event)\"\n                        (componentEvent)=\"onComponentEvent(i, $event)\"\n                        (refreshData)=\"handleRefreshData()\"\n                        (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                        style=\"width: 100%; height: 100%;\">\n                      </mj-react-component>\n                      \n                      <!-- Error overlay for this tab (shown on top of content when needed) -->\n                      @if (currentError && selectedReportOptionIndex === i) {\n                <div style=\"top: 0; \n                            left: 0; \n                            right: 0; \n                            bottom: 0; \n                            display: flex;\n                            align-items: flex-start;\n                            justify-content: center;\n                            padding-top: 20px;\n                            background: rgba(255, 255, 255, 0.95);\n                            z-index: 10;\">\n                  <div style=\"width: 90%; \n                              max-width: 600px; \n                              height: 500px;\n                              background-color: #f8f9fa; \n                              border: 2px solid #dc3545; \n                              border-radius: 8px; \n                              padding: 20px;\n                              overflow-y: auto;\n                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n                    <div style=\"position: relative;\">\n                      <button kendoButton (click)=\"copyErrorToClipboard()\" \n                              style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                        <span class=\"fa-solid fa-copy\"></span>\n                        Copy Error Details\n                      </button>\n                      <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                        <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                        Component Rendering Error\n                      </h3>\n                    </div>\n                    <p style=\"margin-bottom: 10px; font-size: 14px;\">\n                      The selected component option could not be rendered due to the following error:\n                    </p>\n                    <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                                font-family: 'Courier New', monospace; font-size: 12px;\">\n                      <strong>Error Type:</strong> {{ currentError.type }}<br>\n                      <strong>Details:</strong> {{ currentError.message }}\n                      @if (currentError.technicalDetails) {\n                        <details style=\"margin-top: 8px;\">\n                          <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                          <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                        </details>\n                      }\n                    </div>\n                    <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n                      <strong style=\"font-size: 14px;\">What to do:</strong>\n                      <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                        <li>Try selecting a different report option from the tabs above</li>\n                        <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                        <li>Contact your IT department if the issue persists</li>\n                      </ol>\n                    </div>\n                    <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n                      <span class=\"fa-solid fa-rotate\"></span>\n                      Retry\n                    </button>\n                  </div>\n                </div>\n                      }\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n                \n                <!-- Functional Requirements Tab -->\n                <kendo-tabstrip-tab>\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-list-check\"></i> Functional\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                      <div [innerHTML]=\"getFormattedFunctionalRequirements(option)\"></div>\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n                \n                <!-- Technical Design Tab -->\n                <kendo-tabstrip-tab>\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-cogs\"></i> Technical\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                      <div [innerHTML]=\"getFormattedTechnicalDesign(option)\"></div>\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n                \n                <!-- Data Requirements Tab -->\n                <kendo-tabstrip-tab>\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-database\"></i> Data Spec\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                      <div [innerHTML]=\"getFormattedDataRequirements(option)\"></div>\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n                \n                <!-- Code Tab -->\n                <kendo-tabstrip-tab>\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-code\"></i> Code\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n                      <mj-code-editor\n                        [value]=\"getComponentCode(option)\"\n                        [language]=\"'javascript'\"\n                        [autoFocus]=\"false\"\n                        [indentWithTab]=\"true\"\n                        [readonly]=\"true\"\n                        [toolbar]=\"codeToolbarConfig\"\n                        (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                        style=\"height: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n                \n                <!-- Spec Tab -->\n                <kendo-tabstrip-tab>\n                  <ng-template kendoTabTitle>\n                    <i class=\"fa-solid fa-file-code\"></i> Spec\n                  </ng-template>\n                  <ng-template kendoTabContent>\n                    <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n                      <mj-code-editor\n                        [value]=\"getComponentSpec(option)\"\n                        [language]=\"'json'\"\n                        [autoFocus]=\"false\"\n                        [indentWithTab]=\"true\"\n                        [readonly]=\"true\"\n                        [toolbar]=\"codeToolbarConfig\"\n                        (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                        style=\"height: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                  </ng-template>\n                </kendo-tabstrip-tab>\n              </kendo-tabstrip>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n} @else {\n  <!-- Single option: simplified tab structure -->\n  <div style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Tab Action Bar -->\n    <div class=\"tab-action-bar\">\n      <div class=\"tab-actions-left\">\n        <!-- Empty for now - actions moved to tabs -->\n      </div>\n      <div class=\"tab-actions-right\">\n        <button class=\"tab-action-button create-button\" \n                *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                (click)=\"createReportForOption(0)\"\n                [disabled]=\"isCreatingReport\">\n          <i class=\"fa-solid fa-save\"></i>\n          <span>Save Report</span>\n        </button>\n        <button class=\"tab-action-button create-button\" \n                *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n                (click)=\"openReportForOption(0)\">\n          <i class=\"fa-solid fa-folder-open\"></i>\n          <span>Open Saved Report</span>\n        </button>\n        <button class=\"tab-action-button print-button\" \n                *ngIf=\"ShowPrintReport\" \n                (click)=\"PrintReport()\"\n                title=\"Print Report\">\n          <i class=\"fa-solid fa-print\"></i>\n          <span>Print Report</span>\n        </button>\n      </div>\n    </div>\n    \n    <!-- Tab strip for Component, Functional, Technical, Data, Code tabs -->\n    <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n      <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n        <!-- Component Tab (always first) -->\n        <kendo-tabstrip-tab [selected]=\"true\">\n          <ng-template kendoTabTitle>\n            <i class=\"fa-solid fa-chart-line\"></i> Component\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div style=\"height: 100%; position: relative; overflow: auto;\">\n              @if (!currentError && componentOptions[0]) {\n                <mj-react-component\n                  [component]=\"componentOptions[0].option\"\n                  [styles]=\"componentStyles || undefined\"\n                  (stateChange)=\"onStateChange(0, $event)\"\n                  (componentEvent)=\"onComponentEvent(0, $event)\"\n                  (refreshData)=\"handleRefreshData()\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-react-component>\n              }\n              \n              <!-- Error overlay for this tab (shown on top of content when needed) -->\n              @if (currentError) {\n                <div style=\"top: 0; \n                            left: 0; \n                            right: 0; \n                            bottom: 0; \n                            display: flex;\n                            align-items: flex-start;\n                            justify-content: center;\n                            padding-top: 20px;\n                            background: rgba(255, 255, 255, 0.95);\n                            z-index: 10;\">\n                  <div style=\"width: 90%; \n                              max-width: 600px; \n                              height: 500px;\n                              background-color: #f8f9fa; \n                              border: 2px solid #dc3545; \n                              border-radius: 8px; \n                              padding: 20px;\n                              overflow-y: auto;\n                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n                    <div style=\"position: relative;\">\n                      <button kendoButton (click)=\"copyErrorToClipboard()\" \n                              style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                        <span class=\"fa-solid fa-copy\"></span>\n                        Copy Error Details\n                      </button>\n                      <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                        <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                        Component Rendering Error\n                      </h3>\n                    </div>\n                    <p style=\"margin-bottom: 10px; font-size: 14px;\">\n                      The selected component option could not be rendered due to the following error:\n                    </p>\n                    <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                                font-family: 'Courier New', monospace; font-size: 12px;\">\n                      <strong>Error Type:</strong> {{ currentError.type }}<br>\n                      <strong>Details:</strong> {{ currentError.message }}\n                      @if (currentError.technicalDetails) {\n                        <details style=\"margin-top: 8px;\">\n                          <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                          <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                        </details>\n                      }\n                    </div>\n                    <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n                      <strong style=\"font-size: 14px;\">What to do:</strong>\n                      <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                        <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                        <li>Contact your IT department if the issue persists</li>\n                      </ol>\n                    </div>\n                    <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n                      <span class=\"fa-solid fa-rotate\"></span>\n                      Retry\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <!-- Functional Requirements Tab -->\n        @if (componentOptions[0]) {\n          <kendo-tabstrip-tab>\n            <ng-template kendoTabTitle>\n              <i class=\"fa-solid fa-list-check\"></i> Functional\n            </ng-template>\n            <ng-template kendoTabContent>\n              <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                <div [innerHTML]=\"getFormattedFunctionalRequirements(componentOptions[0])\"></div>\n              </div>\n            </ng-template>\n          </kendo-tabstrip-tab>\n        }\n        \n        <!-- Technical Design Tab -->\n        @if (componentOptions[0]) {\n          <kendo-tabstrip-tab>\n            <ng-template kendoTabTitle>\n              <i class=\"fa-solid fa-cogs\"></i> Technical\n            </ng-template>\n            <ng-template kendoTabContent>\n              <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                <div [innerHTML]=\"getFormattedTechnicalDesign(componentOptions[0])\"></div>\n              </div>\n            </ng-template>\n          </kendo-tabstrip-tab>\n        }\n        \n        <!-- Data Requirements Tab -->\n        @if (componentOptions[0]) {\n          <kendo-tabstrip-tab>\n            <ng-template kendoTabTitle>\n              <i class=\"fa-solid fa-database\"></i> Data Spec\n            </ng-template>\n            <ng-template kendoTabContent>\n              <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n                <div [innerHTML]=\"getFormattedDataRequirements(componentOptions[0])\"></div>\n              </div>\n            </ng-template>\n          </kendo-tabstrip-tab>\n        }\n        \n        <!-- Code Tab -->\n        @if (componentOptions[0]) {\n          <kendo-tabstrip-tab>\n            <ng-template kendoTabTitle>\n              <i class=\"fa-solid fa-code\"></i> Code\n            </ng-template>\n            <ng-template kendoTabContent>\n              <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n                <mj-code-editor\n                  [value]=\"getComponentCode(componentOptions[0])\"\n                  [language]=\"'javascript'\"\n                  [autoFocus]=\"false\"\n                  [indentWithTab]=\"true\"\n                  [readonly]=\"true\"\n                  [toolbar]=\"codeToolbarConfig\"\n                  (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                  style=\"height: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-tabstrip-tab>\n        }\n        \n        <!-- Spec Tab -->\n        @if (componentOptions[0]) {\n          <kendo-tabstrip-tab>\n            <ng-template kendoTabTitle>\n              <i class=\"fa-solid fa-file-code\"></i> Spec\n            </ng-template>\n            <ng-template kendoTabContent>\n              <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n                <mj-code-editor\n                  [value]=\"getComponentSpec(componentOptions[0])\"\n                  [language]=\"'json'\"\n                  [autoFocus]=\"false\"\n                  [indentWithTab]=\"true\"\n                  [readonly]=\"true\"\n                  [toolbar]=\"codeToolbarConfig\"\n                  (toolbarAction)=\"handleCodeToolbarAction($event)\"\n                  style=\"height: 100%;\">\n                </mj-code-editor>\n              </div>\n            </ng-template>\n          </kendo-tabstrip-tab>\n        }\n      </kendo-tabstrip>\n    </div>\n  </div>\n}", styles: [":host {\n  display: block;\n  height: 100%;\n  position: relative;\n}\n\n/* Tab Action Bar */\n.tab-action-bar {\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,\n.tab-actions-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Tab Action Buttons */\n.tab-action-button {\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:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n.tab-action-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tab-action-button i {\n  font-size: 12px;\n}\n\n/* Both buttons use the same white/secondary style */\n.tab-action-button.create-button,\n.tab-action-button.print-button {\n  background-color: white;\n  color: #333;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.create-button:hover:not(:disabled),\n.tab-action-button.print-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n/* Toggle buttons styling */\n.tab-action-button.toggle-button {\n  background-color: white;\n  color: #666;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.toggle-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n  color: #333;\n}\n\n.tab-action-button.toggle-button.active {\n  background-color: #5B4FE9;\n  color: white;\n  border-color: #5B4FE9;\n}\n\n.tab-action-button.toggle-button.active:hover:not(:disabled) {\n  background-color: #4940D4;\n  border-color: #4940D4;\n}\n\n/* Details panel styling */\n.details-panel {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  overflow: hidden;\n  transition: height 0.3s ease;\n}\n\n.details-content {\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 {\n  padding: 0;\n}\n\n/* Panel resizer */\n.panel-resizer {\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:hover {\n  background-color: #d0d0d0;\n}\n\n.resizer-handle {\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/* Markdown content styling */\n.details-content :deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n.details-content :deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(ul), .details-content :deep(ol) { margin-left: 1.5em; }\n.details-content :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 :deep(pre) { \n  background-color: #f4f4f4; \n  padding: 12px; \n  border-radius: 4px; \n  overflow-x: auto; \n}\n.details-content :deep(blockquote) { \n  border-left: 4px solid #e0e0e0; \n  padding-left: 16px; \n  margin-left: 0; \n  color: #666; \n}\n\n/* Tab styling - improved for better formatting */\n::ng-deep .k-tabstrip {\n  border: none;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n}\n\n::ng-deep .k-tabstrip-items {\n  background: #f8f9fa;\n  border: none;\n  border-bottom: 1px solid #e0e0e0;\n  flex: 0 0 auto;\n  padding: 4px 8px 0 8px;\n  gap: 2px;\n  display: flex;\n  min-height: auto;\n  height: auto;\n}\n\n::ng-deep .k-tabstrip-items-wrapper {\n  height: auto;\n  min-height: auto;\n}\n\n::ng-deep .k-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 0;\n  background: white;\n  border: none;\n  min-height: 0;\n}\n\n::ng-deep .k-tabstrip .k-item {\n  margin-right: 2px;\n  border: none;\n  background: transparent;\n  border-radius: 4px 4px 0 0;\n  padding: 0;\n  transition: all 0.2s ease;\n  height: auto;\n  min-height: auto;\n}\n\n::ng-deep .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::ng-deep .k-tabstrip .k-link {\n  padding: 6px 12px;\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  display: flex;\n  align-items: center;\n  gap: 3px;\n  line-height: 1.2;\n  min-height: auto;\n  height: auto;\n}\n\n::ng-deep .k-tabstrip .k-link i {\n  font-size: 12px;\n}\n\n::ng-deep .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n  color: #333;\n  background: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .k-tabstrip .k-item.k-selected .k-link {\n  color: #1976d2;\n  font-weight: 600;\n  background: white;\n}\n\n/* Star icon styling */\n::ng-deep .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/* Hide default Kendo tab styling */\n::ng-deep .k-tabstrip-items::before,\n::ng-deep .k-tabstrip-items::after {\n  display: none;\n}\n\n::ng-deep .k-tabstrip .k-item::before,\n::ng-deep .k-tabstrip .k-item::after {\n  display: none;\n}\n\n/* Remove focus outline */\n::ng-deep .k-tabstrip .k-link:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Make sure tab content fills available space */\n::ng-deep .k-tabstrip .k-content.k-state-active {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* React host container */\n.react-host-container {\n  width: 100%;\n  height: 100%;\n}\n\n/* Inner tabs specific styling with horizontal scroll */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper {\n  overflow-x: auto !important;\n  overflow-y: hidden !important;\n  max-width: 100%;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items {\n  display: inline-flex !important;\n  flex-wrap: nowrap !important;\n  width: max-content !important;\n  padding: 4px 8px 0 8px;\n  background: #fff;\n  border-bottom: 1px solid #e8e8e8;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-item {\n  flex: 0 0 auto !important;\n  display: inline-block !important;\n  float: none !important;\n}\n\n::ng-deep .inner-tabs .k-link {\n  padding: 6px 12px;\n  font-size: 12px;\n  white-space: nowrap !important;\n  display: inline-flex !important;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Force single row for inner tabs */\n::ng-deep .inner-tabstrip-container .k-tabstrip-items {\n  min-width: max-content !important;\n}\n\n/* Custom scrollbar for inner tabs */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n  height: 6px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n  background: #f1f1f1;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n  background: #888;\n  border-radius: 3px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n  background: #555;\n}\n\n/* Nested tab styling - for tabs within tabs (fallback) */\n::ng-deep .k-tabstrip .k-tabstrip {\n  margin: 0;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items {\n  display: inline-flex !important;\n  flex-wrap: nowrap !important;\n  width: max-content !important;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n  overflow-x: auto !important;\n  overflow-y: hidden !important;\n}\n\n/* Ensure proper content area in nested tabs */\n::ng-deep .k-tabstrip .k-tabstrip .k-content {\n  border: none;\n  background: transparent;\n}\n\n"] }]
     }], () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AngularAdapterService }], { UIComponentCode: [{
             type: Input
         }], ComponentObjectName: [{
@@ -1325,9 +1218,6 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }], reactComponents: [{
             type: ViewChildren,
             args: [MJReactComponent]
-        }], onWindowResize: [{
-            type: HostListener,
-            args: ['window:resize']
         }], SkipData: [{
             type: Input
         }] }); })();