@memberjunction/ng-skip-chat 2.43.0 → 2.45.0

package/dist/lib/dynamic-report/dynamic-html-report.js

@@ -7,45 +7,459 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { CompositeKey, LogError, Metadata } from '@memberjunction/core';
+import { Component, EventEmitter, Input, Output, ViewChildren } 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 * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@memberjunction/ng-container-directives";
+import * as i2 from "@progress/kendo-angular-layout";
 import * as i3 from "@progress/kendo-angular-buttons";
 const _c0 = ["htmlContainer"];
-function SkipDynamicHTMLReportComponent_button_0_Template(rf, ctx) { if (rf & 1) {
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 7);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SkipDynamicHTMLReportComponent_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 SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(ɵ$index_4_r3)); });
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Create Report");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Print Report");
+    i0.ɵɵelementEnd()();
+} }
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 27)(1, "summary", 33);
+    i0.ɵɵtext(2, "Technical Details (click to expand)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "pre", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 19)(2, "div", 20)(3, "button", 21);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 22);
+    i0.ɵɵtext(5, " Copy Error Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "h3", 23);
+    i0.ɵɵelement(7, "span", 24);
+    i0.ɵɵtext(8, " Component Rendering Error ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "p", 25);
+    i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 26)(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, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Conditional_19_Template, 5, 1, "details", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 28)(21, "strong", 29);
+    i0.ɵɵtext(22, "What to do:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "ol", 30)(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", 31);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(31, "span", 32);
+    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 SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8);
+    i0.ɵɵelement(2, "div", 9);
+    i0.ɵɵelementStart(3, "div", 10);
+    i0.ɵɵtemplate(4, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_4_Template, 4, 1, "button", 11)(5, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_button_5_Template, 4, 0, "button", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 13, 0);
+    i0.ɵɵtemplate(8, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Conditional_8_Template, 33, 3, "div", 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-tab-index", ɵ$index_4_r3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 8 : -1);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-tabstrip-tab", 4);
+    i0.ɵɵtemplate(1, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_1_Template, 2, 2, "ng-template", 5)(2, SkipDynamicHTMLReportComponent_Conditional_0_For_2_ng_template_2_Template, 9, 4, "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 SkipDynamicHTMLReportComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 3);
-    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_button_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
-    i0.ɵɵelement(1, "span", 4);
-    i0.ɵɵtext(2, " Print ");
+    i0.ɵɵelementStart(0, "kendo-tabstrip", 3);
+    i0.ɵɵlistener("tabSelect", function SkipDynamicHTMLReportComponent_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, SkipDynamicHTMLReportComponent_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 SkipDynamicHTMLReportComponent_Conditional_1_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 15);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
+    i0.ɵɵelement(1, "i", 16);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Create Report");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_1_button_5_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_1_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
+    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Print Report");
+    i0.ɵɵelementEnd()();
+} }
+function SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "details", 27)(1, "summary", 33);
+    i0.ɵɵtext(2, "Technical Details (click to expand)");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "pre", 34);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+} }
+function SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "div", 19)(2, "div", 20)(3, "button", 21);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.copyErrorToClipboard()); });
+    i0.ɵɵelement(4, "span", 22);
+    i0.ɵɵtext(5, " Copy Error Details ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "h3", 23);
+    i0.ɵɵelement(7, "span", 24);
+    i0.ɵɵtext(8, " Component Rendering Error ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "p", 25);
+    i0.ɵɵtext(10, " The selected component option could not be rendered due to the following error: ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 26)(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, SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Conditional_19_Template, 5, 1, "details", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 28)(21, "strong", 29);
+    i0.ɵɵtext(22, "What to do:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "ol", 30)(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", 31);
+    i0.ɵɵlistener("click", function SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryCurrentOption()); });
+    i0.ɵɵelement(29, "span", 32);
+    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 SkipDynamicHTMLReportComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 8);
+    i0.ɵɵelement(2, "div", 9);
+    i0.ɵɵelementStart(3, "div", 10);
+    i0.ɵɵtemplate(4, SkipDynamicHTMLReportComponent_Conditional_1_button_4_Template, 4, 1, "button", 11)(5, SkipDynamicHTMLReportComponent_Conditional_1_button_5_Template, 4, 0, "button", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 13, 0);
+    i0.ɵɵtemplate(8, SkipDynamicHTMLReportComponent_Conditional_1_Conditional_8_Template, 31, 3, "div", 35);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.currentError ? 8 : -1);
 } }
 export class SkipDynamicHTMLReportComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
         this.HTMLReport = null;
-        this.HTMLReportObjectName = 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;
+        // 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)
+        };
+    }
+    /**
+     * 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;
+        // Update the component info
+        this.HTMLReport = 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;
     }
     PrintReport() {
         return __awaiter(this, void 0, void 0, function* () {
-            // Implement printing of the HTML element only here
+            const currentHost = this.getCurrentReactHost();
+            if (currentHost) {
+                currentHost.print();
+            }
+            else {
+                window.print();
+            }
         });
     }
-    ngAfterViewInit() {
+    /**
+     * 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.HTMLReport) {
-            const container = (_a = this.htmlContainer) === null || _a === void 0 ? void 0 : _a.nativeElement;
-            if (container) {
-                if (this.HTMLReportObjectName && this.SkipData) {
-                    this.invokeHTMLInitFunction();
-                }
+        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);
+    }
+    ngAfterViewInit() {
+        if (this.SkipData) {
+            this.setupReportOptions(this.SkipData);
+        }
+        // Wait for ViewChildren to be available
+        setTimeout(() => {
+            if (this.HTMLReport && 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;
@@ -54,191 +468,615 @@ export class SkipDynamicHTMLReportComponent {
         const hadData = this._skipData ? true : false;
         this._skipData = d;
         if (d) {
-            this.HTMLReport = d.htmlReport;
-            this.HTMLReportObjectName = d.htmlReportObjectName;
+            // 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.HTMLReport = BuildSkipComponentCompleteCode(component.option);
+                this.ComponentObjectName = component.option.componentName;
+            }
+            else {
+                // Fallback for old format
+                this.HTMLReport = d.htmlReport;
+                this.ComponentObjectName = d.htmlReportObjectName;
+            }
         }
         if (d && hadData) {
-            // normally the initFunction is called in ngAfterViewInit, but here the data changed so we need to call it again
-            this.invokeHTMLInitFunction();
+            // Update the current display with new data
+            this.updateCurrentReport();
         }
     }
-    invokeHTMLInitFunction() {
+    /**
+     * Sets up the report options from the SkipData, prioritizing the new htmlReportOptions array
+     * but falling back to the deprecated htmlReport/htmlReportObjectName for backward compatibility
+     */
+    setupReportOptions(data) {
+        // Check if we have the new htmlReportOptions 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.HTMLReport = 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;
+            var _a, _b, _c;
+            const option = this.reportOptions[optionIndex];
+            if (!option)
+                return;
+            const container = this.getContainerForOption(optionIndex);
+            if (!container)
+                return;
             try {
-                const container = (_a = this.htmlContainer) === null || _a === void 0 ? void 0 : _a.nativeElement;
-                if (container && this.HTMLReportObjectName) {
-                    // First set the HTML as is, with script tags
-                    container.innerHTML = this.HTMLReport;
-                    // Force Angular to detect changes
-                    this.cdr.detectChanges();
-                    // Now find and manually execute all scripts in the container
-                    const scriptElements = container.querySelectorAll('script');
-                    yield this.loadScriptsSequentially(scriptElements);
-                    // scriptElements.forEach((script: HTMLScriptElement) => {
-                    //     // For external scripts
-                    //     if (script.src) {
-                    //         // Create a new script element
-                    //         const newScript = document.createElement('script');
-                    //         newScript.src = script.src;
-                    //         document.head.appendChild(newScript);
-                    //     } 
-                    //     // For inline scripts
-                    //     else if (script.textContent) {
-                    //         // Execute the script content directly
-                    //         try {
-                    //             // This will execute the script in global context
-                    //             eval(script.textContent);
-                    //         } catch (error) {
-                    //             console.error('Error executing script:', error);
-                    //         }
-                    //     }
-                    // });
-                    this.finishHTMLInitialization();
+                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;
                 }
-                else {
-                    console.warn('HTML Report container not found or init function name not provided');
+                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) {
-                LogError(e);
-            }
-        });
-    }
-    loadScriptsSequentially(scriptElements) {
-        return __awaiter(this, void 0, void 0, function* () {
-            for (let i = 0; i < scriptElements.length; i++) {
-                const script = scriptElements[i];
-                // For external scripts
-                if (script.src) {
-                    // we use the promise to ensure we are awaiting for the script to load before moving on to the next one
-                    yield new Promise((resolve, reject) => {
-                        const newScript = document.createElement('script');
-                        newScript.src = script.src;
-                        // Set up handlers
-                        newScript.onload = () => resolve();
-                        newScript.onerror = (error) => {
-                            console.error('Error loading script:', script.src, error);
-                            resolve(); // Resolve anyway to continue loading other scripts
-                        };
-                        document.head.appendChild(newScript);
-                    });
+                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;
                 }
-                // For inline scripts
-                else if (script.textContent) {
-                    try {
-                        // Execute inline script
-                        eval(script.textContent);
-                    }
-                    catch (error) {
-                        console.error('Error executing inline script:', error);
-                        // Continue to next script even if this one failed
-                    }
+                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);
             }
-            console.log('All scripts loaded');
         });
     }
-    finishHTMLInitialization() {
+    getFlattenedDataContext() {
         var _a;
-        try {
-            if (!this.HTMLReportObjectName) {
-                console.warn('HTML Report object name not provided');
-                return;
+        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;
             }
-            const reportObject = window[this.HTMLReportObjectName];
+        }
+        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();
-            if (reportObject && ((_a = this.SkipData) === null || _a === void 0 ? void 0 : _a.dataContext)) {
-                const castedObject = reportObject;
-                const userState = {};
-                const flattenedDataContext = {};
-                // Flatten the data context to make it easier to work with
-                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;
+            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;
                 }
-                castedObject.init(flattenedDataContext, userState, {
-                    RefreshData: () => {
-                        // this is a callback function that can be called from the HTML report to refresh data
-                        console.log('HTML Report requested data refresh');
-                        // need to implement this
-                    },
-                    OpenEntityRecord: (entityName, key) => {
-                        // this is a callback function that can be called from the HTML report 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()));
+            }
+            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) {
+        console.log(`Component raised event: ${eventName} notified with data:`, eventData);
+        // TODO: Handle 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;
                         }
-                    },
-                    UpdateUserState: (userState) => {
-                        // this is a callback function that can be called from the HTML report to update user state
-                        console.log('HTML Report updated user state:', userState);
-                        // need to implement this
-                    },
-                    NotifyEvent: (eventName, eventData) => {
-                        // this is a callback function that can be called from the HTML report to notify an event
-                        console.log(`HTML Report raised event: ${eventName} notified with data:`, eventData);
                     }
-                });
+                    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 {
-                console.warn(`HTML Report object ${this.HTMLReportObjectName} not found or invalid data context`);
+                // If no React host is available, create one for the current option
+                this.createReactHostForOption(this.selectedReportOptionIndex);
             }
-        }
-        catch (e) {
-            LogError(e);
-        }
+        });
     }
 }
-SkipDynamicHTMLReportComponent.ɵfac = function SkipDynamicHTMLReportComponent_Factory(t) { return new (t || SkipDynamicHTMLReportComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+SkipDynamicHTMLReportComponent.ɵfac = function SkipDynamicHTMLReportComponent_Factory(t) { return new (t || SkipDynamicHTMLReportComponent)(); };
 SkipDynamicHTMLReportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicHTMLReportComponent, selectors: [["skip-dynamic-html-report"]], viewQuery: function SkipDynamicHTMLReportComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0, 5);
     } if (rf & 2) {
         let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainer = _t.first);
-    } }, inputs: { HTMLReport: "HTMLReport", HTMLReportObjectName: "HTMLReportObjectName", ShowPrintReport: "ShowPrintReport", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent" }, decls: 3, vars: 1, consts: [["htmlContainer", ""], ["kendoButton", "", 3, "click", 4, "ngIf"], ["mjFillContainer", ""], ["kendoButton", "", 3, "click"], [1, "fa-regular", "fa-image"]], template: function SkipDynamicHTMLReportComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, SkipDynamicHTMLReportComponent_button_0_Template, 3, 0, "button", 1);
-        i0.ɵɵelement(1, "div", 2, 0);
+        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainers = _t);
+    } }, inputs: { HTMLReport: "HTMLReport", 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"], [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", "position", "relative", "min-height", "0"], [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"], [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 SkipDynamicHTMLReportComponent_Template(rf, ctx) { if (rf & 1) {
+        i0.ɵɵtemplate(0, SkipDynamicHTMLReportComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 1)(1, SkipDynamicHTMLReportComponent_Conditional_1_Template, 9, 3, "div", 2);
     } if (rf & 2) {
-        i0.ɵɵproperty("ngIf", ctx.ShowPrintReport);
-    } }, dependencies: [i1.NgIf, i2.FillContainer, i3.ButtonComponent], styles: ["button[_ngcontent-%COMP%] { margin-top: 5px; margin-bottom: 5px;}"] });
+        i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
+    } }, dependencies: [i1.NgIf, i2.TabStripComponent, i2.TabStripTabComponent, i2.TabContentDirective, i2.TabTitleDirective, i3.ButtonComponent], 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      .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(SkipDynamicHTMLReportComponent, [{
         type: Component,
         args: [{ selector: 'skip-dynamic-html-report', template: `
-    <button kendoButton *ngIf="ShowPrintReport" (click)="PrintReport()">
-      <span class="fa-regular fa-image"></span>
-      Print 
-    </button>
-    <div #htmlContainer mjFillContainer>
-        <!-- this is where we'll dynamically inject the HTML that was AI generated -->
-    </div>
-  `, styles: ["button { margin-top: 5px; margin-bottom: 5px;}"] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { HTMLReport: [{
+    @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">
+                    <!-- Space for future left-aligned actions -->
+                  </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 Report</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>
+                
+                <!-- React component container -->
+                <div #htmlContainer [attr.data-tab-index]="i" 
+                     style="flex: 1; position: relative; min-height: 0;">
+                  <!-- 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>
+            </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">
+            <!-- Space for future left-aligned actions -->
+          </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 Report</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>
+        
+        <!-- React component container -->
+        <div #htmlContainer style="flex: 1; position: relative; min-height: 0;">
+          <!-- 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>
+    }
+    
+  `, 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    /* 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  "] }]
+    }], () => [], { HTMLReport: [{
             type: Input
-        }], HTMLReportObjectName: [{
+        }], ComponentObjectName: [{
             type: Input
         }], ShowPrintReport: [{
             type: Input
+        }], ShowReportOptionsToggle: [{
+            type: Input
+        }], ShowCreateReportButton: [{
+            type: Input
+        }], matchingReportID: [{
+            type: Input
         }], DrillDownEvent: [{
             type: Output
-        }], htmlContainer: [{
-            type: ViewChild,
-            args: ['htmlContainer', { static: false }]
+        }], CreateReportRequested: [{
+            type: Output
+        }], htmlContainers: [{
+            type: ViewChildren,
+            args: ['htmlContainer']
         }], SkipData: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicHTMLReportComponent, { className: "SkipDynamicHTMLReportComponent", filePath: "src/lib/dynamic-report/dynamic-html-report.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicHTMLReportComponent, { className: "SkipDynamicHTMLReportComponent", filePath: "src/lib/dynamic-report/dynamic-html-report.ts", lineNumber: 407 }); })();
 //# sourceMappingURL=dynamic-html-report.js.map