@memberjunction/ng-dashboards 5.49.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.
- package/dist/AI/components/autotagging/tabs/sources-tab.component.js +1 -1
- package/dist/AI/components/autotagging/tabs/sources-tab.component.js.map +1 -1
- package/dist/AI/components/tags/tags-resource.component.js +1 -1
- package/dist/AI/components/tags/tags-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.d.ts +7 -0
- package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.js +25 -5
- package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.d.ts +7 -0
- package/dist/Lists/components/lists-my-lists-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.js +66 -37
- package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
- package/dist/QueryBrowser/query-browser-resource.component.js +2 -2
- package/package.json +61 -61
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-dashboards",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.50.0",
|
|
4
4
|
"description": "MemberJunction Dashboards",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"@angular/compiler-cli": "21.1.3",
|
|
87
87
|
"@types/d3": "^7.4.0",
|
|
88
88
|
"sass": "^1.97.3",
|
|
89
|
-
"@memberjunction/ng-test-utils": "5.
|
|
89
|
+
"@memberjunction/ng-test-utils": "5.50.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@angular/common": "21.1.3",
|
|
@@ -103,65 +103,65 @@
|
|
|
103
103
|
"@codemirror/merge": "^6.11.2",
|
|
104
104
|
"@codemirror/state": "^6.5.4",
|
|
105
105
|
"@codemirror/view": "^6.39.12",
|
|
106
|
-
"@memberjunction/actions-base": "5.
|
|
107
|
-
"@memberjunction/ai-core-plus": "5.
|
|
108
|
-
"@memberjunction/ai-engine-base": "5.
|
|
109
|
-
"@memberjunction/api-keys-base": "5.
|
|
110
|
-
"@memberjunction/core": "5.
|
|
111
|
-
"@memberjunction/core-entities": "5.
|
|
112
|
-
"@memberjunction/credentials": "5.
|
|
113
|
-
"@memberjunction/export-engine": "5.
|
|
114
|
-
"@memberjunction/global": "5.
|
|
115
|
-
"@memberjunction/graphql-dataprovider": "5.
|
|
116
|
-
"@memberjunction/integration-engine-base": "5.
|
|
117
|
-
"@memberjunction/interactive-component-types": "5.
|
|
118
|
-
"@memberjunction/lists-base": "5.
|
|
119
|
-
"@memberjunction/theme-engine": "5.
|
|
120
|
-
"@memberjunction/ng-action-gallery": "5.
|
|
121
|
-
"@memberjunction/ng-actions": "5.
|
|
122
|
-
"@memberjunction/ng-agent-requests": "5.
|
|
123
|
-
"@memberjunction/ng-agents": "5.
|
|
124
|
-
"@memberjunction/ng-ai-test-harness": "5.
|
|
125
|
-
"@memberjunction/ng-archive-manager": "5.
|
|
126
|
-
"@memberjunction/ng-base-application": "5.
|
|
127
|
-
"@memberjunction/ng-base-forms": "5.
|
|
128
|
-
"@memberjunction/ng-base-types": "5.
|
|
129
|
-
"@memberjunction/ng-clustering": "5.
|
|
130
|
-
"@memberjunction/ng-code-editor": "5.
|
|
131
|
-
"@memberjunction/ng-composer": "5.
|
|
132
|
-
"@memberjunction/ng-container-directives": "5.
|
|
133
|
-
"@memberjunction/ng-conversations": "5.
|
|
134
|
-
"@memberjunction/ng-core-entity-forms": "5.
|
|
135
|
-
"@memberjunction/ng-credentials": "5.
|
|
136
|
-
"@memberjunction/ng-dashboard-viewer": "5.
|
|
137
|
-
"@memberjunction/ng-entity-relationship-diagram": "5.
|
|
138
|
-
"@memberjunction/ng-entity-viewer": "5.
|
|
139
|
-
"@memberjunction/ng-explorer-settings": "5.
|
|
140
|
-
"@memberjunction/ng-export-service": "5.
|
|
141
|
-
"@memberjunction/ng-filter-builder": "5.
|
|
142
|
-
"@memberjunction/ng-list-management": "5.
|
|
143
|
-
"@memberjunction/ng-map-view": "5.
|
|
144
|
-
"@memberjunction/ng-markdown": "5.
|
|
145
|
-
"@memberjunction/ng-media-player": "5.
|
|
146
|
-
"@memberjunction/ng-notifications": "5.
|
|
147
|
-
"@memberjunction/ng-query-viewer": "5.
|
|
148
|
-
"@memberjunction/ng-react": "5.
|
|
149
|
-
"@memberjunction/ng-record-process-studio": "5.
|
|
150
|
-
"@memberjunction/ng-resource-permissions": "5.
|
|
151
|
-
"@memberjunction/ng-scheduling": "5.
|
|
152
|
-
"@memberjunction/ng-search": "5.
|
|
153
|
-
"@memberjunction/ng-shared": "5.
|
|
154
|
-
"@memberjunction/ng-shared-generic": "5.
|
|
155
|
-
"@memberjunction/ng-testing": "5.
|
|
156
|
-
"@memberjunction/ng-trees": "5.
|
|
157
|
-
"@memberjunction/ng-ui-components": "5.
|
|
158
|
-
"@memberjunction/ng-user-routines": "5.
|
|
159
|
-
"@memberjunction/ng-versions": "5.
|
|
160
|
-
"@memberjunction/ng-word-cloud": "5.
|
|
161
|
-
"@memberjunction/predictive-studio-core": "5.
|
|
162
|
-
"@memberjunction/tag-engine-base": "5.
|
|
163
|
-
"@memberjunction/templates-base-types": "5.
|
|
164
|
-
"@memberjunction/testing-engine-base": "5.
|
|
106
|
+
"@memberjunction/actions-base": "5.50.0",
|
|
107
|
+
"@memberjunction/ai-core-plus": "5.50.0",
|
|
108
|
+
"@memberjunction/ai-engine-base": "5.50.0",
|
|
109
|
+
"@memberjunction/api-keys-base": "5.50.0",
|
|
110
|
+
"@memberjunction/core": "5.50.0",
|
|
111
|
+
"@memberjunction/core-entities": "5.50.0",
|
|
112
|
+
"@memberjunction/credentials": "5.50.0",
|
|
113
|
+
"@memberjunction/export-engine": "5.50.0",
|
|
114
|
+
"@memberjunction/global": "5.50.0",
|
|
115
|
+
"@memberjunction/graphql-dataprovider": "5.50.0",
|
|
116
|
+
"@memberjunction/integration-engine-base": "5.50.0",
|
|
117
|
+
"@memberjunction/interactive-component-types": "5.50.0",
|
|
118
|
+
"@memberjunction/lists-base": "5.50.0",
|
|
119
|
+
"@memberjunction/theme-engine": "5.50.0",
|
|
120
|
+
"@memberjunction/ng-action-gallery": "5.50.0",
|
|
121
|
+
"@memberjunction/ng-actions": "5.50.0",
|
|
122
|
+
"@memberjunction/ng-agent-requests": "5.50.0",
|
|
123
|
+
"@memberjunction/ng-agents": "5.50.0",
|
|
124
|
+
"@memberjunction/ng-ai-test-harness": "5.50.0",
|
|
125
|
+
"@memberjunction/ng-archive-manager": "5.50.0",
|
|
126
|
+
"@memberjunction/ng-base-application": "5.50.0",
|
|
127
|
+
"@memberjunction/ng-base-forms": "5.50.0",
|
|
128
|
+
"@memberjunction/ng-base-types": "5.50.0",
|
|
129
|
+
"@memberjunction/ng-clustering": "5.50.0",
|
|
130
|
+
"@memberjunction/ng-code-editor": "5.50.0",
|
|
131
|
+
"@memberjunction/ng-composer": "5.50.0",
|
|
132
|
+
"@memberjunction/ng-container-directives": "5.50.0",
|
|
133
|
+
"@memberjunction/ng-conversations": "5.50.0",
|
|
134
|
+
"@memberjunction/ng-core-entity-forms": "5.50.0",
|
|
135
|
+
"@memberjunction/ng-credentials": "5.50.0",
|
|
136
|
+
"@memberjunction/ng-dashboard-viewer": "5.50.0",
|
|
137
|
+
"@memberjunction/ng-entity-relationship-diagram": "5.50.0",
|
|
138
|
+
"@memberjunction/ng-entity-viewer": "5.50.0",
|
|
139
|
+
"@memberjunction/ng-explorer-settings": "5.50.0",
|
|
140
|
+
"@memberjunction/ng-export-service": "5.50.0",
|
|
141
|
+
"@memberjunction/ng-filter-builder": "5.50.0",
|
|
142
|
+
"@memberjunction/ng-list-management": "5.50.0",
|
|
143
|
+
"@memberjunction/ng-map-view": "5.50.0",
|
|
144
|
+
"@memberjunction/ng-markdown": "5.50.0",
|
|
145
|
+
"@memberjunction/ng-media-player": "5.50.0",
|
|
146
|
+
"@memberjunction/ng-notifications": "5.50.0",
|
|
147
|
+
"@memberjunction/ng-query-viewer": "5.50.0",
|
|
148
|
+
"@memberjunction/ng-react": "5.50.0",
|
|
149
|
+
"@memberjunction/ng-record-process-studio": "5.50.0",
|
|
150
|
+
"@memberjunction/ng-resource-permissions": "5.50.0",
|
|
151
|
+
"@memberjunction/ng-scheduling": "5.50.0",
|
|
152
|
+
"@memberjunction/ng-search": "5.50.0",
|
|
153
|
+
"@memberjunction/ng-shared": "5.50.0",
|
|
154
|
+
"@memberjunction/ng-shared-generic": "5.50.0",
|
|
155
|
+
"@memberjunction/ng-testing": "5.50.0",
|
|
156
|
+
"@memberjunction/ng-trees": "5.50.0",
|
|
157
|
+
"@memberjunction/ng-ui-components": "5.50.0",
|
|
158
|
+
"@memberjunction/ng-user-routines": "5.50.0",
|
|
159
|
+
"@memberjunction/ng-versions": "5.50.0",
|
|
160
|
+
"@memberjunction/ng-word-cloud": "5.50.0",
|
|
161
|
+
"@memberjunction/predictive-studio-core": "5.50.0",
|
|
162
|
+
"@memberjunction/tag-engine-base": "5.50.0",
|
|
163
|
+
"@memberjunction/templates-base-types": "5.50.0",
|
|
164
|
+
"@memberjunction/testing-engine-base": "5.50.0",
|
|
165
165
|
"ag-grid-angular": "^35.0.1",
|
|
166
166
|
"ag-grid-community": "^35.0.1",
|
|
167
167
|
"angular-split": "^20.0.0",
|