@memberjunction/ng-skip-chat 2.46.0 → 2.48.0

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

@@ -0,0 +1,1771 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Component, EventEmitter, Input, Output, ViewChildren, HostListener } from '@angular/core';
+import { CompositeKey, LogError, Metadata, RunQuery, RunView } from '@memberjunction/core';
+import { SkipReactComponentHost } from './skip-react-component-host';
+import { MapEntityInfoToSkipEntityInfo, BuildSkipComponentCompleteCode } from '@memberjunction/skip-types';
+import { DrillDownInfo } from '../drill-down-info';
+import { marked } from 'marked';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/platform-browser";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-layout";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@memberjunction/ng-code-editor";
+const _c0 = ["htmlContainer"];
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 7);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template, 1, 0, "i", 7);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r1.isTopRanked(ɵ$index_4_r3) ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTabTitle(ɵ$index_4_r3), " ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_20_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_20_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", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const option_r6 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    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_21_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Print Report");
+    i0.ɵɵelementEnd()();
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 11);
+    i0.ɵɵtext(1, " Functional Requirements ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r6 = i0.ɵɵnextContext(4).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(option_r6), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("selected", true);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 13);
+    i0.ɵɵtext(1, " Data Requirements ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r6 = i0.ɵɵnextContext(4).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(option_r6), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 15);
+    i0.ɵɵtext(1, " Technical Design ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r6 = i0.ɵɵnextContext(4).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(option_r6), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 17);
+    i0.ɵɵtext(1, " Code ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-code-editor", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r6 = i0.ɵɵnextContext(4).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentCode(option_r6))("autoFocus", false)("indentWithTab", true)("readonly", true);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_ng_template_2_Template, 2, 4, "ng-template", 6);
+    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_23_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "kendo-tabstrip", 29);
+    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 4)(3, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 4)(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 4)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 30);
+    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template_div_touchstart_6_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
+    i0.ɵɵelement(7, "div", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵstyleProp("height", ctx_r1.detailsPanelHeight);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showDataRequirements ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showTechnicalDesign ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showCode ? 5 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 44)(1, "summary", 50);
+    i0.ɵɵtext(2, "Technical Details (click to expand)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "pre", 51);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 36)(2, "div", 37)(3, "button", 38);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 39);
+    i0.ɵɵtext(5, " Copy Error Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "h3", 40);
+    i0.ɵɵelement(7, "span", 41);
+    i0.ɵɵtext(8, " Component Rendering Error ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "p", 42);
+    i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 43)(12, "strong");
+    i0.ɵɵtext(13, "Error Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(14);
+    i0.ɵɵelement(15, "br");
+    i0.ɵɵelementStart(16, "strong");
+    i0.ɵɵtext(17, "Details:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(18);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template, 5, 1, "details", 44);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 45)(21, "strong", 46);
+    i0.ɵɵtext(22, "What to do:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "ol", 47)(24, "li");
+    i0.ɵɵtext(25, "Try selecting a different report option from the tabs above");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "li");
+    i0.ɵɵtext(27, "Copy the error details and send them back to Skip in the chat to get a corrected version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "li");
+    i0.ɵɵtext(29, "Contact your IT department if the issue persists");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(30, "button", 48);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(31, "span", 49);
+    i0.ɵɵtext(32, " Retry ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(14);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.message, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8)(2, "div", 9)(3, "button", 10);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
+    i0.ɵɵelement(4, "i", 11);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Functional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
+    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Data");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "button", 14);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
+    i0.ɵɵelement(12, "i", 15);
+    i0.ɵɵelementStart(13, "span");
+    i0.ɵɵtext(14, "Technical");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "button", 16);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
+    i0.ɵɵelement(16, "i", 17);
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18, "Code");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 18);
+    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_20_Template, 4, 2, "button", 19)(21, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_21_Template, 4, 0, "button", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 21);
+    i0.ɵɵtemplate(23, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_23_Template, 8, 6);
+    i0.ɵɵelementStart(24, "div", 22, 0);
+    i0.ɵɵtemplate(26, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template, 33, 3, "div", 23);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.showFunctionalRequirements);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showDataRequirements);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showTechnicalDesign);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showCode);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !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 ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-tab-index", ɵ$index_4_r3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 26 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template, 2, 2, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template, 27, 13, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ɵ$index_4_r3 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("selected", ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex);
+} }
+function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-tabstrip", 3);
+    i0.ɵɵlistener("tabSelect", function SkipDynamicUIComponentComponent_Conditional_0_Template_kendo_tabstrip_tabSelect_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTabSelect($event)); });
+    i0.ɵɵrepeaterCreate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_Template, 3, 1, "kendo-tabstrip-tab", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("keepTabContent", true);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.reportOptions);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    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.reportOptions[0] ? ctx_r1.getComponentTypeName(ctx_r1.reportOptions[0]) : "Component", "");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_button_21_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Print Report");
+    i0.ɵɵelementEnd()();
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 11);
+    i0.ɵɵtext(1, " Functional Requirements ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedFunctionalRequirements(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("selected", true);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 13);
+    i0.ɵɵtext(1, " Data Requirements ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedDataRequirements(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 15);
+    i0.ɵɵtext(1, " Technical Design ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "div", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("innerHTML", ctx_r1.getFormattedTechnicalDesign(ctx_r1.reportOptions[0]), i0.ɵɵsanitizeHtml);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_ng_template_2_Template, 2, 1, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 17);
+    i0.ɵɵtext(1, " Code ");
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-code-editor", 35);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.getComponentCode(ctx_r1.reportOptions[0]))("autoFocus", false)("indentWithTab", true)("readonly", true);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_1_Template, 2, 0, "ng-template", 5)(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_ng_template_2_Template, 2, 4, "ng-template", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("selected", !ctx_r1.showFunctionalRequirements && !ctx_r1.showDataRequirements && !ctx_r1.showTechnicalDesign);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "kendo-tabstrip", 29);
+    i0.ɵɵtemplate(2, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_2_Template, 3, 1, "kendo-tabstrip-tab", 4)(3, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_3_Template, 3, 1, "kendo-tabstrip-tab", 4)(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_4_Template, 3, 1, "kendo-tabstrip-tab", 4)(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Conditional_5_Template, 3, 1, "kendo-tabstrip-tab", 4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 30);
+    i0.ɵɵlistener("mousedown", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); })("touchstart", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template_div_touchstart_6_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startResize($event)); });
+    i0.ɵɵelement(7, "div", 31);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("height", ctx_r1.detailsPanelHeight);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.showFunctionalRequirements && ctx_r1.reportOptions[0] ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showDataRequirements && ctx_r1.reportOptions[0] ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showTechnicalDesign && ctx_r1.reportOptions[0] ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.showCode && ctx_r1.reportOptions[0] ? 5 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 44)(1, "summary", 50);
+    i0.ɵɵtext(2, "Technical Details (click to expand)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "pre", 51);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 36)(2, "div", 37)(3, "button", 38);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 39);
+    i0.ɵɵtext(5, " Copy Error Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "h3", 40);
+    i0.ɵɵelement(7, "span", 41);
+    i0.ɵɵtext(8, " Component Rendering Error ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "p", 42);
+    i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 43)(12, "strong");
+    i0.ɵɵtext(13, "Error Type:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(14);
+    i0.ɵɵelement(15, "br");
+    i0.ɵɵelementStart(16, "strong");
+    i0.ɵɵtext(17, "Details:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(18);
+    i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Conditional_19_Template, 5, 1, "details", 44);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 45)(21, "strong", 46);
+    i0.ɵɵtext(22, "What to do:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "ol", 47)(24, "li");
+    i0.ɵɵtext(25, "Copy the error details and send them back to Skip in the chat to get a corrected version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "li");
+    i0.ɵɵtext(27, "Contact your IT department if the issue persists");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(28, "button", 48);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(29, "span", 49);
+    i0.ɵɵtext(30, " Retry ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(14);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.message, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.currentError.technicalDetails ? 19 : -1);
+} }
+function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8)(2, "div", 9)(3, "button", 10);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowFunctionalRequirements()); });
+    i0.ɵɵelement(4, "i", 11);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Functional");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "button", 12);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowDataRequirements()); });
+    i0.ɵɵelement(8, "i", 13);
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Data");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "button", 14);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowTechnicalDesign()); });
+    i0.ɵɵelement(12, "i", 15);
+    i0.ɵɵelementStart(13, "span");
+    i0.ɵɵtext(14, "Technical");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "button", 16);
+    i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleShowCode()); });
+    i0.ɵɵelement(16, "i", 17);
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18, "Code");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "div", 18);
+    i0.ɵɵtemplate(20, SkipDynamicUIComponentComponent_Conditional_1_button_20_Template, 4, 2, "button", 19)(21, SkipDynamicUIComponentComponent_Conditional_1_button_21_Template, 4, 0, "button", 20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "div", 21);
+    i0.ɵɵtemplate(23, SkipDynamicUIComponentComponent_Conditional_1_Conditional_23_Template, 8, 6);
+    i0.ɵɵelementStart(24, "div", 22, 0);
+    i0.ɵɵtemplate(26, SkipDynamicUIComponentComponent_Conditional_1_Conditional_26_Template, 31, 3, "div", 52);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.showFunctionalRequirements);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showDataRequirements);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showTechnicalDesign);
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("active", ctx_r1.showCode);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !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 ? 23 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.currentError ? 26 : -1);
+} }
+export class SkipDynamicUIComponentComponent {
+    constructor(sanitizer, cdr, ngZone) {
+        this.sanitizer = sanitizer;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.UIComponentCode = null;
+        this.ComponentObjectName = null;
+        this.ShowPrintReport = true;
+        this.ShowReportOptionsToggle = true;
+        this.ShowCreateReportButton = false;
+        this.matchingReportID = null;
+        this.DrillDownEvent = new EventEmitter();
+        this.CreateReportRequested = new EventEmitter();
+        // Properties for handling multiple report options
+        this.reportOptions = [];
+        this.selectedReportOptionIndex = 0;
+        this.currentError = null;
+        this.isCreatingReport = false;
+        // Toggle states for showing/hiding component details
+        this.showFunctionalRequirements = false;
+        this.showDataRequirements = false;
+        this.showTechnicalDesign = false;
+        this.showCode = false;
+        // Details panel height for resizing
+        this.detailsPanelHeight = '300px';
+        this.isResizing = false;
+        this.startY = 0;
+        this.startHeight = 0;
+        // Cache for React component hosts - lazy loaded per option
+        this.reactHostCache = new Map();
+        this.currentHostIndex = null;
+        this.callbacks = {
+            RefreshData: () => this.handleRefreshData(),
+            OpenEntityRecord: (entityName, key) => this.handleOpenEntityRecord(entityName, key),
+            UpdateUserState: (userState) => this.handleUpdateUserState(userState),
+            NotifyEvent: (eventName, eventData) => this.handleNotifyEvent(eventName, eventData)
+        };
+        /**
+         * Handle resize movement
+         */
+        this.onResize = (event) => {
+            if (!this.isResizing)
+                return;
+            const currentY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+            const deltaY = currentY - this.startY;
+            const newHeight = Math.max(100, Math.min(600, this.startHeight + deltaY));
+            // Run inside Angular to update the binding
+            this.ngZone.run(() => {
+                this.detailsPanelHeight = `${newHeight}px`;
+                this.cdr.detectChanges();
+            });
+        };
+        /**
+         * Stop resizing
+         */
+        this.stopResize = () => {
+            this.isResizing = false;
+            document.removeEventListener('mousemove', this.onResize);
+            document.removeEventListener('mouseup', this.stopResize);
+            document.removeEventListener('touchmove', this.onResize);
+            document.removeEventListener('touchend', this.stopResize);
+        };
+    }
+    /**
+     * Gets the currently selected report option
+     */
+    get selectedReportOption() {
+        return this.reportOptions.length > this.selectedReportOptionIndex
+            ? this.reportOptions[this.selectedReportOptionIndex]
+            : null;
+    }
+    /**
+     * Get tab title for a specific option index
+     */
+    getTabTitle(index) {
+        const option = this.reportOptions[index];
+        if (!option)
+            return `report ${index + 1}`;
+        const componentType = option.option.componentType || 'report';
+        return `${componentType} ${index + 1}`;
+    }
+    /**
+     * Check if this option is the AI's top recommendation
+     */
+    isTopRanked(index) {
+        const option = this.reportOptions[index];
+        return (option === null || option === void 0 ? void 0 : option.AIRank) === 1;
+    }
+    /**
+     * Handles when the user selects a tab
+     */
+    onTabSelect(event) {
+        const selectedIndex = event.index;
+        this.onReportOptionChange(selectedIndex);
+    }
+    /**
+     * Handles when the user changes the selected report option
+     */
+    onReportOptionChange(selectedIndex) {
+        if (selectedIndex >= 0 && selectedIndex < this.reportOptions.length) {
+            this.selectedReportOptionIndex = selectedIndex;
+            this.updateCurrentReport();
+        }
+    }
+    /**
+     * Updates the current report display based on the selected option
+     */
+    updateCurrentReport() {
+        const selectedOption = this.selectedReportOption;
+        if (!selectedOption)
+            return;
+        // Clear any previous error
+        this.currentError = null;
+        try {
+            // Update the component info - this can fail if placeholders are missing
+            this.UIComponentCode = BuildSkipComponentCompleteCode(selectedOption.option);
+            this.ComponentObjectName = selectedOption.option.componentName;
+            // Simply create or reuse the React host for this option
+            // The tab component handles visibility automatically
+            if (!this.reactHostCache.has(this.selectedReportOptionIndex)) {
+                // Create a new host for this option
+                this.createReactHostForOption(this.selectedReportOptionIndex);
+            }
+            this.currentHostIndex = this.selectedReportOptionIndex;
+        }
+        catch (error) {
+            console.error('Failed to build component code:', error);
+            this.currentError = {
+                type: 'Component Assembly Error',
+                message: 'Failed to assemble the component code. This usually happens when sub-components are missing or placeholders cannot be resolved.',
+                technicalDetails: (error === null || error === void 0 ? void 0 : error.toString()) || 'Unknown error during component assembly'
+            };
+            // Clear the UI component code to prevent partial rendering
+            this.UIComponentCode = null;
+            this.ComponentObjectName = null;
+        }
+    }
+    PrintReport() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const currentHost = this.getCurrentReactHost();
+            if (currentHost) {
+                currentHost.print();
+            }
+            else {
+                window.print();
+            }
+        });
+    }
+    /**
+     * Copy error details to clipboard for user to send back to Skip
+     */
+    copyErrorToClipboard() {
+        if (!this.currentError)
+            return;
+        const errorText = `Skip Component Error:
+Type: ${this.currentError.type}
+Message: ${this.currentError.message}
+${this.currentError.technicalDetails ? `\nTechnical Details:\n${this.currentError.technicalDetails}` : ''}
+
+Component Option: ${this.selectedReportOptionIndex + 1}
+Component Name: ${this.ComponentObjectName || 'Unknown'}`;
+        navigator.clipboard.writeText(errorText).then(() => {
+            alert('Error details copied to clipboard. You can paste this in the Skip chat to get help.');
+        }).catch(err => {
+            console.error('Failed to copy to clipboard:', err);
+        });
+    }
+    /**
+     * Get the container element for a specific option index
+     */
+    getContainerForOption(optionIndex) {
+        var _a;
+        if (!this.htmlContainers || this.htmlContainers.length === 0) {
+            return null;
+        }
+        if (this.reportOptions.length === 1) {
+            // Single option - use the only container
+            return ((_a = this.htmlContainers.first) === null || _a === void 0 ? void 0 : _a.nativeElement) || null;
+        }
+        else {
+            // Multiple options - find container by data-tab-index
+            const container = this.htmlContainers.find(ref => ref.nativeElement.getAttribute('data-tab-index') === optionIndex.toString());
+            return (container === null || container === void 0 ? void 0 : container.nativeElement) || null;
+        }
+    }
+    /**
+     * Retry loading the current option
+     */
+    retryCurrentOption() {
+        // Clear the error
+        this.currentError = null;
+        // Remove the cached host for this option to force recreation
+        if (this.reactHostCache.has(this.selectedReportOptionIndex)) {
+            const host = this.reactHostCache.get(this.selectedReportOptionIndex);
+            if (host) {
+                host.destroy();
+            }
+            this.reactHostCache.delete(this.selectedReportOptionIndex);
+        }
+        // Try creating it again
+        this.createReactHostForOption(this.selectedReportOptionIndex);
+    }
+    /**
+     * Handle create report request for a specific option
+     */
+    createReportForOption(optionIndex) {
+        this.isCreatingReport = true;
+        // Emit the event with the option index so the parent can handle it
+        this.CreateReportRequested.emit(optionIndex);
+    }
+    /**
+     * Get the component type name for display
+     */
+    getComponentTypeName(option) {
+        const type = option.option.componentType || 'report';
+        return type.charAt(0).toUpperCase() + type.slice(1);
+    }
+    /**
+     * Toggle methods for showing/hiding component details
+     */
+    toggleShowFunctionalRequirements() {
+        this.showFunctionalRequirements = !this.showFunctionalRequirements;
+        this.adjustDetailsPanelHeight();
+    }
+    toggleShowDataRequirements() {
+        this.showDataRequirements = !this.showDataRequirements;
+        this.adjustDetailsPanelHeight();
+    }
+    toggleShowTechnicalDesign() {
+        this.showTechnicalDesign = !this.showTechnicalDesign;
+        this.adjustDetailsPanelHeight();
+    }
+    toggleShowCode() {
+        this.showCode = !this.showCode;
+        this.adjustDetailsPanelHeight();
+    }
+    /**
+     * Adjust the details panel height when toggling views
+     */
+    adjustDetailsPanelHeight() {
+        const anyVisible = this.showFunctionalRequirements || this.showDataRequirements ||
+            this.showTechnicalDesign || this.showCode;
+        if (anyVisible && this.detailsPanelHeight === '0px') {
+            this.detailsPanelHeight = '300px';
+        }
+        else if (!anyVisible) {
+            this.detailsPanelHeight = '0px';
+        }
+    }
+    /**
+     * Format functional requirements as HTML
+     */
+    getFormattedFunctionalRequirements(option) {
+        const requirements = option.option.functionalRequirements || 'No functional requirements specified.';
+        const html = marked.parse(requirements);
+        return this.sanitizer.sanitize(1, html); // 1 = SecurityContext.HTML
+    }
+    /**
+     * Format data requirements as HTML
+     */
+    getFormattedDataRequirements(option) {
+        const dataReq = option.option.dataRequirements;
+        if (!dataReq) {
+            return this.sanitizer.sanitize(1, '<p>No data requirements specified.</p>');
+        }
+        let markdown = `## Data Access Mode: ${dataReq.mode}\n\n`;
+        if (dataReq.description) {
+            markdown += `${dataReq.description}\n\n`;
+        }
+        if (dataReq.staticData) {
+            markdown += `### Static Data\n\n`;
+            if (dataReq.staticData.description) {
+                markdown += `${dataReq.staticData.description}\n\n`;
+            }
+            if (dataReq.staticData.dataContext) {
+                markdown += `**Data Context:** Present (pre-loaded data available)\n\n`;
+            }
+        }
+        if (dataReq.dynamicData) {
+            markdown += `### Dynamic Data\n\n`;
+            if (dataReq.dynamicData.description) {
+                markdown += `${dataReq.dynamicData.description}\n\n`;
+            }
+            if (dataReq.dynamicData.requiredEntities && dataReq.dynamicData.requiredEntities.length > 0) {
+                markdown += `**Required Entities:**\n`;
+                dataReq.dynamicData.requiredEntities.forEach(entity => {
+                    markdown += `- ${entity}\n`;
+                });
+                markdown += '\n';
+            }
+        }
+        if (dataReq.hybridStrategy) {
+            markdown += `### Hybrid Strategy\n\n${dataReq.hybridStrategy.description}\n\n`;
+            if (dataReq.hybridStrategy.performanceNotes) {
+                markdown += `**Performance Notes:** ${dataReq.hybridStrategy.performanceNotes}\n\n`;
+            }
+        }
+        if (dataReq.securityNotes) {
+            markdown += `### Security Considerations\n\n${dataReq.securityNotes}\n`;
+        }
+        const html = marked.parse(markdown);
+        return this.sanitizer.sanitize(1, html);
+    }
+    /**
+     * Format technical design as HTML
+     */
+    getFormattedTechnicalDesign(option) {
+        const design = option.option.technicalDesign || 'No technical design specified.';
+        const html = marked.parse(design);
+        return this.sanitizer.sanitize(1, html);
+    }
+    /**
+     * Get the component code
+     */
+    getComponentCode(option) {
+        try {
+            return BuildSkipComponentCompleteCode(option.option);
+        }
+        catch (e) {
+            return `// Error building complete component code:\n// ${e}`;
+        }
+    }
+    /**
+     * Start resizing the details panel
+     */
+    startResize(event) {
+        event.preventDefault();
+        this.isResizing = true;
+        this.startY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        this.startHeight = parseInt(this.detailsPanelHeight, 10);
+        // Use NgZone to run outside Angular to prevent change detection during drag
+        this.ngZone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', this.onResize);
+            document.addEventListener('mouseup', this.stopResize);
+            document.addEventListener('touchmove', this.onResize);
+            document.addEventListener('touchend', this.stopResize);
+        });
+    }
+    onWindowResize() {
+        // Ensure the details panel height remains valid on window resize
+        const currentHeight = parseInt(this.detailsPanelHeight, 10);
+        const maxHeight = window.innerHeight * 0.6;
+        if (currentHeight > maxHeight) {
+            this.detailsPanelHeight = `${maxHeight}px`;
+        }
+    }
+    ngAfterViewInit() {
+        if (this.SkipData) {
+            this.setupReportOptions(this.SkipData);
+        }
+        // Wait for ViewChildren to be available
+        setTimeout(() => {
+            if (this.UIComponentCode && this.ComponentObjectName && this.SkipData) {
+                // Create the initial React host for the first option
+                this.createReactHostForOption(this.selectedReportOptionIndex);
+            }
+        });
+    }
+    ngOnDestroy() {
+        // Clean up all cached React hosts
+        this.reactHostCache.forEach(host => {
+            try {
+                host.destroy();
+            }
+            catch (e) {
+                console.error('Error destroying React host:', e);
+            }
+        });
+        this.reactHostCache.clear();
+    }
+    ngOnChanges(changes) {
+        if (changes['SkipData'] && !changes['SkipData'].firstChange) {
+            // Update all cached React components with new data
+            const newData = this.getFlattenedDataContext();
+            this.reactHostCache.forEach(host => {
+                try {
+                    host.updateState('data', newData);
+                }
+                catch (e) {
+                    console.error('Error updating React host data:', e);
+                }
+            });
+        }
+    }
+    /**
+     * Get the currently active React host
+     */
+    getCurrentReactHost() {
+        if (this.currentHostIndex !== null && this.reactHostCache.has(this.currentHostIndex)) {
+            return this.reactHostCache.get(this.currentHostIndex) || null;
+        }
+        return null;
+    }
+    get SkipData() {
+        return this._skipData ? this._skipData : undefined;
+    }
+    set SkipData(d) {
+        const hadData = this._skipData ? true : false;
+        this._skipData = d;
+        if (d) {
+            // For backward compatibility, check if we have component options
+            if (d.componentOptions && d.componentOptions.length > 0) {
+                // Use the first component option (or the highest ranked one)
+                const component = d.componentOptions[0];
+                this.UIComponentCode = BuildSkipComponentCompleteCode(component.option);
+                this.ComponentObjectName = component.option.componentName;
+            }
+            else {
+                // Fallback for old format
+                this.UIComponentCode = d.htmlReport;
+                this.ComponentObjectName = d.htmlReportObjectName;
+            }
+        }
+        if (d && hadData) {
+            // Update the current display with new data
+            this.updateCurrentReport();
+        }
+    }
+    /**
+     * Sets up the component options from the SkipData, prioritizing the new componentOptions array
+     * but falling back to the deprecated htmlReport/htmlReportObjectName for backward compatibility
+     */
+    setupReportOptions(data) {
+        // Check if we have the new componentOptions array
+        if (data.componentOptions && data.componentOptions.length > 0) {
+            // Sort by AIRank (lower numbers = better ranking)
+            this.reportOptions = [...data.componentOptions].sort((a, b) => {
+                var _a, _b;
+                const rankA = (_a = a.AIRank) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER;
+                const rankB = (_b = b.AIRank) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER;
+                return rankA - rankB;
+            });
+            // Select the best option (first in sorted array)
+            this.selectedReportOptionIndex = 0;
+            const bestOption = this.reportOptions[0];
+            this.UIComponentCode = BuildSkipComponentCompleteCode(bestOption.option);
+            this.ComponentObjectName = bestOption.option.componentName;
+        }
+    }
+    /**
+     * Create a React host for a specific option index
+     */
+    createReactHostForOption(optionIndex) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const option = this.reportOptions[optionIndex];
+            if (!option)
+                return;
+            const container = this.getContainerForOption(optionIndex);
+            if (!container)
+                return;
+            try {
+                const componentCode = BuildSkipComponentCompleteCode(option.option);
+                // Check for unresolved placeholders in the code
+                if (componentCode.includes('<<') && componentCode.includes('>>')) {
+                    const placeholderMatch = componentCode.match(/<<([^>]+)>>/);
+                    const placeholderName = placeholderMatch ? placeholderMatch[1] : 'Unknown';
+                    this.currentError = {
+                        type: 'Incomplete Component',
+                        message: `This component option contains unresolved placeholders (${placeholderName}). The component generation was not completed successfully.`,
+                        technicalDetails: `The component code contains placeholder tokens that should have been replaced with actual implementations. This typically happens when the AI generation process was interrupted or encountered an error.\n\nPlaceholder found: <<${placeholderName}>>`
+                    };
+                    return;
+                }
+                const md = new Metadata();
+                const data = this.getFlattenedDataContext();
+                // Create the React component host directly in the tab container
+                const reactHost = new SkipReactComponentHost({
+                    componentCode: componentCode,
+                    container: container,
+                    callbacks: this.callbacks,
+                    data: data,
+                    utilities: this.SetupUtilities(md),
+                    styles: this.SetupStyles()
+                });
+                // Initialize and render the React component
+                yield reactHost.initialize();
+                // Cache the host
+                this.reactHostCache.set(optionIndex, reactHost);
+                // Update current index if this is the selected option
+                if (optionIndex === this.selectedReportOptionIndex) {
+                    this.currentHostIndex = optionIndex;
+                }
+            }
+            catch (e) {
+                console.error('Error creating React host:', e);
+                // Determine the type of error and create a user-friendly message
+                let errorType = 'Component Initialization Error';
+                let errorMessage = 'Failed to initialize the React component.';
+                let technicalDetails = e.toString();
+                if ((_a = e.message) === null || _a === void 0 ? void 0 : _a.includes('JSX transpilation failed')) {
+                    errorType = 'Code Compilation Error';
+                    errorMessage = 'The component code could not be compiled. This usually indicates a syntax error in the generated code.';
+                    technicalDetails = e.message;
+                }
+                else if ((_b = e.message) === null || _b === void 0 ? void 0 : _b.includes('is not defined')) {
+                    errorType = 'Missing Dependency';
+                    errorMessage = 'The component is trying to use a feature or library that is not available.';
+                }
+                else if ((_c = e.message) === null || _c === void 0 ? void 0 : _c.includes('Cannot read properties')) {
+                    errorType = 'Property Access Error';
+                    errorMessage = 'The component is trying to access data that doesn\'t exist. This often happens when property names don\'t match the data structure.';
+                }
+                this.currentError = {
+                    type: errorType,
+                    message: errorMessage,
+                    technicalDetails: technicalDetails + '\n\nComponent Option: ' + (optionIndex + 1) + '\nComponent Name: ' + option.option.componentName
+                };
+                LogError(e);
+            }
+        });
+    }
+    getFlattenedDataContext() {
+        var _a;
+        const flattenedDataContext = {};
+        if ((_a = this.SkipData) === null || _a === void 0 ? void 0 : _a.dataContext) {
+            const loadedItems = this.SkipData.dataContext.Items.filter((i) => { var _a; return i.DataLoaded && ((_a = i._Data) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+            for (let i = 0; i < loadedItems.length; i++) {
+                flattenedDataContext["data_item_" + i] = loadedItems[i]._Data;
+            }
+        }
+        return flattenedDataContext;
+    }
+    // Event handler implementations
+    handleRefreshData() {
+        console.log('Component requested data refresh');
+        // Emit an event or call parent component method to refresh data
+    }
+    handleOpenEntityRecord(entityName, key) {
+        if (entityName) {
+            // bubble this up to our parent component as we don't directly open records in this component
+            const md = new Metadata();
+            const entityMatch = md.EntityByName(entityName);
+            if (!entityMatch) {
+                // couldn't find it, but sometimes the AI uses a table name or a view name, let's check for that
+                const altMatch = md.Entities.filter(e => e.BaseTable.toLowerCase() === entityName.toLowerCase() ||
+                    e.BaseView.toLowerCase() === entityName.toLowerCase() ||
+                    e.SchemaName.toLowerCase() + '.' + e.BaseTable.toLowerCase() === entityName.toLowerCase() ||
+                    e.SchemaName.toLowerCase() + '.' + e.BaseView.toLowerCase() === entityName.toLowerCase());
+                if (altMatch && altMatch.length === 1) {
+                    entityName = altMatch[0].Name;
+                }
+            }
+            const cKey = new CompositeKey(key);
+            this.DrillDownEvent.emit(new DrillDownInfo(entityName, cKey.ToWhereClause()));
+        }
+    }
+    handleUpdateUserState(userState) {
+        console.log('Component updated user state:', userState);
+        // TODO: Implement user state persistence if needed
+    }
+    handleNotifyEvent(eventName, eventData) {
+        var _a;
+        console.log(`Component raised event: ${eventName} notified with data:`, eventData);
+        // Handle component errors from React host
+        if (eventName === 'componentError') {
+            this.currentError = {
+                type: eventData.source || 'React Component Error',
+                message: eventData.error || 'An unknown error occurred in the React component',
+                technicalDetails: eventData.stackTrace || ((_a = eventData.errorInfo) === null || _a === void 0 ? void 0 : _a.componentStack) || ''
+            };
+        }
+        // TODO: Handle other custom events as needed
+    }
+    SetupUtilities(md) {
+        const rv = new RunView();
+        const rq = new RunQuery();
+        const u = {
+            md: this.CreateSimpleMetadata(md),
+            rv: this.CreateSimpleRunView(rv),
+            rq: this.CreateSimpleRunQuery(rq)
+        };
+        return u;
+    }
+    CreateSimpleMetadata(md) {
+        return {
+            entities: md.Entities.map(e => MapEntityInfoToSkipEntityInfo(e))
+        };
+    }
+    SetupStyles() {
+        // Return modern, contemporary styles for generated components
+        return {
+            colors: {
+                // Primary colors - modern purple/blue gradient feel
+                primary: '#5B4FE9',
+                primaryHover: '#4940D4',
+                primaryLight: '#E8E6FF',
+                // Secondary colors - sophisticated gray
+                secondary: '#64748B',
+                secondaryHover: '#475569',
+                // Status colors
+                success: '#10B981',
+                successLight: '#D1FAE5',
+                warning: '#F59E0B',
+                warningLight: '#FEF3C7',
+                error: '#EF4444',
+                errorLight: '#FEE2E2',
+                info: '#3B82F6',
+                infoLight: '#DBEAFE',
+                // Base colors
+                background: '#FFFFFF',
+                surface: '#F8FAFC',
+                surfaceHover: '#F1F5F9',
+                // Text colors with better contrast
+                text: '#1E293B',
+                textSecondary: '#64748B',
+                textTertiary: '#94A3B8',
+                textInverse: '#FFFFFF',
+                // Border colors
+                border: '#E2E8F0',
+                borderLight: '#F1F5F9',
+                borderFocus: '#5B4FE9',
+                // Shadows (as color strings for easy use)
+                shadow: 'rgba(0, 0, 0, 0.05)',
+                shadowMedium: 'rgba(0, 0, 0, 0.1)',
+                shadowLarge: 'rgba(0, 0, 0, 0.15)',
+            },
+            spacing: {
+                xs: '4px',
+                sm: '8px',
+                md: '16px',
+                lg: '24px',
+                xl: '32px',
+                xxl: '48px',
+                xxxl: '64px',
+            },
+            typography: {
+                fontFamily: '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif',
+                fontSize: {
+                    xs: '11px',
+                    sm: '12px',
+                    md: '14px',
+                    lg: '16px',
+                    xl: '20px',
+                    xxl: '24px',
+                    xxxl: '32px',
+                },
+                fontWeight: {
+                    light: '300',
+                    regular: '400',
+                    medium: '500',
+                    semibold: '600',
+                    bold: '700',
+                },
+                lineHeight: {
+                    tight: '1.25',
+                    normal: '1.5',
+                    relaxed: '1.75',
+                },
+            },
+            borders: {
+                radius: {
+                    sm: '6px',
+                    md: '8px',
+                    lg: '12px',
+                    xl: '16px',
+                    full: '9999px',
+                },
+                width: {
+                    thin: '1px',
+                    medium: '2px',
+                    thick: '3px',
+                },
+            },
+            shadows: {
+                sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+                md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+                xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+                inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+            },
+            transitions: {
+                fast: '150ms ease-in-out',
+                normal: '250ms ease-in-out',
+                slow: '350ms ease-in-out',
+            },
+            overflow: 'auto' // Default overflow style        
+        };
+    }
+    CreateSimpleRunQuery(rq) {
+        return {
+            runQuery: (params) => __awaiter(this, void 0, void 0, function* () {
+                // Run a single query and return the results
+                try {
+                    const result = yield rq.RunQuery(params);
+                    return result;
+                }
+                catch (error) {
+                    LogError(error);
+                    throw error; // Re-throw to handle it in the caller
+                }
+            })
+        };
+    }
+    CreateSimpleRunView(rv) {
+        return {
+            runView: (params) => __awaiter(this, void 0, void 0, function* () {
+                // Run a single view and return the results
+                try {
+                    const result = yield rv.RunView(params);
+                    return result;
+                }
+                catch (error) {
+                    LogError(error);
+                    throw error; // Re-throw to handle it in the caller
+                }
+            }),
+            runViews: (params) => __awaiter(this, void 0, void 0, function* () {
+                // Runs multiple views and returns the results
+                try {
+                    const results = yield rv.RunViews(params);
+                    return results;
+                }
+                catch (error) {
+                    LogError(error);
+                    throw error; // Re-throw to handle it in the caller
+                }
+            })
+        };
+    }
+    SetupCallbacks() {
+        const cb = {
+            RefreshData: () => {
+                // this is a callback function that can be called from the component to refresh data
+                console.log('Component requested data refresh');
+                // need to implement this
+            },
+            OpenEntityRecord: (entityName, key) => {
+                // this is a callback function that can be called from the component to open an entity record
+                if (entityName) {
+                    // bubble this up to our parent component as we don't directly open records in this component
+                    const md = new Metadata();
+                    const entityMatch = md.EntityByName(entityName);
+                    if (!entityMatch) {
+                        // couldn't find it, but sometimes the AI uses a table name or a view name, let's check for that
+                        const altMatch = md.Entities.filter(e => e.BaseTable.toLowerCase() === entityName.toLowerCase() ||
+                            e.BaseView.toLowerCase() === entityName.toLowerCase() ||
+                            e.SchemaName.toLowerCase() + '.' + e.BaseTable.toLowerCase() === entityName.toLowerCase() ||
+                            e.SchemaName.toLowerCase() + '.' + e.BaseView.toLowerCase() === entityName.toLowerCase());
+                        if (altMatch && altMatch.length === 1) {
+                            entityName = altMatch[0].Name;
+                        }
+                    }
+                    const cKey = new CompositeKey(key);
+                    this.DrillDownEvent.emit(new DrillDownInfo(entityName, cKey.ToWhereClause()));
+                }
+            },
+            UpdateUserState: (userState) => {
+                // this is a callback function that can be called from the component to update user state
+                console.log('Component updated user state:', userState);
+                // need to implement this
+            },
+            NotifyEvent: (eventName, eventData) => {
+                // this is a callback function that can be called from the component to notify an event
+                console.log(`Component raised event: ${eventName} notified with data:`, eventData);
+            }
+        };
+        return cb;
+    }
+    refreshReport(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const currentHost = this.getCurrentReactHost();
+            if (currentHost) {
+                currentHost.refresh(data);
+            }
+            else {
+                // If no React host is available, create one for the current option
+                this.createReactHostForOption(this.selectedReportOptionIndex);
+            }
+        });
+    }
+}
+SkipDynamicUIComponentComponent.ɵfac = function SkipDynamicUIComponentComponent_Factory(t) { return new (t || SkipDynamicUIComponentComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+SkipDynamicUIComponentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicUIComponentComponent, selectors: [["skip-dynamic-ui-component"]], viewQuery: function SkipDynamicUIComponentComponent_Query(rf, ctx) { if (rf & 1) {
+        i0.ɵɵviewQuery(_c0, 5);
+    } if (rf & 2) {
+        let _t;
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainers = _t);
+    } }, hostBindings: function SkipDynamicUIComponentComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        i0.ɵɵlistener("resize", function SkipDynamicUIComponentComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
+    } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [["htmlContainer", ""], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], ["title", "Toggle Functional Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Toggle Data Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-database"], ["title", "Toggle Technical Design", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-cogs"], ["title", "Toggle Code View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-code"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [2, "flex", "1", "position", "relative", "min-height", "0", "overflow", "auto"], [2, "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "value", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "height", "500px", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"], [2, "position", "relative"], ["kendoButton", "", 2, "position", "absolute", "top", "0", "right", "0", "font-size", "12px", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "color", "#dc3545", "margin-top", "0", "margin-right", "150px", "font-size", "18px"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "margin-bottom", "10px", "font-size", "14px"], [2, "background-color", "#fff", "border", "1px solid #dee2e6", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px", "font-family", "'Courier New', monospace", "font-size", "12px"], [2, "margin-top", "8px"], [2, "background-color", "#e7f3ff", "border", "1px solid #b3d9ff", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px"], [2, "font-size", "14px"], [2, "margin", "8px 0 0 20px", "padding", "0", "font-size", "13px"], ["kendoButton", "", 2, "font-size", "13px", 3, "click"], [1, "fa-solid", "fa-rotate"], [2, "cursor", "pointer", "color", "#0056b3"], [2, "margin-top", "8px", "white-space", "pre-wrap", "word-break", "break-word", "font-size", "11px"], [2, "position", "absolute", "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"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 1)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 27, 12, "div", 2);
+    } if (rf & 2) {
+        i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
+    } }, dependencies: [i2.NgIf, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.CodeEditorComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
+        type: Component,
+        args: [{ selector: 'skip-dynamic-ui-component', template: `
+    @if (reportOptions.length > 1) {
+      <!-- Multiple options: show tabs -->
+      <kendo-tabstrip 
+        (tabSelect)="onTabSelect($event)"
+        [keepTabContent]="true"
+        style="height: 100%; display: flex; flex-direction: column;">
+        @for (option of reportOptions; track option; let i = $index) {
+          <kendo-tabstrip-tab [selected]="i === selectedReportOptionIndex">
+            <ng-template kendoTabTitle>
+              @if (isTopRanked(i)) {
+                <i class="fa-solid fa-star star-icon"></i>
+              }
+              {{ getTabTitle(i) }}
+            </ng-template>
+            <ng-template kendoTabContent>
+              <div style="height: 100%; display: flex; flex-direction: column;">
+                <!-- Tab Action Bar -->
+                <div class="tab-action-bar">
+                  <div class="tab-actions-left">
+                    <!-- Toggle buttons for showing/hiding component details -->
+                    <button class="tab-action-button toggle-button" 
+                            (click)="toggleShowFunctionalRequirements()"
+                            [class.active]="showFunctionalRequirements"
+                            title="Toggle Functional Requirements">
+                      <i class="fa-solid fa-list-check"></i>
+                      <span>Functional</span>
+                    </button>
+                    <button class="tab-action-button toggle-button" 
+                            (click)="toggleShowDataRequirements()"
+                            [class.active]="showDataRequirements"
+                            title="Toggle Data Requirements">
+                      <i class="fa-solid fa-database"></i>
+                      <span>Data</span>
+                    </button>
+                    <button class="tab-action-button toggle-button" 
+                            (click)="toggleShowTechnicalDesign()"
+                            [class.active]="showTechnicalDesign"
+                            title="Toggle Technical Design">
+                      <i class="fa-solid fa-cogs"></i>
+                      <span>Technical</span>
+                    </button>
+                    <button class="tab-action-button toggle-button" 
+                            (click)="toggleShowCode()"
+                            [class.active]="showCode"
+                            title="Toggle Code View">
+                      <i class="fa-solid fa-code"></i>
+                      <span>Code</span>
+                    </button>
+                  </div>
+                  <div class="tab-actions-right">
+                    <button class="tab-action-button create-button" 
+                            *ngIf="ShowCreateReportButton && !matchingReportID"
+                            (click)="createReportForOption(i)"
+                            [disabled]="isCreatingReport">
+                      <i class="fa-solid fa-plus"></i>
+                      <span>Create {{ getComponentTypeName(option) }}</span>
+                    </button>
+                    <button class="tab-action-button print-button" 
+                            *ngIf="ShowPrintReport" 
+                            (click)="PrintReport()"
+                            title="Print Report">
+                      <i class="fa-solid fa-print"></i>
+                      <span>Print Report</span>
+                    </button>
+                  </div>
+                </div>
+                
+                <!-- Main content area with optional details panels -->
+                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
+                  @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {
+                    <!-- Details panel -->
+                    <div class="details-panel" [style.height]="detailsPanelHeight">
+                      <kendo-tabstrip style="height: 100%;">
+                        @if (showFunctionalRequirements) {
+                          <kendo-tabstrip-tab [selected]="true">
+                            <ng-template kendoTabTitle>
+                              <i class="fa-solid fa-list-check"></i> Functional Requirements
+                            </ng-template>
+                            <ng-template kendoTabContent>
+                              <div class="details-content">
+                                <div [innerHTML]="getFormattedFunctionalRequirements(option)"></div>
+                              </div>
+                            </ng-template>
+                          </kendo-tabstrip-tab>
+                        }
+                        @if (showDataRequirements) {
+                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements">
+                            <ng-template kendoTabTitle>
+                              <i class="fa-solid fa-database"></i> Data Requirements
+                            </ng-template>
+                            <ng-template kendoTabContent>
+                              <div class="details-content">
+                                <div [innerHTML]="getFormattedDataRequirements(option)"></div>
+                              </div>
+                            </ng-template>
+                          </kendo-tabstrip-tab>
+                        }
+                        @if (showTechnicalDesign) {
+                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements">
+                            <ng-template kendoTabTitle>
+                              <i class="fa-solid fa-cogs"></i> Technical Design
+                            </ng-template>
+                            <ng-template kendoTabContent>
+                              <div class="details-content">
+                                <div [innerHTML]="getFormattedTechnicalDesign(option)"></div>
+                              </div>
+                            </ng-template>
+                          </kendo-tabstrip-tab>
+                        }
+                        @if (showCode) {
+                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign">
+                            <ng-template kendoTabTitle>
+                              <i class="fa-solid fa-code"></i> Code
+                            </ng-template>
+                            <ng-template kendoTabContent>
+                              <div class="details-content code-content">
+                                <mj-code-editor
+                                  [value]="getComponentCode(option)"
+                                  [autoFocus]="false"
+                                  [indentWithTab]="true"
+                                  [readonly]="true"
+                                  style="height: 100%;">
+                                </mj-code-editor>
+                              </div>
+                            </ng-template>
+                          </kendo-tabstrip-tab>
+                        }
+                      </kendo-tabstrip>
+                    </div>
+                    <!-- Resizer -->
+                    <div class="panel-resizer" 
+                         (mousedown)="startResize($event)"
+                         (touchstart)="startResize($event)">
+                      <div class="resizer-handle"></div>
+                    </div>
+                  }
+                  
+                  <!-- React component container -->
+                  <div #htmlContainer [attr.data-tab-index]="i" 
+                       style="flex: 1; position: relative; min-height: 0; overflow: auto;">
+                    <!-- Content will be rendered here by React host -->
+                    
+                    <!-- Error overlay for this tab (shown on top of content when needed) -->
+                  @if (currentError && selectedReportOptionIndex === i) {
+                    <div style="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;">
+                      <div style="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);">
+                        <div style="position: relative;">
+                          <button kendoButton (click)="copyErrorToClipboard()" 
+                                  style="position: absolute; top: 0; right: 0; font-size: 12px;">
+                            <span class="fa-solid fa-copy"></span>
+                            Copy Error Details
+                          </button>
+                          <h3 style="color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;">
+                            <span class="fa-solid fa-exclamation-triangle"></span>
+                            Component Rendering Error
+                          </h3>
+                        </div>
+                        <p style="margin-bottom: 10px; font-size: 14px;">
+                          The selected component option could not be rendered due to the following error:
+                        </p>
+                        <div style="background-color: #fff; border: 1px solid #dee2e6; 
+                                    border-radius: 4px; padding: 12px; margin-bottom: 12px;
+                                    font-family: 'Courier New', monospace; font-size: 12px;">
+                          <strong>Error Type:</strong> {{ currentError.type }}<br>
+                          <strong>Details:</strong> {{ currentError.message }}
+                          @if (currentError.technicalDetails) {
+                            <details style="margin-top: 8px;">
+                              <summary style="cursor: pointer; color: #0056b3;">Technical Details (click to expand)</summary>
+                              <pre style="margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;">{{ currentError.technicalDetails }}</pre>
+                            </details>
+                          }
+                        </div>
+                        <div style="background-color: #e7f3ff; border: 1px solid #b3d9ff; 
+                                    border-radius: 4px; padding: 12px; margin-bottom: 12px;">
+                          <strong style="font-size: 14px;">What to do:</strong>
+                          <ol style="margin: 8px 0 0 20px; padding: 0; font-size: 13px;">
+                            <li>Try selecting a different report option from the tabs above</li>
+                            <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>
+                            <li>Contact your IT department if the issue persists</li>
+                          </ol>
+                        </div>
+                        <button kendoButton (click)="retryCurrentOption()" style="font-size: 13px;">
+                          <span class="fa-solid fa-rotate"></span>
+                          Retry
+                        </button>
+                      </div>
+                    </div>
+                  }
+                  </div>
+                </div>
+              </div>
+            </ng-template>
+          </kendo-tabstrip-tab>
+        }
+      </kendo-tabstrip>
+    } @else {
+      <!-- Single option: no tabs needed -->
+      <div style="height: 100%; display: flex; flex-direction: column;">
+        <!-- Tab Action Bar -->
+        <div class="tab-action-bar">
+          <div class="tab-actions-left">
+            <!-- Toggle buttons for showing/hiding component details -->
+            <button class="tab-action-button toggle-button" 
+                    (click)="toggleShowFunctionalRequirements()"
+                    [class.active]="showFunctionalRequirements"
+                    title="Toggle Functional Requirements">
+              <i class="fa-solid fa-list-check"></i>
+              <span>Functional</span>
+            </button>
+            <button class="tab-action-button toggle-button" 
+                    (click)="toggleShowDataRequirements()"
+                    [class.active]="showDataRequirements"
+                    title="Toggle Data Requirements">
+              <i class="fa-solid fa-database"></i>
+              <span>Data</span>
+            </button>
+            <button class="tab-action-button toggle-button" 
+                    (click)="toggleShowTechnicalDesign()"
+                    [class.active]="showTechnicalDesign"
+                    title="Toggle Technical Design">
+              <i class="fa-solid fa-cogs"></i>
+              <span>Technical</span>
+            </button>
+            <button class="tab-action-button toggle-button" 
+                    (click)="toggleShowCode()"
+                    [class.active]="showCode"
+                    title="Toggle Code View">
+              <i class="fa-solid fa-code"></i>
+              <span>Code</span>
+            </button>
+          </div>
+          <div class="tab-actions-right">
+            <button class="tab-action-button create-button" 
+                    *ngIf="ShowCreateReportButton && !matchingReportID"
+                    (click)="createReportForOption(0)"
+                    [disabled]="isCreatingReport">
+              <i class="fa-solid fa-plus"></i>
+              <span>Create {{ reportOptions[0] ? getComponentTypeName(reportOptions[0]) : 'Component' }}</span>
+            </button>
+            <button class="tab-action-button print-button" 
+                    *ngIf="ShowPrintReport" 
+                    (click)="PrintReport()"
+                    title="Print Report">
+              <i class="fa-solid fa-print"></i>
+              <span>Print Report</span>
+            </button>
+          </div>
+        </div>
+        
+        <!-- Main content area with optional details panels -->
+        <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
+          @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {
+            <!-- Details panel -->
+            <div class="details-panel" [style.height]="detailsPanelHeight">
+              <kendo-tabstrip style="height: 100%;">
+                @if (showFunctionalRequirements && reportOptions[0]) {
+                  <kendo-tabstrip-tab [selected]="true">
+                    <ng-template kendoTabTitle>
+                      <i class="fa-solid fa-list-check"></i> Functional Requirements
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                      <div class="details-content">
+                        <div [innerHTML]="getFormattedFunctionalRequirements(reportOptions[0])"></div>
+                      </div>
+                    </ng-template>
+                  </kendo-tabstrip-tab>
+                }
+                @if (showDataRequirements && reportOptions[0]) {
+                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements">
+                    <ng-template kendoTabTitle>
+                      <i class="fa-solid fa-database"></i> Data Requirements
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                      <div class="details-content">
+                        <div [innerHTML]="getFormattedDataRequirements(reportOptions[0])"></div>
+                      </div>
+                    </ng-template>
+                  </kendo-tabstrip-tab>
+                }
+                @if (showTechnicalDesign && reportOptions[0]) {
+                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements">
+                    <ng-template kendoTabTitle>
+                      <i class="fa-solid fa-cogs"></i> Technical Design
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                      <div class="details-content">
+                        <div [innerHTML]="getFormattedTechnicalDesign(reportOptions[0])"></div>
+                      </div>
+                    </ng-template>
+                  </kendo-tabstrip-tab>
+                }
+                @if (showCode && reportOptions[0]) {
+                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign">
+                    <ng-template kendoTabTitle>
+                      <i class="fa-solid fa-code"></i> Code
+                    </ng-template>
+                    <ng-template kendoTabContent>
+                      <div class="details-content code-content">
+                        <mj-code-editor
+                          [value]="getComponentCode(reportOptions[0])"
+                          [autoFocus]="false"
+                          [indentWithTab]="true"
+                          [readonly]="true"
+                          style="height: 100%;">
+                        </mj-code-editor>
+                      </div>
+                    </ng-template>
+                  </kendo-tabstrip-tab>
+                }
+              </kendo-tabstrip>
+            </div>
+            <!-- Resizer -->
+            <div class="panel-resizer" 
+                 (mousedown)="startResize($event)"
+                 (touchstart)="startResize($event)">
+              <div class="resizer-handle"></div>
+            </div>
+          }
+          
+          <!-- React component container -->
+          <div #htmlContainer style="flex: 1; position: relative; min-height: 0; overflow: auto;">
+            <!-- Content will be rendered here by React host -->
+            
+            <!-- Error overlay (shown on top of content when needed) -->
+          @if (currentError) {
+            <div style="position: absolute; 
+                        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;">
+              <div style="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);">
+                <div style="position: relative;">
+                  <button kendoButton (click)="copyErrorToClipboard()" 
+                          style="position: absolute; top: 0; right: 0; font-size: 12px;">
+                    <span class="fa-solid fa-copy"></span>
+                    Copy Error Details
+                  </button>
+                  <h3 style="color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;">
+                    <span class="fa-solid fa-exclamation-triangle"></span>
+                    Component Rendering Error
+                  </h3>
+                </div>
+                <p style="margin-bottom: 10px; font-size: 14px;">
+                  The selected component option could not be rendered due to the following error:
+                </p>
+                <div style="background-color: #fff; border: 1px solid #dee2e6; 
+                            border-radius: 4px; padding: 12px; margin-bottom: 12px;
+                            font-family: 'Courier New', monospace; font-size: 12px;">
+                  <strong>Error Type:</strong> {{ currentError.type }}<br>
+                  <strong>Details:</strong> {{ currentError.message }}
+                  @if (currentError.technicalDetails) {
+                    <details style="margin-top: 8px;">
+                      <summary style="cursor: pointer; color: #0056b3;">Technical Details (click to expand)</summary>
+                      <pre style="margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;">{{ currentError.technicalDetails }}</pre>
+                    </details>
+                  }
+                </div>
+                <div style="background-color: #e7f3ff; border: 1px solid #b3d9ff; 
+                            border-radius: 4px; padding: 12px; margin-bottom: 12px;">
+                  <strong style="font-size: 14px;">What to do:</strong>
+                  <ol style="margin: 8px 0 0 20px; padding: 0; font-size: 13px;">
+                    <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>
+                    <li>Contact your IT department if the issue persists</li>
+                  </ol>
+                </div>
+                <button kendoButton (click)="retryCurrentOption()" style="font-size: 13px;">
+                  <span class="fa-solid fa-rotate"></span>
+                  Retry
+                </button>
+              </div>
+            </div>
+          }
+          </div>
+        </div>
+      </div>
+    }
+    
+  `, styles: ["\n    :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    }\n  "] }]
+    }], () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { UIComponentCode: [{
+            type: Input
+        }], ComponentObjectName: [{
+            type: Input
+        }], ShowPrintReport: [{
+            type: Input
+        }], ShowReportOptionsToggle: [{
+            type: Input
+        }], ShowCreateReportButton: [{
+            type: Input
+        }], matchingReportID: [{
+            type: Input
+        }], DrillDownEvent: [{
+            type: Output
+        }], CreateReportRequested: [{
+            type: Output
+        }], htmlContainers: [{
+            type: ViewChildren,
+            args: ['htmlContainer']
+        }], onWindowResize: [{
+            type: HostListener,
+            args: ['window:resize']
+        }], SkipData: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 700 }); })();
+//# sourceMappingURL=dynamic-ui-component.js.map