@memberjunction/ng-skip-chat 3.4.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/README.md +93 -439
  2. package/dist/lib/artifacts/skip-artifact-viewer.component.d.ts +3 -3
  3. package/dist/lib/artifacts/skip-artifact-viewer.component.d.ts.map +1 -1
  4. package/dist/lib/artifacts/skip-artifact-viewer.component.js +7 -8
  5. package/dist/lib/artifacts/skip-artifact-viewer.component.js.map +1 -1
  6. package/dist/lib/artifacts/skip-artifacts-counter.component.d.ts.map +1 -1
  7. package/dist/lib/artifacts/skip-artifacts-counter.component.js +7 -7
  8. package/dist/lib/artifacts/skip-artifacts-counter.component.js.map +1 -1
  9. package/dist/lib/artifacts/skip-component-feedback-panel.component.d.ts.map +1 -1
  10. package/dist/lib/artifacts/skip-component-feedback-panel.component.js +49 -51
  11. package/dist/lib/artifacts/skip-component-feedback-panel.component.js.map +1 -1
  12. package/dist/lib/base-managed-component.d.ts +1 -1
  13. package/dist/lib/dynamic-report/base-report.d.ts +2 -2
  14. package/dist/lib/dynamic-report/base-report.d.ts.map +1 -1
  15. package/dist/lib/dynamic-report/base-report.js +1 -1
  16. package/dist/lib/dynamic-report/base-report.js.map +1 -1
  17. package/dist/lib/dynamic-report/dynamic-ui-component.d.ts.map +1 -1
  18. package/dist/lib/dynamic-report/dynamic-ui-component.js +49 -40
  19. package/dist/lib/dynamic-report/dynamic-ui-component.js.map +1 -1
  20. package/dist/lib/dynamic-report/linear-report.d.ts.map +1 -1
  21. package/dist/lib/dynamic-report/linear-report.js +11 -10
  22. package/dist/lib/dynamic-report/linear-report.js.map +1 -1
  23. package/dist/lib/dynamic-report/skip-dynamic-report-wrapper.d.ts.map +1 -1
  24. package/dist/lib/dynamic-report/skip-dynamic-report-wrapper.js +3 -3
  25. package/dist/lib/dynamic-report/skip-dynamic-report-wrapper.js.map +1 -1
  26. package/dist/lib/skip-chat/skip-chat.component.d.ts.map +1 -1
  27. package/dist/lib/skip-chat/skip-chat.component.js +115 -111
  28. package/dist/lib/skip-chat/skip-chat.component.js.map +1 -1
  29. package/dist/lib/skip-single-message/skip-single-message.component.d.ts.map +1 -1
  30. package/dist/lib/skip-single-message/skip-single-message.component.js +51 -44
  31. package/dist/lib/skip-single-message/skip-single-message.component.js.map +1 -1
  32. package/dist/lib/split-panel/skip-split-panel.component.d.ts.map +1 -1
  33. package/dist/lib/split-panel/skip-split-panel.component.js +11 -10
  34. package/dist/lib/split-panel/skip-split-panel.component.js.map +1 -1
  35. package/package.json +40 -40
package/dist/lib/dynamic-report/dynamic-ui-component.js CHANGED
@@ -10,15 +10,14 @@ import { TOOLBAR_BUTTONS } from '@memberjunction/ng-code-editor';
10
10
  import * as i0 from "@angular/core";
11
11
  import * as i1 from "@angular/platform-browser";
12
12
  import * as i2 from "@memberjunction/ng-react";
13
- import * as i3 from "@angular/common";
14
- import * as i4 from "@progress/kendo-angular-layout";
15
- import * as i5 from "@progress/kendo-angular-buttons";
16
- import * as i6 from "@memberjunction/ng-code-editor";
13
+ import * as i3 from "@progress/kendo-angular-layout";
14
+ import * as i4 from "@progress/kendo-angular-buttons";
15
+ import * as i5 from "@memberjunction/ng-code-editor";
17
16
  function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
18
17
  i0.ɵɵelement(0, "i", 6);
19
18
  } }
20
19
  function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
21
- i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template, 1, 0, "i", 6);
20
+ i0.ɵɵconditionalCreate(0, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Conditional_0_Template, 1, 0, "i", 6);
22
21
  i0.ɵɵtext(1);
23
22
  } if (rf & 2) {
24
23
  const ɵ$index_4_r3 = i0.ɵɵnextContext().$index;
@@ -27,10 +26,10 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_1_Templ
27
26
  i0.ɵɵadvance();
28
27
  i0.ɵɵtextInterpolate1(" ", ctx_r1.getTabTitle(ɵ$index_4_r3), " ");
29
28
  } }
30
- function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template(rf, ctx) { if (rf & 1) {
29
+ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
31
30
  const _r5 = i0.ɵɵgetCurrentView();
32
31
  i0.ɵɵelementStart(0, "button", 17);
33
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(ɵ$index_4_r3)); });
32
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(ɵ$index_4_r3)); });
34
33
  i0.ɵɵelement(1, "i", 18);
35
34
  i0.ɵɵelementStart(2, "span");
36
35
  i0.ɵɵtext(3, "Save Report");
@@ -39,19 +38,19 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_butto
39
38
  const ctx_r1 = i0.ɵɵnextContext(4);
40
39
  i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
41
40
  } }
42
- function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template(rf, ctx) { if (rf & 1) {
41
+ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
43
42
  const _r6 = i0.ɵɵgetCurrentView();
44
43
  i0.ɵɵelementStart(0, "button", 19);
45
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(ɵ$index_4_r3)); });
44
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(ɵ$index_4_r3)); });
46
45
  i0.ɵɵelement(1, "i", 20);
47
46
  i0.ɵɵelementStart(2, "span");
48
47
  i0.ɵɵtext(3, "Open Saved Report");
49
48
  i0.ɵɵelementEnd()();
50
49
  } }
51
- function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template(rf, ctx) { if (rf & 1) {
50
+ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
52
51
  const _r7 = i0.ɵɵgetCurrentView();
53
52
  i0.ɵɵelementStart(0, "button", 21);
54
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
53
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
55
54
  i0.ɵɵelement(1, "i", 22);
56
55
  i0.ɵɵelementStart(2, "span");
57
56
  i0.ɵɵtext(3, "Print Report");
@@ -61,10 +60,10 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_te
61
60
  i0.ɵɵelement(0, "i", 23);
62
61
  i0.ɵɵtext(1, " Component ");
63
62
  } }
64
- function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template(rf, ctx) { if (rf & 1) {
63
+ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
65
64
  const _r8 = i0.ɵɵgetCurrentView();
66
65
  i0.ɵɵelementStart(0, "mj-react-component", 27);
67
- i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStateChange(ɵ$index_4_r3, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onComponentEvent(ɵ$index_4_r3, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
66
+ i0.ɵɵlistener("stateChange", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onStateChange(ɵ$index_4_r3, $event)); })("componentEvent", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onComponentEvent(ɵ$index_4_r3, $event)); })("refreshData", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template_mj_react_component_refreshData_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.handleRefreshData()); })("openEntityRecord", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
68
67
  i0.ɵɵelementEnd();
69
68
  } if (rf & 2) {
70
69
  const ɵ$index_4_r3 = i0.ɵɵnextContext(3).$index;
@@ -106,7 +105,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_te
106
105
  i0.ɵɵtext(17, "Details:");
107
106
  i0.ɵɵelementEnd();
108
107
  i0.ɵɵtext(18);
109
- i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_2_Conditional_19_Template, 5, 1, "details", 36);
108
+ i0.ɵɵconditionalCreate(19, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_2_Conditional_19_Template, 5, 1, "details", 36);
110
109
  i0.ɵɵelementEnd();
111
110
  i0.ɵɵelementStart(20, "div", 37)(21, "strong", 38);
112
111
  i0.ɵɵtext(22, "What to do:");
@@ -128,7 +127,7 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_te
128
127
  } if (rf & 2) {
129
128
  const ctx_r1 = i0.ɵɵnextContext(5);
130
129
  i0.ɵɵadvance(14);
131
- i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
130
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type);
132
131
  i0.ɵɵadvance(4);
133
132
  i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.message, " ");
134
133
  i0.ɵɵadvance();
@@ -136,13 +135,14 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_te
136
135
  } }
137
136
  function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Template(rf, ctx) { if (rf & 1) {
138
137
  i0.ɵɵelementStart(0, "div", 24);
139
- i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_mj_react_component_1_Template, 1, 2, "mj-react-component", 25)(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_2_Template, 33, 3, "div", 26);
138
+ i0.ɵɵconditionalCreate(1, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_1_Template, 1, 2, "mj-react-component", 25);
139
+ i0.ɵɵconditionalCreate(2, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_ng_template_15_Conditional_2_Template, 33, 3, "div", 26);
140
140
  i0.ɵɵelementEnd();
141
141
  } if (rf & 2) {
142
142
  const ɵ$index_4_r3 = i0.ɵɵnextContext(2).$index;
143
143
  const ctx_r1 = i0.ɵɵnextContext(2);
144
144
  i0.ɵɵadvance();
145
- i0.ɵɵproperty("ngIf", !ctx_r1.currentError && ctx_r1.componentOptions[ɵ$index_4_r3] && ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex);
145
+ i0.ɵɵconditional(!ctx_r1.currentError && ctx_r1.componentOptions[ɵ$index_4_r3] && ɵ$index_4_r3 === ctx_r1.selectedReportOptionIndex ? 1 : -1);
146
146
  i0.ɵɵadvance();
147
147
  i0.ɵɵconditional(ctx_r1.currentError && ctx_r1.selectedReportOptionIndex === ɵ$index_4_r3 ? 2 : -1);
148
148
  } }
@@ -223,7 +223,9 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
223
223
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 7);
224
224
  i0.ɵɵelement(2, "div", 8);
225
225
  i0.ɵɵelementStart(3, "div", 9);
226
- i0.ɵɵtemplate(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_4_Template, 4, 1, "button", 10)(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_5_Template, 4, 0, "button", 11)(6, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_button_6_Template, 4, 0, "button", 12);
226
+ i0.ɵɵconditionalCreate(4, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_4_Template, 4, 1, "button", 10);
227
+ i0.ɵɵconditionalCreate(5, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_5_Template, 4, 0, "button", 11);
228
+ i0.ɵɵconditionalCreate(6, SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Conditional_6_Template, 4, 0, "button", 12);
227
229
  i0.ɵɵelementStart(7, "button", 13);
228
230
  i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleFeedbackPanel()); });
229
231
  i0.ɵɵelement(8, "i", 14);
@@ -251,11 +253,11 @@ function SkipDynamicUIComponentComponent_Conditional_0_For_2_ng_template_2_Templ
251
253
  } if (rf & 2) {
252
254
  const ctx_r1 = i0.ɵɵnextContext(3);
253
255
  i0.ɵɵadvance(4);
254
- i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
256
+ i0.ɵɵconditional(ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID ? 4 : -1);
255
257
  i0.ɵɵadvance();
256
- i0.ɵɵproperty("ngIf", ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID);
258
+ i0.ɵɵconditional(ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID ? 5 : -1);
257
259
  i0.ɵɵadvance();
258
- i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
260
+ i0.ɵɵconditional(ctx_r1.ShowPrintReport ? 6 : -1);
259
261
  i0.ɵɵadvance();
260
262
  i0.ɵɵclassProp("active", ctx_r1.showFeedbackPanel);
261
263
  i0.ɵɵproperty("title", ctx_r1.showFeedbackPanel ? "Close Feedback Panel" : "Provide Component Feedback");
@@ -287,10 +289,10 @@ function SkipDynamicUIComponentComponent_Conditional_0_Template(rf, ctx) { if (r
287
289
  i0.ɵɵadvance();
288
290
  i0.ɵɵrepeater(ctx_r1.componentOptions);
289
291
  } }
290
- function SkipDynamicUIComponentComponent_Conditional_1_button_4_Template(rf, ctx) { if (rf & 1) {
292
+ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
291
293
  const _r14 = i0.ɵɵgetCurrentView();
292
294
  i0.ɵɵelementStart(0, "button", 17);
293
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
295
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createReportForOption(0)); });
294
296
  i0.ɵɵelement(1, "i", 18);
295
297
  i0.ɵɵelementStart(2, "span");
296
298
  i0.ɵɵtext(3, "Save Report");
@@ -299,19 +301,19 @@ function SkipDynamicUIComponentComponent_Conditional_1_button_4_Template(rf, ctx
299
301
  const ctx_r1 = i0.ɵɵnextContext(2);
300
302
  i0.ɵɵproperty("disabled", ctx_r1.isCreatingReport);
301
303
  } }
302
- function SkipDynamicUIComponentComponent_Conditional_1_button_5_Template(rf, ctx) { if (rf & 1) {
304
+ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
303
305
  const _r15 = i0.ɵɵgetCurrentView();
304
306
  i0.ɵɵelementStart(0, "button", 19);
305
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(0)); });
307
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openReportForOption(0)); });
306
308
  i0.ɵɵelement(1, "i", 20);
307
309
  i0.ɵɵelementStart(2, "span");
308
310
  i0.ɵɵtext(3, "Open Saved Report");
309
311
  i0.ɵɵelementEnd()();
310
312
  } }
311
- function SkipDynamicUIComponentComponent_Conditional_1_button_6_Template(rf, ctx) { if (rf & 1) {
313
+ function SkipDynamicUIComponentComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
312
314
  const _r16 = i0.ɵɵgetCurrentView();
313
315
  i0.ɵɵelementStart(0, "button", 21);
314
- i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_button_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
316
+ i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.PrintReport()); });
315
317
  i0.ɵɵelement(1, "i", 22);
316
318
  i0.ɵɵelementStart(2, "span");
317
319
  i0.ɵɵtext(3, "Print Report");
@@ -365,7 +367,7 @@ function SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditiona
365
367
  i0.ɵɵtext(17, "Details:");
366
368
  i0.ɵɵelementEnd();
367
369
  i0.ɵɵtext(18);
368
- i0.ɵɵtemplate(19, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_2_Conditional_19_Template, 5, 1, "details", 36);
370
+ i0.ɵɵconditionalCreate(19, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_2_Conditional_19_Template, 5, 1, "details", 36);
369
371
  i0.ɵɵelementEnd();
370
372
  i0.ɵɵelementStart(20, "div", 37)(21, "strong", 38);
371
373
  i0.ɵɵtext(22, "What to do:");
@@ -384,7 +386,7 @@ function SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditiona
384
386
  } if (rf & 2) {
385
387
  const ctx_r1 = i0.ɵɵnextContext(3);
386
388
  i0.ɵɵadvance(14);
387
- i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type, "");
389
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.type);
388
390
  i0.ɵɵadvance(4);
389
391
  i0.ɵɵtextInterpolate1(" ", ctx_r1.currentError.message, " ");
390
392
  i0.ɵɵadvance();
@@ -392,7 +394,8 @@ function SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditiona
392
394
  } }
393
395
  function SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Template(rf, ctx) { if (rf & 1) {
394
396
  i0.ɵɵelementStart(0, "div", 24);
395
- i0.ɵɵtemplate(1, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_1_Template, 1, 2, "mj-react-component", 53)(2, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_2_Template, 31, 3, "div", 26);
397
+ i0.ɵɵconditionalCreate(1, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_1_Template, 1, 2, "mj-react-component", 25);
398
+ i0.ɵɵconditionalCreate(2, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Conditional_2_Template, 31, 3, "div", 26);
396
399
  i0.ɵɵelementEnd();
397
400
  } if (rf & 2) {
398
401
  const ctx_r1 = i0.ɵɵnextContext(2);
@@ -498,7 +501,9 @@ function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (r
498
501
  i0.ɵɵelementStart(0, "div", 1)(1, "div", 7);
499
502
  i0.ɵɵelement(2, "div", 8);
500
503
  i0.ɵɵelementStart(3, "div", 9);
501
- i0.ɵɵtemplate(4, SkipDynamicUIComponentComponent_Conditional_1_button_4_Template, 4, 1, "button", 10)(5, SkipDynamicUIComponentComponent_Conditional_1_button_5_Template, 4, 0, "button", 11)(6, SkipDynamicUIComponentComponent_Conditional_1_button_6_Template, 4, 0, "button", 12);
504
+ i0.ɵɵconditionalCreate(4, SkipDynamicUIComponentComponent_Conditional_1_Conditional_4_Template, 4, 1, "button", 10);
505
+ i0.ɵɵconditionalCreate(5, SkipDynamicUIComponentComponent_Conditional_1_Conditional_5_Template, 4, 0, "button", 11);
506
+ i0.ɵɵconditionalCreate(6, SkipDynamicUIComponentComponent_Conditional_1_Conditional_6_Template, 4, 0, "button", 12);
502
507
  i0.ɵɵelementStart(7, "button", 13);
503
508
  i0.ɵɵlistener("click", function SkipDynamicUIComponentComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFeedbackPanel()); });
504
509
  i0.ɵɵelement(8, "i", 14);
@@ -508,16 +513,20 @@ function SkipDynamicUIComponentComponent_Conditional_1_Template(rf, ctx) { if (r
508
513
  i0.ɵɵelementStart(11, "div", 15)(12, "kendo-tabstrip", 16)(13, "kendo-tabstrip-tab", 3);
509
514
  i0.ɵɵtemplate(14, SkipDynamicUIComponentComponent_Conditional_1_ng_template_14_Template, 2, 0, "ng-template", 4)(15, SkipDynamicUIComponentComponent_Conditional_1_ng_template_15_Template, 3, 2, "ng-template", 5);
510
515
  i0.ɵɵelementEnd();
511
- i0.ɵɵtemplate(16, SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_Template, 3, 0, "kendo-tabstrip-tab")(17, SkipDynamicUIComponentComponent_Conditional_1_Conditional_17_Template, 3, 0, "kendo-tabstrip-tab")(18, SkipDynamicUIComponentComponent_Conditional_1_Conditional_18_Template, 3, 0, "kendo-tabstrip-tab")(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_19_Template, 3, 0, "kendo-tabstrip-tab")(20, SkipDynamicUIComponentComponent_Conditional_1_Conditional_20_Template, 3, 0, "kendo-tabstrip-tab");
516
+ i0.ɵɵconditionalCreate(16, SkipDynamicUIComponentComponent_Conditional_1_Conditional_16_Template, 3, 0, "kendo-tabstrip-tab");
517
+ i0.ɵɵconditionalCreate(17, SkipDynamicUIComponentComponent_Conditional_1_Conditional_17_Template, 3, 0, "kendo-tabstrip-tab");
518
+ i0.ɵɵconditionalCreate(18, SkipDynamicUIComponentComponent_Conditional_1_Conditional_18_Template, 3, 0, "kendo-tabstrip-tab");
519
+ i0.ɵɵconditionalCreate(19, SkipDynamicUIComponentComponent_Conditional_1_Conditional_19_Template, 3, 0, "kendo-tabstrip-tab");
520
+ i0.ɵɵconditionalCreate(20, SkipDynamicUIComponentComponent_Conditional_1_Conditional_20_Template, 3, 0, "kendo-tabstrip-tab");
512
521
  i0.ɵɵelementEnd()()();
513
522
  } if (rf & 2) {
514
523
  const ctx_r1 = i0.ɵɵnextContext();
515
524
  i0.ɵɵadvance(4);
516
- i0.ɵɵproperty("ngIf", ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID);
525
+ i0.ɵɵconditional(ctx_r1.ShowCreateReportButton && !ctx_r1.matchingReportID ? 4 : -1);
517
526
  i0.ɵɵadvance();
518
- i0.ɵɵproperty("ngIf", ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID);
527
+ i0.ɵɵconditional(ctx_r1.ShowOpenSavedReportButton && ctx_r1.matchingReportID ? 5 : -1);
519
528
  i0.ɵɵadvance();
520
- i0.ɵɵproperty("ngIf", ctx_r1.ShowPrintReport);
529
+ i0.ɵɵconditional(ctx_r1.ShowPrintReport ? 6 : -1);
521
530
  i0.ɵɵadvance();
522
531
  i0.ɵɵclassProp("active", ctx_r1.showFeedbackPanel);
523
532
  i0.ɵɵproperty("title", ctx_r1.showFeedbackPanel ? "Close Feedback Panel" : "Provide Component Feedback");
@@ -1244,15 +1253,15 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
1244
1253
  } if (rf & 2) {
1245
1254
  let _t;
1246
1255
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponents = _t);
1247
- } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", ShowOpenSavedReportButton: "ShowOpenSavedReportButton", matchingReportID: "matchingReportID", showFeedbackPanel: "showFeedbackPanel", toggleFeedbackPanel: "toggleFeedbackPanel", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested", NavigateToMatchingReportRequested: "NavigateToMatchingReportRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], [1, "tab-actions-right"], ["class", "tab-action-button create-button", 3, "disabled", "click", 4, "ngIf"], ["class", "tab-action-button create-button", 3, "click", 4, "ngIf"], ["class", "tab-action-button print-button", "title", "Print Report", 3, "click", 4, "ngIf"], [1, "tab-action-button", "feedback-button", 3, "click", "title"], [1, "fa-solid"], [1, "inner-tabstrip-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [1, "inner-tabs", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-save"], [1, "tab-action-button", "create-button", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "fa-solid", "fa-chart-line"], [2, "height", "100%", "position", "relative", "overflow", "auto"], ["style", "width: 100%; height: 100%;", 3, "component", "styles", "stateChange", "componentEvent", "refreshData", "openEntityRecord", 4, "ngIf"], [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"], [2, "width", "100%", "height", "100%", 3, "stateChange", "componentEvent", "refreshData", "openEntityRecord", "component", "styles"], [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"], [1, "fa-solid", "fa-list-check"], [1, "details-content", 2, "height", "100%", "overflow", "auto", "padding", "20px"], [3, "innerHTML"], [1, "fa-solid", "fa-cogs"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-code"], [1, "details-content", "code-content", 2, "height", "100%", "overflow", "hidden"], [2, "height", "100%", 3, "toolbarAction", "value", "language", "autoFocus", "indentWithTab", "readonly", "toolbar"], [1, "fa-solid", "fa-file-code"], [2, "width", "100%", "height", "100%", 3, "component", "styles"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
1248
- i0.ɵɵtemplate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 0)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 21, 17, "div", 1);
1256
+ } }, inputs: { UIComponentCode: "UIComponentCode", ComponentObjectName: "ComponentObjectName", ShowPrintReport: "ShowPrintReport", ShowReportOptionsToggle: "ShowReportOptionsToggle", ShowCreateReportButton: "ShowCreateReportButton", ShowOpenSavedReportButton: "ShowOpenSavedReportButton", matchingReportID: "matchingReportID", showFeedbackPanel: "showFeedbackPanel", toggleFeedbackPanel: "toggleFeedbackPanel", SkipData: "SkipData" }, outputs: { DrillDownEvent: "DrillDownEvent", CreateReportRequested: "CreateReportRequested", NavigateToMatchingReportRequested: "NavigateToMatchingReportRequested" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 1, consts: [[2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "keepTabContent"], [2, "height", "100%", "display", "flex", "flex-direction", "column"], [2, "height", "100%", "display", "flex", "flex-direction", "column", 3, "tabSelect", "keepTabContent"], [3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], [1, "fa-solid", "fa-star", "star-icon"], [1, "tab-action-bar"], [1, "tab-actions-left"], [1, "tab-actions-right"], [1, "tab-action-button", "create-button", 3, "disabled"], [1, "tab-action-button", "create-button"], ["title", "Print Report", 1, "tab-action-button", "print-button"], [1, "tab-action-button", "feedback-button", 3, "click", "title"], [1, "fa-solid"], [1, "inner-tabstrip-container", 2, "flex", "1", "display", "flex", "flex-direction", "column", "min-height", "0", "overflow", "hidden"], [1, "inner-tabs", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "tab-action-button", "create-button", 3, "click", "disabled"], [1, "fa-solid", "fa-save"], [1, "tab-action-button", "create-button", 3, "click"], [1, "fa-solid", "fa-folder-open"], ["title", "Print Report", 1, "tab-action-button", "print-button", 3, "click"], [1, "fa-solid", "fa-print"], [1, "fa-solid", "fa-chart-line"], [2, "height", "100%", "position", "relative", "overflow", "auto"], [2, "width", "100%", "height", "100%", 3, "component", "styles"], [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"], [2, "width", "100%", "height", "100%", 3, "stateChange", "componentEvent", "refreshData", "openEntityRecord", "component", "styles"], [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"], [1, "fa-solid", "fa-list-check"], [1, "details-content", 2, "height", "100%", "overflow", "auto", "padding", "20px"], [3, "innerHTML"], [1, "fa-solid", "fa-cogs"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-code"], [1, "details-content", "code-content", 2, "height", "100%", "overflow", "hidden"], [2, "height", "100%", 3, "toolbarAction", "value", "language", "autoFocus", "indentWithTab", "readonly", "toolbar"], [1, "fa-solid", "fa-file-code"]], template: function SkipDynamicUIComponentComponent_Template(rf, ctx) { if (rf & 1) {
1257
+ i0.ɵɵconditionalCreate(0, SkipDynamicUIComponentComponent_Conditional_0_Template, 3, 1, "kendo-tabstrip", 0)(1, SkipDynamicUIComponentComponent_Conditional_1_Template, 21, 17, "div", 1);
1249
1258
  } if (rf & 2) {
1250
1259
  i0.ɵɵconditional(ctx.componentOptions.length > 1 ? 0 : 1);
1251
- } }, 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.tab-action-button.feedback-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.tab-action-button.feedback-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: #f5f5f5;\n border-color: #d0d0d0;\n}\n\n\n\n.tab-action-button.feedback-button.active[_ngcontent-%COMP%] {\n background-color: #3B82F6;\n color: white;\n border-color: #3B82F6;\n}\n\n.tab-action-button.feedback-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: #2563EB;\n border-color: #2563EB;\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: 0;\n}\n\n .k-tabstrip-items {\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e0e0e0;\n flex: 0 0 auto;\n padding: 4px 8px 0 8px;\n gap: 2px;\n display: flex;\n min-height: auto;\n height: auto;\n}\n\n .k-tabstrip-items-wrapper {\n height: auto;\n min-height: auto;\n}\n\n .k-content {\n flex: 1;\n overflow: hidden;\n padding: 0;\n background: white;\n border: none;\n min-height: 0;\n}\n\n .k-tabstrip .k-item {\n margin-right: 2px;\n border: none;\n background: transparent;\n border-radius: 4px 4px 0 0;\n padding: 0;\n transition: all 0.2s ease;\n height: auto;\n min-height: auto;\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: 6px 12px;\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 display: flex;\n align-items: center;\n gap: 3px;\n line-height: 1.2;\n min-height: auto;\n height: auto;\n}\n\n .k-tabstrip .k-link i {\n font-size: 12px;\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}\n\n\n\n .inner-tabs .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n max-width: 100%;\n}\n\n .inner-tabs .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n padding: 4px 8px 0 8px;\n background: #fff;\n border-bottom: 1px solid #e8e8e8;\n}\n\n .inner-tabs .k-tabstrip-item {\n flex: 0 0 auto !important;\n display: inline-block !important;\n float: none !important;\n}\n\n .inner-tabs .k-link {\n padding: 6px 12px;\n font-size: 12px;\n white-space: nowrap !important;\n display: inline-flex !important;\n align-items: center;\n gap: 4px;\n}\n\n\n\n .inner-tabstrip-container .k-tabstrip-items {\n min-width: max-content !important;\n}\n\n\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n height: 6px;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 3px;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n\n\n .k-tabstrip .k-tabstrip {\n margin: 0;\n}\n\n .k-tabstrip .k-tabstrip .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n}\n\n .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n}\n\n\n\n .k-tabstrip .k-tabstrip .k-content {\n border: none;\n background: transparent;\n}"], changeDetection: 0 });
1260
+ } }, dependencies: [i3.TabStripComponent, i3.TabStripTabComponent, i3.TabContentDirective, i3.TabTitleDirective, i4.ButtonComponent, i5.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.tab-action-button.feedback-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.tab-action-button.feedback-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: #f5f5f5;\n border-color: #d0d0d0;\n}\n\n\n\n.tab-action-button.feedback-button.active[_ngcontent-%COMP%] {\n background-color: #3B82F6;\n color: white;\n border-color: #3B82F6;\n}\n\n.tab-action-button.feedback-button.active[_ngcontent-%COMP%]:hover:not(:disabled) {\n background-color: #2563EB;\n border-color: #2563EB;\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: 0;\n}\n\n .k-tabstrip-items {\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e0e0e0;\n flex: 0 0 auto;\n padding: 4px 8px 0 8px;\n gap: 2px;\n display: flex;\n min-height: auto;\n height: auto;\n}\n\n .k-tabstrip-items-wrapper {\n height: auto;\n min-height: auto;\n}\n\n .k-content {\n flex: 1;\n overflow: hidden;\n padding: 0;\n background: white;\n border: none;\n min-height: 0;\n}\n\n .k-tabstrip .k-item {\n margin-right: 2px;\n border: none;\n background: transparent;\n border-radius: 4px 4px 0 0;\n padding: 0;\n transition: all 0.2s ease;\n height: auto;\n min-height: auto;\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: 6px 12px;\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 display: flex;\n align-items: center;\n gap: 3px;\n line-height: 1.2;\n min-height: auto;\n height: auto;\n}\n\n .k-tabstrip .k-link i {\n font-size: 12px;\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}\n\n\n\n .inner-tabs .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n max-width: 100%;\n}\n\n .inner-tabs .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n padding: 4px 8px 0 8px;\n background: #fff;\n border-bottom: 1px solid #e8e8e8;\n}\n\n .inner-tabs .k-tabstrip-item {\n flex: 0 0 auto !important;\n display: inline-block !important;\n float: none !important;\n}\n\n .inner-tabs .k-link {\n padding: 6px 12px;\n font-size: 12px;\n white-space: nowrap !important;\n display: inline-flex !important;\n align-items: center;\n gap: 4px;\n}\n\n\n\n .inner-tabstrip-container .k-tabstrip-items {\n min-width: max-content !important;\n}\n\n\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n height: 6px;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 3px;\n}\n\n .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n\n\n .k-tabstrip .k-tabstrip {\n margin: 0;\n}\n\n .k-tabstrip .k-tabstrip .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n}\n\n .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n}\n\n\n\n .k-tabstrip .k-tabstrip .k-content {\n border: none;\n background: transparent;\n}"], changeDetection: 0 });
1252
1261
  }
1253
1262
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipDynamicUIComponentComponent, [{
1254
1263
  type: Component,
1255
- args: [{ selector: 'skip-dynamic-ui-component', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentOptions.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 componentOptions; 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 <!-- Empty for now - actions moved to individual tabs -->\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-save\"></i>\n <span>Save Report</span>\n </button>\n <button class=\"tab-action-button create-button\"\n *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n (click)=\"openReportForOption(i)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n <span>Open Saved Report</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 <button class=\"tab-action-button feedback-button\"\n [class.active]=\"showFeedbackPanel\"\n (click)=\"toggleFeedbackPanel()\"\n [title]=\"showFeedbackPanel ? 'Close Feedback Panel' : 'Provide Component Feedback'\">\n <i class=\"fa-solid\" [class.fa-comment-dots]=\"!showFeedbackPanel\" [class.fa-times]=\"showFeedbackPanel\"></i>\n <span>{{ showFeedbackPanel ? 'Close' : 'Feedback' }}</span>\n </button>\n </div>\n </div>\n \n <!-- Inner tab strip for Component, Functional, Technical, Data, Code tabs -->\n <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n <!-- Component Tab (always first) -->\n <kendo-tabstrip-tab [selected]=\"true\">\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-chart-line\"></i> Component\n </ng-template>\n <ng-template kendoTabContent>\n <div style=\"height: 100%; position: relative; overflow: auto;\">\n <mj-react-component\n *ngIf=\"!currentError && componentOptions[i] && i === selectedReportOptionIndex\"\n [component]=\"componentOptions[i].option\"\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 </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Functional Requirements Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-list-check\"></i> Functional\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedFunctionalRequirements(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Technical Design Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-cogs\"></i> Technical\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedTechnicalDesign(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Data Requirements Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-database\"></i> Data Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedDataRequirements(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Code Tab -->\n <kendo-tabstrip-tab>\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\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentCode(option)\"\n [language]=\"'javascript'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Spec Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-file-code\"></i> Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentSpec(option)\"\n [language]=\"'json'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n </kendo-tabstrip>\n </div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n </kendo-tabstrip>\n} @else {\n <!-- Single option: simplified tab structure -->\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 <!-- Empty for now - actions moved to tabs -->\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-save\"></i>\n <span>Save Report</span>\n </button>\n <button class=\"tab-action-button create-button\"\n *ngIf=\"ShowOpenSavedReportButton && matchingReportID\"\n (click)=\"openReportForOption(0)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n <span>Open Saved Report</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 <button class=\"tab-action-button feedback-button\"\n [class.active]=\"showFeedbackPanel\"\n (click)=\"toggleFeedbackPanel()\"\n [title]=\"showFeedbackPanel ? 'Close Feedback Panel' : 'Provide Component Feedback'\">\n <i class=\"fa-solid\" [class.fa-comment-dots]=\"!showFeedbackPanel\" [class.fa-times]=\"showFeedbackPanel\"></i>\n <span>{{ showFeedbackPanel ? 'Close' : 'Feedback' }}</span>\n </button>\n </div>\n </div>\n \n <!-- Tab strip for Component, Functional, Technical, Data, Code tabs -->\n <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n <!-- Component Tab (always first) -->\n <kendo-tabstrip-tab [selected]=\"true\">\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-chart-line\"></i> Component\n </ng-template>\n <ng-template kendoTabContent>\n <div style=\"height: 100%; position: relative; overflow: auto;\">\n @if (!currentError && componentOptions[0]) {\n <mj-react-component\n [component]=\"componentOptions[0].option\"\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 }\n \n <!-- Error overlay for this tab (shown on top of content when needed) -->\n @if (currentError) {\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>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 </ng-template>\n </kendo-tabstrip-tab>\n \n <!-- Functional Requirements Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-list-check\"></i> Functional\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedFunctionalRequirements(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n \n <!-- Technical Design Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-cogs\"></i> Technical\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedTechnicalDesign(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n \n <!-- Data Requirements Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-database\"></i> Data Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedDataRequirements(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n \n <!-- Code Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\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\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentCode(componentOptions[0])\"\n [language]=\"'javascript'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n \n <!-- Spec Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-file-code\"></i> Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentSpec(componentOptions[0])\"\n [language]=\"'json'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n </kendo-tabstrip>\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.tab-action-button.feedback-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.tab-action-button.feedback-button:hover:not(:disabled) {\n background-color: #f5f5f5;\n border-color: #d0d0d0;\n}\n\n/* Feedback button active state */\n.tab-action-button.feedback-button.active {\n background-color: #3B82F6;\n color: white;\n border-color: #3B82F6;\n}\n\n.tab-action-button.feedback-button.active:hover:not(:disabled) {\n background-color: #2563EB;\n border-color: #2563EB;\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 - improved for better formatting */\n::ng-deep .k-tabstrip {\n border: none;\n height: 100%;\n display: flex;\n flex-direction: column;\n margin: 0;\n}\n\n::ng-deep .k-tabstrip-items {\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e0e0e0;\n flex: 0 0 auto;\n padding: 4px 8px 0 8px;\n gap: 2px;\n display: flex;\n min-height: auto;\n height: auto;\n}\n\n::ng-deep .k-tabstrip-items-wrapper {\n height: auto;\n min-height: auto;\n}\n\n::ng-deep .k-content {\n flex: 1;\n overflow: hidden;\n padding: 0;\n background: white;\n border: none;\n min-height: 0;\n}\n\n::ng-deep .k-tabstrip .k-item {\n margin-right: 2px;\n border: none;\n background: transparent;\n border-radius: 4px 4px 0 0;\n padding: 0;\n transition: all 0.2s ease;\n height: auto;\n min-height: auto;\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: 6px 12px;\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 display: flex;\n align-items: center;\n gap: 3px;\n line-height: 1.2;\n min-height: auto;\n height: auto;\n}\n\n::ng-deep .k-tabstrip .k-link i {\n font-size: 12px;\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\n/* Inner tabs specific styling with horizontal scroll */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n max-width: 100%;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n padding: 4px 8px 0 8px;\n background: #fff;\n border-bottom: 1px solid #e8e8e8;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-item {\n flex: 0 0 auto !important;\n display: inline-block !important;\n float: none !important;\n}\n\n::ng-deep .inner-tabs .k-link {\n padding: 6px 12px;\n font-size: 12px;\n white-space: nowrap !important;\n display: inline-flex !important;\n align-items: center;\n gap: 4px;\n}\n\n/* Force single row for inner tabs */\n::ng-deep .inner-tabstrip-container .k-tabstrip-items {\n min-width: max-content !important;\n}\n\n/* Custom scrollbar for inner tabs */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n height: 6px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 3px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n/* Nested tab styling - for tabs within tabs (fallback) */\n::ng-deep .k-tabstrip .k-tabstrip {\n margin: 0;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n}\n\n/* Ensure proper content area in nested tabs */\n::ng-deep .k-tabstrip .k-tabstrip .k-content {\n border: none;\n background: transparent;\n}\n\n"] }]
1264
+ args: [{ standalone: false, selector: 'skip-dynamic-ui-component', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (componentOptions.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 componentOptions; 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 <!-- Empty for now - actions moved to individual tabs -->\n </div>\n <div class=\"tab-actions-right\">\n @if (ShowCreateReportButton && !matchingReportID) {\n <button class=\"tab-action-button create-button\"\n (click)=\"createReportForOption(i)\"\n [disabled]=\"isCreatingReport\">\n <i class=\"fa-solid fa-save\"></i>\n <span>Save Report</span>\n </button>\n }\n @if (ShowOpenSavedReportButton && matchingReportID) {\n <button class=\"tab-action-button create-button\"\n (click)=\"openReportForOption(i)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n <span>Open Saved Report</span>\n </button>\n }\n @if (ShowPrintReport) {\n <button class=\"tab-action-button print-button\"\n (click)=\"PrintReport()\"\n title=\"Print Report\">\n <i class=\"fa-solid fa-print\"></i>\n <span>Print Report</span>\n </button>\n }\n <button class=\"tab-action-button feedback-button\"\n [class.active]=\"showFeedbackPanel\"\n (click)=\"toggleFeedbackPanel()\"\n [title]=\"showFeedbackPanel ? 'Close Feedback Panel' : 'Provide Component Feedback'\">\n <i class=\"fa-solid\" [class.fa-comment-dots]=\"!showFeedbackPanel\" [class.fa-times]=\"showFeedbackPanel\"></i>\n <span>{{ showFeedbackPanel ? 'Close' : 'Feedback' }}</span>\n </button>\n </div>\n </div>\n\n <!-- Inner tab strip for Component, Functional, Technical, Data, Code tabs -->\n <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n <!-- Component Tab (always first) -->\n <kendo-tabstrip-tab [selected]=\"true\">\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-chart-line\"></i> Component\n </ng-template>\n <ng-template kendoTabContent>\n <div style=\"height: 100%; position: relative; overflow: auto;\">\n @if (!currentError && componentOptions[i] && i === selectedReportOptionIndex) {\n <mj-react-component\n [component]=\"componentOptions[i].option\"\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\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 </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Functional Requirements Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-list-check\"></i> Functional\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedFunctionalRequirements(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Technical Design Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-cogs\"></i> Technical\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedTechnicalDesign(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Data Requirements Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-database\"></i> Data Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedDataRequirements(option)\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Code Tab -->\n <kendo-tabstrip-tab>\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\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentCode(option)\"\n [language]=\"'javascript'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Spec Tab -->\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-file-code\"></i> Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentSpec(option)\"\n [language]=\"'json'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n </kendo-tabstrip>\n </div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n </kendo-tabstrip>\n} @else {\n <!-- Single option: simplified tab structure -->\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 <!-- Empty for now - actions moved to tabs -->\n </div>\n <div class=\"tab-actions-right\">\n @if (ShowCreateReportButton && !matchingReportID) {\n <button class=\"tab-action-button create-button\"\n (click)=\"createReportForOption(0)\"\n [disabled]=\"isCreatingReport\">\n <i class=\"fa-solid fa-save\"></i>\n <span>Save Report</span>\n </button>\n }\n @if (ShowOpenSavedReportButton && matchingReportID) {\n <button class=\"tab-action-button create-button\"\n (click)=\"openReportForOption(0)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n <span>Open Saved Report</span>\n </button>\n }\n @if (ShowPrintReport) {\n <button class=\"tab-action-button print-button\"\n (click)=\"PrintReport()\"\n title=\"Print Report\">\n <i class=\"fa-solid fa-print\"></i>\n <span>Print Report</span>\n </button>\n }\n <button class=\"tab-action-button feedback-button\"\n [class.active]=\"showFeedbackPanel\"\n (click)=\"toggleFeedbackPanel()\"\n [title]=\"showFeedbackPanel ? 'Close Feedback Panel' : 'Provide Component Feedback'\">\n <i class=\"fa-solid\" [class.fa-comment-dots]=\"!showFeedbackPanel\" [class.fa-times]=\"showFeedbackPanel\"></i>\n <span>{{ showFeedbackPanel ? 'Close' : 'Feedback' }}</span>\n </button>\n </div>\n </div>\n\n <!-- Tab strip for Component, Functional, Technical, Data, Code tabs -->\n <div class=\"inner-tabstrip-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;\">\n <kendo-tabstrip class=\"inner-tabs\" style=\"height: 100%; display: flex; flex-direction: column;\">\n <!-- Component Tab (always first) -->\n <kendo-tabstrip-tab [selected]=\"true\">\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-chart-line\"></i> Component\n </ng-template>\n <ng-template kendoTabContent>\n <div style=\"height: 100%; position: relative; overflow: auto;\">\n @if (!currentError && componentOptions[0]) {\n <mj-react-component\n [component]=\"componentOptions[0].option\"\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 }\n\n <!-- Error overlay for this tab (shown on top of content when needed) -->\n @if (currentError) {\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>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 </ng-template>\n </kendo-tabstrip-tab>\n\n <!-- Functional Requirements Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-list-check\"></i> Functional\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedFunctionalRequirements(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n\n <!-- Technical Design Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-cogs\"></i> Technical\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedTechnicalDesign(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n\n <!-- Data Requirements Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-database\"></i> Data Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content\" style=\"height: 100%; overflow: auto; padding: 20px;\">\n <div [innerHTML]=\"getFormattedDataRequirements(componentOptions[0])\"></div>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n\n <!-- Code Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\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\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentCode(componentOptions[0])\"\n [language]=\"'javascript'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n\n <!-- Spec Tab -->\n @if (componentOptions[0]) {\n <kendo-tabstrip-tab>\n <ng-template kendoTabTitle>\n <i class=\"fa-solid fa-file-code\"></i> Spec\n </ng-template>\n <ng-template kendoTabContent>\n <div class=\"details-content code-content\" style=\"height: 100%; overflow: hidden;\">\n <mj-code-editor\n [value]=\"getComponentSpec(componentOptions[0])\"\n [language]=\"'json'\"\n [autoFocus]=\"false\"\n [indentWithTab]=\"true\"\n [readonly]=\"true\"\n [toolbar]=\"codeToolbarConfig\"\n (toolbarAction)=\"handleCodeToolbarAction($event)\"\n style=\"height: 100%;\">\n </mj-code-editor>\n </div>\n </ng-template>\n </kendo-tabstrip-tab>\n }\n </kendo-tabstrip>\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.tab-action-button.feedback-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.tab-action-button.feedback-button:hover:not(:disabled) {\n background-color: #f5f5f5;\n border-color: #d0d0d0;\n}\n\n/* Feedback button active state */\n.tab-action-button.feedback-button.active {\n background-color: #3B82F6;\n color: white;\n border-color: #3B82F6;\n}\n\n.tab-action-button.feedback-button.active:hover:not(:disabled) {\n background-color: #2563EB;\n border-color: #2563EB;\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 - improved for better formatting */\n::ng-deep .k-tabstrip {\n border: none;\n height: 100%;\n display: flex;\n flex-direction: column;\n margin: 0;\n}\n\n::ng-deep .k-tabstrip-items {\n background: #f8f9fa;\n border: none;\n border-bottom: 1px solid #e0e0e0;\n flex: 0 0 auto;\n padding: 4px 8px 0 8px;\n gap: 2px;\n display: flex;\n min-height: auto;\n height: auto;\n}\n\n::ng-deep .k-tabstrip-items-wrapper {\n height: auto;\n min-height: auto;\n}\n\n::ng-deep .k-content {\n flex: 1;\n overflow: hidden;\n padding: 0;\n background: white;\n border: none;\n min-height: 0;\n}\n\n::ng-deep .k-tabstrip .k-item {\n margin-right: 2px;\n border: none;\n background: transparent;\n border-radius: 4px 4px 0 0;\n padding: 0;\n transition: all 0.2s ease;\n height: auto;\n min-height: auto;\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: 6px 12px;\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 display: flex;\n align-items: center;\n gap: 3px;\n line-height: 1.2;\n min-height: auto;\n height: auto;\n}\n\n::ng-deep .k-tabstrip .k-link i {\n font-size: 12px;\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\n/* Inner tabs specific styling with horizontal scroll */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n max-width: 100%;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n padding: 4px 8px 0 8px;\n background: #fff;\n border-bottom: 1px solid #e8e8e8;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-item {\n flex: 0 0 auto !important;\n display: inline-block !important;\n float: none !important;\n}\n\n::ng-deep .inner-tabs .k-link {\n padding: 6px 12px;\n font-size: 12px;\n white-space: nowrap !important;\n display: inline-flex !important;\n align-items: center;\n gap: 4px;\n}\n\n/* Force single row for inner tabs */\n::ng-deep .inner-tabstrip-container .k-tabstrip-items {\n min-width: max-content !important;\n}\n\n/* Custom scrollbar for inner tabs */\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar {\n height: 6px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-track {\n background: #f1f1f1;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb {\n background: #888;\n border-radius: 3px;\n}\n\n::ng-deep .inner-tabs .k-tabstrip-items-wrapper::-webkit-scrollbar-thumb:hover {\n background: #555;\n}\n\n/* Nested tab styling - for tabs within tabs (fallback) */\n::ng-deep .k-tabstrip .k-tabstrip {\n margin: 0;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items {\n display: inline-flex !important;\n flex-wrap: nowrap !important;\n width: max-content !important;\n}\n\n::ng-deep .k-tabstrip .k-tabstrip .k-tabstrip-items-wrapper {\n overflow-x: auto !important;\n overflow-y: hidden !important;\n}\n\n/* Ensure proper content area in nested tabs */\n::ng-deep .k-tabstrip .k-tabstrip .k-content {\n border: none;\n background: transparent;\n}\n\n"] }]
1256
1265
  }], () => [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i2.AngularAdapterService }], { UIComponentCode: [{
1257
1266
  type: Input
1258
1267
  }], ComponentObjectName: [{
@@ -1283,5 +1292,5 @@ Component Name: ${this.ComponentObjectName || 'Unknown'}`;
1283
1292
  }], SkipData: [{
1284
1293
  type: Input
1285
1294
  }] }); })();
1286
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 20 }); })();
1295
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipDynamicUIComponentComponent, { className: "SkipDynamicUIComponentComponent", filePath: "src/lib/dynamic-report/dynamic-ui-component.ts", lineNumber: 21 }); })();
1287
1296
  //# sourceMappingURL=dynamic-ui-component.js.map