@memberjunction/ng-skip-chat 2.48.0 → 2.49.0

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, EventEmitter, Input, Output, ViewChildren, HostListener } from '@angular/core';
 import { CompositeKey, LogError, Metadata, RunQuery, RunView } from '@memberjunction/core';
 import { SkipReactComponentHost } from './skip-react-component-host';
@@ -546,67 +537,46 @@ function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (r
     i0.ɵɵconditional(ctx_r1.currentError ? 26 : -1);
 } }
 export class SkipDynamicUIComponentComponent {
+    sanitizer;
+    cdr;
+    ngZone;
+    UIComponentCode = null;
+    ComponentObjectName = null;
+    ShowPrintReport = true;
+    ShowReportOptionsToggle = true;
+    ShowCreateReportButton = false;
+    matchingReportID = null;
+    DrillDownEvent = new EventEmitter();
+    CreateReportRequested = new EventEmitter();
+    htmlContainers;
+    // Properties for handling multiple report options
+    reportOptions = [];
+    selectedReportOptionIndex = 0;
+    currentError = null;
+    isCreatingReport = false;
+    // Toggle states for showing/hiding component details
+    showFunctionalRequirements = false;
+    showDataRequirements = false;
+    showTechnicalDesign = false;
+    showCode = false;
+    // Details panel height for resizing
+    detailsPanelHeight = '300px';
+    isResizing = false;
+    startY = 0;
+    startHeight = 0;
+    // Cache for React component hosts - lazy loaded per option
+    reactHostCache = new Map();
+    currentHostIndex = null;
+    callbacks = {
+        RefreshData: () => this.handleRefreshData(),
+        OpenEntityRecord: (entityName, key) => this.handleOpenEntityRecord(entityName, key),
+        UpdateUserState: (userState) => this.handleUpdateUserState(userState),
+        NotifyEvent: (eventName, eventData) => this.handleNotifyEvent(eventName, eventData)
+    };
     constructor(sanitizer, cdr, ngZone) {
         this.sanitizer = sanitizer;
         this.cdr = cdr;
         this.ngZone = ngZone;
-        this.UIComponentCode = null;
-        this.ComponentObjectName = null;
-        this.ShowPrintReport = true;
-        this.ShowReportOptionsToggle = true;
-        this.ShowCreateReportButton = false;
-        this.matchingReportID = null;
-        this.DrillDownEvent = new EventEmitter();
-        this.CreateReportRequested = new EventEmitter();
-        // Properties for handling multiple report options
-        this.reportOptions = [];
-        this.selectedReportOptionIndex = 0;
-        this.currentError = null;
-        this.isCreatingReport = false;
-        // Toggle states for showing/hiding component details
-        this.showFunctionalRequirements = false;
-        this.showDataRequirements = false;
-        this.showTechnicalDesign = false;
-        this.showCode = false;
-        // Details panel height for resizing
-        this.detailsPanelHeight = '300px';
-        this.isResizing = false;
-        this.startY = 0;
-        this.startHeight = 0;
-        // Cache for React component hosts - lazy loaded per option
-        this.reactHostCache = new Map();
-        this.currentHostIndex = null;
-        this.callbacks = {
-            RefreshData: () => this.handleRefreshData(),
-            OpenEntityRecord: (entityName, key) => this.handleOpenEntityRecord(entityName, key),
-            UpdateUserState: (userState) => this.handleUpdateUserState(userState),
-            NotifyEvent: (eventName, eventData) => this.handleNotifyEvent(eventName, eventData)
-        };
-        /**
-         * Handle resize movement
-         */
-        this.onResize = (event) => {
-            if (!this.isResizing)
-                return;
-            const currentY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
-            const deltaY = currentY - this.startY;
-            const newHeight = Math.max(100, Math.min(600, this.startHeight + deltaY));
-            // Run inside Angular to update the binding
-            this.ngZone.run(() => {
-                this.detailsPanelHeight = `${newHeight}px`;
-                this.cdr.detectChanges();
-            });
-        };
-        /**
-         * Stop resizing
-         */
-        this.stopResize = () => {
-            this.isResizing = false;
-            document.removeEventListener('mousemove', this.onResize);
-            document.removeEventListener('mouseup', this.stopResize);
-            document.removeEventListener('touchmove', this.onResize);
-            document.removeEventListener('touchend', this.stopResize);
-        };
     }
     /**
      * Gets the currently selected report option
@@ -631,7 +601,7 @@ export class SkipDynamicUIComponentComponent {
      */
     isTopRanked(index) {
         const option = this.reportOptions[index];
-        return (option === null || option === void 0 ? void 0 : option.AIRank) === 1;
+        return option?.AIRank === 1;
     }
     /**
      * Handles when the user selects a tab
@@ -675,23 +645,21 @@ export class SkipDynamicUIComponentComponent {
             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'
+                technicalDetails: error?.toString() || 'Unknown error during component assembly'
             };
             // Clear the UI component code to prevent partial rendering
             this.UIComponentCode = null;
             this.ComponentObjectName = null;
         }
     }
-    PrintReport() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const currentHost = this.getCurrentReactHost();
-            if (currentHost) {
-                currentHost.print();
-            }
-            else {
-                window.print();
-            }
-        });
+    async PrintReport() {
+        const currentHost = this.getCurrentReactHost();
+        if (currentHost) {
+            currentHost.print();
+        }
+        else {
+            window.print();
+        }
     }
     /**
      * Copy error details to clipboard for user to send back to Skip
@@ -716,18 +684,17 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
      * 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;
+            return this.htmlContainers.first?.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;
+            return container?.nativeElement || null;
         }
     }
     /**
@@ -883,6 +850,31 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             document.addEventListener('touchend', this.stopResize);
         });
     }
+    /**
+     * Handle resize movement
+     */
+    onResize = (event) => {
+        if (!this.isResizing)
+            return;
+        const currentY = event instanceof MouseEvent ? event.clientY : event.touches[0].clientY;
+        const deltaY = currentY - this.startY;
+        const newHeight = Math.max(100, Math.min(600, this.startHeight + deltaY));
+        // Run inside Angular to update the binding
+        this.ngZone.run(() => {
+            this.detailsPanelHeight = `${newHeight}px`;
+            this.cdr.detectChanges();
+        });
+    };
+    /**
+     * Stop resizing
+     */
+    stopResize = () => {
+        this.isResizing = false;
+        document.removeEventListener('mousemove', this.onResize);
+        document.removeEventListener('mouseup', this.stopResize);
+        document.removeEventListener('touchmove', this.onResize);
+        document.removeEventListener('touchend', this.stopResize);
+    };
     onWindowResize() {
         // Ensure the details panel height remains valid on window resize
         const currentHeight = parseInt(this.detailsPanelHeight, 10);
@@ -938,6 +930,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }
         return null;
     }
+    _skipData;
     get SkipData() {
         return this._skipData ? this._skipData : undefined;
     }
@@ -972,9 +965,8 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         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;
+                const rankA = a.AIRank ?? Number.MAX_SAFE_INTEGER;
+                const rankB = b.AIRank ?? Number.MAX_SAFE_INTEGER;
                 return rankA - rankB;
             });
             // Select the best option (first in sorted array)
@@ -987,81 +979,77 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     /**
      * 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.';
-                }
+    async createReactHostForOption(optionIndex) {
+        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: errorType,
-                    message: errorMessage,
-                    technicalDetails: technicalDetails + '\n\nComponent Option: ' + (optionIndex + 1) + '\nComponent Name: ' + option.option.componentName
+                    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}>>`
                 };
-                LogError(e);
+                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
+            await 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 (e.message?.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 (e.message?.includes('is not defined')) {
+                errorType = 'Missing Dependency';
+                errorMessage = 'The component is trying to use a feature or library that is not available.';
+            }
+            else if (e.message?.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; });
+        if (this.SkipData?.dataContext) {
+            const loadedItems = this.SkipData.dataContext.Items.filter((i) => i.DataLoaded && i._Data?.length > 0);
             for (let i = 0; i < loadedItems.length; i++) {
                 flattenedDataContext["data_item_" + i] = loadedItems[i]._Data;
             }
@@ -1097,14 +1085,13 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         // 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) || ''
+                technicalDetails: eventData.stackTrace || eventData.errorInfo?.componentStack || ''
             };
         }
         // TODO: Handle other custom events as needed
@@ -1226,43 +1213,43 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     }
     CreateSimpleRunQuery(rq) {
         return {
-            runQuery: (params) => __awaiter(this, void 0, void 0, function* () {
+            runQuery: async (params) => {
                 // Run a single query and return the results
                 try {
-                    const result = yield rq.RunQuery(params);
+                    const result = await 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* () {
+            runView: async (params) => {
                 // Run a single view and return the results
                 try {
-                    const result = yield rv.RunView(params);
+                    const result = await 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* () {
+            },
+            runViews: async (params) => {
                 // Runs multiple views and returns the results
                 try {
-                    const results = yield rv.RunViews(params);
+                    const results = await rv.RunViews(params);
                     return results;
                 }
                 catch (error) {
                     LogError(error);
                     throw error; // Re-throw to handle it in the caller
                 }
-            })
+            }
         };
     }
     SetupCallbacks() {
@@ -1304,32 +1291,30 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         };
         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);
-            }
-        });
+    async refreshReport(data) {
+        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);
+        }
     }
+    static ɵfac = function SkipDynamicUIComponentComponent_Factory(t) { return new (t || SkipDynamicUIComponentComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicUIComponentComponent, selectors: [["skip-dynamic-ui-component"]], viewQuery: function SkipDynamicUIComponentComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainers = _t);
+        } }, hostBindings: function SkipDynamicUIComponentComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("resize", function SkipDynamicUIComponentComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [["htmlContainer", ""], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], ["title", "Toggle Functional Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Toggle Data Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-database"], ["title", "Toggle Technical Design", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-cogs"], ["title", "Toggle Code View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-code"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [2, "flex", "1", "position", "relative", "min-height", "0", "overflow", "auto"], [2, "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "value", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "height", "500px", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"], [2, "position", "relative"], ["kendoButton", "", 2, "position", "absolute", "top", "0", "right", "0", "font-size", "12px", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "color", "#dc3545", "margin-top", "0", "margin-right", "150px", "font-size", "18px"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "margin-bottom", "10px", "font-size", "14px"], [2, "background-color", "#fff", "border", "1px solid #dee2e6", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px", "font-family", "'Courier New', monospace", "font-size", "12px"], [2, "margin-top", "8px"], [2, "background-color", "#e7f3ff", "border", "1px solid #b3d9ff", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px"], [2, "font-size", "14px"], [2, "margin", "8px 0 0 20px", "padding", "0", "font-size", "13px"], ["kendoButton", "", 2, "font-size", "13px", 3, "click"], [1, "fa-solid", "fa-rotate"], [2, "cursor", "pointer", "color", "#0056b3"], [2, "margin-top", "8px", "white-space", "pre-wrap", "word-break", "break-word", "font-size", "11px"], [2, "position", "absolute", "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 1)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 27, 12, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
+        } }, dependencies: [i2.NgIf, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.CodeEditorComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
 }
-SkipDynamicUIComponentComponent.ɵfac = function SkipDynamicUIComponentComponent_Factory(t) { return new (t || SkipDynamicUIComponentComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
-SkipDynamicUIComponentComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicUIComponentComponent, selectors: [["skip-dynamic-ui-component"]], viewQuery: function SkipDynamicUIComponentComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0, 5);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.htmlContainers = _t);
-    } }, hostBindings: function SkipDynamicUIComponentComponent_HostBindings(rf, ctx) { if (rf & 1) {
-        i0.ɵɵlistener("resize", function SkipDynamicUIComponentComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
-    } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", matchingReportID: "matchingReportID", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [["htmlContainer", ""], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], ["title", "Toggle Functional Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-list-check"], ["title", "Toggle Data Requirements", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-database"], ["title", "Toggle Technical Design", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-cogs"], ["title", "Toggle Code View", 1, "tab-action-button", "toggle-button", 3, "click"], [1, "fa-solid", "fa-code"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [2, "flex", "1", "position", "relative", "min-height", "0", "overflow", "auto"], [2, "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "details-panel"], [2, "height", "100%"], [1, "panel-resizer", 3, "mousedown", "touchstart"], [1, "resizer-handle"], [1, "details-content"], [3, "innerHTML"], [1, "details-content", "code-content"], [2, "height", "100%", 3, "value", "autoFocus", "indentWithTab", "readonly"], [2, "width", "90%", "max-width", "600px", "height", "500px", "background-color", "#f8f9fa", "border", "2px solid #dc3545", "border-radius", "8px", "padding", "20px", "overflow-y", "auto", "box-shadow", "0 4px 6px rgba(0, 0, 0, 0.1)"], [2, "position", "relative"], ["kendoButton", "", 2, "position", "absolute", "top", "0", "right", "0", "font-size", "12px", 3, "click"], [1, "fa-solid", "fa-copy"], [2, "color", "#dc3545", "margin-top", "0", "margin-right", "150px", "font-size", "18px"], [1, "fa-solid", "fa-exclamation-triangle"], [2, "margin-bottom", "10px", "font-size", "14px"], [2, "background-color", "#fff", "border", "1px solid #dee2e6", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px", "font-family", "'Courier New', monospace", "font-size", "12px"], [2, "margin-top", "8px"], [2, "background-color", "#e7f3ff", "border", "1px solid #b3d9ff", "border-radius", "4px", "padding", "12px", "margin-bottom", "12px"], [2, "font-size", "14px"], [2, "margin", "8px 0 0 20px", "padding", "0", "font-size", "13px"], ["kendoButton", "", 2, "font-size", "13px", 3, "click"], [1, "fa-solid", "fa-rotate"], [2, "cursor", "pointer", "color", "#0056b3"], [2, "margin-top", "8px", "white-space", "pre-wrap", "word-break", "break-word", "font-size", "11px"], [2, "position", "absolute", "top", "0", "left", "0", "right", "0", "bottom", "0", "display", "flex", "align-items", "flex-start", "justify-content", "center", "padding-top", "20px", "background", "rgba(255, 255, 255, 0.95)", "z-index", "10"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 1)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 27, 12, "div", 2);
-    } if (rf & 2) {
-        i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
-    } }, dependencies: [i2.NgIf, i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.CodeEditorComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
         type: Component,
         args: [{ selector: 'skip-dynamic-ui-component', template: `