npm - @memberjunction/ng-skip-chat - Versions diffs - 2.96.0 → 2.97.0 - Mend

@memberjunction/ng-skip-chat 2.96.0 → 2.97.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

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

@@ -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", 14);
+    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", 15);
     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", 16);
+    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", 17);
     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", 18);
+    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", 19);
     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", 20);
+    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", 24);
+    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", 33)(1, "summary", 39);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 56);
+    i0.ɵɵelementStart(3, "pre", 40);
     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", 23)(1, "div", 25)(2, "div", 26)(3, "button", 27);
+    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", 28);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 45);
-    i0.ɵɵelement(7, "span", 46);
+    i0.ɵɵelementStart(6, "h3", 29);
+    i0.ɵɵelement(7, "span", 30);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 47);
+    i0.ɵɵelementStart(9, "p", 31);
     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", 32)(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", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
+    i0.ɵɵelementStart(20, "div", 34)(21, "strong", 35);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 52)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 36)(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", 37);
+    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", 38);
     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,110 @@ 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");
-    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);
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_mj_react_component_1_Template, 1, 2, "mj-react-component", 22)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_11_Conditional_2_Template, 33, 3, "div", 23);
+    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", 41);
+    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", 42);
+    i0.ɵɵelement(1, "div", 43);
+    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", 44);
+    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", 42);
+    i0.ɵɵelement(1, "div", 43);
+    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", 45);
+    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", 42);
+    i0.ɵɵelement(1, "div", 43);
+    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", 46);
+    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", 47)(1, "mj-code-editor", 48);
+    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(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.getComponentCode(option_r9))("language", "javascript")("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", 1)(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()()()();
+} 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, 24, 4, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ɵ$index_4_r3 = ctx.$index;
@@ -350,192 +256,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 _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 14);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
+    i0.ɵɵelement(1, "i", 15);
     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 _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(0)); });
+    i0.ɵɵelement(1, "i", 17);
     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 _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 19);
     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_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_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 20);
+    i0.ɵɵtext(1, " Component ");
 } }
-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 _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 24);
+    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r14); 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(_r14); 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(_r14); 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(_r14); 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", 33)(1, "summary", 39);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 56);
+    i0.ɵɵelementStart(3, "pre", 40);
     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 _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 25)(2, "div", 26)(3, "button", 27);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 28);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 45);
-    i0.ɵɵelement(7, "span", 46);
+    i0.ɵɵelementStart(6, "h3", 29);
+    i0.ɵɵelement(7, "span", 30);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 47);
+    i0.ɵɵelementStart(9, "p", 31);
     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", 32)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -544,24 +334,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", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
+    i0.ɵɵelementStart(20, "div", 34)(21, "strong", 35);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 52)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 36)(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", 37);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(29, "span", 38);
     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 +359,119 @@ 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", 21);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_1_Template, 1, 2, "mj-react-component", 49)(2, SkipDynamicUIComponentComponent_Conditional_1_ng_template_11_Conditional_2_Template, 31, 3, "div", 23);
+    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", 41);
+    i0.ɵɵtext(1, " Functional ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_12_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "div", 43);
     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_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", 44);
+    i0.ɵɵtext(1, " Technical ");
 } }
-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_13_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "div", 43);
     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");
-    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");
+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", 45);
+    i0.ɵɵtext(1, " Data Spec ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_14_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "div", 43);
+    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", 46);
+    i0.ɵɵtext(1, " Code ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 47)(1, "mj-code-editor", 48);
+    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_15_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r16); 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.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_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", 1)(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");
     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.currentError ? 29 : 30);
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 14 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.componentOptions[0] ? 15 : -1);
 } }
 export class SkipDynamicUIComponentComponent {
     sanitizer;
@@ -671,22 +496,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 +590,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 +815,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 +903,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 +936,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 +1147,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"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [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"], [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, 16, 8, "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: 4px;\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  .k-tabstrip .k-tabstrip {\n  margin: 0;\n}\n\n  .k-tabstrip .k-tabstrip .k-tabstrip-items {\n  padding: 2px 4px 0 4px;\n  background: #fff;\n  border-bottom: 1px solid #e8e8e8;\n}\n\n  .k-tabstrip .k-tabstrip .k-link {\n  padding: 4px 10px;\n  font-size: 12px;\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 style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n              <kendo-tabstrip 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              </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 style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n      <kendo-tabstrip 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      </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: 4px;\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/* Nested tab styling - for tabs within tabs */\n::ng-deep .k-tabstrip .k-tabstrip {\n  margin: 0;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items {\n  padding: 2px 4px 0 4px;\n  background: #fff;\n  border-bottom: 1px solid #e8e8e8;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-link {\n  padding: 4px 10px;\n  font-size: 12px;\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 +1179,6 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }], reactComponents: [{
             type: ViewChildren,
             args: [MJReactComponent]
-        }], onWindowResize: [{
-            type: HostListener,
-            args: ['window:resize']
         }], SkipData: [{
             type: Input
         }] }); })();