@memberjunction/ng-skip-chat 2.76.0 → 2.78.0

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, ViewChildren, HostListener } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChildren, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { CompositeKey, LogError, Metadata } from '@memberjunction/core';
 import { BuildComponentCompleteCode } from '@memberjunction/interactive-component-types';
 import { DrillDownInfo } from '../drill-down-info';
@@ -167,7 +167,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_mj_re
 } if (rf & 2) {
     const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("component", ctx_r1.componentSpecs.get(ɵ$index_4_r3))("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(ɵ$index_4_r3) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
+    i0.ɵɵproperty("component", ctx_r1.reportOptions[ɵ$index_4_r3].option)("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(ɵ$index_4_r3) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "details", 45)(1, "summary", 51);
@@ -179,7 +179,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Condi
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+    i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
 function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -286,7 +286,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
     i0.ɵɵadvance();
     i0.ɵɵattribute("data-tab-index", ɵ$index_4_r3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.componentSpecs.has(ɵ$index_4_r3));
+    i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.reportOptions[ɵ$index_4_r3] && ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 26 : -1);
 } }
@@ -448,7 +448,7 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Conditiona
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.currentError.technicalDetails);
+    i0.ɵɵtextInterpolate(ctx_r1.formatTechnicalDetails(ctx_r1.currentError.technicalDetails));
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
@@ -505,7 +505,7 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_mj_react_c
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("component", ctx_r1.componentSpecs.get(0))("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(0) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
+    i0.ɵɵproperty("component", ctx_r1.reportOptions[0].option)("data", ctx_r1.getFlattenedDataContext())("state", ctx_r1.userStates.get(0) || i0.ɵɵpureFunction0(5, _c0))("utilities", ctx_r1.utilities)("styles", ctx_r1.componentStyles || undefined);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 21);
@@ -514,7 +514,7 @@ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_25_Template(r
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.componentSpecs.has(0));
+    i0.ɵɵproperty("ngIf", ctx_r1.reportOptions[0]);
 } }
 function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
@@ -598,11 +598,13 @@ export class SkipDynamicUIComponentComponent {
     isResizing = false;
     startY = 0;
     startHeight = 0;
-    // Cache for component specs and user states
-    componentSpecs = new Map();
+    // Cache for user states only - component specs come from data
     userStates = new Map();
     utilities = null;
     componentStyles = null;
+    // Memoized flattened data context to prevent ExpressionChangedAfterItHasBeenCheckedError
+    _flattenedDataContext = null;
+    _lastDataContextHash = null;
     // Event handlers from React components
     static librariesInitialized = false;
     constructor(sanitizer, cdr, ngZone, adapter) {
@@ -665,12 +667,9 @@ export class SkipDynamicUIComponentComponent {
             // Update the component info - this can fail if placeholders are missing
             this.UIComponentCode = BuildComponentCompleteCode(selectedOption.option);
             this.ComponentObjectName = selectedOption.option.name;
-            // Create or update the component spec for this option
-            if (!this.componentSpecs.has(this.selectedReportOptionIndex)) {
-                this.createComponentSpecForOption(this.selectedReportOptionIndex);
-                // Trigger change detection after modifying componentSpecs
-                this.cdr.detectChanges();
-            }
+            // No need to cache component specs - they come from the data
+            // Just trigger change detection to render the new component
+            this.cdr.detectChanges();
         }
         catch (error) {
             console.error('Failed to build component code:', error);
@@ -735,8 +734,8 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
     retryCurrentOption() {
         // Clear the error
         this.currentError = null;
-        // Re-create the component spec
-        this.createComponentSpecForOption(this.selectedReportOptionIndex);
+        // Just clear the error and re-render
+        // Component spec comes from reportOptions data
         // Trigger change detection
         this.cdr.detectChanges();
     }
@@ -937,25 +936,33 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         const runtimeUtils = createRuntimeUtilities();
         this.utilities = runtimeUtils.buildUtilities();
         this.componentStyles = SetupStyles();
-        // Create component specs for all options
+        // Initialize user states for all options
         // Use Promise.resolve to avoid ExpressionChangedAfterItHasBeenCheckedError
         if (this.reportOptions.length > 0) {
             Promise.resolve().then(() => {
                 this.reportOptions.forEach((_, index) => {
-                    this.createComponentSpecForOption(index);
+                    if (!this.userStates.has(index)) {
+                        this.userStates.set(index, {});
+                    }
                 });
                 this.cdr.detectChanges();
             });
         }
     }
     ngOnDestroy() {
-        // Clean up component specs and states
-        this.componentSpecs.clear();
+        // Clean up user states
         this.userStates.clear();
+        // Ensure resize listeners are removed if still active
+        if (this.isResizing) {
+            this.stopResize();
+        }
         // The MJReactComponent handles its own cleanup
     }
     ngOnChanges(changes) {
         if (changes['SkipData']) {
+            // Clear cached data context when SkipData changes
+            this._flattenedDataContext = null;
+            this._lastDataContextHash = null;
             const skipData = changes['SkipData'].currentValue;
             if (skipData) {
                 this.setupReportOptions(skipData);
@@ -1020,33 +1027,12 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }
     }
     /**
-     * Create a component spec for a specific option index
+     * Initialize user state for a specific option index
      */
-    createComponentSpecForOption(optionIndex) {
-        const option = this.reportOptions[optionIndex];
-        if (!option)
-            return;
-        try {
-            const component = option.option;
-            // Store the component spec
-            this.componentSpecs.set(optionIndex, component);
-            // Initialize user state if not exists
-            if (!this.userStates.has(optionIndex)) {
-                this.userStates.set(optionIndex, {});
-            }
-        }
-        catch (e) {
-            console.error('Error creating component spec:', e);
-            // Determine the type of error and create a user-friendly message
-            let errorType = 'Component Specification Error';
-            let errorMessage = 'Failed to create component specification.';
-            let technicalDetails = e.toString();
-            this.currentError = {
-                type: errorType,
-                message: errorMessage,
-                technicalDetails: technicalDetails + '\n\nComponent Option: ' + (optionIndex + 1) + '\nComponent Name: ' + option.option.name
-            };
-            LogError(e);
+    initializeUserStateForOption(optionIndex) {
+        // Initialize user state if not exists
+        if (!this.userStates.has(optionIndex)) {
+            this.userStates.set(optionIndex, {});
         }
     }
     /**
@@ -1069,7 +1055,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             this.currentError = {
                 type: event.payload.source || 'React Component Error',
                 message: event.payload.error || 'An unknown error occurred',
-                technicalDetails: event.payload.errorInfo || ''
+                technicalDetails: event.payload.errorInfo
             };
         }
         else {
@@ -1083,6 +1069,17 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         this.handleOpenEntityRecord(event.entityName, event.key);
     }
     getFlattenedDataContext() {
+        // Create a simple hash of the data context to detect changes
+        let currentHash = '';
+        if (this.SkipData?.dataContext) {
+            const loadedItems = this.SkipData.dataContext.Items.filter((i) => i.DataLoaded && i._Data?.length > 0);
+            currentHash = loadedItems.map((item) => `${item.ID}_${item._Data?.length || 0}`).join('_');
+        }
+        // Check if we need to recalculate (data changed)
+        if (this._flattenedDataContext && this._lastDataContextHash === currentHash) {
+            return this._flattenedDataContext;
+        }
+        // Recalculate and cache
         const flattenedDataContext = {};
         if (this.SkipData?.dataContext) {
             const loadedItems = this.SkipData.dataContext.Items.filter((i) => i.DataLoaded && i._Data?.length > 0);
@@ -1090,7 +1087,9 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
                 flattenedDataContext["data_item_" + i] = loadedItems[i]._Data;
             }
         }
-        return flattenedDataContext;
+        this._flattenedDataContext = flattenedDataContext;
+        this._lastDataContextHash = currentHash;
+        return this._flattenedDataContext;
     }
     // Event handler implementations
     handleRefreshData() {
@@ -1132,7 +1131,7 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             this.currentError = {
                 type: eventData.source || 'React Component Error',
                 message: eventData.error || 'An unknown error occurred in the React component',
-                technicalDetails: eventData.stackTrace || eventData.errorInfo?.componentStack || ''
+                technicalDetails: eventData.stackTrace || eventData.errorInfo?.componentStack || eventData.errorInfo || null
             };
         }
         // TODO: Handle other custom events as needed
@@ -1143,6 +1142,25 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             currentComponent.refresh(data);
         }
     }
+    /**
+     * Format technical details for display, handling both strings and objects
+     */
+    formatTechnicalDetails(details) {
+        if (!details) {
+            return 'No technical details available';
+        }
+        if (typeof details === 'string') {
+            return details;
+        }
+        // If it's an object, pretty-print it as JSON
+        try {
+            return JSON.stringify(details, null, 2);
+        }
+        catch (e) {
+            // Fallback for circular references or other JSON issues
+            return String(details);
+        }
+    }
     static ɵfac = function SkipDynamicUIComponentComponent_Factory(t) { return new (t || SkipDynamicUIComponentComponent)(i0.ɵɵdirectiveInject(i1.DomSanitizer), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i2.AngularAdapterService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipDynamicUIComponentComponent, selectors: [["skip-dynamic-ui-component"]], viewQuery: function SkipDynamicUIComponentComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(MJReactComponent, 5);
@@ -1155,438 +1173,11 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
             i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 0)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 26, 12, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.reportOptions.length > 1 ? 0 : 1);
-        } }, dependencies: [i3.NgIf, i4.TabStripComponent, i4.TabStripTabComponent, i4.TabContentDirective, i4.TabTitleDirective, i5.ButtonComponent, i6.CodeEditorComponent, i2.MJReactComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    \n\n    .tab-action-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left[_ngcontent-%COMP%], \n   .tab-actions-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    \n\n    .tab-action-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n    \n    \n\n    .tab-action-button.create-button[_ngcontent-%COMP%], \n   .tab-action-button.print-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n   .tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    \n\n    .tab-action-button.toggle-button[_ngcontent-%COMP%] {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    \n\n    .details-panel[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content[_ngcontent-%COMP%] {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content[_ngcontent-%COMP%] {\n      padding: 0;\n    }\n    \n    \n\n    .panel-resizer[_ngcontent-%COMP%] {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer[_ngcontent-%COMP%]:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    \n\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    \n\n      .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n      .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n      .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n      .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n      .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n      .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n      .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n      .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n      .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n      .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    \n\n      .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    \n\n      .k-tabstrip-items::before, \n     .k-tabstrip-items::after {\n      display: none;\n    }\n    \n      .k-tabstrip .k-item::before, \n     .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    \n\n      .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    \n\n      .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    \n\n    .react-host-container[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }"] });
+        } }, dependencies: [i3.NgIf, i4.TabStripComponent, i4.TabStripTabComponent, i4.TabContentDirective, i4.TabTitleDirective, i5.ButtonComponent, i6.CodeEditorComponent, i2.MJReactComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  position: relative;\n}\n\n\n\n.tab-action-bar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: #fafafa;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.tab-actions-left[_ngcontent-%COMP%], \n.tab-actions-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n.tab-action-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  background-color: transparent;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.tab-action-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n.tab-action-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tab-action-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n.tab-action-button.create-button[_ngcontent-%COMP%], \n.tab-action-button.print-button[_ngcontent-%COMP%] {\n  background-color: white;\n  color: #333;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.create-button[_ngcontent-%COMP%]:hover:not(:disabled), \n.tab-action-button.print-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n\n\n.tab-action-button.toggle-button[_ngcontent-%COMP%] {\n  background-color: white;\n  color: #666;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.toggle-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n  color: #333;\n}\n\n.tab-action-button.toggle-button.active[_ngcontent-%COMP%] {\n  background-color: #5B4FE9;\n  color: white;\n  border-color: #5B4FE9;\n}\n\n.tab-action-button.toggle-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: #4940D4;\n  border-color: #4940D4;\n}\n\n\n\n.details-panel[_ngcontent-%COMP%] {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  overflow: hidden;\n  transition: height 0.3s ease;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n.details-content.code-content[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n\n\n.panel-resizer[_ngcontent-%COMP%] {\n  height: 4px;\n  background-color: #e0e0e0;\n  cursor: ns-resize;\n  position: relative;\n  transition: background-color 0.2s ease;\n}\n\n.panel-resizer[_ngcontent-%COMP%]:hover {\n  background-color: #d0d0d0;\n}\n\n.resizer-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 2px;\n  background-color: #999;\n  border-radius: 1px;\n}\n\n\n\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ul), .details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(ol) { margin-left: 1.5em; }\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(code) { \n  background-color: #f4f4f4; \n  padding: 2px 4px; \n  border-radius: 3px; \n  font-family: 'Courier New', monospace; \n  font-size: 0.9em;\n}\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(pre) { \n  background-color: #f4f4f4; \n  padding: 12px; \n  border-radius: 4px; \n  overflow-x: auto; \n}\n.details-content[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:deep(blockquote) { \n  border-left: 4px solid #e0e0e0; \n  padding-left: 16px; \n  margin-left: 0; \n  color: #666; \n}\n\n\n\n  .k-tabstrip {\n  border: none;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 10px 5px 5px 5px;\n}\n\n  .k-tabstrip-items {\n  background: #f8f9fa;\n  border: none;\n  border-radius: 8px 8px 0 0;\n  flex: 0 0 auto;\n  padding: 8px 12px 0 12px;\n  gap: 4px;\n  display: flex;\n}\n\n  .k-tabstrip-items-wrapper {\n  height: 100%;\n}\n\n  .k-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 0;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-top: none;\n  border-radius: 0 0 8px 8px;\n}\n\n  .k-tabstrip .k-item {\n  margin-right: 2px;\n  border: none;\n  background: transparent;\n  border-radius: 6px 6px 0 0;\n  padding: 2px;\n  transition: all 0.2s ease;\n}\n\n  .k-tabstrip .k-item.k-selected {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-bottom: 1px solid white;\n  margin-bottom: -1px;\n  z-index: 1;\n}\n\n  .k-tabstrip .k-link {\n  padding: 8px 16px;\n  font-weight: 500;\n  font-size: 13px;\n  color: #666;\n  transition: all 0.15s ease;\n  border-radius: 4px 4px 0 0;\n  background: transparent;\n  border: none;\n  text-transform: lowercase;\n}\n\n  .k-tabstrip .k-link:first-letter {\n  text-transform: uppercase;\n}\n\n  .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n  color: #333;\n  background: rgba(0, 0, 0, 0.04);\n}\n\n  .k-tabstrip .k-item.k-selected .k-link {\n  color: #1976d2;\n  font-weight: 600;\n  background: white;\n}\n\n\n\n  .k-tabstrip .k-link .star-icon {\n  display: inline-block;\n  margin-right: 4px;\n  color: #ffd700;\n  font-size: 12px;\n  vertical-align: middle;\n}\n\n\n\n  .k-tabstrip-items::before, \n  .k-tabstrip-items::after {\n  display: none;\n}\n\n  .k-tabstrip .k-item::before, \n  .k-tabstrip .k-item::after {\n  display: none;\n}\n\n\n\n  .k-tabstrip .k-link:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n\n\n  .k-tabstrip .k-content.k-state-active {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.react-host-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
         type: Component,
-        args: [{ selector: 'skip-dynamic-ui-component', template: `
-    @if (reportOptions.length > 1) {
-      <!-- Multiple options: show tabs -->
-      <kendo-tabstrip 
-        (tabSelect)="onTabSelect($event)"
-        [keepTabContent]="true"
-        style="height: 100%; display: flex; flex-direction: column;">
-        @for (option of reportOptions; track option; let i = $index) {
-          <kendo-tabstrip-tab [selected]="i === selectedReportOptionIndex">
-            <ng-template kendoTabTitle>
-              @if (isTopRanked(i)) {
-                <i class="fa-solid fa-star star-icon"></i>
-              }
-              {{ getTabTitle(i) }}
-            </ng-template>
-            <ng-template kendoTabContent>
-              <div style="height: 100%; display: flex; flex-direction: column;">
-                <!-- Tab Action Bar -->
-                <div class="tab-action-bar">
-                  <div class="tab-actions-left">
-                    <!-- Toggle buttons for showing/hiding component details -->
-                    <button class="tab-action-button toggle-button" 
-                            (click)="toggleShowFunctionalRequirements()"
-                            [class.active]="showFunctionalRequirements"
-                            title="Toggle Functional Requirements">
-                      <i class="fa-solid fa-list-check"></i>
-                      <span>Functional</span>
-                    </button>
-                    <button class="tab-action-button toggle-button" 
-                            (click)="toggleShowDataRequirements()"
-                            [class.active]="showDataRequirements"
-                            title="Toggle Data Requirements">
-                      <i class="fa-solid fa-database"></i>
-                      <span>Data</span>
-                    </button>
-                    <button class="tab-action-button toggle-button" 
-                            (click)="toggleShowTechnicalDesign()"
-                            [class.active]="showTechnicalDesign"
-                            title="Toggle Technical Design">
-                      <i class="fa-solid fa-cogs"></i>
-                      <span>Technical</span>
-                    </button>
-                    <button class="tab-action-button toggle-button" 
-                            (click)="toggleShowCode()"
-                            [class.active]="showCode"
-                            title="Toggle Code View">
-                      <i class="fa-solid fa-code"></i>
-                      <span>Code</span>
-                    </button>
-                  </div>
-                  <div class="tab-actions-right">
-                    <button class="tab-action-button create-button" 
-                            *ngIf="ShowCreateReportButton && !matchingReportID"
-                            (click)="createReportForOption(i)"
-                            [disabled]="isCreatingReport">
-                      <i class="fa-solid fa-plus"></i>
-                      <span>Create {{ getComponentTypeName(option) }}</span>
-                    </button>
-                    <button class="tab-action-button print-button" 
-                            *ngIf="ShowPrintReport" 
-                            (click)="PrintReport()"
-                            title="Print Report">
-                      <i class="fa-solid fa-print"></i>
-                      <span>Print Report</span>
-                    </button>
-                  </div>
-                </div>
-                
-                <!-- Main content area with optional details panels -->
-                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
-                  @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {
-                    <!-- Details panel -->
-                    <div class="details-panel" [style.height]="detailsPanelHeight">
-                      <kendo-tabstrip style="height: 100%;">
-                        @if (showFunctionalRequirements) {
-                          <kendo-tabstrip-tab [selected]="true">
-                            <ng-template kendoTabTitle>
-                              <i class="fa-solid fa-list-check"></i> Functional Requirements
-                            </ng-template>
-                            <ng-template kendoTabContent>
-                              <div class="details-content">
-                                <div [innerHTML]="getFormattedFunctionalRequirements(option)"></div>
-                              </div>
-                            </ng-template>
-                          </kendo-tabstrip-tab>
-                        }
-                        @if (showDataRequirements) {
-                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements">
-                            <ng-template kendoTabTitle>
-                              <i class="fa-solid fa-database"></i> Data Requirements
-                            </ng-template>
-                            <ng-template kendoTabContent>
-                              <div class="details-content">
-                                <div [innerHTML]="getFormattedDataRequirements(option)"></div>
-                              </div>
-                            </ng-template>
-                          </kendo-tabstrip-tab>
-                        }
-                        @if (showTechnicalDesign) {
-                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements">
-                            <ng-template kendoTabTitle>
-                              <i class="fa-solid fa-cogs"></i> Technical Design
-                            </ng-template>
-                            <ng-template kendoTabContent>
-                              <div class="details-content">
-                                <div [innerHTML]="getFormattedTechnicalDesign(option)"></div>
-                              </div>
-                            </ng-template>
-                          </kendo-tabstrip-tab>
-                        }
-                        @if (showCode) {
-                          <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign">
-                            <ng-template kendoTabTitle>
-                              <i class="fa-solid fa-code"></i> Code
-                            </ng-template>
-                            <ng-template kendoTabContent>
-                              <div class="details-content code-content">
-                                <mj-code-editor
-                                  [value]="getComponentCode(option)"
-                                  [language]="'javascript'"
-                                  [autoFocus]="false"
-                                  [indentWithTab]="true"
-                                  [readonly]="true"
-                                  style="height: 100%;">
-                                </mj-code-editor>
-                              </div>
-                            </ng-template>
-                          </kendo-tabstrip-tab>
-                        }
-                      </kendo-tabstrip>
-                    </div>
-                    <!-- Resizer -->
-                    <div class="panel-resizer" 
-                         (mousedown)="startResize($event)"
-                         (touchstart)="startResize($event)">
-                      <div class="resizer-handle"></div>
-                    </div>
-                  }
-                  
-                  <!-- React component container -->
-                  <div [attr.data-tab-index]="i" 
-                       style="flex: 1; position: relative; min-height: 0; overflow: auto;">
-                    <mj-react-component
-                      *ngIf="!currentError && componentSpecs.has(i)"
-                      [component]="componentSpecs.get(i)!"
-                      [data]="getFlattenedDataContext()"
-                      [state]="userStates.get(i) || {}"
-                      [utilities]="utilities"
-                      [styles]="componentStyles || undefined"
-                      (stateChange)="onStateChange(i, $event)"
-                      (componentEvent)="onComponentEvent(i, $event)"
-                      (refreshData)="handleRefreshData()"
-                      (openEntityRecord)="onOpenEntityRecord($event)"
-                      style="width: 100%; height: 100%;">
-                    </mj-react-component>
-                    
-                    <!-- Error overlay for this tab (shown on top of content when needed) -->
-                  @if (currentError && selectedReportOptionIndex === i) {
-                    <div style="top: 0; 
-                                left: 0; 
-                                right: 0; 
-                                bottom: 0; 
-                                display: flex;
-                                align-items: flex-start;
-                                justify-content: center;
-                                padding-top: 20px;
-                                background: rgba(255, 255, 255, 0.95);
-                                z-index: 10;">
-                      <div style="width: 90%; 
-                                  max-width: 600px; 
-                                  height: 500px;
-                                  background-color: #f8f9fa; 
-                                  border: 2px solid #dc3545; 
-                                  border-radius: 8px; 
-                                  padding: 20px;
-                                  overflow-y: auto;
-                                  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
-                        <div style="position: relative;">
-                          <button kendoButton (click)="copyErrorToClipboard()" 
-                                  style="position: absolute; top: 0; right: 0; font-size: 12px;">
-                            <span class="fa-solid fa-copy"></span>
-                            Copy Error Details
-                          </button>
-                          <h3 style="color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;">
-                            <span class="fa-solid fa-exclamation-triangle"></span>
-                            Component Rendering Error
-                          </h3>
-                        </div>
-                        <p style="margin-bottom: 10px; font-size: 14px;">
-                          The selected component option could not be rendered due to the following error:
-                        </p>
-                        <div style="background-color: #fff; border: 1px solid #dee2e6; 
-                                    border-radius: 4px; padding: 12px; margin-bottom: 12px;
-                                    font-family: 'Courier New', monospace; font-size: 12px;">
-                          <strong>Error Type:</strong> {{ currentError.type }}<br>
-                          <strong>Details:</strong> {{ currentError.message }}
-                          @if (currentError.technicalDetails) {
-                            <details style="margin-top: 8px;">
-                              <summary style="cursor: pointer; color: #0056b3;">Technical Details (click to expand)</summary>
-                              <pre style="margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;">{{ currentError.technicalDetails }}</pre>
-                            </details>
-                          }
-                        </div>
-                        <div style="background-color: #e7f3ff; border: 1px solid #b3d9ff; 
-                                    border-radius: 4px; padding: 12px; margin-bottom: 12px;">
-                          <strong style="font-size: 14px;">What to do:</strong>
-                          <ol style="margin: 8px 0 0 20px; padding: 0; font-size: 13px;">
-                            <li>Try selecting a different report option from the tabs above</li>
-                            <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>
-                            <li>Contact your IT department if the issue persists</li>
-                          </ol>
-                        </div>
-                        <button kendoButton (click)="retryCurrentOption()" style="font-size: 13px;">
-                          <span class="fa-solid fa-rotate"></span>
-                          Retry
-                        </button>
-                      </div>
-                    </div>
-                  }
-                  </div>
-                </div>
-              </div>
-            </ng-template>
-          </kendo-tabstrip-tab>
-        }
-      </kendo-tabstrip>
-    } @else {
-      <!-- Single option: no tabs needed -->
-      <div style="height: 100%; display: flex; flex-direction: column;">
-        <!-- Tab Action Bar -->
-        <div class="tab-action-bar">
-          <div class="tab-actions-left">
-            <!-- Toggle buttons for showing/hiding component details -->
-            <button class="tab-action-button toggle-button" 
-                    (click)="toggleShowFunctionalRequirements()"
-                    [class.active]="showFunctionalRequirements"
-                    title="Toggle Functional Requirements">
-              <i class="fa-solid fa-list-check"></i>
-              <span>Functional</span>
-            </button>
-            <button class="tab-action-button toggle-button" 
-                    (click)="toggleShowDataRequirements()"
-                    [class.active]="showDataRequirements"
-                    title="Toggle Data Requirements">
-              <i class="fa-solid fa-database"></i>
-              <span>Data</span>
-            </button>
-            <button class="tab-action-button toggle-button" 
-                    (click)="toggleShowTechnicalDesign()"
-                    [class.active]="showTechnicalDesign"
-                    title="Toggle Technical Design">
-              <i class="fa-solid fa-cogs"></i>
-              <span>Technical</span>
-            </button>
-            <button class="tab-action-button toggle-button" 
-                    (click)="toggleShowCode()"
-                    [class.active]="showCode"
-                    title="Toggle Code View">
-              <i class="fa-solid fa-code"></i>
-              <span>Code</span>
-            </button>
-          </div>
-          <div class="tab-actions-right">
-            <button class="tab-action-button create-button" 
-                    *ngIf="ShowCreateReportButton && !matchingReportID"
-                    (click)="createReportForOption(0)"
-                    [disabled]="isCreatingReport">
-              <i class="fa-solid fa-plus"></i>
-              <span>Create {{ firstOptionComponentTypeName }}</span>
-            </button>
-            <button class="tab-action-button print-button" 
-                    *ngIf="ShowPrintReport" 
-                    (click)="PrintReport()"
-                    title="Print Report">
-              <i class="fa-solid fa-print"></i>
-              <span>Print Report</span>
-            </button>
-          </div>
-        </div>
-        
-        <!-- Main content area with optional details panels -->
-        <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
-          @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {
-            <!-- Details panel -->
-            <div class="details-panel" [style.height]="detailsPanelHeight">
-              <kendo-tabstrip style="height: 100%;">
-                @if (showFunctionalRequirements && reportOptions[0]) {
-                  <kendo-tabstrip-tab [selected]="true">
-                    <ng-template kendoTabTitle>
-                      <i class="fa-solid fa-list-check"></i> Functional Requirements
-                    </ng-template>
-                    <ng-template kendoTabContent>
-                      <div class="details-content">
-                        <div [innerHTML]="getFormattedFunctionalRequirements(reportOptions[0])"></div>
-                      </div>
-                    </ng-template>
-                  </kendo-tabstrip-tab>
-                }
-                @if (showDataRequirements && reportOptions[0]) {
-                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements">
-                    <ng-template kendoTabTitle>
-                      <i class="fa-solid fa-database"></i> Data Requirements
-                    </ng-template>
-                    <ng-template kendoTabContent>
-                      <div class="details-content">
-                        <div [innerHTML]="getFormattedDataRequirements(reportOptions[0])"></div>
-                      </div>
-                    </ng-template>
-                  </kendo-tabstrip-tab>
-                }
-                @if (showTechnicalDesign && reportOptions[0]) {
-                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements">
-                    <ng-template kendoTabTitle>
-                      <i class="fa-solid fa-cogs"></i> Technical Design
-                    </ng-template>
-                    <ng-template kendoTabContent>
-                      <div class="details-content">
-                        <div [innerHTML]="getFormattedTechnicalDesign(reportOptions[0])"></div>
-                      </div>
-                    </ng-template>
-                  </kendo-tabstrip-tab>
-                }
-                @if (showCode && reportOptions[0]) {
-                  <kendo-tabstrip-tab [selected]="!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign">
-                    <ng-template kendoTabTitle>
-                      <i class="fa-solid fa-code"></i> Code
-                    </ng-template>
-                    <ng-template kendoTabContent>
-                      <div class="details-content code-content">
-                        <mj-code-editor
-                          [language]="'javascript'"
-                          [value]="getComponentCode(reportOptions[0])"
-                          [autoFocus]="false"
-                          [indentWithTab]="true"
-                          [readonly]="true"
-                          style="height: 100%;">
-                        </mj-code-editor>
-                      </div>
-                    </ng-template>
-                  </kendo-tabstrip-tab>
-                }
-              </kendo-tabstrip>
-            </div>
-            <!-- Resizer -->
-            <div class="panel-resizer" 
-                 (mousedown)="startResize($event)"
-                 (touchstart)="startResize($event)">
-              <div class="resizer-handle"></div>
-            </div>
-          }
-          
-          <!-- React component container or error display -->
-          @if (currentError) {
-            <!-- Error display container with proper height -->
-            <div style="flex: 1; display: flex; align-items: center; justify-content: center; 
-                        min-height: 400px; padding: 20px; background: rgba(255, 255, 255, 0.95);">
-              <div style="width: 90%; 
-                          max-width: 600px; 
-                          max-height: 80vh;
-                          background-color: #f8f9fa; 
-                          border: 2px solid #dc3545; 
-                          border-radius: 8px; 
-                          padding: 20px;
-                          overflow-y: auto;
-                          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
-                <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>
-          } @else {
-            <!-- React component container (only shown when no error) -->
-            <div style="flex: 1; position: relative; min-height: 0; overflow: auto;">
-              <mj-react-component
-                *ngIf="componentSpecs.has(0)"
-                [component]="componentSpecs.get(0)!"
-                [data]="getFlattenedDataContext()"
-                [state]="userStates.get(0) || {}"
-                [utilities]="utilities"
-                [styles]="componentStyles || undefined"
-                (stateChange)="onStateChange(0, $event)"
-                (componentEvent)="onComponentEvent(0, $event)"
-                (refreshData)="handleRefreshData()"
-                (openEntityRecord)="onOpenEntityRecord($event)"
-                style="width: 100%; height: 100%;">
-              </mj-react-component>
-            </div>
-          }
-        </div>
-      </div>
-    }
-    
-  `, styles: ["\n    :host {\n      display: block;\n      height: 100%;\n      position: relative;\n    }\n    \n    /* Tab Action Bar */\n    .tab-action-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      background-color: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n    \n    .tab-actions-left,\n    .tab-actions-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n    \n    /* Tab Action Buttons */\n    .tab-action-button {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 14px;\n      background-color: transparent;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n    }\n    \n    .tab-action-button:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    .tab-action-button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    \n    .tab-action-button i {\n      font-size: 12px;\n    }\n    \n    /* Both buttons use the same white/secondary style */\n    .tab-action-button.create-button,\n    .tab-action-button.print-button {\n      background-color: white;\n      color: #333;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.create-button:hover:not(:disabled),\n    .tab-action-button.print-button:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n    }\n    \n    /* Toggle buttons styling */\n    .tab-action-button.toggle-button {\n      background-color: white;\n      color: #666;\n      border-color: #e0e0e0;\n    }\n    \n    .tab-action-button.toggle-button:hover:not(:disabled) {\n      background-color: #f5f5f5;\n      border-color: #d0d0d0;\n      color: #333;\n    }\n    \n    .tab-action-button.toggle-button.active {\n      background-color: #5B4FE9;\n      color: white;\n      border-color: #5B4FE9;\n    }\n    \n    .tab-action-button.toggle-button.active:hover:not(:disabled) {\n      background-color: #4940D4;\n      border-color: #4940D4;\n    }\n    \n    /* Details panel styling */\n    .details-panel {\n      border-bottom: 1px solid #e0e0e0;\n      background-color: #fafafa;\n      overflow: hidden;\n      transition: height 0.3s ease;\n    }\n    \n    .details-content {\n      padding: 16px;\n      overflow-y: auto;\n      height: 100%;\n      font-size: 14px;\n      line-height: 1.6;\n    }\n    \n    .details-content.code-content {\n      padding: 0;\n    }\n    \n    /* Panel resizer */\n    .panel-resizer {\n      height: 4px;\n      background-color: #e0e0e0;\n      cursor: ns-resize;\n      position: relative;\n      transition: background-color 0.2s ease;\n    }\n    \n    .panel-resizer:hover {\n      background-color: #d0d0d0;\n    }\n    \n    .resizer-handle {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 2px;\n      background-color: #999;\n      border-radius: 1px;\n    }\n    \n    /* Markdown content styling */\n    .details-content :deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n    .details-content :deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content :deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n    .details-content :deep(ul), .details-content :deep(ol) { margin-left: 1.5em; }\n    .details-content :deep(code) { \n      background-color: #f4f4f4; \n      padding: 2px 4px; \n      border-radius: 3px; \n      font-family: 'Courier New', monospace; \n      font-size: 0.9em;\n    }\n    .details-content :deep(pre) { \n      background-color: #f4f4f4; \n      padding: 12px; \n      border-radius: 4px; \n      overflow-x: auto; \n    }\n    .details-content :deep(blockquote) { \n      border-left: 4px solid #e0e0e0; \n      padding-left: 16px; \n      margin-left: 0; \n      color: #666; \n    }\n    \n    /* Tab styling */\n    ::ng-deep .k-tabstrip {\n      border: none;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      margin: 10px 5px 5px 5px;\n    }\n    \n    ::ng-deep .k-tabstrip-items {\n      background: #f8f9fa;\n      border: none;\n      border-radius: 8px 8px 0 0;\n      flex: 0 0 auto;\n      padding: 8px 12px 0 12px;\n      gap: 4px;\n      display: flex;\n    }\n    \n    ::ng-deep .k-tabstrip-items-wrapper {\n      height: 100%;\n    }\n    \n    ::ng-deep .k-content {\n      flex: 1;\n      overflow: hidden;\n      padding: 0;\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-top: none;\n      border-radius: 0 0 8px 8px;\n    }\n    \n    ::ng-deep .k-tabstrip .k-item {\n      margin-right: 2px;\n      border: none;\n      background: transparent;\n      border-radius: 6px 6px 0 0;\n      padding: 2px;\n      transition: all 0.2s ease;\n    }\n    \n    ::ng-deep .k-tabstrip .k-item.k-selected {\n      background: white;\n      border: 1px solid #e0e0e0;\n      border-bottom: 1px solid white;\n      margin-bottom: -1px;\n      z-index: 1;\n    }\n    \n    ::ng-deep .k-tabstrip .k-link {\n      padding: 8px 16px;\n      font-weight: 500;\n      font-size: 13px;\n      color: #666;\n      transition: all 0.15s ease;\n      border-radius: 4px 4px 0 0;\n      background: transparent;\n      border: none;\n      text-transform: lowercase;\n    }\n    \n    ::ng-deep .k-tabstrip .k-link:first-letter {\n      text-transform: uppercase;\n    }\n    \n    ::ng-deep .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n      color: #333;\n      background: rgba(0, 0, 0, 0.04);\n    }\n    \n    ::ng-deep .k-tabstrip .k-item.k-selected .k-link {\n      color: #1976d2;\n      font-weight: 600;\n      background: white;\n    }\n    \n    /* Star icon styling */\n    ::ng-deep .k-tabstrip .k-link .star-icon {\n      display: inline-block;\n      margin-right: 4px;\n      color: #ffd700;\n      font-size: 12px;\n      vertical-align: middle;\n    }\n    \n    /* Hide default Kendo tab styling */\n    ::ng-deep .k-tabstrip-items::before,\n    ::ng-deep .k-tabstrip-items::after {\n      display: none;\n    }\n    \n    ::ng-deep .k-tabstrip .k-item::before,\n    ::ng-deep .k-tabstrip .k-item::after {\n      display: none;\n    }\n    \n    /* Remove focus outline */\n    ::ng-deep .k-tabstrip .k-link:focus {\n      outline: none;\n      box-shadow: none;\n    }\n    \n    /* Make sure tab content fills available space */\n    ::ng-deep .k-tabstrip .k-content.k-state-active {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    \n    /* React host container */\n    .react-host-container {\n      width: 100%;\n      height: 100%;\n    }\n  "] }]
+        args: [{ selector: 'skip-dynamic-ui-component', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (reportOptions.length > 1) {\n  <!-- Multiple options: show tabs -->\n  <kendo-tabstrip \n    (tabSelect)=\"onTabSelect($event)\"\n    [keepTabContent]=\"true\"\n    style=\"height: 100%; display: flex; flex-direction: column;\">\n    @for (option of reportOptions; track option; let i = $index) {\n      <kendo-tabstrip-tab [selected]=\"i === selectedReportOptionIndex\">\n        <ng-template kendoTabTitle>\n          @if (isTopRanked(i)) {\n            <i class=\"fa-solid fa-star star-icon\"></i>\n          }\n          {{ getTabTitle(i) }}\n        </ng-template>\n        <ng-template kendoTabContent>\n          <div style=\"height: 100%; display: flex; flex-direction: column;\">\n            <!-- Tab Action Bar -->\n            <div class=\"tab-action-bar\">\n              <div class=\"tab-actions-left\">\n                <!-- Toggle buttons for showing/hiding component details -->\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowFunctionalRequirements()\"\n                        [class.active]=\"showFunctionalRequirements\"\n                        title=\"Toggle Functional Requirements\">\n                  <i class=\"fa-solid fa-list-check\"></i>\n                  <span>Functional</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowDataRequirements()\"\n                        [class.active]=\"showDataRequirements\"\n                        title=\"Toggle Data Requirements\">\n                  <i class=\"fa-solid fa-database\"></i>\n                  <span>Data</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowTechnicalDesign()\"\n                        [class.active]=\"showTechnicalDesign\"\n                        title=\"Toggle Technical Design\">\n                  <i class=\"fa-solid fa-cogs\"></i>\n                  <span>Technical</span>\n                </button>\n                <button class=\"tab-action-button toggle-button\" \n                        (click)=\"toggleShowCode()\"\n                        [class.active]=\"showCode\"\n                        title=\"Toggle Code View\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  <span>Code</span>\n                </button>\n              </div>\n              <div class=\"tab-actions-right\">\n                <button class=\"tab-action-button create-button\" \n                        *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                        (click)=\"createReportForOption(i)\"\n                        [disabled]=\"isCreatingReport\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  <span>Create {{ getComponentTypeName(option) }}</span>\n                </button>\n                <button class=\"tab-action-button print-button\" \n                        *ngIf=\"ShowPrintReport\" \n                        (click)=\"PrintReport()\"\n                        title=\"Print Report\">\n                  <i class=\"fa-solid fa-print\"></i>\n                  <span>Print Report</span>\n                </button>\n              </div>\n            </div>\n            \n            <!-- Main content area with optional details panels -->\n            <div style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n              @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {\n                <!-- Details panel -->\n                <div class=\"details-panel\" [style.height]=\"detailsPanelHeight\">\n                  <kendo-tabstrip style=\"height: 100%;\">\n                    @if (showFunctionalRequirements) {\n                      <kendo-tabstrip-tab [selected]=\"true\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-list-check\"></i> Functional Requirements\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedFunctionalRequirements(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showDataRequirements) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-database\"></i> Data Requirements\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedDataRequirements(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showTechnicalDesign) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-cogs\"></i> Technical Design\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content\">\n                            <div [innerHTML]=\"getFormattedTechnicalDesign(option)\"></div>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                    @if (showCode) {\n                      <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign\">\n                        <ng-template kendoTabTitle>\n                          <i class=\"fa-solid fa-code\"></i> Code\n                        </ng-template>\n                        <ng-template kendoTabContent>\n                          <div class=\"details-content code-content\">\n                            <mj-code-editor\n                              [value]=\"getComponentCode(option)\"\n                              [language]=\"'javascript'\"\n                              [autoFocus]=\"false\"\n                              [indentWithTab]=\"true\"\n                              [readonly]=\"true\"\n                              style=\"height: 100%;\">\n                            </mj-code-editor>\n                          </div>\n                        </ng-template>\n                      </kendo-tabstrip-tab>\n                    }\n                  </kendo-tabstrip>\n                </div>\n                <!-- Resizer -->\n                <div class=\"panel-resizer\" \n                     (mousedown)=\"startResize($event)\"\n                     (touchstart)=\"startResize($event)\">\n                  <div class=\"resizer-handle\"></div>\n                </div>\n              }\n              \n              <!-- React component container -->\n              <div [attr.data-tab-index]=\"i\" \n                   style=\"flex: 1; position: relative; min-height: 0; overflow: auto;\">\n                <mj-react-component\n                  *ngIf=\"!currentError && reportOptions[i] && i === selectedReportOptionIndex\"\n                  [component]=\"reportOptions[i].option\"\n                  [data]=\"getFlattenedDataContext()\"\n                  [state]=\"userStates.get(i) || {}\"\n                  [utilities]=\"utilities\"\n                  [styles]=\"componentStyles || undefined\"\n                  (stateChange)=\"onStateChange(i, $event)\"\n                  (componentEvent)=\"onComponentEvent(i, $event)\"\n                  (refreshData)=\"handleRefreshData()\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-react-component>\n                \n                <!-- Error overlay for this tab (shown on top of content when needed) -->\n              @if (currentError && selectedReportOptionIndex === i) {\n                <div style=\"top: 0; \n                            left: 0; \n                            right: 0; \n                            bottom: 0; \n                            display: flex;\n                            align-items: flex-start;\n                            justify-content: center;\n                            padding-top: 20px;\n                            background: rgba(255, 255, 255, 0.95);\n                            z-index: 10;\">\n                  <div style=\"width: 90%; \n                              max-width: 600px; \n                              height: 500px;\n                              background-color: #f8f9fa; \n                              border: 2px solid #dc3545; \n                              border-radius: 8px; \n                              padding: 20px;\n                              overflow-y: auto;\n                              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n                    <div style=\"position: relative;\">\n                      <button kendoButton (click)=\"copyErrorToClipboard()\" \n                              style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                        <span class=\"fa-solid fa-copy\"></span>\n                        Copy Error Details\n                      </button>\n                      <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                        <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                        Component Rendering Error\n                      </h3>\n                    </div>\n                    <p style=\"margin-bottom: 10px; font-size: 14px;\">\n                      The selected component option could not be rendered due to the following error:\n                    </p>\n                    <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                                font-family: 'Courier New', monospace; font-size: 12px;\">\n                      <strong>Error Type:</strong> {{ currentError.type }}<br>\n                      <strong>Details:</strong> {{ currentError.message }}\n                      @if (currentError.technicalDetails) {\n                        <details style=\"margin-top: 8px;\">\n                          <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                          <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                        </details>\n                      }\n                    </div>\n                    <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                                border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n                      <strong style=\"font-size: 14px;\">What to do:</strong>\n                      <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                        <li>Try selecting a different report option from the tabs above</li>\n                        <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                        <li>Contact your IT department if the issue persists</li>\n                      </ol>\n                    </div>\n                    <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n                      <span class=\"fa-solid fa-rotate\"></span>\n                      Retry\n                    </button>\n                  </div>\n                </div>\n              }\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-tabstrip-tab>\n    }\n  </kendo-tabstrip>\n} @else {\n  <!-- Single option: no tabs needed -->\n  <div style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Tab Action Bar -->\n    <div class=\"tab-action-bar\">\n      <div class=\"tab-actions-left\">\n        <!-- Toggle buttons for showing/hiding component details -->\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowFunctionalRequirements()\"\n                [class.active]=\"showFunctionalRequirements\"\n                title=\"Toggle Functional Requirements\">\n          <i class=\"fa-solid fa-list-check\"></i>\n          <span>Functional</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowDataRequirements()\"\n                [class.active]=\"showDataRequirements\"\n                title=\"Toggle Data Requirements\">\n          <i class=\"fa-solid fa-database\"></i>\n          <span>Data</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowTechnicalDesign()\"\n                [class.active]=\"showTechnicalDesign\"\n                title=\"Toggle Technical Design\">\n          <i class=\"fa-solid fa-cogs\"></i>\n          <span>Technical</span>\n        </button>\n        <button class=\"tab-action-button toggle-button\" \n                (click)=\"toggleShowCode()\"\n                [class.active]=\"showCode\"\n                title=\"Toggle Code View\">\n          <i class=\"fa-solid fa-code\"></i>\n          <span>Code</span>\n        </button>\n      </div>\n      <div class=\"tab-actions-right\">\n        <button class=\"tab-action-button create-button\" \n                *ngIf=\"ShowCreateReportButton && !matchingReportID\"\n                (click)=\"createReportForOption(0)\"\n                [disabled]=\"isCreatingReport\">\n          <i class=\"fa-solid fa-plus\"></i>\n          <span>Create {{ firstOptionComponentTypeName }}</span>\n        </button>\n        <button class=\"tab-action-button print-button\" \n                *ngIf=\"ShowPrintReport\" \n                (click)=\"PrintReport()\"\n                title=\"Print Report\">\n          <i class=\"fa-solid fa-print\"></i>\n          <span>Print Report</span>\n        </button>\n      </div>\n    </div>\n    \n    <!-- Main content area with optional details panels -->\n    <div style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n      @if (showFunctionalRequirements || showDataRequirements || showTechnicalDesign || showCode) {\n        <!-- Details panel -->\n        <div class=\"details-panel\" [style.height]=\"detailsPanelHeight\">\n          <kendo-tabstrip style=\"height: 100%;\">\n            @if (showFunctionalRequirements && reportOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"true\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-list-check\"></i> Functional Requirements\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedFunctionalRequirements(reportOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showDataRequirements && reportOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-database\"></i> Data Requirements\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedDataRequirements(reportOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showTechnicalDesign && reportOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-cogs\"></i> Technical Design\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content\">\n                    <div [innerHTML]=\"getFormattedTechnicalDesign(reportOptions[0])\"></div>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n            @if (showCode && reportOptions[0]) {\n              <kendo-tabstrip-tab [selected]=\"!showFunctionalRequirements && !showDataRequirements && !showTechnicalDesign\">\n                <ng-template kendoTabTitle>\n                  <i class=\"fa-solid fa-code\"></i> Code\n                </ng-template>\n                <ng-template kendoTabContent>\n                  <div class=\"details-content code-content\">\n                    <mj-code-editor\n                      [language]=\"'javascript'\"\n                      [value]=\"getComponentCode(reportOptions[0])\"\n                      [autoFocus]=\"false\"\n                      [indentWithTab]=\"true\"\n                      [readonly]=\"true\"\n                      style=\"height: 100%;\">\n                    </mj-code-editor>\n                  </div>\n                </ng-template>\n              </kendo-tabstrip-tab>\n            }\n          </kendo-tabstrip>\n        </div>\n        <!-- Resizer -->\n        <div class=\"panel-resizer\" \n             (mousedown)=\"startResize($event)\"\n             (touchstart)=\"startResize($event)\">\n          <div class=\"resizer-handle\"></div>\n        </div>\n      }\n      \n      <!-- React component container or error display -->\n      @if (currentError) {\n        <!-- Error display container with proper height -->\n        <div style=\"flex: 1; display: flex; align-items: center; justify-content: center; \n                    min-height: 400px; padding: 20px; background: rgba(255, 255, 255, 0.95);\">\n          <div style=\"width: 90%; \n                      max-width: 600px; \n                      max-height: 80vh;\n                      background-color: #f8f9fa; \n                      border: 2px solid #dc3545; \n                      border-radius: 8px; \n                      padding: 20px;\n                      overflow-y: auto;\n                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\">\n            <div style=\"position: relative;\">\n              <button kendoButton (click)=\"copyErrorToClipboard()\" \n                      style=\"position: absolute; top: 0; right: 0; font-size: 12px;\">\n                <span class=\"fa-solid fa-copy\"></span>\n                Copy Error Details\n              </button>\n              <h3 style=\"color: #dc3545; margin-top: 0; margin-right: 150px; font-size: 18px;\">\n                <span class=\"fa-solid fa-exclamation-triangle\"></span>\n                Component Rendering Error\n              </h3>\n            </div>\n            <p style=\"margin-bottom: 10px; font-size: 14px;\">\n              The selected component option could not be rendered due to the following error:\n            </p>\n            <div style=\"background-color: #fff; border: 1px solid #dee2e6; \n                        border-radius: 4px; padding: 12px; margin-bottom: 12px;\n                        font-family: 'Courier New', monospace; font-size: 12px;\">\n              <strong>Error Type:</strong> {{ currentError.type }}<br>\n              <strong>Details:</strong> {{ currentError.message }}\n              @if (currentError.technicalDetails) {\n                <details style=\"margin-top: 8px;\">\n                  <summary style=\"cursor: pointer; color: #0056b3;\">Technical Details (click to expand)</summary>\n                  <pre style=\"margin-top: 8px; white-space: pre-wrap; word-break: break-word; font-size: 11px;\">{{ formatTechnicalDetails(currentError.technicalDetails) }}</pre>\n                </details>\n              }\n            </div>\n            <div style=\"background-color: #e7f3ff; border: 1px solid #b3d9ff; \n                        border-radius: 4px; padding: 12px; margin-bottom: 12px;\">\n              <strong style=\"font-size: 14px;\">What to do:</strong>\n              <ol style=\"margin: 8px 0 0 20px; padding: 0; font-size: 13px;\">\n                <li>Copy the error details and send them back to Skip in the chat to get a corrected version</li>\n                <li>Contact your IT department if the issue persists</li>\n              </ol>\n            </div>\n            <button kendoButton (click)=\"retryCurrentOption()\" style=\"font-size: 13px;\">\n              <span class=\"fa-solid fa-rotate\"></span>\n              Retry\n            </button>\n          </div>\n        </div>\n      } @else {\n        <!-- React component container (only shown when no error) -->\n        <div style=\"flex: 1; position: relative; min-height: 0; overflow: auto;\">\n          <mj-react-component\n            *ngIf=\"reportOptions[0]\"\n            [component]=\"reportOptions[0].option\"\n            [data]=\"getFlattenedDataContext()\"\n            [state]=\"userStates.get(0) || {}\"\n            [utilities]=\"utilities\"\n            [styles]=\"componentStyles || undefined\"\n            (stateChange)=\"onStateChange(0, $event)\"\n            (componentEvent)=\"onComponentEvent(0, $event)\"\n            (refreshData)=\"handleRefreshData()\"\n            (openEntityRecord)=\"onOpenEntityRecord($event)\"\n            style=\"width: 100%; height: 100%;\">\n          </mj-react-component>\n        </div>\n      }\n    </div>\n  </div>\n}", styles: [":host {\n  display: block;\n  height: 100%;\n  position: relative;\n}\n\n/* Tab Action Bar */\n.tab-action-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background-color: #fafafa;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.tab-actions-left,\n.tab-actions-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Tab Action Buttons */\n.tab-action-button {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  background-color: transparent;\n  border: 1px solid #e0e0e0;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: #333;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.tab-action-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n.tab-action-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tab-action-button i {\n  font-size: 12px;\n}\n\n/* Both buttons use the same white/secondary style */\n.tab-action-button.create-button,\n.tab-action-button.print-button {\n  background-color: white;\n  color: #333;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.create-button:hover:not(:disabled),\n.tab-action-button.print-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n}\n\n/* Toggle buttons styling */\n.tab-action-button.toggle-button {\n  background-color: white;\n  color: #666;\n  border-color: #e0e0e0;\n}\n\n.tab-action-button.toggle-button:hover:not(:disabled) {\n  background-color: #f5f5f5;\n  border-color: #d0d0d0;\n  color: #333;\n}\n\n.tab-action-button.toggle-button.active {\n  background-color: #5B4FE9;\n  color: white;\n  border-color: #5B4FE9;\n}\n\n.tab-action-button.toggle-button.active:hover:not(:disabled) {\n  background-color: #4940D4;\n  border-color: #4940D4;\n}\n\n/* Details panel styling */\n.details-panel {\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #fafafa;\n  overflow: hidden;\n  transition: height 0.3s ease;\n}\n\n.details-content {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n.details-content.code-content {\n  padding: 0;\n}\n\n/* Panel resizer */\n.panel-resizer {\n  height: 4px;\n  background-color: #e0e0e0;\n  cursor: ns-resize;\n  position: relative;\n  transition: background-color 0.2s ease;\n}\n\n.panel-resizer:hover {\n  background-color: #d0d0d0;\n}\n\n.resizer-handle {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 2px;\n  background-color: #999;\n  border-radius: 1px;\n}\n\n/* Markdown content styling */\n.details-content :deep(h1) { font-size: 1.5em; margin-top: 0; margin-bottom: 0.5em; }\n.details-content :deep(h2) { font-size: 1.3em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(h3) { font-size: 1.1em; margin-top: 1em; margin-bottom: 0.5em; }\n.details-content :deep(ul), .details-content :deep(ol) { margin-left: 1.5em; }\n.details-content :deep(code) { \n  background-color: #f4f4f4; \n  padding: 2px 4px; \n  border-radius: 3px; \n  font-family: 'Courier New', monospace; \n  font-size: 0.9em;\n}\n.details-content :deep(pre) { \n  background-color: #f4f4f4; \n  padding: 12px; \n  border-radius: 4px; \n  overflow-x: auto; \n}\n.details-content :deep(blockquote) { \n  border-left: 4px solid #e0e0e0; \n  padding-left: 16px; \n  margin-left: 0; \n  color: #666; \n}\n\n/* Tab styling */\n::ng-deep .k-tabstrip {\n  border: none;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  margin: 10px 5px 5px 5px;\n}\n\n::ng-deep .k-tabstrip-items {\n  background: #f8f9fa;\n  border: none;\n  border-radius: 8px 8px 0 0;\n  flex: 0 0 auto;\n  padding: 8px 12px 0 12px;\n  gap: 4px;\n  display: flex;\n}\n\n::ng-deep .k-tabstrip-items-wrapper {\n  height: 100%;\n}\n\n::ng-deep .k-content {\n  flex: 1;\n  overflow: hidden;\n  padding: 0;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-top: none;\n  border-radius: 0 0 8px 8px;\n}\n\n::ng-deep .k-tabstrip .k-item {\n  margin-right: 2px;\n  border: none;\n  background: transparent;\n  border-radius: 6px 6px 0 0;\n  padding: 2px;\n  transition: all 0.2s ease;\n}\n\n::ng-deep .k-tabstrip .k-item.k-selected {\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-bottom: 1px solid white;\n  margin-bottom: -1px;\n  z-index: 1;\n}\n\n::ng-deep .k-tabstrip .k-link {\n  padding: 8px 16px;\n  font-weight: 500;\n  font-size: 13px;\n  color: #666;\n  transition: all 0.15s ease;\n  border-radius: 4px 4px 0 0;\n  background: transparent;\n  border: none;\n  text-transform: lowercase;\n}\n\n::ng-deep .k-tabstrip .k-link:first-letter {\n  text-transform: uppercase;\n}\n\n::ng-deep .k-tabstrip .k-item:hover:not(.k-selected) .k-link {\n  color: #333;\n  background: rgba(0, 0, 0, 0.04);\n}\n\n::ng-deep .k-tabstrip .k-item.k-selected .k-link {\n  color: #1976d2;\n  font-weight: 600;\n  background: white;\n}\n\n/* Star icon styling */\n::ng-deep .k-tabstrip .k-link .star-icon {\n  display: inline-block;\n  margin-right: 4px;\n  color: #ffd700;\n  font-size: 12px;\n  vertical-align: middle;\n}\n\n/* Hide default Kendo tab styling */\n::ng-deep .k-tabstrip-items::before,\n::ng-deep .k-tabstrip-items::after {\n  display: none;\n}\n\n::ng-deep .k-tabstrip .k-item::before,\n::ng-deep .k-tabstrip .k-item::after {\n  display: none;\n}\n\n/* Remove focus outline */\n::ng-deep .k-tabstrip .k-link:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n/* Make sure tab content fills available space */\n::ng-deep .k-tabstrip .k-content.k-state-active {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n}\n\n/* React host container */\n.react-host-container {\n  width: 100%;\n  height: 100%;\n}"] }]
     }], () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AngularAdapterService }], { UIComponentCode: [{
             type: Input
         }], ComponentObjectName: [{
@@ -1612,5 +1203,5 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
         }], SkipData: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 721 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=dynamic-ui-component.js.map