@memberjunction/ng-skip-chat 2.92.0 → 2.94.0

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

@@ -29,144 +29,150 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Templ
 } }
 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", 25);
+    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", 26);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵtext(3, "Save Report");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const option_r6 = i0.ɵɵnextContext(2).$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Create ", ctx_r1.getComponentTypeName(option_r6), "");
 } }
 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);
+    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", 27);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
-    i0.ɵɵelement(1, "i", 28);
+    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);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Print Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_r6 = i0.ɵɵnextContext(4).$implicit;
+    const option_r9 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r6), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r9), i0.ɵɵsanitizeHtml);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_27_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_r6 = i0.ɵɵnextContext(4).$implicit;
+    const option_r9 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r6), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r9), i0.ɵɵsanitizeHtml);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_27_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_r6 = i0.ɵɵnextContext(4).$implicit;
+    const option_r9 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r6), i0.ɵɵsanitizeHtml);
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r9), i0.ɵɵsanitizeHtml);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_Conditional_27_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "mj-code-editor", 36);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_5_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
+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_r6 = i0.ɵɵnextContext(4).$implicit;
+    const option_r9 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.getComponentCode(option_r6))("language", "javascript")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+    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_27_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_5_ng_template_2_Template, 2, 6, "ng-template", 5);
+    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_27_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "mj-code-editor", 36);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_6_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)); });
+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_r6 = i0.ɵɵnextContext(4).$implicit;
+    const option_r9 = i0.ɵɵnextContext(4).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r1.getComponentSpec(option_r6))("language", "json")("autoFocus", false)("indentWithTab", true)("readonly", true)("toolbar", ctx_r1.codeToolbarConfig);
+    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_27_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_6_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_6_ng_template_2_Template, 2, 6, "ng-template", 5);
+    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_27_Template(rf, ctx) { if (rf & 1) {
+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", 29)(1, "kendo-tabstrip", 30);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3)(6, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Conditional_6_Template, 3, 0, "kendo-tabstrip-tab");
+    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", 31);
-    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_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_27_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", 32);
+    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);
@@ -182,21 +188,21 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.showSpec ? 6 : -1);
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_29_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 37);
-    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_29_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r11); 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_29_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r11); 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_29_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r11); 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_29_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$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_30_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 46)(1, "summary", 52);
+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);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 53);
+    i0.ɵɵelementStart(3, "pre", 56);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -204,21 +210,21 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
-function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 24)(1, "div", 38)(2, "div", 39)(3, "button", 40);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_30_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 41);
+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);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 42);
-    i0.ɵɵelement(7, "span", 43);
+    i0.ɵɵelementStart(6, "h3", 45);
+    i0.ɵɵelement(7, "span", 46);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 44);
+    i0.ɵɵelementStart(9, "p", 47);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 45)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 48)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -227,12 +233,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_30_Conditional_19_Template, 5, 1, "details", 46);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_31_Conditional_19_Template, 5, 1, "details", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 47)(21, "strong", 48);
+    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 49)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 52)(24, "li");
     i0.ɵɵtext(25, "Try selecting a different report option from the tabs above");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(26, "li");
@@ -241,9 +247,9 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
     i0.ɵɵelementStart(28, "li");
     i0.ɵɵtext(29, "Contact your IT department if the issue persists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(30, "button", 50);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_30_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(31, "span", 51);
+    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.ɵɵtext(32, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -288,12 +294,12 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
     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, 2, "button", 19)(25, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_25_Template, 4, 0, "button", 20);
+    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);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "div", 21);
-    i0.ɵɵtemplate(27, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_27_Template, 9, 7);
-    i0.ɵɵelementStart(28, "div", 22);
-    i0.ɵɵtemplate(29, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_react_component_29_Template, 1, 2, "mj-react-component", 23)(30, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_30_Template, 33, 3, "div", 24);
+    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;
@@ -311,19 +317,21 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
     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 ? 27 : -1);
+    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 ? 30 : -1);
+    i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 31 : -1);
 } }
 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, 31, 16, "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, 32, 17, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ɵ$index_4_r3 = ctx.$index;
@@ -343,142 +351,149 @@ function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (r
     i0.ɵɵrepeater(ctx_r1.componentOptions);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_button_24_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_24_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
-    i0.ɵɵelement(1, "i", 26);
+    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);
     i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
+    i0.ɵɵtext(3, "Create Report");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Create ", ctx_r1.firstOptionComponentTypeName, "");
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_button_25_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 27);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
-    i0.ɵɵelement(1, "i", 28);
+    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);
+    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);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Print Report");
     i0.ɵɵelementEnd()();
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_27_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_27_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_27_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_27_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "div", 34);
+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_27_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 5);
+    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_27_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "mj-code-editor", 56);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_5_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
+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_27_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_5_ng_template_2_Template, 2, 6, "ng-template", 5);
+    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_27_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_6_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 57);
     i0.ɵɵtext(1, " Spec ");
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_6_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 35)(1, "mj-code-editor", 36);
-    i0.ɵɵlistener("toolbarAction", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_6_ng_template_2_Template_mj_code_editor_toolbarAction_1_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleCodeToolbarAction($event)); });
+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_27_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+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_27_Conditional_6_ng_template_1_Template, 2, 0, "ng-template", 4)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_6_ng_template_2_Template, 2, 6, "ng-template", 5);
+    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);
     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_27_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 29)(1, "kendo-tabstrip", 30);
-    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 3)(3, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 3)(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 3)(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 3)(6, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Conditional_6_Template, 3, 1, "kendo-tabstrip-tab", 3);
+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", 31);
-    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Template_div_mousedown_7_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Template_div_touchstart_7_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
-    i0.ɵɵelement(8, "div", 32);
+    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);
@@ -494,11 +509,11 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Template(r
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.showSpec && ctx_r1.componentOptions[0] ? 6 : -1);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "details", 46)(1, "summary", 52);
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 49)(1, "summary", 55);
     i0.ɵɵtext(2, "Technical Details (click to expand)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "pre", 53);
+    i0.ɵɵelementStart(3, "pre", 56);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -506,21 +521,21 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditiona
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 57)(2, "div", 39)(3, "button", 40);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
-    i0.ɵɵelement(4, "span", 41);
+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);
     i0.ɵɵtext(5, " Copy Error Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "h3", 42);
-    i0.ɵɵelement(7, "span", 43);
+    i0.ɵɵelementStart(6, "h3", 45);
+    i0.ɵɵelement(7, "span", 46);
     i0.ɵɵtext(8, " Component Rendering Error ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "p", 44);
+    i0.ɵɵelementStart(9, "p", 47);
     i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 45)(12, "strong");
+    i0.ɵɵelementStart(11, "div", 48)(12, "strong");
     i0.ɵɵtext(13, "Error Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(14);
@@ -529,20 +544,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template(r
     i0.ɵɵtext(17, "Details:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(18);
-    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Conditional_19_Template, 5, 1, "details", 46);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Conditional_19_Template, 5, 1, "details", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 47)(21, "strong", 48);
+    i0.ɵɵelementStart(20, "div", 50)(21, "strong", 51);
     i0.ɵɵtext(22, "What to do:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "ol", 49)(24, "li");
+    i0.ɵɵelementStart(23, "ol", 52)(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", 50);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
-    i0.ɵɵelement(29, "span", 51);
+    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.ɵɵtext(30, " Retry ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -554,18 +569,18 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template(r
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 37);
-    i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStateChange(0, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onComponentEvent(0, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+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)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("component", ctx_r1.componentOptions[0].option)("styles", ctx_r1.componentStyles || undefined);
 } }
-function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_mj_react_component_1_Template, 1, 2, "mj-react-component", 23);
+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);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -573,42 +588,42 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template(r
     i0.ɵɵproperty("ngIf", ctx_r1.componentOptions[0]);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
+    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(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
+    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(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
+    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(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
+    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");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(15, "button", 15);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
+    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");
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(19, "button", 17);
-    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowSpec()); });
-    i0.ɵɵelement(20, "i", 54);
+    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.ɵɵelementEnd()()();
     i0.ɵɵelementStart(23, "div", 18);
-    i0.ɵɵtemplate(24, SkipDynamicUIComponentComponent_Conditional_1_button_24_Template, 4, 2, "button", 19)(25, SkipDynamicUIComponentComponent_Conditional_1_button_25_Template, 4, 0, "button", 20);
+    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(26, "div", 21);
-    i0.ɵɵtemplate(27, SkipDynamicUIComponentComponent_Conditional_1_Conditional_27_Template, 9, 7)(28, SkipDynamicUIComponentComponent_Conditional_1_Conditional_28_Template, 31, 3, "div", 55)(29, SkipDynamicUIComponentComponent_Conditional_1_Conditional_29_Template, 2, 1, "div", 22);
+    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();
@@ -625,11 +640,13 @@ function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (r
     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 ? 27 : -1);
+    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements || ctx_r1.showDataRequirements || ctx_r1.showTechnicalDesign || ctx_r1.showCode || ctx_r1.showSpec ? 28 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.currentError ? 28 : 29);
+    i0.ɵɵconditional(ctx_r1.currentError ? 29 : 30);
 } }
 export class SkipDynamicUIComponentComponent {
     sanitizer;
@@ -641,9 +658,11 @@ export class SkipDynamicUIComponentComponent {
     ShowPrintReport = true;
     ShowReportOptionsToggle = true;
     ShowCreateReportButton = false;
+    ShowOpenSavedReportButton = true;
     matchingReportID = null;
     DrillDownEvent = new EventEmitter();
     CreateReportRequested = new EventEmitter();
+    NavigateToMatchingReportRequested = new EventEmitter();
     reactComponents;
     // Properties for handling multiple report options
     componentOptions = [];
@@ -835,6 +854,9 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         // Emit the event with the option index so the parent can handle it
         this.CreateReportRequested.emit(optionIndex);
     }
+    openReportForOption(optionIndex) {
+        this.NavigateToMatchingReportRequested.emit(optionIndex);
+    }
     /**
      * Get the component type name for display
      */
@@ -1271,15 +1293,15 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponents = _t);
         } }, hostBindings: function SkipDynamicUIComponentComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("resize", function SkipDynamicUIComponentComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
-        } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[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 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-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "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, 30, 14, "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"], ["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);
         } 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 });
 }
 (() => { (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-plus\"></i>\n                  <span>Create {{ getComponentTypeName(option) }}</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-plus\"></i>\n          <span>Create {{ firstOptionComponentTypeName }}</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                <!-- 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}"] }]
     }], () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AngularAdapterService }], { UIComponentCode: [{
             type: Input
         }], ComponentObjectName: [{
@@ -1290,12 +1312,16 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             type: Input
         }], ShowCreateReportButton: [{
             type: Input
+        }], ShowOpenSavedReportButton: [{
+            type: Input
         }], matchingReportID: [{
             type: Input
         }], DrillDownEvent: [{
             type: Output
         }], CreateReportRequested: [{
             type: Output
+        }], NavigateToMatchingReportRequested: [{
+            type: Output
         }], reactComponents: [{
             type: ViewChildren,
             args: [MJReactComponent]