@memberjunction/ng-skip-chat 2.47.0 → 2.48.0

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

@@ -1,1104 +0,0 @@
-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 } 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 "@progress/kendo-angular-layout";
-import * as i3 from "@progress/kendo-angular-buttons";
-const _c0 = ["htmlContainer"];
-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, "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() {
-        this.HTMLReport = 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;
-        try {
-            // Update the component info - this can fail if placeholders are missing
-            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;
-        }
-        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 HTML report to prevent partial rendering
-            this.HTMLReport = 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);
-    }
-    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;
-    }
-    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.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) {
-            // Update the current display with new data
-            this.updateCurrentReport();
-        }
-    }
-    /**
-     * 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, _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);
-            }
-        });
-    }
-}
-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.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.ɵɵ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: `
-    @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
-        }], 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']
-        }], SkipData: [{
-            type: Input
-        }] }); })();
-(() => { (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