@memberjunction/ng-dashboards 5.48.0 → 5.50.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 (62) hide show
  1. package/dist/AI/components/autotagging/tabs/sources-tab.component.js +1 -1
  2. package/dist/AI/components/autotagging/tabs/sources-tab.component.js.map +1 -1
  3. package/dist/AI/components/tags/tags-resource.component.js +1 -1
  4. package/dist/AI/components/tags/tags-resource.component.js.map +1 -1
  5. package/dist/KnowledgeHub/components/feature-pipelines/feature-pipelines-resource.component.js +2 -2
  6. package/dist/KnowledgeHub/components/feature-pipelines/feature-pipelines-resource.component.js.map +1 -1
  7. package/dist/Lists/components/lists-browse-resource.component.d.ts +7 -0
  8. package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
  9. package/dist/Lists/components/lists-browse-resource.component.js +25 -5
  10. package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
  11. package/dist/Lists/components/lists-my-lists-resource.component.d.ts +7 -0
  12. package/dist/Lists/components/lists-my-lists-resource.component.d.ts.map +1 -1
  13. package/dist/Lists/components/lists-my-lists-resource.component.js +66 -37
  14. package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
  15. package/dist/Lists/services/list-set-operations.service.d.ts.map +1 -1
  16. package/dist/Lists/services/list-set-operations.service.js +29 -12
  17. package/dist/Lists/services/list-set-operations.service.js.map +1 -1
  18. package/dist/PredictiveStudio/components/ps-pipelines.component.d.ts +7 -1
  19. package/dist/PredictiveStudio/components/ps-pipelines.component.d.ts.map +1 -1
  20. package/dist/PredictiveStudio/components/ps-pipelines.component.js +11 -4
  21. package/dist/PredictiveStudio/components/ps-pipelines.component.js.map +1 -1
  22. package/dist/QueryBrowser/query-browser-resource.component.js +2 -2
  23. package/dist/Testing/components/testing-runs.component.d.ts.map +1 -1
  24. package/dist/Testing/components/testing-runs.component.js +35 -25
  25. package/dist/Testing/components/testing-runs.component.js.map +1 -1
  26. package/dist/Testing/services/testing-instrumentation.service.d.ts +5 -0
  27. package/dist/Testing/services/testing-instrumentation.service.d.ts.map +1 -1
  28. package/dist/Testing/services/testing-instrumentation.service.js +8 -2
  29. package/dist/Testing/services/testing-instrumentation.service.js.map +1 -1
  30. package/dist/ThemeStudio/theme-agent-context.d.ts +64 -0
  31. package/dist/ThemeStudio/theme-agent-context.d.ts.map +1 -0
  32. package/dist/ThemeStudio/theme-agent-context.js +129 -0
  33. package/dist/ThemeStudio/theme-agent-context.js.map +1 -0
  34. package/dist/ThemeStudio/theme-manager-dashboard.component.d.ts +62 -0
  35. package/dist/ThemeStudio/theme-manager-dashboard.component.d.ts.map +1 -0
  36. package/dist/ThemeStudio/theme-manager-dashboard.component.js +464 -0
  37. package/dist/ThemeStudio/theme-manager-dashboard.component.js.map +1 -0
  38. package/dist/ThemeStudio/theme-manager-resource.component.d.ts +31 -0
  39. package/dist/ThemeStudio/theme-manager-resource.component.d.ts.map +1 -0
  40. package/dist/ThemeStudio/theme-manager-resource.component.js +97 -0
  41. package/dist/ThemeStudio/theme-manager-resource.component.js.map +1 -0
  42. package/dist/ThemeStudio/theme-studio-dashboard.component.d.ts +351 -0
  43. package/dist/ThemeStudio/theme-studio-dashboard.component.d.ts.map +1 -0
  44. package/dist/ThemeStudio/theme-studio-dashboard.component.js +2931 -0
  45. package/dist/ThemeStudio/theme-studio-dashboard.component.js.map +1 -0
  46. package/dist/ThemeStudio/theme-studio-resource.component.d.ts +28 -0
  47. package/dist/ThemeStudio/theme-studio-resource.component.d.ts.map +1 -0
  48. package/dist/ThemeStudio/theme-studio-resource.component.js +96 -0
  49. package/dist/ThemeStudio/theme-studio-resource.component.js.map +1 -0
  50. package/dist/ThemeStudio/theme-studio.constants.d.ts +79 -0
  51. package/dist/ThemeStudio/theme-studio.constants.d.ts.map +1 -0
  52. package/dist/ThemeStudio/theme-studio.constants.js +217 -0
  53. package/dist/ThemeStudio/theme-studio.constants.js.map +1 -0
  54. package/dist/core-dashboards.module.d.ts +56 -52
  55. package/dist/core-dashboards.module.d.ts.map +1 -1
  56. package/dist/core-dashboards.module.js +24 -1
  57. package/dist/core-dashboards.module.js.map +1 -1
  58. package/dist/public-api.d.ts +4 -0
  59. package/dist/public-api.d.ts.map +1 -1
  60. package/dist/public-api.js +4 -0
  61. package/dist/public-api.js.map +1 -1
  62. package/package.json +63 -60
package/dist/QueryBrowser/query-browser-resource.component.js CHANGED
@@ -1844,7 +1844,7 @@ let QueryBrowserResourceComponent = class QueryBrowserResourceComponent extends
1844
1844
  i0.ɵɵconditional(ctx.ShowQueryDrawer ? 37 : -1);
1845
1845
  i0.ɵɵadvance();
1846
1846
  i0.ɵɵconditional(ctx.ShowQueryDrawer ? 38 : -1);
1847
- } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i1.MJEmptyStateComponent, i4.LoadingComponent, i5.CodeEditorComponent, i6.QueryViewerComponent, i7.TreeDropdownComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--mj-bg-surface-card);\n}\n\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n \n\n}\n\n\n\n.tree-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n font-weight: 400;\n opacity: 0.8;\n font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n color: var(--mj-text-inverse);\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n\n.tree-search[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n width: 100%;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n margin-left: 10px;\n font-size: 14px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n outline: none;\n padding: 8px 10px;\n font-size: 14px;\n background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n margin-right: 4px;\n border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 12px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-disabled);\n font-size: 11px;\n cursor: pointer;\n transition: all 0.15s ease;\n line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n background: var(--chip-color, var(--mj-text-disabled));\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 10px;\n opacity: 0.85;\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--mj-text-inverse);\n padding: 1px 6px;\n border-radius: 8px;\n flex-shrink: 0;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-top: 2px;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n\n\n.category-tree[_ngcontent-%COMP%] {\n padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.category-add-btn[_ngcontent-%COMP%] {\n display: none;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover .category-add-btn[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.category-add-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n\n\n.category-queries[_ngcontent-%COMP%] {\n margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-info);\n margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: 12px;\n margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 4px;\n opacity: 0;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover .query-details-btn[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 6px;\n cursor: col-resize;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n position: relative;\n z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n width: 2px;\n height: 32px;\n border-radius: 1px;\n background: var(--mj-border-strong);\n transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%] .resize-handle-grip[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n cursor: col-resize;\n user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%] *[_ngcontent-%COMP%] {\n pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%] .resize-handle[_ngcontent-%COMP%] {\n pointer-events: auto;\n}\n\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 14px;\n color: var(--mj-text-inverse);\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n@media (max-width: 768px) {\n .query-browser-container[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .query-tree-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n height: 40%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .query-viewer-panel[_ngcontent-%COMP%] {\n height: 60%;\n }\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 1100;\n animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.query-drawer[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 480px;\n max-width: 96vw;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 18px;\n opacity: 0.9;\n flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n font-size: 12px;\n opacity: 0.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 360px;\n margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n color: var(--mj-text-inverse);\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n flex-shrink: 0;\n transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.28);\n}\n\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n\n.drawer-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-sizing: border-box;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n display: block;\n min-height: 220px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%] .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%] .drawer-select[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] .drawer-field-hint[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n white-space: nowrap;\n}\n\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n flex-shrink: 0;\n color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-active);\n}\n\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n border: 1px solid transparent;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n\n\n@media (max-width: 600px) {\n .query-drawer[_ngcontent-%COMP%] {\n width: 100vw;\n max-width: 100vw;\n }\n\n .drawer-row[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n}"], changeDetection: 0 });
1847
+ } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.CheckboxControlValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i1.MJEmptyStateComponent, i4.LoadingComponent, i5.CodeEditorComponent, i6.QueryViewerComponent, i7.TreeDropdownComponent], styles: ["\n\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n}\n\n.query-browser-container[_ngcontent-%COMP%] {\n display: flex;\n height: 100%;\n background: var(--mj-bg-surface-card);\n}\n\n\n\n.query-tree-panel[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n \n\n}\n\n\n\n.tree-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n.header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.query-count[_ngcontent-%COMP%] {\n font-weight: 400;\n opacity: 0.8;\n font-size: 13px;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n}\n\n.icon-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n color: var(--mj-text-inverse);\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.icon-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n\n\n.tree-search[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding-left: 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]:focus-within {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.search-input[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n border: none;\n outline: none;\n padding: 8px 0;\n font-size: 14px;\n background: transparent;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n margin-right: 4px;\n border-radius: 4px;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.status-filter-bar[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 12px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-disabled);\n font-size: 11px;\n cursor: pointer;\n transition: all 0.15s ease;\n line-height: 1.2;\n}\n\n.status-filter-chip[_ngcontent-%COMP%]:hover {\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active[_ngcontent-%COMP%] {\n background: var(--chip-color, var(--mj-text-disabled));\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--mj-text-inverse);\n}\n\n.status-filter-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.chip-count[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 10px;\n opacity: 0.85;\n}\n\n\n\n.status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n\n\n.query-status-badge[_ngcontent-%COMP%] {\n font-size: 9px;\n color: var(--mj-text-inverse);\n padding: 1px 6px;\n border-radius: 8px;\n flex-shrink: 0;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-top: 2px;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n\n\n.category-tree[_ngcontent-%COMP%] {\n padding: 0 4px;\n}\n\n.category-item[_ngcontent-%COMP%] {\n margin-bottom: 2px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n text-align: center;\n}\n\n.category-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.category-count[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.category-add-btn[_ngcontent-%COMP%] {\n display: none;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover .category-add-btn[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.category-add-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n\n\n.category-queries[_ngcontent-%COMP%] {\n margin-left: 28px;\n}\n\n.query-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n margin: 2px 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-info);\n margin-left: -3px;\n}\n\n.query-item.hidden[_ngcontent-%COMP%] {\n display: none;\n}\n\n.query-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n margin-top: 2px;\n}\n\n.query-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.query-name[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-description[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.param-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-size: 12px;\n margin-top: 2px;\n}\n\n.query-details-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 4px;\n opacity: 0;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.query-item[_ngcontent-%COMP%]:hover .query-details-btn[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.query-details-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 6px;\n cursor: col-resize;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n position: relative;\n z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n width: 2px;\n height: 32px;\n border-radius: 1px;\n background: var(--mj-border-strong);\n transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%] .resize-handle-grip[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n\n\n.query-browser-container.resizing[_ngcontent-%COMP%] {\n cursor: col-resize;\n user-select: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%] *[_ngcontent-%COMP%] {\n pointer-events: none;\n}\n\n.query-browser-container.resizing[_ngcontent-%COMP%] .resize-handle[_ngcontent-%COMP%] {\n pointer-events: auto;\n}\n\n\n\n.query-viewer-panel[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.query-viewer-title[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 14px;\n color: var(--mj-text-inverse);\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n flex-shrink: 0;\n}\n\n.query-viewer-status-pill[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.query-viewer-status-pill.approved[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n.query-viewer-header-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n\n\nmj-query-viewer[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n\n\n@media (max-width: 768px) {\n .query-browser-container[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .query-tree-panel[_ngcontent-%COMP%] {\n width: 100% !important;\n height: 40%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .resize-handle[_ngcontent-%COMP%] {\n display: none;\n }\n\n .query-viewer-panel[_ngcontent-%COMP%] {\n height: 60%;\n }\n}\n\n\n\n.query-viewer-header[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.query-viewer-header[_ngcontent-%COMP%] .icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.query-drawer-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 1100;\n animation: _ngcontent-%COMP%_backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_backdropFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n\n\n.query-drawer[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 480px;\n max-width: 96vw;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n animation: _ngcontent-%COMP%_drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_drawerSlideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n\n\n.query-drawer-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.query-drawer-title[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n font-size: 18px;\n opacity: 0.9;\n flex-shrink: 0;\n}\n\n.query-drawer-title-main[_ngcontent-%COMP%] {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.2;\n}\n\n.query-drawer-title-sub[_ngcontent-%COMP%] {\n font-size: 12px;\n opacity: 0.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 360px;\n margin-top: 2px;\n}\n\n.query-drawer-close[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n color: var(--mj-text-inverse);\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n flex-shrink: 0;\n transition: background 0.15s ease;\n}\n\n.query-drawer-close[_ngcontent-%COMP%]:hover {\n background: rgba(255, 255, 255, 0.28);\n}\n\n\n\n.query-drawer-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar { width: 6px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n\n\n.drawer-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.drawer-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n}\n\n.drawer-field-flex[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.drawer-field-sql[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.drawer-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.drawer-required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.drawer-input[_ngcontent-%COMP%], \n.drawer-select[_ngcontent-%COMP%], \n.drawer-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-sizing: border-box;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n font-family: inherit;\n}\n\n.drawer-input[_ngcontent-%COMP%]:focus, \n.drawer-select[_ngcontent-%COMP%]:focus, \n.drawer-textarea[_ngcontent-%COMP%]:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input[_ngcontent-%COMP%]:disabled, \n.drawer-select[_ngcontent-%COMP%]:disabled, \n.drawer-textarea[_ngcontent-%COMP%]:disabled {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.drawer-textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 70px;\n}\n\n.drawer-sql-editor[_ngcontent-%COMP%] {\n display: block;\n min-height: 220px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.drawer-field-error[_ngcontent-%COMP%] .drawer-input[_ngcontent-%COMP%], \n.drawer-field-error[_ngcontent-%COMP%] .drawer-select[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.drawer-field-inline[_ngcontent-%COMP%] .drawer-field-hint[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n white-space: nowrap;\n}\n\n\n\n.drawer-full-record[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n flex-wrap: wrap;\n}\n\n.drawer-full-record[_ngcontent-%COMP%] > i[_ngcontent-%COMP%] {\n flex-shrink: 0;\n color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.drawer-link-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-active);\n}\n\n\n\n.query-drawer-footer[_ngcontent-%COMP%] {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.drawer-error[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n\n\n.drawer-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n border: 1px solid transparent;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.drawer-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n\n\n@media (max-width: 600px) {\n .query-drawer[_ngcontent-%COMP%] {\n width: 100vw;\n max-width: 100vw;\n }\n\n .drawer-row[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n}"], changeDetection: 0 });
1848
1848
  };
1849
1849
  QueryBrowserResourceComponent = QueryBrowserResourceComponent_1 = __decorate([
1850
1850
  RegisterClass(BaseResourceComponent, 'QueryBrowserResource')
@@ -1852,7 +1852,7 @@ QueryBrowserResourceComponent = QueryBrowserResourceComponent_1 = __decorate([
1852
1852
  export { QueryBrowserResourceComponent };
1853
1853
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryBrowserResourceComponent, [{
1854
1854
  type: Component,
1855
- args: [{ standalone: false, selector: 'mj-query-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Query Browser Resource -->\n<div class=\"query-browser-container\" [class.resizing]=\"IsResizing\">\n <!-- Left Panel: Query Tree -->\n <div class=\"query-tree-panel\" [style.width.px]=\"PanelWidth\">\n <!-- Header -->\n <div class=\"tree-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Queries</span>\n <span class=\"query-count\">({{ getTotalQueryCount() }})</span>\n </div>\n <div class=\"header-actions\">\n @if (CanCreateQuery) {\n <button class=\"icon-btn\" (click)=\"OpenCreateDrawer()\" title=\"New Query\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n <button class=\"icon-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <i class=\"fa-solid fa-folder\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"tree-search\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n [value]=\"searchText\"\n placeholder=\"Search queries...\"\n (input)=\"onSearchChange($any($event.target).value)\">\n @if (searchText) {\n <button class=\"clear-btn\" (click)=\"clearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n\n <!-- Status Filters -->\n <div class=\"status-filter-bar\">\n @for (status of AllStatuses; track status) {\n @if (getStatusCount(status) > 0) {\n <button class=\"status-filter-chip\"\n [class.active]=\"StatusFilters[status]\"\n [style.--chip-color]=\"getStatusColor(status)\"\n (click)=\"toggleStatusFilter(status)\"\n [title]=\"(StatusFilters[status] ? 'Hide' : 'Show') + ' ' + status + ' queries'\">\n <i class=\"fa-solid\" [class]=\"getStatusIcon(status)\"></i>\n <span>{{ status }}</span>\n <span class=\"chip-count\">{{ getStatusCount(status) }}</span>\n </button>\n }\n }\n </div>\n\n <!-- Tree Content -->\n <div class=\"tree-content\">\n <!-- Loading -->\n @if (isLoading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading queries...\"></mj-loading>\n </div>\n }\n\n <!-- Empty -->\n @if (!isLoading && queries.length === 0) {\n <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-database\"\n Title=\"No queries available\" />\n }\n\n <!-- No results -->\n @if (!isLoading && searchText && filteredQueries.length === 0) {\n <mj-empty-state Size=\"compact\" Variant=\"no-results\"\n Title=\"No queries found\"\n [Message]=\"NoQueryResultsMessage\" />\n }\n\n <!-- Category Tree -->\n @if (!isLoading && queries.length > 0) {\n <div class=\"category-tree\">\n @for (node of categoryTree; track trackByCategory($index, node)) {\n <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: node }\"></ng-container>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Resize Handle -->\n <div class=\"resize-handle\"\n [class.active]=\"IsResizing\"\n (mousedown)=\"onResizeStart($event)\">\n <div class=\"resize-handle-grip\"></div>\n </div>\n\n <!-- Right Panel: Query Viewer -->\n <div class=\"query-viewer-panel\">\n <!-- No query selected -->\n @if (!selectedQuery) {\n <mj-empty-state class=\"no-selection\" Icon=\"fa-solid fa-hand-pointer\"\n Title=\"Select a query from the list\"\n Message=\"Click on a query to view and run it\"\n [ActionText]=\"CanCreateQuery ? 'New Query' : ''\"\n ActionIcon=\"fa-solid fa-plus\"\n (Action)=\"OpenCreateDrawer()\" />\n }\n\n <!-- Query Viewer -->\n @if (selectedQuery) {\n <!-- Query Header with Status -->\n <div class=\"query-viewer-header\">\n <div class=\"query-viewer-title\">\n <i class=\"fa-solid fa-file-code\"></i>\n <span>{{ selectedQuery.Name }}</span>\n </div>\n <div class=\"query-viewer-header-actions\">\n @if (selectedQuery.Status !== 'Approved') {\n <span class=\"query-viewer-status-pill\"\n [style.background]=\"getStatusColor(selectedQuery.Status)\">\n <i class=\"fa-solid\" [class]=\"getStatusIcon(selectedQuery.Status)\"></i>\n {{ selectedQuery.Status }}\n </span>\n } @else {\n <span class=\"query-viewer-status-pill approved\"\n [style.background]=\"getStatusColor('Approved')\">\n <i class=\"fa-solid fa-check-circle\"></i>\n Approved\n </span>\n }\n @if (CanEditQuery) {\n <button class=\"icon-btn\" (click)=\"OpenEditDrawer(selectedQuery)\" title=\"Edit Query\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n </div>\n </div>\n <mj-query-viewer\n [QueryId]=\"selectedQuery.ID\"\n [AutoRun]=\"true\"\n [SelectionMode]=\"'multiple'\"\n (EntityLinkClick)=\"onEntityLinkClick($event)\"\n (RowDoubleClick)=\"onRowDoubleClick($event)\"\n (OpenQueryRecord)=\"onOpenQueryRecord($event)\"\n (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n (QueryComplete)=\"onViewerQueryComplete($event)\">\n </mj-query-viewer>\n }\n </div>\n</div>\n\n<!-- Category Node Template -->\n<ng-template #categoryNode let-node=\"node\">\n @if (hasVisibleContent(node)) {\n <div class=\"category-item\"\n [class.expanded]=\"node.expanded\"\n [style.padding-left.px]=\"node.level * 16 + 8\">\n <div class=\"category-header\" (click)=\"toggleExpand(node)\">\n <i class=\"fa-solid expand-icon\"\n [class.fa-chevron-down]=\"node.expanded\"\n [class.fa-chevron-right]=\"!node.expanded\"></i>\n <i class=\"fa-solid fa-folder category-icon\"\n [class.fa-folder-open]=\"node.expanded\"></i>\n <span class=\"category-name\">{{ node.category.Name }}</span>\n <span class=\"category-count\">({{ getNodeQueryCount(node) }})</span>\n @if (CanCreateQuery && node.category.ID !== '__uncategorized__') {\n <button class=\"category-add-btn\"\n (click)=\"OpenCreateDrawer(node.category.ID); $event.stopPropagation()\"\n title=\"New query in {{ node.category.Name }}\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n </div>\n <!-- Queries in this category -->\n @if (node.expanded) {\n <div class=\"category-queries\">\n @for (query of node.queries; track trackByQuery($index, query)) {\n <div class=\"query-item\"\n [class.selected]=\"IsQuerySelected(query)\"\n [class.hidden]=\"!isQueryVisible(query)\"\n (click)=\"selectQuery(query, $event)\">\n <span class=\"status-dot\"\n [style.background]=\"getStatusColor(query.Status)\"\n [title]=\"query.Status\"></span>\n <i class=\"fa-solid fa-file-code query-icon\"></i>\n <div class=\"query-info\" [title]=\"query.Description || query.Name\">\n <span class=\"query-name\">{{ query.Name }}</span>\n @if (query.Description) {\n <span class=\"query-description\">{{ query.Description }}</span>\n }\n </div>\n @if (query.UsesTemplate) {\n <i class=\"fa-solid fa-sliders param-icon\" title=\"Has parameters\"></i>\n }\n @if (query.Status !== 'Approved') {\n <span class=\"query-status-badge\"\n [style.background]=\"getStatusColor(query.Status)\"\n [title]=\"query.Status\">\n {{ query.Status }}\n </span>\n }\n @if (CanEditQuery) {\n <button class=\"query-details-btn\" (click)=\"OpenEditDrawer(query, $event)\" title=\"Edit query\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n </div>\n }\n </div>\n }\n <!-- Child categories -->\n @if (node.expanded) {\n @for (child of node.children; track trackByCategory($index, child)) {\n <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: child }\"></ng-container>\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Query Drawer Backdrop -->\n@if (ShowQueryDrawer) {\n <div class=\"query-drawer-backdrop\" (click)=\"OnDrawerBackdropClick()\"></div>\n}\n\n<!-- Query Drawer Panel -->\n@if (ShowQueryDrawer) {\n <div class=\"query-drawer\">\n\n <!-- Drawer Header -->\n <div class=\"query-drawer-header\">\n <div class=\"query-drawer-title\">\n <i class=\"fa-solid\" [class.fa-plus]=\"DrawerMode === 'create'\" [class.fa-pen-to-square]=\"DrawerMode === 'edit'\"></i>\n <div>\n <div class=\"query-drawer-title-main\">{{ DrawerMode === 'create' ? 'New Query' : 'Edit Query' }}</div>\n @if (DrawerMode === 'edit' && DrawerName) {\n <div class=\"query-drawer-title-sub\">{{ DrawerName }}</div>\n }\n </div>\n </div>\n <button class=\"query-drawer-close\" (click)=\"CloseDrawer()\" title=\"Close\" aria-label=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Drawer Body -->\n <div class=\"query-drawer-body\">\n\n <!-- Name -->\n <div class=\"drawer-field\" [class.drawer-field-error]=\"DrawerNameError\">\n <label class=\"drawer-label\">Name <span class=\"drawer-required\">*</span></label>\n <input class=\"drawer-input\"\n type=\"text\"\n [(ngModel)]=\"DrawerName\"\n (ngModelChange)=\"DrawerNameError = false\"\n placeholder=\"Enter query name\"\n [disabled]=\"IsSavingDrawer\">\n @if (DrawerNameError) {\n <span class=\"drawer-field-hint\">Name is required</span>\n }\n </div>\n\n <!-- Category + Status (side by side) -->\n <div class=\"drawer-row\">\n <div class=\"drawer-field drawer-field-flex\">\n <label class=\"drawer-label\">Category</label>\n <mj-tree-dropdown\n [BranchConfig]=\"CategoryBranchConfig\"\n [Value]=\"DrawerCategoryIDAsKey\"\n [SelectableTypes]=\"'branch'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Select category...'\"\n [EnableSearch]=\"true\"\n [Clearable]=\"true\"\n [Disabled]=\"IsSavingDrawer\"\n (ValueChange)=\"OnDrawerCategoryChange($event)\">\n </mj-tree-dropdown>\n </div>\n <div class=\"drawer-field drawer-field-flex\">\n <label class=\"drawer-label\">Status</label>\n <select class=\"drawer-select\"\n [(ngModel)]=\"DrawerStatus\"\n [disabled]=\"IsSavingDrawer\">\n @for (s of DrawerStatuses; track s) {\n <option [value]=\"s\">{{ s }}</option>\n }\n </select>\n </div>\n </div>\n\n <!-- Reusable -->\n <div class=\"drawer-field drawer-field-inline\">\n <label class=\"mj-checkbox drawer-reusable-label\">\n <input type=\"checkbox\"\n [(ngModel)]=\"DrawerReusable\"\n [disabled]=\"IsSavingDrawer\">\n <span>Reusable</span>\n </label>\n <span class=\"drawer-field-hint\">Allow other queries to reference this query using composition syntax</span>\n </div>\n\n <!-- Description -->\n <div class=\"drawer-field\">\n <label class=\"drawer-label\">Description</label>\n <textarea class=\"drawer-textarea\"\n rows=\"3\"\n [(ngModel)]=\"DrawerDescription\"\n placeholder=\"Optional description\"\n [disabled]=\"IsSavingDrawer\"></textarea>\n </div>\n\n <!-- SQL -->\n <div class=\"drawer-field drawer-field-sql\">\n <label class=\"drawer-label\">SQL</label>\n <mj-code-editor #drawerSqlEditor\n [language]=\"'sql'\"\n [indentWithTab]=\"true\"\n [readonly]=\"IsSavingDrawer\"\n (change)=\"OnDrawerSQLChange($event)\"\n class=\"drawer-sql-editor\">\n </mj-code-editor>\n </div>\n\n <!-- Open Full Record link (edit mode only) -->\n @if (DrawerMode === 'edit' && DrawerQueryId) {\n <div class=\"drawer-full-record\">\n <i class=\"fa-solid fa-circle-info\"></i>\n To manage Parameters, Fields, and Permissions \u2014\n <button class=\"drawer-link-btn\" (click)=\"OpenFullRecord()\">\n Open full record <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n }\n\n </div>\n\n <!-- Drawer Footer -->\n <div class=\"query-drawer-footer\">\n\n <!-- Error message -->\n @if (DrawerSaveError) {\n <div class=\"drawer-error\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DrawerSaveError }}\n </div>\n }\n\n <!-- Action buttons -->\n <div class=\"drawer-footer-actions\">\n <button class=\"drawer-btn drawer-btn-primary\"\n (click)=\"SaveDrawer()\"\n [disabled]=\"IsSavingDrawer || !DrawerName.trim()\">\n @if (IsSavingDrawer) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n <i class=\"fa-solid fa-floppy-disk\"></i> Save\n }\n </button>\n <button class=\"drawer-btn drawer-btn-secondary\"\n (click)=\"CloseDrawer()\"\n [disabled]=\"IsSavingDrawer\">\n Cancel\n </button>\n </div>\n\n </div>\n\n </div>\n}\n", styles: ["/* Query Browser Resource Styles */\n\n:host {\n display: block;\n height: 100%;\n}\n\n.query-browser-container {\n display: flex;\n height: 100%;\n background: var(--mj-bg-surface-card);\n}\n\n/* Left Panel: Query Tree */\n.query-tree-panel {\n flex-shrink: 0;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n /* Width controlled by [style.width.px] binding */\n}\n\n/* Tree Header */\n.tree-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n.header-title i {\n font-size: 16px;\n}\n\n.query-count {\n font-weight: 400;\n opacity: 0.8;\n font-size: 13px;\n}\n\n.header-actions {\n display: flex;\n gap: 4px;\n}\n\n.icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n color: var(--mj-text-inverse);\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.icon-btn:hover {\n background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n/* Tree Search */\n.tree-search {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n display: flex;\n align-items: center;\n width: 100%;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper:focus-within {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon {\n color: var(--mj-text-disabled);\n margin-left: 10px;\n font-size: 14px;\n}\n\n.search-input {\n flex: 1;\n border: none;\n outline: none;\n padding: 8px 10px;\n font-size: 14px;\n background: transparent;\n}\n\n.search-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.clear-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n margin-right: 4px;\n border-radius: 4px;\n}\n\n.clear-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n/* Status Filter Bar */\n.status-filter-bar {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 12px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-disabled);\n font-size: 11px;\n cursor: pointer;\n transition: all 0.15s ease;\n line-height: 1.2;\n}\n\n.status-filter-chip:hover {\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active {\n background: var(--chip-color, var(--mj-text-disabled));\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--mj-text-inverse);\n}\n\n.status-filter-chip i {\n font-size: 10px;\n}\n\n.chip-count {\n font-weight: 600;\n font-size: 10px;\n opacity: 0.85;\n}\n\n/* Status Dot on Query Items */\n.status-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n/* Status Badge on Non-Approved Queries */\n.query-status-badge {\n font-size: 9px;\n color: var(--mj-text-inverse);\n padding: 1px 6px;\n border-radius: 8px;\n flex-shrink: 0;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-top: 2px;\n}\n\n/* Tree Content */\n.tree-content {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n/* Category Tree */\n.category-tree {\n padding: 0 4px;\n}\n\n.category-item {\n margin-bottom: 2px;\n}\n\n.category-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.category-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n text-align: center;\n}\n\n.category-icon {\n color: var(--mj-status-warning);\n font-size: 14px;\n}\n\n.category-name {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.category-count {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.category-add-btn {\n display: none;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header:hover .category-add-btn {\n display: flex;\n}\n\n.category-add-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n/* Query Items */\n.category-queries {\n margin-left: 28px;\n}\n\n.query-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n margin: 2px 0;\n}\n\n.query-item:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-info);\n margin-left: -3px;\n}\n\n.query-item.hidden {\n display: none;\n}\n\n.query-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n margin-top: 2px;\n}\n\n.query-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.query-name {\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-description {\n font-size: 11px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.param-icon {\n color: var(--mj-status-warning);\n font-size: 12px;\n margin-top: 2px;\n}\n\n.query-details-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 4px;\n opacity: 0;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.query-item:hover .query-details-btn {\n opacity: 1;\n}\n\n.query-details-btn:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n/* Resize Handle */\n.resize-handle {\n flex-shrink: 0;\n width: 6px;\n cursor: col-resize;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n position: relative;\n z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip {\n width: 2px;\n height: 32px;\n border-radius: 1px;\n background: var(--mj-border-strong);\n transition: background 0.15s ease;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle.active .resize-handle-grip {\n background: var(--mj-brand-primary);\n}\n\n/* Prevent text selection and set cursor during resize */\n.query-browser-container.resizing {\n cursor: col-resize;\n user-select: none;\n}\n\n.query-browser-container.resizing * {\n pointer-events: none;\n}\n\n.query-browser-container.resizing .resize-handle {\n pointer-events: auto;\n}\n\n/* Right Panel: Query Viewer */\n.query-viewer-panel {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n/* No Selection State \u2014 fills the viewer panel (host centers its own content) */\n.no-selection {\n flex: 1;\n}\n\n/* Query Viewer Header */\n.query-viewer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.query-viewer-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n}\n\n.query-viewer-title i {\n color: var(--mj-brand-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.query-viewer-title span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 14px;\n color: var(--mj-text-inverse);\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n flex-shrink: 0;\n}\n\n.query-viewer-status-pill i {\n font-size: 12px;\n}\n\n.query-viewer-status-pill.approved {\n opacity: 0.7;\n}\n\n.query-viewer-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n/* Query Viewer fills remaining space */\nmj-query-viewer {\n flex: 1;\n min-height: 0;\n}\n\n/* Scrollbar styling */\n.tree-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .query-browser-container {\n flex-direction: column;\n }\n\n .query-tree-panel {\n width: 100% !important;\n height: 40%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .resize-handle {\n display: none;\n }\n\n .query-viewer-panel {\n height: 60%;\n }\n}\n\n/* \u2500\u2500\u2500 Right-panel icon button override (white background context) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-viewer-header .icon-btn {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.query-viewer-header .icon-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Drawer Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-backdrop {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 1100;\n animation: backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes backdropFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* \u2500\u2500\u2500 Drawer Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 480px;\n max-width: 96vw;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n animation: drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes drawerSlideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n/* \u2500\u2500\u2500 Drawer Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.query-drawer-title {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.query-drawer-title > i {\n font-size: 18px;\n opacity: 0.9;\n flex-shrink: 0;\n}\n\n.query-drawer-title-main {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.2;\n}\n\n.query-drawer-title-sub {\n font-size: 12px;\n opacity: 0.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 360px;\n margin-top: 2px;\n}\n\n.query-drawer-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n color: var(--mj-text-inverse);\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n flex-shrink: 0;\n transition: background 0.15s ease;\n}\n\n.query-drawer-close:hover {\n background: rgba(255, 255, 255, 0.28);\n}\n\n/* \u2500\u2500\u2500 Drawer Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.query-drawer-body::-webkit-scrollbar { width: 6px; }\n.query-drawer-body::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Drawer Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.drawer-row {\n display: flex;\n gap: 12px;\n}\n\n.drawer-field-flex {\n flex: 1;\n min-width: 0;\n}\n\n.drawer-field-sql {\n flex: 1;\n}\n\n.drawer-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.drawer-required {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.drawer-input,\n.drawer-select,\n.drawer-textarea {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-sizing: border-box;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n font-family: inherit;\n}\n\n.drawer-input:focus,\n.drawer-select:focus,\n.drawer-textarea:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input:disabled,\n.drawer-select:disabled,\n.drawer-textarea:disabled {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.drawer-textarea {\n resize: vertical;\n min-height: 70px;\n}\n\n.drawer-sql-editor {\n display: block;\n min-height: 220px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.drawer-field-error .drawer-input,\n.drawer-field-error .drawer-select {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.drawer-field-inline {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.drawer-field-inline .drawer-field-hint {\n color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n white-space: nowrap;\n}\n\n/* \u2500\u2500\u2500 Open Full Record link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-full-record {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n flex-wrap: wrap;\n}\n\n.drawer-full-record > i {\n flex-shrink: 0;\n color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn {\n background: none;\n border: none;\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.drawer-link-btn:hover {\n color: var(--mj-brand-primary-active);\n}\n\n/* \u2500\u2500\u2500 Drawer Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-footer {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.drawer-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n/* \u2500\u2500\u2500 Drawer Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n border: 1px solid transparent;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.drawer-btn:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.drawer-btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary {\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Responsive drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 600px) {\n .query-drawer {\n width: 100vw;\n max-width: 100vw;\n }\n\n .drawer-row {\n flex-direction: column;\n }\n}\n"] }]
1855
+ args: [{ standalone: false, selector: 'mj-query-browser-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Query Browser Resource -->\n<div class=\"query-browser-container\" [class.resizing]=\"IsResizing\">\n <!-- Left Panel: Query Tree -->\n <div class=\"query-tree-panel\" [style.width.px]=\"PanelWidth\">\n <!-- Header -->\n <div class=\"tree-header\">\n <div class=\"header-title\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Queries</span>\n <span class=\"query-count\">({{ getTotalQueryCount() }})</span>\n </div>\n <div class=\"header-actions\">\n @if (CanCreateQuery) {\n <button class=\"icon-btn\" (click)=\"OpenCreateDrawer()\" title=\"New Query\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n <button class=\"icon-btn\" (click)=\"expandAll()\" title=\"Expand all\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"collapseAll()\" title=\"Collapse all\">\n <i class=\"fa-solid fa-folder\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"refresh()\" title=\"Refresh\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"tree-search\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\"\n class=\"search-input\"\n [value]=\"searchText\"\n placeholder=\"Search queries...\"\n (input)=\"onSearchChange($any($event.target).value)\">\n @if (searchText) {\n <button class=\"clear-btn\" (click)=\"clearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n\n <!-- Status Filters -->\n <div class=\"status-filter-bar\">\n @for (status of AllStatuses; track status) {\n @if (getStatusCount(status) > 0) {\n <button class=\"status-filter-chip\"\n [class.active]=\"StatusFilters[status]\"\n [style.--chip-color]=\"getStatusColor(status)\"\n (click)=\"toggleStatusFilter(status)\"\n [title]=\"(StatusFilters[status] ? 'Hide' : 'Show') + ' ' + status + ' queries'\">\n <i class=\"fa-solid\" [class]=\"getStatusIcon(status)\"></i>\n <span>{{ status }}</span>\n <span class=\"chip-count\">{{ getStatusCount(status) }}</span>\n </button>\n }\n }\n </div>\n\n <!-- Tree Content -->\n <div class=\"tree-content\">\n <!-- Loading -->\n @if (isLoading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading queries...\"></mj-loading>\n </div>\n }\n\n <!-- Empty -->\n @if (!isLoading && queries.length === 0) {\n <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-database\"\n Title=\"No queries available\" />\n }\n\n <!-- No results -->\n @if (!isLoading && searchText && filteredQueries.length === 0) {\n <mj-empty-state Size=\"compact\" Variant=\"no-results\"\n Title=\"No queries found\"\n [Message]=\"NoQueryResultsMessage\" />\n }\n\n <!-- Category Tree -->\n @if (!isLoading && queries.length > 0) {\n <div class=\"category-tree\">\n @for (node of categoryTree; track trackByCategory($index, node)) {\n <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: node }\"></ng-container>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Resize Handle -->\n <div class=\"resize-handle\"\n [class.active]=\"IsResizing\"\n (mousedown)=\"onResizeStart($event)\">\n <div class=\"resize-handle-grip\"></div>\n </div>\n\n <!-- Right Panel: Query Viewer -->\n <div class=\"query-viewer-panel\">\n <!-- No query selected -->\n @if (!selectedQuery) {\n <mj-empty-state class=\"no-selection\" Icon=\"fa-solid fa-hand-pointer\"\n Title=\"Select a query from the list\"\n Message=\"Click on a query to view and run it\"\n [ActionText]=\"CanCreateQuery ? 'New Query' : ''\"\n ActionIcon=\"fa-solid fa-plus\"\n (Action)=\"OpenCreateDrawer()\" />\n }\n\n <!-- Query Viewer -->\n @if (selectedQuery) {\n <!-- Query Header with Status -->\n <div class=\"query-viewer-header\">\n <div class=\"query-viewer-title\">\n <i class=\"fa-solid fa-file-code\"></i>\n <span>{{ selectedQuery.Name }}</span>\n </div>\n <div class=\"query-viewer-header-actions\">\n @if (selectedQuery.Status !== 'Approved') {\n <span class=\"query-viewer-status-pill\"\n [style.background]=\"getStatusColor(selectedQuery.Status)\">\n <i class=\"fa-solid\" [class]=\"getStatusIcon(selectedQuery.Status)\"></i>\n {{ selectedQuery.Status }}\n </span>\n } @else {\n <span class=\"query-viewer-status-pill approved\"\n [style.background]=\"getStatusColor('Approved')\">\n <i class=\"fa-solid fa-check-circle\"></i>\n Approved\n </span>\n }\n @if (CanEditQuery) {\n <button class=\"icon-btn\" (click)=\"OpenEditDrawer(selectedQuery)\" title=\"Edit Query\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n </div>\n </div>\n <mj-query-viewer\n [QueryId]=\"selectedQuery.ID\"\n [AutoRun]=\"true\"\n [SelectionMode]=\"'multiple'\"\n (EntityLinkClick)=\"onEntityLinkClick($event)\"\n (RowDoubleClick)=\"onRowDoubleClick($event)\"\n (OpenQueryRecord)=\"onOpenQueryRecord($event)\"\n (CompositionTokenClick)=\"onCompositionTokenClick($event)\"\n (QueryComplete)=\"onViewerQueryComplete($event)\">\n </mj-query-viewer>\n }\n </div>\n</div>\n\n<!-- Category Node Template -->\n<ng-template #categoryNode let-node=\"node\">\n @if (hasVisibleContent(node)) {\n <div class=\"category-item\"\n [class.expanded]=\"node.expanded\"\n [style.padding-left.px]=\"node.level * 16 + 8\">\n <div class=\"category-header\" (click)=\"toggleExpand(node)\">\n <i class=\"fa-solid expand-icon\"\n [class.fa-chevron-down]=\"node.expanded\"\n [class.fa-chevron-right]=\"!node.expanded\"></i>\n <i class=\"fa-solid fa-folder category-icon\"\n [class.fa-folder-open]=\"node.expanded\"></i>\n <span class=\"category-name\">{{ node.category.Name }}</span>\n <span class=\"category-count\">({{ getNodeQueryCount(node) }})</span>\n @if (CanCreateQuery && node.category.ID !== '__uncategorized__') {\n <button class=\"category-add-btn\"\n (click)=\"OpenCreateDrawer(node.category.ID); $event.stopPropagation()\"\n title=\"New query in {{ node.category.Name }}\">\n <i class=\"fa-solid fa-plus\"></i>\n </button>\n }\n </div>\n <!-- Queries in this category -->\n @if (node.expanded) {\n <div class=\"category-queries\">\n @for (query of node.queries; track trackByQuery($index, query)) {\n <div class=\"query-item\"\n [class.selected]=\"IsQuerySelected(query)\"\n [class.hidden]=\"!isQueryVisible(query)\"\n (click)=\"selectQuery(query, $event)\">\n <span class=\"status-dot\"\n [style.background]=\"getStatusColor(query.Status)\"\n [title]=\"query.Status\"></span>\n <i class=\"fa-solid fa-file-code query-icon\"></i>\n <div class=\"query-info\" [title]=\"query.Description || query.Name\">\n <span class=\"query-name\">{{ query.Name }}</span>\n @if (query.Description) {\n <span class=\"query-description\">{{ query.Description }}</span>\n }\n </div>\n @if (query.UsesTemplate) {\n <i class=\"fa-solid fa-sliders param-icon\" title=\"Has parameters\"></i>\n }\n @if (query.Status !== 'Approved') {\n <span class=\"query-status-badge\"\n [style.background]=\"getStatusColor(query.Status)\"\n [title]=\"query.Status\">\n {{ query.Status }}\n </span>\n }\n @if (CanEditQuery) {\n <button class=\"query-details-btn\" (click)=\"OpenEditDrawer(query, $event)\" title=\"Edit query\">\n <i class=\"fa-solid fa-pen-to-square\"></i>\n </button>\n }\n </div>\n }\n </div>\n }\n <!-- Child categories -->\n @if (node.expanded) {\n @for (child of node.children; track trackByCategory($index, child)) {\n <ng-container *ngTemplateOutlet=\"categoryNode; context: { node: child }\"></ng-container>\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Query Drawer Backdrop -->\n@if (ShowQueryDrawer) {\n <div class=\"query-drawer-backdrop\" (click)=\"OnDrawerBackdropClick()\"></div>\n}\n\n<!-- Query Drawer Panel -->\n@if (ShowQueryDrawer) {\n <div class=\"query-drawer\">\n\n <!-- Drawer Header -->\n <div class=\"query-drawer-header\">\n <div class=\"query-drawer-title\">\n <i class=\"fa-solid\" [class.fa-plus]=\"DrawerMode === 'create'\" [class.fa-pen-to-square]=\"DrawerMode === 'edit'\"></i>\n <div>\n <div class=\"query-drawer-title-main\">{{ DrawerMode === 'create' ? 'New Query' : 'Edit Query' }}</div>\n @if (DrawerMode === 'edit' && DrawerName) {\n <div class=\"query-drawer-title-sub\">{{ DrawerName }}</div>\n }\n </div>\n </div>\n <button class=\"query-drawer-close\" (click)=\"CloseDrawer()\" title=\"Close\" aria-label=\"Close\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Drawer Body -->\n <div class=\"query-drawer-body\">\n\n <!-- Name -->\n <div class=\"drawer-field\" [class.drawer-field-error]=\"DrawerNameError\">\n <label class=\"drawer-label\">Name <span class=\"drawer-required\">*</span></label>\n <input class=\"drawer-input\"\n type=\"text\"\n [(ngModel)]=\"DrawerName\"\n (ngModelChange)=\"DrawerNameError = false\"\n placeholder=\"Enter query name\"\n [disabled]=\"IsSavingDrawer\">\n @if (DrawerNameError) {\n <span class=\"drawer-field-hint\">Name is required</span>\n }\n </div>\n\n <!-- Category + Status (side by side) -->\n <div class=\"drawer-row\">\n <div class=\"drawer-field drawer-field-flex\">\n <label class=\"drawer-label\">Category</label>\n <mj-tree-dropdown\n [BranchConfig]=\"CategoryBranchConfig\"\n [Value]=\"DrawerCategoryIDAsKey\"\n [SelectableTypes]=\"'branch'\"\n [SelectionMode]=\"'single'\"\n [Placeholder]=\"'Select category...'\"\n [EnableSearch]=\"true\"\n [Clearable]=\"true\"\n [Disabled]=\"IsSavingDrawer\"\n (ValueChange)=\"OnDrawerCategoryChange($event)\">\n </mj-tree-dropdown>\n </div>\n <div class=\"drawer-field drawer-field-flex\">\n <label class=\"drawer-label\">Status</label>\n <select class=\"drawer-select\"\n [(ngModel)]=\"DrawerStatus\"\n [disabled]=\"IsSavingDrawer\">\n @for (s of DrawerStatuses; track s) {\n <option [value]=\"s\">{{ s }}</option>\n }\n </select>\n </div>\n </div>\n\n <!-- Reusable -->\n <div class=\"drawer-field drawer-field-inline\">\n <label class=\"mj-checkbox drawer-reusable-label\">\n <input type=\"checkbox\"\n [(ngModel)]=\"DrawerReusable\"\n [disabled]=\"IsSavingDrawer\">\n <span>Reusable</span>\n </label>\n <span class=\"drawer-field-hint\">Allow other queries to reference this query using composition syntax</span>\n </div>\n\n <!-- Description -->\n <div class=\"drawer-field\">\n <label class=\"drawer-label\">Description</label>\n <textarea class=\"drawer-textarea\"\n rows=\"3\"\n [(ngModel)]=\"DrawerDescription\"\n placeholder=\"Optional description\"\n [disabled]=\"IsSavingDrawer\"></textarea>\n </div>\n\n <!-- SQL -->\n <div class=\"drawer-field drawer-field-sql\">\n <label class=\"drawer-label\">SQL</label>\n <mj-code-editor #drawerSqlEditor\n [language]=\"'sql'\"\n [indentWithTab]=\"true\"\n [readonly]=\"IsSavingDrawer\"\n (change)=\"OnDrawerSQLChange($event)\"\n class=\"drawer-sql-editor\">\n </mj-code-editor>\n </div>\n\n <!-- Open Full Record link (edit mode only) -->\n @if (DrawerMode === 'edit' && DrawerQueryId) {\n <div class=\"drawer-full-record\">\n <i class=\"fa-solid fa-circle-info\"></i>\n To manage Parameters, Fields, and Permissions \u2014\n <button class=\"drawer-link-btn\" (click)=\"OpenFullRecord()\">\n Open full record <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n </button>\n </div>\n }\n\n </div>\n\n <!-- Drawer Footer -->\n <div class=\"query-drawer-footer\">\n\n <!-- Error message -->\n @if (DrawerSaveError) {\n <div class=\"drawer-error\">\n <i class=\"fa-solid fa-triangle-exclamation\"></i> {{ DrawerSaveError }}\n </div>\n }\n\n <!-- Action buttons -->\n <div class=\"drawer-footer-actions\">\n <button class=\"drawer-btn drawer-btn-primary\"\n (click)=\"SaveDrawer()\"\n [disabled]=\"IsSavingDrawer || !DrawerName.trim()\">\n @if (IsSavingDrawer) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i> Saving...\n } @else {\n <i class=\"fa-solid fa-floppy-disk\"></i> Save\n }\n </button>\n <button class=\"drawer-btn drawer-btn-secondary\"\n (click)=\"CloseDrawer()\"\n [disabled]=\"IsSavingDrawer\">\n Cancel\n </button>\n </div>\n\n </div>\n\n </div>\n}\n", styles: ["/* Query Browser Resource Styles */\n\n:host {\n display: block;\n height: 100%;\n}\n\n.query-browser-container {\n display: flex;\n height: 100%;\n background: var(--mj-bg-surface-card);\n}\n\n/* Left Panel: Query Tree */\n.query-tree-panel {\n flex-shrink: 0;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n /* Width controlled by [style.width.px] binding */\n}\n\n/* Tree Header */\n.tree-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.header-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n}\n\n.header-title i {\n font-size: 16px;\n}\n\n.query-count {\n font-weight: 400;\n opacity: 0.8;\n font-size: 13px;\n}\n\n.header-actions {\n display: flex;\n gap: 4px;\n}\n\n.icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: color-mix(in srgb, var(--mj-text-inverse) 15%, transparent);\n color: var(--mj-text-inverse);\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.icon-btn:hover {\n background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n}\n\n/* Tree Search */\n.tree-search {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding-left: 10px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.search-input-wrapper:focus-within {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.search-icon {\n color: var(--mj-text-disabled);\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.search-input {\n flex: 1;\n min-width: 0;\n border: none;\n outline: none;\n padding: 8px 0;\n font-size: 14px;\n background: transparent;\n}\n\n.search-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.clear-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n margin-right: 4px;\n border-radius: 4px;\n}\n\n.clear-btn:hover {\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n/* Status Filter Bar */\n.status-filter-bar {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n}\n\n.status-filter-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 12px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-disabled);\n font-size: 11px;\n cursor: pointer;\n transition: all 0.15s ease;\n line-height: 1.2;\n}\n\n.status-filter-chip:hover {\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--chip-color, var(--mj-text-disabled));\n}\n\n.status-filter-chip.active {\n background: var(--chip-color, var(--mj-text-disabled));\n border-color: var(--chip-color, var(--mj-text-disabled));\n color: var(--mj-text-inverse);\n}\n\n.status-filter-chip i {\n font-size: 10px;\n}\n\n.chip-count {\n font-weight: 600;\n font-size: 10px;\n opacity: 0.85;\n}\n\n/* Status Dot on Query Items */\n.status-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n margin-top: 4px;\n}\n\n/* Status Badge on Non-Approved Queries */\n.query-status-badge {\n font-size: 9px;\n color: var(--mj-text-inverse);\n padding: 1px 6px;\n border-radius: 8px;\n flex-shrink: 0;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n margin-top: 2px;\n}\n\n/* Tree Content */\n.tree-content {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n/* Loading State */\n.loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n/* Category Tree */\n.category-tree {\n padding: 0 4px;\n}\n\n.category-item {\n margin-bottom: 2px;\n}\n\n.category-header {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s ease;\n}\n\n.category-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon {\n font-size: 10px;\n color: var(--mj-text-disabled);\n width: 12px;\n text-align: center;\n}\n\n.category-icon {\n color: var(--mj-status-warning);\n font-size: 14px;\n}\n\n.category-name {\n flex: 1;\n font-weight: 500;\n color: var(--mj-text-primary);\n font-size: 13px;\n}\n\n.category-count {\n color: var(--mj-text-disabled);\n font-size: 12px;\n}\n\n.category-add-btn {\n display: none;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n border-radius: 4px;\n background: transparent;\n color: var(--mj-text-muted);\n cursor: pointer;\n font-size: 11px;\n flex-shrink: 0;\n transition: background 0.15s ease, color 0.15s ease;\n}\n\n.category-header:hover .category-add-btn {\n display: flex;\n}\n\n.category-add-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n/* Query Items */\n.category-queries {\n margin-left: 28px;\n}\n\n.query-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n margin: 2px 0;\n}\n\n.query-item:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.query-item.selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-left: 3px solid var(--mj-status-info);\n margin-left: -3px;\n}\n\n.query-item.hidden {\n display: none;\n}\n\n.query-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n margin-top: 2px;\n}\n\n.query-info {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.query-name {\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-description {\n font-size: 11px;\n color: var(--mj-text-disabled);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.param-icon {\n color: var(--mj-status-warning);\n font-size: 12px;\n margin-top: 2px;\n}\n\n.query-details-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 4px;\n opacity: 0;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.query-item:hover .query-details-btn {\n opacity: 1;\n}\n\n.query-details-btn:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n color: var(--mj-brand-primary);\n}\n\n/* Resize Handle */\n.resize-handle {\n flex-shrink: 0;\n width: 6px;\n cursor: col-resize;\n background: transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s ease;\n position: relative;\n z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.resize-handle-grip {\n width: 2px;\n height: 32px;\n border-radius: 1px;\n background: var(--mj-border-strong);\n transition: background 0.15s ease;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle.active .resize-handle-grip {\n background: var(--mj-brand-primary);\n}\n\n/* Prevent text selection and set cursor during resize */\n.query-browser-container.resizing {\n cursor: col-resize;\n user-select: none;\n}\n\n.query-browser-container.resizing * {\n pointer-events: none;\n}\n\n.query-browser-container.resizing .resize-handle {\n pointer-events: auto;\n}\n\n/* Right Panel: Query Viewer */\n.query-viewer-panel {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n}\n\n/* No Selection State \u2014 fills the viewer panel (host centers its own content) */\n.no-selection {\n flex: 1;\n}\n\n/* Query Viewer Header */\n.query-viewer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.query-viewer-title {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 15px;\n font-weight: 600;\n color: var(--mj-text-primary);\n min-width: 0;\n overflow: hidden;\n}\n\n.query-viewer-title i {\n color: var(--mj-brand-primary);\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.query-viewer-title span {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.query-viewer-status-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 12px;\n border-radius: 14px;\n color: var(--mj-text-inverse);\n font-size: 13px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n flex-shrink: 0;\n}\n\n.query-viewer-status-pill i {\n font-size: 12px;\n}\n\n.query-viewer-status-pill.approved {\n opacity: 0.7;\n}\n\n.query-viewer-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n/* Query Viewer fills remaining space */\nmj-query-viewer {\n flex: 1;\n min-height: 0;\n}\n\n/* Scrollbar styling */\n.tree-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .query-browser-container {\n flex-direction: column;\n }\n\n .query-tree-panel {\n width: 100% !important;\n height: 40%;\n border-right: none;\n border-bottom: 1px solid var(--mj-border-default);\n }\n\n .resize-handle {\n display: none;\n }\n\n .query-viewer-panel {\n height: 60%;\n }\n}\n\n/* \u2500\u2500\u2500 Right-panel icon button override (white background context) \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-viewer-header .icon-btn {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.query-viewer-header .icon-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Drawer Backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-backdrop {\n position: fixed;\n inset: 0;\n background: var(--mj-bg-overlay);\n z-index: 1100;\n animation: backdropFadeIn 0.22s ease-out;\n}\n\n@keyframes backdropFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n/* \u2500\u2500\u2500 Drawer Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n width: 480px;\n max-width: 96vw;\n background: var(--mj-bg-surface);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);\n z-index: 1101;\n display: flex;\n flex-direction: column;\n animation: drawerSlideIn 0.22s ease-out;\n}\n\n@keyframes drawerSlideIn {\n from { transform: translateX(100%); }\n to { transform: translateX(0); }\n}\n\n/* \u2500\u2500\u2500 Drawer Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n background: linear-gradient(135deg, var(--mj-brand-primary) 0%, var(--mj-brand-primary-hover) 100%);\n color: var(--mj-text-inverse);\n flex-shrink: 0;\n}\n\n.query-drawer-title {\n display: flex;\n align-items: center;\n gap: 12px;\n min-width: 0;\n}\n\n.query-drawer-title > i {\n font-size: 18px;\n opacity: 0.9;\n flex-shrink: 0;\n}\n\n.query-drawer-title-main {\n font-size: 16px;\n font-weight: 600;\n line-height: 1.2;\n}\n\n.query-drawer-title-sub {\n font-size: 12px;\n opacity: 0.75;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 360px;\n margin-top: 2px;\n}\n\n.query-drawer-close {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n background: rgba(255, 255, 255, 0.15);\n color: var(--mj-text-inverse);\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n flex-shrink: 0;\n transition: background 0.15s ease;\n}\n\n.query-drawer-close:hover {\n background: rgba(255, 255, 255, 0.28);\n}\n\n/* \u2500\u2500\u2500 Drawer Body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-body {\n flex: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.query-drawer-body::-webkit-scrollbar { width: 6px; }\n.query-drawer-body::-webkit-scrollbar-track { background: var(--mj-bg-surface-sunken); }\n.query-drawer-body::-webkit-scrollbar-thumb { background: var(--mj-border-strong); border-radius: 3px; }\n.query-drawer-body::-webkit-scrollbar-thumb:hover { background: var(--mj-text-disabled); }\n\n/* \u2500\u2500\u2500 Drawer Form Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.drawer-row {\n display: flex;\n gap: 12px;\n}\n\n.drawer-field-flex {\n flex: 1;\n min-width: 0;\n}\n\n.drawer-field-sql {\n flex: 1;\n}\n\n.drawer-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.drawer-required {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n.drawer-input,\n.drawer-select,\n.drawer-textarea {\n width: 100%;\n padding: 8px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n box-sizing: border-box;\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n outline: none;\n font-family: inherit;\n}\n\n.drawer-input:focus,\n.drawer-select:focus,\n.drawer-textarea:focus {\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.drawer-input:disabled,\n.drawer-select:disabled,\n.drawer-textarea:disabled {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.drawer-textarea {\n resize: vertical;\n min-height: 70px;\n}\n\n.drawer-sql-editor {\n display: block;\n min-height: 220px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.drawer-field-error .drawer-input,\n.drawer-field-error .drawer-select {\n border-color: var(--mj-status-error);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-error) 12%, transparent);\n}\n\n.drawer-field-hint {\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.drawer-field-inline {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.drawer-field-inline .drawer-field-hint {\n color: var(--mj-text-muted);\n}\n\n.drawer-reusable-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n cursor: pointer;\n white-space: nowrap;\n}\n\n/* \u2500\u2500\u2500 Open Full Record link \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-full-record {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 14px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-border-default));\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-brand-primary-hover);\n flex-wrap: wrap;\n}\n\n.drawer-full-record > i {\n flex-shrink: 0;\n color: var(--mj-brand-primary);\n}\n\n.drawer-link-btn {\n background: none;\n border: none;\n color: var(--mj-brand-primary-hover);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n padding: 0;\n text-decoration: underline;\n text-underline-offset: 2px;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n}\n\n.drawer-link-btn:hover {\n color: var(--mj-brand-primary-active);\n}\n\n/* \u2500\u2500\u2500 Drawer Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.query-drawer-footer {\n flex-shrink: 0;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-card);\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.drawer-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--mj-status-error-bg);\n border: 1px solid var(--mj-status-error-border);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-status-error-text);\n}\n\n.drawer-footer-actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n/* \u2500\u2500\u2500 Drawer Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.drawer-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 18px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n border: 1px solid transparent;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.drawer-btn:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.drawer-btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.drawer-btn-primary:hover:not(:disabled) {\n background: var(--mj-brand-primary-hover);\n border-color: var(--mj-brand-primary-hover);\n}\n\n.drawer-btn-secondary {\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n border-color: var(--mj-border-default);\n}\n\n.drawer-btn-secondary:hover:not(:disabled) {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-primary);\n}\n\n/* \u2500\u2500\u2500 Responsive drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 600px) {\n .query-drawer {\n width: 100vw;\n max-width: 100vw;\n }\n\n .drawer-row {\n flex-direction: column;\n }\n}\n"] }]
1856
1856
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.MJConfirmService }], { drawerSqlEditor: [{
1857
1857
  type: ViewChild,
1858
1858
  args: ['drawerSqlEditor']
package/dist/Testing/components/testing-runs.component.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"testing-runs.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EACN,SAAS,EAGT,YAAY,EACZ,iBAAiB,EAEjB,gBAAgB,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAA2C,MAAM,MAAM,CAAC;AAI3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAkC,MAAM,4BAA4B,CAAC;AACnG,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAE3B,MAAM,6CAA6C,CAAC;;AAErD,KAAK,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvD,UAAU,eAAe;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAa;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBAwiCa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IA8CnD,sBAAsB,EAAE,6BAA6B;IAC5D,OAAO,CAAC,oBAAoB;IAC5B,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,gBAAgB;IAhDjB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAQ;IAC7D,8FAA8F;IACrF,WAAW,UAAS;IACnB,WAAW,wCAA+C;IAEpE,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,cAAc,CAAwC;IAG9D,WAAW,EAAE,eAAe,CAI1B;IAGF,cAAc,SAAK;IACnB,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAQ;IACzC,gBAAgB,SAAM;IACtB,oBAAoB,UAAS;IAC7B,YAAY,UAAS;IAErB,WAAW,EAAE,0BAA0B,GAAG,IAAI,CAAQ;IAEtD,gFAAgF;IAChF,OAAO,CAAC,iBAAiB,CAAoC;IAE7D,eAAe,EAAE,qBAAqB,CAAyD;IAG/F,aAAa,EAAG,UAAU,CAAC,0BAA0B,EAAE,CAAC,CAAC;IACzD,cAAc,EAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAG3C,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAM/E;IAEF,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,CAAmC;gBAGzD,sBAAsB,EAAE,6BAA6B,EACpD,oBAAoB,EAAE,oBAAoB,EAC1C,GAAG,EAAE,iBAAiB,EACtB,gBAAgB,EAAE,gBAAgB;IAG5C,QAAQ,IAAI,IAAI;IAQhB;;;;;;;;OAQG;IACH,OAAO,CAAC,gCAAgC;IAyBxC;;;;;OAKG;IACH,OAAO,CAAC,6BAA6B;IAsBrC,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;IAQnB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IAO3C,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQrC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQjC,WAAW,IAAI,IAAI;IAOnB,OAAO,IAAI,IAAI;IASf,YAAY,IAAI,IAAI;IAMpB,SAAS,CAAC,GAAG,EAAE,0BAA0B,GAAG,IAAI;IAOhD,gBAAgB,IAAI,IAAI;IAMxB,cAAc,CAAC,GAAG,EAAE,0BAA0B,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAKxE,SAAS,CAAC,GAAG,EAAE,0BAA0B,GAAG,IAAI;IAK1C,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IA6BrC,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK1C,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,0BAA0B,GAAG,MAAM;IAMrE,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAQ5C,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IActC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAUlC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIpC,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAQrC,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;yCAjbZ,oBAAoB;2CAApB,oBAAoB;CAqbhC"}
1
+ {"version":3,"file":"testing-runs.component.d.ts","sourceRoot":"","sources":["../../../src/Testing/components/testing-runs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,MAAM,EACN,SAAS,EAGT,YAAY,EACZ,iBAAiB,EAEjB,gBAAgB,EAEjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAA2C,MAAM,MAAM,CAAC;AAI3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAkC,MAAM,4BAA4B,CAAC;AACnG,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,EAE3B,MAAM,6CAA6C,CAAC;;AAErD,KAAK,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtE,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvD,UAAU,eAAe;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,aAAa;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBA8iCa,oBAAqB,YAAW,MAAM,EAAE,SAAS;IA8CnD,sBAAsB,EAAE,6BAA6B;IAC5D,OAAO,CAAC,oBAAoB;IAC5B,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,gBAAgB;IAhDjB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAQ;IAC7D,8FAA8F;IACrF,WAAW,UAAS;IACnB,WAAW,wCAA+C;IAEpE,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,cAAc,CAAwC;IAG9D,WAAW,EAAE,eAAe,CAI1B;IAGF,cAAc,SAAK;IACnB,iBAAiB,EAAE,OAAO,GAAG,IAAI,CAAQ;IACzC,gBAAgB,SAAM;IACtB,oBAAoB,UAAS;IAC7B,YAAY,UAAS;IAErB,WAAW,EAAE,0BAA0B,GAAG,IAAI,CAAQ;IAEtD,gFAAgF;IAChF,OAAO,CAAC,iBAAiB,CAAoC;IAE7D,eAAe,EAAE,qBAAqB,CAAyD;IAG/F,aAAa,EAAG,UAAU,CAAC,0BAA0B,EAAE,CAAC,CAAC;IACzD,cAAc,EAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAG3C,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAM/E;IAEF,QAAQ,CAAC,YAAY,EAAE,MAAM,EAAE,CAAmC;gBAGzD,sBAAsB,EAAE,6BAA6B,EACpD,oBAAoB,EAAE,oBAAoB,EAC1C,GAAG,EAAE,iBAAiB,EACtB,gBAAgB,EAAE,gBAAgB;IAG5C,QAAQ,IAAI,IAAI;IAQhB;;;;;;;;OAQG;IACH,OAAO,CAAC,gCAAgC;IAyBxC;;;;;OAKG;IACH,OAAO,CAAC,6BAA6B;IAsBrC,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;IAQnB,eAAe,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI;IAO3C,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQrC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAQjC,WAAW,IAAI,IAAI;IAOnB,OAAO,IAAI,IAAI;IASf,YAAY,IAAI,IAAI;IAMpB,SAAS,CAAC,GAAG,EAAE,0BAA0B,GAAG,IAAI;IAOhD,gBAAgB,IAAI,IAAI;IAMxB,cAAc,CAAC,GAAG,EAAE,0BAA0B,EAAE,KAAK,EAAE,UAAU,GAAG,IAAI;IAKxE,SAAS,CAAC,GAAG,EAAE,0BAA0B,GAAG,IAAI;IAK1C,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IA6BrC,sBAAsB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAK1C,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,0BAA0B,GAAG,MAAM;IAMrE,cAAc,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM;IAQ5C,kBAAkB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IActC,cAAc,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAUlC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIpC,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAQrC,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,cAAc;IAetB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,wBAAwB;IAUhC,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;yCAjbZ,oBAAoB;2CAApB,oBAAoB;CAqbhC"}
package/dist/Testing/components/testing-runs.component.js CHANGED
@@ -194,22 +194,26 @@ function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_34_Templa
194
194
  i0.ɵɵelement(2, "i", 81);
195
195
  i0.ɵɵtext(3, " Execution Context");
196
196
  i0.ɵɵelementEnd();
197
- i0.ɵɵelement(4, "mj-execution-context");
197
+ i0.ɵɵelement(4, "mj-execution-context", 82);
198
198
  i0.ɵɵelementEnd();
199
+ } if (rf & 2) {
200
+ const ctx_r2 = i0.ɵɵnextContext(3);
201
+ i0.ɵɵadvance(4);
202
+ i0.ɵɵproperty("machineName", ctx_r2.SelectedRun.machineName ?? null)("machineId", ctx_r2.SelectedRun.machineID ?? null)("runByUserName", ctx_r2.SelectedRun.runByUserName ?? null)("runByUserEmail", ctx_r2.SelectedRun.runByUserEmail ?? null)("runContextDetailsJson", ctx_r2.SelectedRun.runContextDetails ?? null);
199
203
  } }
200
204
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_8_Template(rf, ctx) { if (rf & 1) {
201
- i0.ɵɵelement(0, "i", 85);
205
+ i0.ɵɵelement(0, "i", 86);
202
206
  i0.ɵɵtext(1, " Yes ");
203
207
  } }
204
208
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_9_Template(rf, ctx) { if (rf & 1) {
205
- i0.ɵɵelement(0, "i", 86);
209
+ i0.ɵɵelement(0, "i", 87);
206
210
  i0.ɵɵtext(1, " No ");
207
211
  } }
208
212
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_10_Template(rf, ctx) { if (rf & 1) {
209
213
  i0.ɵɵtext(0, " -- ");
210
214
  } }
211
215
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_11_Template(rf, ctx) { if (rf & 1) {
212
- i0.ɵɵelementStart(0, "div", 84);
216
+ i0.ɵɵelementStart(0, "div", 85);
213
217
  i0.ɵɵtext(1);
214
218
  i0.ɵɵelementEnd();
215
219
  } if (rf & 2) {
@@ -218,19 +222,19 @@ function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Condit
218
222
  i0.ɵɵtextInterpolate(ctx_r2.SelectedRun.humanComments);
219
223
  } }
220
224
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Template(rf, ctx) { if (rf & 1) {
221
- i0.ɵɵelementStart(0, "div", 79)(1, "span", 82);
225
+ i0.ɵɵelementStart(0, "div", 79)(1, "span", 83);
222
226
  i0.ɵɵtext(2, "Rating:");
223
227
  i0.ɵɵelementEnd();
224
- i0.ɵɵelementStart(3, "span", 83);
228
+ i0.ɵɵelementStart(3, "span", 84);
225
229
  i0.ɵɵtext(4);
226
230
  i0.ɵɵelementEnd();
227
- i0.ɵɵelementStart(5, "span", 82);
231
+ i0.ɵɵelementStart(5, "span", 83);
228
232
  i0.ɵɵtext(6, "Correct:");
229
233
  i0.ɵɵelementEnd();
230
- i0.ɵɵelementStart(7, "span", 83);
234
+ i0.ɵɵelementStart(7, "span", 84);
231
235
  i0.ɵɵconditionalCreate(8, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_8_Template, 2, 0)(9, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_9_Template, 2, 0)(10, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_10_Template, 1, 0);
232
236
  i0.ɵɵelementEnd();
233
- i0.ɵɵconditionalCreate(11, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_11_Template, 2, 1, "div", 84);
237
+ i0.ɵɵconditionalCreate(11, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Conditional_11_Template, 2, 1, "div", 85);
234
238
  i0.ɵɵelementEnd();
235
239
  } if (rf & 2) {
236
240
  const ctx_r2 = i0.ɵɵnextContext(3);
@@ -243,7 +247,7 @@ function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_39_Templa
243
247
  } }
244
248
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_For_6_Template(rf, ctx) { if (rf & 1) {
245
249
  const _r13 = i0.ɵɵgetCurrentView();
246
- i0.ɵɵelementStart(0, "button", 98);
250
+ i0.ɵɵelementStart(0, "button", 99);
247
251
  i0.ɵɵlistener("click", function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_For_6_Template_button_click_0_listener() { const n_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.feedbackRating = n_r14); });
248
252
  i0.ɵɵtext(1);
249
253
  i0.ɵɵelementEnd();
@@ -256,34 +260,34 @@ function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_For_6_
256
260
  } }
257
261
  function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_Template(rf, ctx) { if (rf & 1) {
258
262
  const _r12 = i0.ɵɵgetCurrentView();
259
- i0.ɵɵelementStart(0, "div", 80)(1, "div", 87)(2, "label");
263
+ i0.ɵɵelementStart(0, "div", 80)(1, "div", 88)(2, "label");
260
264
  i0.ɵɵtext(3, "Rating");
261
265
  i0.ɵɵelementEnd();
262
- i0.ɵɵelementStart(4, "div", 88);
263
- i0.ɵɵrepeaterCreate(5, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_For_6_Template, 2, 3, "button", 89, i0.ɵɵrepeaterTrackByIdentity);
266
+ i0.ɵɵelementStart(4, "div", 89);
267
+ i0.ɵɵrepeaterCreate(5, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_For_6_Template, 2, 3, "button", 90, i0.ɵɵrepeaterTrackByIdentity);
264
268
  i0.ɵɵelementEnd()();
265
- i0.ɵɵelementStart(7, "div", 90)(8, "label");
269
+ i0.ɵɵelementStart(7, "div", 91)(8, "label");
266
270
  i0.ɵɵtext(9, "Is the result correct?");
267
271
  i0.ɵɵelementEnd();
268
- i0.ɵɵelementStart(10, "div", 91)(11, "button", 92);
272
+ i0.ɵɵelementStart(10, "div", 92)(11, "button", 93);
269
273
  i0.ɵɵlistener("click", function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.feedbackIsCorrect = true); });
270
- i0.ɵɵelement(12, "i", 93);
274
+ i0.ɵɵelement(12, "i", 94);
271
275
  i0.ɵɵtext(13, " Yes ");
272
276
  i0.ɵɵelementEnd();
273
- i0.ɵɵelementStart(14, "button", 92);
277
+ i0.ɵɵelementStart(14, "button", 93);
274
278
  i0.ɵɵlistener("click", function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.feedbackIsCorrect = false); });
275
279
  i0.ɵɵelement(15, "i", 39);
276
280
  i0.ɵɵtext(16, " No ");
277
281
  i0.ɵɵelementEnd()()();
278
- i0.ɵɵelementStart(17, "div", 94)(18, "label");
282
+ i0.ɵɵelementStart(17, "div", 95)(18, "label");
279
283
  i0.ɵɵtext(19, "Comments");
280
284
  i0.ɵɵelementEnd();
281
- i0.ɵɵelementStart(20, "textarea", 95);
285
+ i0.ɵɵelementStart(20, "textarea", 96);
282
286
  i0.ɵɵlistener("input", function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_Template_textarea_input_20_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnFeedbackCommentInput($event)); });
283
287
  i0.ɵɵelementEnd()();
284
- i0.ɵɵelementStart(21, "button", 96);
288
+ i0.ɵɵelementStart(21, "button", 97);
285
289
  i0.ɵɵlistener("click", function TestingRunsComponent_ng_template_2_Conditional_46_Conditional_40_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.SubmitFeedback()); });
286
- i0.ɵɵelement(22, "i", 97);
290
+ i0.ɵɵelement(22, "i", 98);
287
291
  i0.ɵɵtext(23);
288
292
  i0.ɵɵelementEnd()();
289
293
  } if (rf & 2) {
@@ -343,7 +347,7 @@ function TestingRunsComponent_ng_template_2_Conditional_46_Template(rf, ctx) { i
343
347
  i0.ɵɵelementEnd();
344
348
  i0.ɵɵelement(33, "app-evaluation-badge", 76);
345
349
  i0.ɵɵelementEnd();
346
- i0.ɵɵconditionalCreate(34, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_34_Template, 5, 0, "div", 74);
350
+ i0.ɵɵconditionalCreate(34, TestingRunsComponent_ng_template_2_Conditional_46_Conditional_34_Template, 5, 5, "div", 74);
347
351
  i0.ɵɵelementStart(35, "div", 77)(36, "h4");
348
352
  i0.ɵɵelement(37, "i", 78);
349
353
  i0.ɵɵtext(38, " Human Feedback");
@@ -828,7 +832,7 @@ export class TestingRunsComponent {
828
832
  static ɵfac = function TestingRunsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingRunsComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i2.TestingDialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
829
833
  static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingRunsComponent, selectors: [["app-testing-runs"]], hostBindings: function TestingRunsComponent_HostBindings(rf, ctx) { if (rf & 1) {
830
834
  i0.ɵɵlistener("keydown.escape", function TestingRunsComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
831
- } }, inputs: { initialState: "initialState", HideToolbar: "HideToolbar" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 4, vars: 1, consts: [["content", ""], [4, "ngTemplateOutlet"], ["Title", "Test Runs", "Icon", "fa-solid fa-list-check", "Subtitle", "Test execution history and monitoring"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-play"], [1, "action-btn-label"], [1, "runs-container", 3, "keydown.escape"], [1, "filter-bar"], [1, "filter-left"], [1, "filter-chips"], [1, "chip", 3, "active"], [1, "result-count"], [1, "filter-right"], [1, "time-select", 3, "change", "value"], ["value", "today"], ["value", "week"], ["value", "month"], ["value", "90days"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by test name...", 3, "input", "value"], [1, "clear-search"], [1, "stats-row"], [1, "runs-table-wrapper"], [1, "table-header"], [1, "col", "col-name"], [1, "col", "col-eval"], [1, "col", "col-score"], [1, "col", "col-duration"], [1, "col", "col-cost"], [1, "col", "col-time"], [1, "col", "col-actions"], [1, "table-loading"], ["Variant", "no-results", "Icon", "fa-solid fa-inbox", "Title", "No test runs found", "Message", "Try adjusting your filters or run a new test."], [1, "chip", 3, "click"], [3, "class"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [1, "stat-card"], [1, "stat-icon", "total"], [1, "fa-solid", "fa-hashtag"], [1, "stat-body"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "pass"], [1, "fa-solid", "fa-check-circle"], [1, "stat-icon", "duration"], [1, "fa-solid", "fa-clock"], [1, "stat-icon", "cost"], [1, "fa-solid", "fa-dollar-sign"], ["text", "Loading test runs..."], [1, "table-row", 3, "is-running", "is-selected"], [1, "table-row", 3, "click"], [1, "test-name-link", 3, "click"], ["mode", "compact", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [3, "score", "showBar"], [3, "cost"], ["title", "View details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Re-run test", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "detail-overlay", 3, "click"], [1, "detail-panel"], [1, "detail-panel-header"], [1, "detail-title-section"], [3, "status"], [1, "close-btn", 3, "click"], [1, "detail-panel-body"], [1, "detail-metrics"], [1, "detail-metric"], [1, "dm-label"], [1, "dm-value"], [1, "detail-section"], [1, "fa-solid", "fa-clipboard-check"], ["mode", "expanded", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [1, "detail-section", "feedback-section"], [1, "fa-solid", "fa-comment-dots"], [1, "existing-feedback"], [1, "feedback-form"], [1, "fa-solid", "fa-server"], [1, "feedback-label"], [1, "feedback-value"], [1, "feedback-comments"], [1, "fa-solid", "fa-check", 2, "color", "var(--mj-status-success)"], [1, "fa-solid", "fa-times", 2, "color", "var(--mj-status-error)"], [1, "rating-row"], [1, "rating-buttons"], [1, "rating-btn", 3, "selected"], [1, "correctness-row"], [1, "toggle-group"], [1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "comments-row"], ["rows", "3", "placeholder", "Optional feedback comments...", 3, "input", "value"], [1, "btn", "btn-primary", "submit-feedback-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "rating-btn", 3, "click"]], template: function TestingRunsComponent_Template(rf, ctx) { if (rf & 1) {
835
+ } }, inputs: { initialState: "initialState", HideToolbar: "HideToolbar" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 4, vars: 1, consts: [["content", ""], [4, "ngTemplateOutlet"], ["Title", "Test Runs", "Icon", "fa-solid fa-list-check", "Subtitle", "Test execution history and monitoring"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-play"], [1, "action-btn-label"], [1, "runs-container", 3, "keydown.escape"], [1, "filter-bar"], [1, "filter-left"], [1, "filter-chips"], [1, "chip", 3, "active"], [1, "result-count"], [1, "filter-right"], [1, "time-select", 3, "change", "value"], ["value", "today"], ["value", "week"], ["value", "month"], ["value", "90days"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by test name...", 3, "input", "value"], [1, "clear-search"], [1, "stats-row"], [1, "runs-table-wrapper"], [1, "table-header"], [1, "col", "col-name"], [1, "col", "col-eval"], [1, "col", "col-score"], [1, "col", "col-duration"], [1, "col", "col-cost"], [1, "col", "col-time"], [1, "col", "col-actions"], [1, "table-loading"], ["Variant", "no-results", "Icon", "fa-solid fa-inbox", "Title", "No test runs found", "Message", "Try adjusting your filters or run a new test."], [1, "chip", 3, "click"], [3, "class"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [1, "stat-card"], [1, "stat-icon", "total"], [1, "fa-solid", "fa-hashtag"], [1, "stat-body"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "pass"], [1, "fa-solid", "fa-check-circle"], [1, "stat-icon", "duration"], [1, "fa-solid", "fa-clock"], [1, "stat-icon", "cost"], [1, "fa-solid", "fa-dollar-sign"], ["text", "Loading test runs..."], [1, "table-row", 3, "is-running", "is-selected"], [1, "table-row", 3, "click"], [1, "test-name-link", 3, "click"], ["mode", "compact", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [3, "score", "showBar"], [3, "cost"], ["title", "View details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Re-run test", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "detail-overlay", 3, "click"], [1, "detail-panel"], [1, "detail-panel-header"], [1, "detail-title-section"], [3, "status"], [1, "close-btn", 3, "click"], [1, "detail-panel-body"], [1, "detail-metrics"], [1, "detail-metric"], [1, "dm-label"], [1, "dm-value"], [1, "detail-section"], [1, "fa-solid", "fa-clipboard-check"], ["mode", "expanded", 3, "executionStatus", "originalStatus", "autoScore", "passedChecks", "failedChecks", "totalChecks", "humanRating", "humanIsCorrect", "hasHumanFeedback", "preferences"], [1, "detail-section", "feedback-section"], [1, "fa-solid", "fa-comment-dots"], [1, "existing-feedback"], [1, "feedback-form"], [1, "fa-solid", "fa-server"], [3, "machineName", "machineId", "runByUserName", "runByUserEmail", "runContextDetailsJson"], [1, "feedback-label"], [1, "feedback-value"], [1, "feedback-comments"], [1, "fa-solid", "fa-check", 2, "color", "var(--mj-status-success)"], [1, "fa-solid", "fa-times", 2, "color", "var(--mj-status-error)"], [1, "rating-row"], [1, "rating-buttons"], [1, "rating-btn", 3, "selected"], [1, "correctness-row"], [1, "toggle-group"], [1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "comments-row"], ["rows", "3", "placeholder", "Optional feedback comments...", 3, "input", "value"], [1, "btn", "btn-primary", "submit-feedback-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "rating-btn", 3, "click"]], template: function TestingRunsComponent_Template(rf, ctx) { if (rf & 1) {
832
836
  i0.ɵɵconditionalCreate(0, TestingRunsComponent_Conditional_0_Template, 1, 1, "ng-container")(1, TestingRunsComponent_Conditional_1_Template, 10, 2, "mj-page-layout");
833
837
  i0.ɵɵtemplate(2, TestingRunsComponent_ng_template_2_Template, 47, 15, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
834
838
  } if (rf & 2) {
@@ -1070,7 +1074,13 @@ export class TestingRunsComponent {
1070
1074
  @if (SelectedRun.targetType) {
1071
1075
  <div class="detail-section">
1072
1076
  <h4><i class="fa-solid fa-server"></i> Execution Context</h4>
1073
- <mj-execution-context></mj-execution-context>
1077
+ <mj-execution-context
1078
+ [machineName]="SelectedRun.machineName ?? null"
1079
+ [machineId]="SelectedRun.machineID ?? null"
1080
+ [runByUserName]="SelectedRun.runByUserName ?? null"
1081
+ [runByUserEmail]="SelectedRun.runByUserEmail ?? null"
1082
+ [runContextDetailsJson]="SelectedRun.runContextDetails ?? null">
1083
+ </mj-execution-context>
1074
1084
  </div>
1075
1085
  }
1076
1086
 
@@ -1166,5 +1176,5 @@ export class TestingRunsComponent {
1166
1176
  type: HostListener,
1167
1177
  args: ['document:keydown.escape']
1168
1178
  }] }); })();
1169
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsComponent, { className: "TestingRunsComponent", filePath: "src/Testing/components/testing-runs.component.ts", lineNumber: 1105 }); })();
1179
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingRunsComponent, { className: "TestingRunsComponent", filePath: "src/Testing/components/testing-runs.component.ts", lineNumber: 1111 }); })();
1170
1180
  //# sourceMappingURL=testing-runs.component.js.map