@memberjunction/ng-dashboards 5.11.0 → 5.13.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/agents/agent-configuration.component.d.ts +34 -2
- package/dist/AI/components/agents/agent-configuration.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-configuration.component.js +586 -223
- package/dist/AI/components/agents/agent-configuration.component.js.map +1 -1
- package/dist/AI/components/agents/agent-editor.component.js +2 -2
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts +8 -0
- package/dist/AI/components/agents/agent-filter-panel.component.d.ts.map +1 -1
- package/dist/AI/components/agents/agent-filter-panel.component.js +85 -52
- package/dist/AI/components/agents/agent-filter-panel.component.js.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.d.ts +1 -0
- package/dist/AI/components/charts/performance-heatmap.component.d.ts.map +1 -1
- package/dist/AI/components/charts/performance-heatmap.component.js +27 -5
- package/dist/AI/components/charts/performance-heatmap.component.js.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.d.ts +5 -0
- package/dist/AI/components/charts/time-series-chart.component.d.ts.map +1 -1
- package/dist/AI/components/charts/time-series-chart.component.js +23 -8
- package/dist/AI/components/charts/time-series-chart.component.js.map +1 -1
- package/dist/AI/components/execution-monitoring.component.js +2 -2
- package/dist/AI/components/execution-monitoring.component.js.map +1 -1
- package/dist/AI/components/models/model-management.component.js +2 -2
- package/dist/AI/components/prompts/model-prompt-priority-matrix.component.js +2 -2
- package/dist/AI/components/prompts/prompt-filter-panel.component.js +2 -2
- package/dist/AI/components/prompts/prompt-management.component.js +3 -3
- package/dist/AI/components/prompts/prompt-management.component.js.map +1 -1
- package/dist/AI/components/prompts/prompt-version-control.component.js +2 -2
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts +83 -0
- package/dist/AI/components/requests/agent-requests-resource.component.d.ts.map +1 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js +547 -0
- package/dist/AI/components/requests/agent-requests-resource.component.js.map +1 -0
- package/dist/AI/components/system/system-config-filter-panel.component.js +2 -2
- package/dist/AI/components/system/system-configuration.component.js +2 -2
- package/dist/AI/components/widgets/kpi-card.component.js +7 -7
- package/dist/AI/components/widgets/kpi-card.component.js.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.d.ts.map +1 -1
- package/dist/AI/components/widgets/live-execution-widget.component.js +6 -6
- package/dist/AI/components/widgets/live-execution-widget.component.js.map +1 -1
- package/dist/AI/index.d.ts +1 -0
- package/dist/AI/index.d.ts.map +1 -1
- package/dist/AI/index.js +2 -0
- package/dist/AI/index.js.map +1 -1
- package/dist/APIKeys/api-applications-panel.component.js +3 -3
- package/dist/APIKeys/api-applications-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-create-dialog.component.js +3 -3
- package/dist/APIKeys/api-key-create-dialog.component.js.map +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js +1 -1
- package/dist/APIKeys/api-key-edit-panel.component.js.map +1 -1
- package/dist/APIKeys/api-key-list.component.js +3 -3
- package/dist/APIKeys/api-key-list.component.js.map +1 -1
- package/dist/APIKeys/api-keys-resource.component.js +1 -1
- package/dist/APIKeys/api-keys-resource.component.js.map +1 -1
- package/dist/APIKeys/api-scopes-panel.component.js +2 -2
- package/dist/APIKeys/api-usage-panel.component.js +2 -2
- package/dist/Actions/components/actions-overview.component.js +2 -2
- package/dist/Actions/components/execution-monitoring.component.js +2 -2
- package/dist/Actions/components/explorer/action-breadcrumb.component.js +2 -2
- package/dist/Actions/components/explorer/action-card.component.js +2 -2
- package/dist/Actions/components/explorer/action-explorer.component.js +2 -2
- package/dist/Actions/components/explorer/action-list-item.component.js +2 -2
- package/dist/Actions/components/explorer/action-toolbar.component.js +2 -2
- package/dist/Actions/components/explorer/action-tree-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-action-panel.component.js.map +1 -1
- package/dist/Actions/components/explorer/new-category-panel.component.js +2 -2
- package/dist/Actions/components/explorer/new-category-panel.component.js.map +1 -1
- package/dist/Communication/communication-dashboard.component.js +2 -2
- package/dist/Communication/communication-logs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-logs-resource.component.js +3 -3
- package/dist/Communication/communication-logs-resource.component.js.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-monitor-resource.component.js +5 -5
- package/dist/Communication/communication-monitor-resource.component.js.map +1 -1
- package/dist/Communication/communication-providers-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-providers-resource.component.js +3 -3
- package/dist/Communication/communication-providers-resource.component.js.map +1 -1
- package/dist/Communication/communication-runs-resource.component.d.ts.map +1 -1
- package/dist/Communication/communication-runs-resource.component.js +3 -3
- package/dist/Communication/communication-runs-resource.component.js.map +1 -1
- package/dist/Communication/communication-templates-resource.component.js +2 -2
- package/dist/Communication/communication-templates-resource.component.js.map +1 -1
- package/dist/ComponentStudio/component-studio-dashboard.component.js +2 -2
- package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-load-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/browser/component-browser.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +2 -2
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/editors/spec-editor.component.js +2 -2
- package/dist/ComponentStudio/components/editors/spec-editor.component.js.map +1 -1
- package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/text-import-dialog.component.js +2 -2
- package/dist/ComponentStudio/components/text-import-dialog.component.js.map +1 -1
- package/dist/ComponentStudio/components/workspace/component-preview.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js +2 -2
- package/dist/ComponentStudio/components/workspace/editor-tabs.component.js.map +1 -1
- package/dist/Credentials/components/credentials-audit-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-audit-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-categories-resource.component.js +11 -3
- package/dist/Credentials/components/credentials-categories-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-list-resource.component.js +2 -2
- package/dist/Credentials/components/credentials-overview-resource.component.d.ts.map +1 -1
- package/dist/Credentials/components/credentials-overview-resource.component.js +12 -11
- package/dist/Credentials/components/credentials-overview-resource.component.js.map +1 -1
- package/dist/Credentials/components/credentials-types-resource.component.js +9 -9
- package/dist/Credentials/components/credentials-types-resource.component.js.map +1 -1
- package/dist/Credentials/credentials-dashboard.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-browser-resource.component.js +2 -2
- package/dist/DashboardBrowser/dashboard-share-dialog.component.js +2 -2
- package/dist/DataExplorer/components/filter-dialog/filter-dialog.component.js +2 -2
- package/dist/DataExplorer/components/navigation-panel/navigation-panel.component.js +2 -2
- package/dist/DataExplorer/components/view-selector/view-selector.component.js +2 -2
- package/dist/DataExplorer/data-explorer-dashboard.component.js +4 -4
- package/dist/DataExplorer/data-explorer-dashboard.component.js.map +1 -1
- package/dist/Home/home-dashboard.component.js +2 -2
- package/dist/Integration/components/activity/activity.component.d.ts +1 -1
- package/dist/Integration/components/activity/activity.component.d.ts.map +1 -1
- package/dist/Integration/components/activity/activity.component.js +5 -5
- package/dist/Integration/components/activity/activity.component.js.map +1 -1
- package/dist/Integration/components/connections/connections.component.d.ts +31 -2
- package/dist/Integration/components/connections/connections.component.d.ts.map +1 -1
- package/dist/Integration/components/connections/connections.component.js +753 -412
- package/dist/Integration/components/connections/connections.component.js.map +1 -1
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js +3 -3
- package/dist/Integration/components/mapping-workspace/mapping-workspace.component.js.map +1 -1
- package/dist/Integration/components/overview/overview.component.d.ts +0 -1
- package/dist/Integration/components/overview/overview.component.d.ts.map +1 -1
- package/dist/Integration/components/overview/overview.component.js +3 -6
- package/dist/Integration/components/overview/overview.component.js.map +1 -1
- package/dist/Integration/components/pipelines/pipelines.component.js +3 -3
- package/dist/Integration/components/pipelines/pipelines.component.js.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.d.ts +20 -0
- package/dist/Integration/components/schedules/schedules.component.d.ts.map +1 -1
- package/dist/Integration/components/schedules/schedules.component.js +97 -5
- package/dist/Integration/components/schedules/schedules.component.js.map +1 -1
- package/dist/Integration/components/visual-editor/visual-editor.component.js +2 -2
- package/dist/Integration/components/widgets/integration-card.component.d.ts.map +1 -1
- package/dist/Integration/components/widgets/integration-card.component.js +5 -1
- package/dist/Integration/components/widgets/integration-card.component.js.map +1 -1
- package/dist/Integration/components/widgets/run-history-panel.component.js +2 -2
- package/dist/Integration/components/widgets/run-history-panel.component.js.map +1 -1
- package/dist/Integration/integration.module.d.ts +2 -1
- package/dist/Integration/integration.module.d.ts.map +1 -1
- package/dist/Integration/integration.module.js +7 -3
- package/dist/Integration/integration.module.js.map +1 -1
- package/dist/Integration/services/integration-data.service.d.ts +27 -2
- package/dist/Integration/services/integration-data.service.d.ts.map +1 -1
- package/dist/Integration/services/integration-data.service.js +107 -4
- package/dist/Integration/services/integration-data.service.js.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-browse-resource.component.js +25 -24
- package/dist/Lists/components/lists-browse-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-categories-resource.component.js +2 -2
- package/dist/Lists/components/lists-categories-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.d.ts.map +1 -1
- package/dist/Lists/components/lists-my-lists-resource.component.js +26 -25
- package/dist/Lists/components/lists-my-lists-resource.component.js.map +1 -1
- package/dist/Lists/components/lists-operations-resource.component.js +2 -2
- package/dist/Lists/components/lists-operations-resource.component.js.map +1 -1
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js +3 -3
- package/dist/Lists/components/venn-diagram/venn-diagram.component.js.map +1 -1
- package/dist/MCP/components/mcp-connection-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js +2 -2
- package/dist/MCP/components/mcp-log-detail-panel.component.js.map +1 -1
- package/dist/MCP/components/mcp-server-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js +2 -2
- package/dist/MCP/components/mcp-test-tool-dialog.component.js.map +1 -1
- package/dist/MCP/mcp-dashboard.component.js +2 -2
- package/dist/MCP/mcp-filter-panel.component.js +2 -2
- package/dist/QueryBrowser/query-browser-resource.component.js +7 -7
- package/dist/QueryBrowser/query-browser-resource.component.js.map +1 -1
- package/dist/Scheduling/components/index.d.ts +0 -1
- package/dist/Scheduling/components/index.d.ts.map +1 -1
- package/dist/Scheduling/components/index.js +0 -1
- package/dist/Scheduling/components/index.js.map +1 -1
- package/dist/Scheduling/components/scheduling-activity.component.js +2 -2
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts +6 -9
- package/dist/Scheduling/components/scheduling-jobs.component.d.ts.map +1 -1
- package/dist/Scheduling/components/scheduling-jobs.component.js +118 -110
- package/dist/Scheduling/components/scheduling-jobs.component.js.map +1 -1
- package/dist/Scheduling/components/scheduling-overview.component.js +3 -3
- package/dist/Scheduling/components/scheduling-overview.component.js.map +1 -1
- package/dist/Scheduling/scheduling-dashboard.component.js +2 -2
- package/dist/SystemDiagnostics/system-diagnostics.component.js +4 -4
- package/dist/SystemDiagnostics/system-diagnostics.component.js.map +1 -1
- package/dist/Testing/components/testing-analytics.component.js +2 -2
- package/dist/Testing/components/testing-analytics.component.js.map +1 -1
- package/dist/Testing/components/testing-dashboard-tab.component.js +4 -4
- package/dist/Testing/components/testing-dashboard-tab.component.js.map +1 -1
- package/dist/Testing/components/testing-explorer.component.js +2 -2
- package/dist/Testing/components/testing-explorer.component.js.map +1 -1
- package/dist/Testing/components/testing-review.component.d.ts.map +1 -1
- package/dist/Testing/components/testing-review.component.js +5 -5
- package/dist/Testing/components/testing-review.component.js.map +1 -1
- package/dist/Testing/components/testing-runs.component.js +2 -2
- package/dist/Testing/components/testing-runs.component.js.map +1 -1
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js +2 -2
- package/dist/Testing/components/widgets/oracle-breakdown-table.component.js.map +1 -1
- package/dist/Testing/components/widgets/suite-tree.component.js +4 -4
- package/dist/Testing/components/widgets/suite-tree.component.js.map +1 -1
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js +2 -2
- package/dist/Testing/components/widgets/test-run-detail-panel.component.js.map +1 -1
- package/dist/Testing/testing-dashboard.component.js +2 -2
- package/dist/VersionHistory/components/diff-resource.component.js +2 -2
- package/dist/VersionHistory/components/graph-resource.component.js +2 -2
- package/dist/VersionHistory/components/labels-resource.component.js +3 -3
- package/dist/VersionHistory/components/labels-resource.component.js.map +1 -1
- package/dist/VersionHistory/components/restore-resource.component.js +3 -3
- package/dist/VersionHistory/components/restore-resource.component.js.map +1 -1
- package/dist/__tests__/integration-data-service.test.js +1 -0
- package/dist/__tests__/integration-data-service.test.js.map +1 -1
- package/dist/module.d.ts +52 -49
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +25 -6
- package/dist/module.js.map +1 -1
- package/dist/public-api.d.ts +1 -1
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +1 -1
- package/dist/public-api.js.map +1 -1
- package/package.json +42 -40
- package/dist/Scheduling/components/job-slideout.component.d.ts +0 -45
- package/dist/Scheduling/components/job-slideout.component.d.ts.map +0 -1
- package/dist/Scheduling/components/job-slideout.component.js +0 -459
- package/dist/Scheduling/components/job-slideout.component.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"agent-requests-resource.component.js","sourceRoot":"","sources":["../../../../src/AI/components/requests/agent-requests-resource.component.ts","../../../../src/AI/components/requests/agent-requests-resource.component.html"],"names":[],"mappings":"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","sourcesContent":["/**\n * @fileoverview Agent Requests Resource Component\n *\n * Dashboard resource for the AI application's \"Requests\" tab.\n * Displays all agent feedback requests with filtering by status, priority,\n * request type, and agent. Opens the generic agent-request-panel for\n * viewing details and responding.\n */\n\nimport { Component, ChangeDetectorRef, OnDestroy, AfterViewInit } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { debounceTime, takeUntil } from 'rxjs/operators';\nimport { RunView } from '@memberjunction/core';\nimport { ResourceData, UserInfoEngine } from '@memberjunction/core-entities';\nimport { MJAIAgentRequestEntity, MJAIAgentRequestTypeEntity } from '@memberjunction/core-entities';\nimport { RegisterClass, UUIDsEqual } from '@memberjunction/global';\nimport { BaseResourceComponent } from '@memberjunction/ng-shared';\nimport { AgentRequestPanelResult } from '@memberjunction/ng-agent-requests';\n\ninterface RequestFilter {\n SearchTerm: string;\n Status: string;\n RequestType: string;\n Priority: string;\n}\n\n/**\n * User preferences for the Agent Requests dashboard\n */\ninterface AgentRequestsUserPreferences {\n Filters: RequestFilter;\n SortColumn: string;\n SortDirection: 'asc' | 'desc';\n}\n\n@RegisterClass(BaseResourceComponent, 'AIAgentRequestsResource')\n@Component({\n standalone: false,\n selector: 'app-agent-requests-resource',\n templateUrl: './agent-requests-resource.component.html',\n styleUrls: ['./agent-requests-resource.component.css']\n})\nexport class AgentRequestsResourceComponent extends BaseResourceComponent implements AfterViewInit, OnDestroy {\n private readonly USER_SETTINGS_KEY = 'AI.AgentRequests.UserPreferences';\n private settingsPersistSubject = new Subject<void>();\n private destroy$ = new Subject<void>();\n private settingsLoaded = false;\n\n public IsLoading = false;\n public Requests: MJAIAgentRequestEntity[] = [];\n public FilteredRequests: MJAIAgentRequestEntity[] = [];\n public RequestTypes: MJAIAgentRequestTypeEntity[] = [];\n\n // Panel state\n public SelectedRequest: MJAIAgentRequestEntity | null = null;\n public ShowRequestPanel = false;\n\n // Filter state\n public Filters: RequestFilter = {\n SearchTerm: '',\n Status: '',\n RequestType: '',\n Priority: ''\n };\n\n // Available filter options\n public StatusOptions = ['Requested', 'Approved', 'Rejected', 'Responded', 'Canceled', 'Expired'];\n public PriorityOptions = [\n { Label: 'Critical (76-100)', Value: 'critical' },\n { Label: 'High (51-75)', Value: 'high' },\n { Label: 'Normal (26-50)', Value: 'normal' },\n { Label: 'Low (1-25)', Value: 'low' }\n ];\n\n private searchSubject = new Subject<string>();\n\n constructor(private cdr: ChangeDetectorRef) {\n super();\n }\n\n async ngAfterViewInit(): Promise<void> {\n this.setupSearchDebounce();\n await this.loadUserSettings();\n await this.loadData();\n this.autoOpenRequestFromQueryParams();\n this.NotifyLoadComplete();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n async GetResourceDisplayName(data: ResourceData): Promise<string> {\n return 'Agent Requests';\n }\n\n async GetResourceIconClass(data: ResourceData): Promise<string> {\n return 'fa-solid fa-inbox';\n }\n\n /** Count of pending (Requested) items */\n public get PendingCount(): number {\n return this.Requests.filter(r => r.Status === 'Requested').length;\n }\n\n /** Open the detail panel for a request */\n public OnRequestClick(request: MJAIAgentRequestEntity): void {\n this.SelectedRequest = request;\n this.ShowRequestPanel = true;\n this.cdr.detectChanges();\n }\n\n /** Handle panel close */\n public OnPanelClose(result: AgentRequestPanelResult): void {\n this.ShowRequestPanel = false;\n this.SelectedRequest = null;\n\n if (result.Success) {\n // Refresh the list to reflect the status change\n this.loadData();\n }\n this.cdr.detectChanges();\n }\n\n /** Handle search input */\n public OnSearchChange(term: string): void {\n this.searchSubject.next(term);\n }\n\n /** Handle filter changes */\n public OnFilterChange(): void {\n this.applyFilters();\n this.saveUserSettings();\n }\n\n /** Clear all filters */\n public ClearFilters(): void {\n this.Filters = { SearchTerm: '', Status: '', RequestType: '', Priority: '' };\n this.applyFilters();\n this.saveUserSettings();\n }\n\n /** Get the request type name by ID */\n public GetRequestTypeName(typeId: string | null): string {\n if (!typeId) return '';\n const type = this.RequestTypes.find(t => UUIDsEqual(t.ID, typeId));\n return type?.Name ?? '';\n }\n\n /** Get the request type icon by ID */\n public GetRequestTypeIcon(typeId: string | null): string {\n if (!typeId) return 'fa-solid fa-question-circle';\n const type = this.RequestTypes.find(t => UUIDsEqual(t.ID, typeId));\n return type?.Icon ?? 'fa-solid fa-question-circle';\n }\n\n /** Get priority label from numeric value */\n public GetPriorityLabel(priority: number): string {\n if (priority <= 25) return 'Low';\n if (priority <= 50) return 'Normal';\n if (priority <= 75) return 'High';\n return 'Critical';\n }\n\n /** Get priority CSS class from numeric value */\n public GetPriorityClass(priority: number): string {\n if (priority <= 25) return 'priority-low';\n if (priority <= 50) return 'priority-normal';\n if (priority <= 75) return 'priority-high';\n return 'priority-critical';\n }\n\n /** Whether a request is expired */\n public IsExpired(request: MJAIAgentRequestEntity): boolean {\n if (!request.ExpiresAt) return false;\n return new Date(request.ExpiresAt) < new Date();\n }\n\n // ---- Private Methods ----\n\n /**\n * If a requestId was passed via configuration (e.g. from a notification click),\n * auto-open that request in the detail panel.\n */\n private autoOpenRequestFromQueryParams(): void {\n const requestId = this.Data?.Configuration?.requestId\n || this.Data?.Configuration?.queryParams?.requestId;\n if (!requestId) return;\n\n const match = this.Requests.find(r => UUIDsEqual(r.ID, requestId));\n if (match) {\n this.OnRequestClick(match);\n }\n }\n\n private async loadData(): Promise<void> {\n this.IsLoading = true;\n this.cdr.detectChanges();\n\n try {\n const rv = new RunView();\n const [requestsResult, typesResult] = await rv.RunViews([\n {\n EntityName: 'MJ: AI Agent Requests',\n OrderBy: 'Priority DESC, __mj_CreatedAt DESC',\n ResultType: 'entity_object'\n },\n {\n EntityName: 'MJ: AI Agent Request Types',\n OrderBy: 'Name',\n ResultType: 'entity_object'\n }\n ]);\n\n if (requestsResult.Success) {\n this.Requests = requestsResult.Results as MJAIAgentRequestEntity[];\n }\n if (typesResult.Success) {\n this.RequestTypes = typesResult.Results as MJAIAgentRequestTypeEntity[];\n }\n\n this.applyFilters();\n } catch (error) {\n console.error('Error loading agent requests:', error);\n } finally {\n this.IsLoading = false;\n this.cdr.detectChanges();\n }\n }\n\n private applyFilters(): void {\n let filtered = [...this.Requests];\n\n // Status filter\n if (this.Filters.Status) {\n filtered = filtered.filter(r => r.Status === this.Filters.Status);\n }\n\n // Request type filter\n if (this.Filters.RequestType) {\n filtered = filtered.filter(r =>\n r.RequestTypeID && UUIDsEqual(r.RequestTypeID, this.Filters.RequestType)\n );\n }\n\n // Priority filter\n if (this.Filters.Priority) {\n filtered = filtered.filter(r => {\n const p = r.Priority;\n switch (this.Filters.Priority) {\n case 'low': return p <= 25;\n case 'normal': return p > 25 && p <= 50;\n case 'high': return p > 50 && p <= 75;\n case 'critical': return p > 75;\n default: return true;\n }\n });\n }\n\n // Search term filter\n if (this.Filters.SearchTerm) {\n const term = this.Filters.SearchTerm.toLowerCase();\n filtered = filtered.filter(r =>\n (r.Request && r.Request.toLowerCase().includes(term)) ||\n (r.Agent && r.Agent.toLowerCase().includes(term)) ||\n (r.Response && r.Response.toLowerCase().includes(term))\n );\n }\n\n this.FilteredRequests = filtered;\n this.cdr.detectChanges();\n }\n\n private setupSearchDebounce(): void {\n this.searchSubject.pipe(\n debounceTime(300),\n takeUntil(this.destroy$)\n ).subscribe(term => {\n this.Filters.SearchTerm = term;\n this.applyFilters();\n this.saveUserSettings();\n });\n\n this.settingsPersistSubject.pipe(\n debounceTime(500),\n takeUntil(this.destroy$)\n ).subscribe(() => this.persistUserSettings());\n }\n\n private async loadUserSettings(): Promise<void> {\n try {\n const prefs = UserInfoEngine.Instance.GetSetting(this.USER_SETTINGS_KEY);\n if (prefs) {\n const parsed: AgentRequestsUserPreferences = JSON.parse(prefs);\n if (parsed.Filters) {\n this.Filters = { ...this.Filters, ...parsed.Filters };\n }\n }\n } catch {\n // Use defaults\n }\n this.settingsLoaded = true;\n }\n\n private saveUserSettings(): void {\n if (this.settingsLoaded) {\n this.settingsPersistSubject.next();\n }\n }\n\n private async persistUserSettings(): Promise<void> {\n try {\n const prefs: AgentRequestsUserPreferences = {\n Filters: this.Filters,\n SortColumn: 'Priority',\n SortDirection: 'desc'\n };\n await UserInfoEngine.Instance.SetSetting(\n this.USER_SETTINGS_KEY,\n JSON.stringify(prefs)\n );\n } catch {\n // Silent failure for settings persistence\n }\n }\n}\n\nexport function LoadAgentRequestsResource(): void {\n // Prevents tree-shaking\n}\n","<div class=\"agent-requests-container\">\n <!-- Header -->\n <div class=\"requests-header\">\n <div class=\"header-left\">\n <h2 class=\"page-title\">\n <i class=\"fa-solid fa-inbox\"></i> Agent Requests\n @if (PendingCount > 0) {\n <span class=\"pending-badge\">{{ PendingCount }}</span>\n }\n </h2>\n </div>\n <div class=\"header-right\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input\n type=\"text\"\n class=\"search-input\"\n placeholder=\"Search requests...\"\n [ngModel]=\"Filters.SearchTerm\"\n (ngModelChange)=\"OnSearchChange($event)\">\n </div>\n </div>\n </div>\n\n <!-- Filters -->\n <div class=\"filter-bar\">\n <div class=\"filter-group\">\n <select class=\"filter-select\" [(ngModel)]=\"Filters.Status\" (ngModelChange)=\"OnFilterChange()\">\n <option value=\"\">All Statuses</option>\n @for (status of StatusOptions; track status) {\n <option [value]=\"status\">{{ status }}</option>\n }\n </select>\n\n <select class=\"filter-select\" [(ngModel)]=\"Filters.RequestType\" (ngModelChange)=\"OnFilterChange()\">\n <option value=\"\">All Types</option>\n @for (type of RequestTypes; track type.ID) {\n <option [value]=\"type.ID\">{{ type.Name }}</option>\n }\n </select>\n\n <select class=\"filter-select\" [(ngModel)]=\"Filters.Priority\" (ngModelChange)=\"OnFilterChange()\">\n <option value=\"\">All Priorities</option>\n @for (opt of PriorityOptions; track opt.Value) {\n <option [value]=\"opt.Value\">{{ opt.Label }}</option>\n }\n </select>\n </div>\n\n @if (Filters.Status || Filters.RequestType || Filters.Priority || Filters.SearchTerm) {\n <button class=\"clear-filters-btn\" (click)=\"ClearFilters()\">\n <i class=\"fa-solid fa-times\"></i> Clear Filters\n </button>\n }\n </div>\n\n <!-- Content -->\n @if (IsLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading agent requests...\"></mj-loading>\n </div>\n } @else if (FilteredRequests.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-inbox empty-icon\"></i>\n @if (Requests.length === 0) {\n <p class=\"empty-text\">No agent requests yet</p>\n <p class=\"empty-subtext\">When agents need human input, their requests will appear here.</p>\n } @else {\n <p class=\"empty-text\">No requests match your filters</p>\n <button class=\"clear-filters-btn\" (click)=\"ClearFilters()\">Clear Filters</button>\n }\n </div>\n } @else {\n <div class=\"requests-list\">\n @for (request of FilteredRequests; track request.ID) {\n <div\n class=\"request-card\"\n [class.actionable]=\"request.Status === 'Requested'\"\n [class.expired]=\"IsExpired(request)\"\n (click)=\"OnRequestClick(request)\">\n <div class=\"card-left\">\n <i class=\"{{ GetRequestTypeIcon(request.RequestTypeID) }} type-icon\"></i>\n </div>\n <div class=\"card-content\">\n <div class=\"card-top-row\">\n <span class=\"request-type-name\">{{ GetRequestTypeName(request.RequestTypeID) }}</span>\n <span class=\"priority-badge {{ GetPriorityClass(request.Priority) }}\">\n {{ GetPriorityLabel(request.Priority) }}\n </span>\n <span class=\"status-badge status-{{ request.Status.toLowerCase() }}\">\n {{ request.Status }}\n </span>\n @if (IsExpired(request) && request.Status === 'Requested') {\n <span class=\"expired-tag\">Expired</span>\n }\n </div>\n <p class=\"request-text\">{{ request.Request }}</p>\n <div class=\"card-meta\">\n @if (request.Agent) {\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-robot\"></i> {{ request.Agent }}\n </span>\n }\n @if (request.__mj_CreatedAt) {\n <span class=\"meta-item\">\n <i class=\"fa-regular fa-clock\"></i> {{ request.__mj_CreatedAt | date:'short' }}\n </span>\n }\n @if (request.ExpiresAt) {\n <span class=\"meta-item\" [class.expired]=\"IsExpired(request)\">\n <i class=\"fa-solid fa-hourglass-end\"></i> Expires {{ request.ExpiresAt | date:'short' }}\n </span>\n }\n </div>\n </div>\n <div class=\"card-right\">\n <i class=\"fa-solid fa-chevron-right\"></i>\n </div>\n </div>\n }\n </div>\n }\n</div>\n\n<!-- Agent Request Detail Panel -->\n@if (ShowRequestPanel && SelectedRequest) {\n <mj-agent-request-dialog\n [Visible]=\"ShowRequestPanel\"\n [Request]=\"SelectedRequest\"\n (Close)=\"OnPanelClose($event)\">\n </mj-agent-request-dialog>\n}\n"]}
|
|
@@ -120,11 +120,11 @@ export class SystemConfigFilterPanelComponent {
|
|
|
120
120
|
i0.ɵɵtwoWayProperty("ngModel", ctx.filters.isDefault);
|
|
121
121
|
i0.ɵɵadvance();
|
|
122
122
|
i0.ɵɵrepeater(ctx.isDefaultOptions);
|
|
123
|
-
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n\n.filter-panel[_ngcontent-%COMP%] {\n height: 100%;\n background:
|
|
123
|
+
} }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["\n\n\n.filter-panel[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n\n\n.filter-panel-header[_ngcontent-%COMP%] {\n padding: 20px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n flex: 1;\n letter-spacing: -0.02em;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] {\n display: flex;\n align-items: baseline;\n gap: 4px;\n margin-right: 16px;\n font-size: 13px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n border-radius: 20px;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-value[_ngcontent-%COMP%] {\n font-weight: 700;\n color: var(--mj-brand-primary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .filter-summary-inline[_ngcontent-%COMP%] .summary-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary-hover);\n font-weight: 500;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-disabled);\n border-radius: 8px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.filter-panel-header[_ngcontent-%COMP%] .close-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 20px;\n}\n\n\n\n.filter-group[_ngcontent-%COMP%] {\n margin-bottom: 24px;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-brand-primary);\n width: 16px;\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%], \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface);\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n color: var(--mj-text-secondary);\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]:focus, \n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%]:focus {\n outline: none;\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.filter-group[_ngcontent-%COMP%] .filter-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.filter-group[_ngcontent-%COMP%] .filter-select[_ngcontent-%COMP%] {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n}\n\n\n\n.filter-actions[_ngcontent-%COMP%] {\n margin-top: 28px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] {\n width: 100%;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n color: var(--mj-text-muted);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions[_ngcontent-%COMP%] .reset-btn[_ngcontent-%COMP%] .fa-solid[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.filter-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}"] });
|
|
124
124
|
}
|
|
125
125
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SystemConfigFilterPanelComponent, [{
|
|
126
126
|
type: Component,
|
|
127
|
-
args: [{ standalone: false, selector: 'mj-system-config-filter-panel', template: "<div class=\"filter-panel\">\n <div class=\"filter-panel-header\">\n <h3>Configuration Filters</h3>\n <div class=\"filter-summary-inline\">\n <span class=\"summary-value\">{{ filteredConfigurations.length }}</span>\n <span class=\"summary-label\">of {{ configurations.length }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n \n <div class=\"filter-content\">\n <!-- Search Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-search\"></span>\n Search\n </label>\n <input \n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.searchTerm\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search configurations...\">\n </div>\n \n <!-- Status Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-check-circle\"></span>\n Status\n </label>\n <select \n class=\"filter-select\"\n [(ngModel)]=\"filters.status\"\n (ngModelChange)=\"onFilterChange()\">\n @for (option of statusOptions; track option.value) {\n <option [value]=\"option.value\">{{ option.text }}</option>\n }\n </select>\n </div>\n \n <!-- Default Configuration Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-star\"></span>\n Default\n </label>\n <select \n class=\"filter-select\"\n [(ngModel)]=\"filters.isDefault\"\n (ngModelChange)=\"onFilterChange()\">\n @for (option of isDefaultOptions; track option.value) {\n <option [value]=\"option.value\">{{ option.text }}</option>\n }\n </select>\n </div>\n \n <!-- Reset Button -->\n <div class=\"filter-actions\">\n <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n <span class=\"fa-solid fa-undo\"></span>\n Reset Filters\n </button>\n </div>\n </div>\n</div>", styles: ["/* System Configuration Filter Panel - World-Class Design */\n\n.filter-panel {\n height: 100%;\n background:
|
|
127
|
+
args: [{ standalone: false, selector: 'mj-system-config-filter-panel', template: "<div class=\"filter-panel\">\n <div class=\"filter-panel-header\">\n <h3>Configuration Filters</h3>\n <div class=\"filter-summary-inline\">\n <span class=\"summary-value\">{{ filteredConfigurations.length }}</span>\n <span class=\"summary-label\">of {{ configurations.length }}</span>\n </div>\n <button class=\"close-btn\" (click)=\"toggleFilterPanel()\">\n <span class=\"fa-solid fa-times\"></span>\n </button>\n </div>\n \n <div class=\"filter-content\">\n <!-- Search Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-search\"></span>\n Search\n </label>\n <input \n type=\"text\"\n class=\"filter-input\"\n [(ngModel)]=\"filters.searchTerm\"\n (ngModelChange)=\"onFilterChange()\"\n (input)=\"onFilterChange()\"\n placeholder=\"Search configurations...\">\n </div>\n \n <!-- Status Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-check-circle\"></span>\n Status\n </label>\n <select \n class=\"filter-select\"\n [(ngModel)]=\"filters.status\"\n (ngModelChange)=\"onFilterChange()\">\n @for (option of statusOptions; track option.value) {\n <option [value]=\"option.value\">{{ option.text }}</option>\n }\n </select>\n </div>\n \n <!-- Default Configuration Filter -->\n <div class=\"filter-group\">\n <label class=\"filter-label\">\n <span class=\"fa-solid fa-star\"></span>\n Default\n </label>\n <select \n class=\"filter-select\"\n [(ngModel)]=\"filters.isDefault\"\n (ngModelChange)=\"onFilterChange()\">\n @for (option of isDefaultOptions; track option.value) {\n <option [value]=\"option.value\">{{ option.text }}</option>\n }\n </select>\n </div>\n \n <!-- Reset Button -->\n <div class=\"filter-actions\">\n <button class=\"reset-btn\" (click)=\"resetAllFilters()\" title=\"Reset all filters\">\n <span class=\"fa-solid fa-undo\"></span>\n Reset Filters\n </button>\n </div>\n </div>\n</div>", styles: ["/* System Configuration Filter Panel - World-Class Design */\n\n.filter-panel {\n height: 100%;\n background: var(--mj-bg-surface);\n border-right: 1px solid var(--mj-border-default);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* Header */\n.filter-panel-header {\n padding: 20px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n}\n\n.filter-panel-header h3 {\n margin: 0;\n font-size: 16px;\n font-weight: 700;\n color: var(--mj-text-primary);\n flex: 1;\n letter-spacing: -0.02em;\n}\n\n.filter-panel-header .filter-summary-inline {\n display: flex;\n align-items: baseline;\n gap: 4px;\n margin-right: 16px;\n font-size: 13px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n border-radius: 20px;\n border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n}\n\n.filter-panel-header .filter-summary-inline .summary-value {\n font-weight: 700;\n color: var(--mj-brand-primary);\n}\n\n.filter-panel-header .filter-summary-inline .summary-label {\n color: var(--mj-brand-primary-hover);\n font-weight: 500;\n}\n\n.filter-panel-header .close-btn {\n background: transparent;\n border: none;\n padding: 8px;\n cursor: pointer;\n color: var(--mj-text-disabled);\n border-radius: 8px;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-panel-header .close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-secondary);\n}\n\n.filter-panel-header .close-btn .fa-solid {\n font-size: 14px;\n}\n\n/* Content Area */\n.filter-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 20px;\n}\n\n/* Filter Groups */\n.filter-group {\n margin-bottom: 24px;\n}\n\n.filter-group .filter-label {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 10px;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.filter-group .filter-label .fa-solid {\n font-size: 13px;\n color: var(--mj-brand-primary);\n width: 16px;\n}\n\n.filter-group .filter-input,\n.filter-group .filter-select {\n width: 100%;\n padding: 12px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n font-size: 14px;\n background: var(--mj-bg-surface);\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n color: var(--mj-text-secondary);\n}\n\n.filter-group .filter-input:focus,\n.filter-group .filter-select:focus {\n outline: none;\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.filter-group .filter-input::placeholder {\n color: var(--mj-text-disabled);\n}\n\n.filter-group .filter-select {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 14px center;\n padding-right: 36px;\n}\n\n/* Filter Actions */\n.filter-actions {\n margin-top: 28px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.filter-actions .reset-btn {\n width: 100%;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n color: var(--mj-text-muted);\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n box-sizing: border-box;\n}\n\n.filter-actions .reset-btn:hover {\n background: var(--mj-bg-surface-sunken);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-secondary);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filter-actions .reset-btn .fa-solid {\n font-size: 13px;\n}\n\n/* Scrollbar Styling */\n.filter-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.filter-content::-webkit-scrollbar-track {\n background: var(--mj-bg-surface-card);\n border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb {\n background: var(--mj-border-strong);\n border-radius: 3px;\n}\n\n.filter-content::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-disabled);\n}\n"] }]
|
|
128
128
|
}], null, { configurations: [{
|
|
129
129
|
type: Input
|
|
130
130
|
}], filteredConfigurations: [{
|
|
@@ -957,7 +957,7 @@ let SystemConfigurationComponent = class SystemConfigurationComponent extends Ba
|
|
|
957
957
|
i0.ɵɵclassProp("visible", ctx.detailPanelVisible);
|
|
958
958
|
i0.ɵɵadvance();
|
|
959
959
|
i0.ɵɵconditional(ctx.selectedConfig ? 32 : -1);
|
|
960
|
-
} }, dependencies: [i2.NgClass, i3.SplitterComponent, i3.SplitterPaneComponent, i4.LoadingComponent, i5.SystemConfigFilterPanelComponent], styles: ["\n\n\n\n\n\n\n.system-configuration-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n position: relative;\n z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: #1e293b;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border: 1px solid #dee2e6;\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\n border-color: #ced4da;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 14px;\n}\n\n.config-count[_ngcontent-%COMP%] {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n padding: 6px 12px;\n background: #f8f9fa;\n border-radius: 20px;\n border: 1px solid #e9ecef;\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f8f9fa;\n border-radius: 8px;\n padding: 3px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n color: #495057;\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #6366f1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #dee2e6;\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n.configurations-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: transparent;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n border: 1px solid #fecaca;\n border-radius: 12px;\n color: #dc2626;\n font-size: 15px;\n font-weight: 500;\n}\n\n.error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 72px;\n color: #d1d5db;\n margin-bottom: 24px;\n display: block;\n opacity: 0.8;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: #374151;\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 28px;\n color: #6b7280;\n}\n\n\n\n\n\n.configurations-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n gap: 24px;\n}\n\n\n\n\n\n.config-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid #e5e7eb;\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n}\n\n.config-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n transform: translateY(-4px);\n border-color: #c7d2fe;\n}\n\n.config-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n.config-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);\n}\n\n.config-card.expanded[_ngcontent-%COMP%]::before {\n opacity: 1;\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f3f4f6;\n transition: background 0.2s ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background: #fafbfc;\n}\n\n.config-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex: 1;\n}\n\n.config-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.config-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 24px;\n}\n\n.config-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.config-name[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 700;\n color: #1f2937;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: -0.02em;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: all 0.2s ease;\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\n color: #166534;\n border: 1px solid #86efac;\n}\n\n.status-badge.status-preview[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n color: #92400e;\n border: 1px solid #fcd34d;\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n color: #4b5563;\n border: 1px solid #d1d5db;\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n color: #991b1b;\n border: 1px solid #fca5a5;\n}\n\n\n\n.default-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n color: #5b21b6;\n border: 1px solid #c4b5fd;\n}\n\n.default-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: #7c3aed;\n}\n\n\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: #9ca3af;\n transition: all 0.3s ease;\n padding: 8px;\n border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n color: #6366f1;\n background: #f3f4f6;\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n color: #6366f1;\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n padding: 0 24px 20px 24px;\n}\n\n.config-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: #6b7280;\n}\n\n.config-description.text-muted[_ngcontent-%COMP%] {\n font-style: italic;\n color: #9ca3af;\n}\n\n\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #f3f4f6;\n animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.config-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 12px;\n border: 1px solid #e2e8f0;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #334155;\n font-weight: 600;\n}\n\n\n\n.prompts-section[_ngcontent-%COMP%] {\n margin-top: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.75px;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 14px;\n}\n\n.prompt-links[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.prompt-link[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover {\n background: #f8fafc;\n border-color: #c7d2fe;\n transform: translateX(4px);\n}\n\n.prompt-link-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n color: #2563eb;\n flex-shrink: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.prompt-link-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n}\n\n.prompt-link-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #1e293b;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.prompt-link-arrow[_ngcontent-%COMP%] {\n color: #94a3b8;\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover .prompt-link-arrow[_ngcontent-%COMP%] {\n color: #6366f1;\n transform: translateX(4px);\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #94a3b8;\n font-style: italic;\n padding: 12px 16px;\n background: #f8fafc;\n border-radius: 10px;\n border: 1px dashed #e2e8f0;\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n margin-top: 20px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.param-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.param-item[_ngcontent-%COMP%]:hover {\n background: #f8fafc;\n border-color: #c7d2fe;\n}\n\n.param-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n color: #7c3aed;\n flex-shrink: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.param-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: #1e293b;\n}\n\n.param-type[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #64748b;\n margin-top: 2px;\n}\n\n.param-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #475569;\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: #f1f5f9;\n padding: 4px 10px;\n border-radius: 6px;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.no-params[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #94a3b8;\n font-style: italic;\n padding: 12px 16px;\n background: #f8fafc;\n border-radius: 10px;\n border: 1px dashed #e2e8f0;\n text-align: center;\n}\n\n\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-top: 1px solid #e5e7eb;\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e5e7eb;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n color: #475569;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n.action-btn-warning[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n border-color: #f59e0b;\n color: #78350f;\n}\n\n.action-btn-warning[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);\n}\n\n.action-btn-danger[_ngcontent-%COMP%] {\n color: #dc2626;\n border-color: #fecaca;\n}\n\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n background: #fef2f2;\n border-color: #dc2626;\n}\n\n\n\n\n\n.configurations-list[_ngcontent-%COMP%] {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid #e5e7eb;\n overflow: hidden;\n}\n\n.configurations-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.configurations-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-bottom: 2px solid #e5e7eb;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 14px 20px;\n text-align: left;\n font-size: 12px;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover {\n background: #e2e8f0;\n color: #6366f1;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:last-child {\n cursor: default;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:last-child:hover {\n background: transparent;\n color: #475569;\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted[_ngcontent-%COMP%] {\n color: #6366f1;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted.desc[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.configurations-table[_ngcontent-%COMP%] .sort-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.configurations-table[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover .sort-icon[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n opacity: 1;\n color: #6366f1;\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid #f1f5f9;\n transition: background 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: #fafbfc;\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.configurations-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 18px 20px;\n font-size: 14px;\n color: #475569;\n}\n\n.config-name-cell[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.config-icon-small[_ngcontent-%COMP%] {\n width: 42px;\n height: 42px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n flex-shrink: 0;\n}\n\n.config-icon-small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 16px;\n}\n\n.config-name-text[_ngcontent-%COMP%] {\n font-weight: 600;\n color: #1e293b;\n}\n\n.config-description-small[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #64748b;\n margin-top: 4px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e5e7eb;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: #475569;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n .configurations-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n }\n}\n\n@media (max-width: 768px) {\n .dashboard-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n\n .header-info[_ngcontent-%COMP%] {\n justify-content: space-between;\n flex-wrap: wrap;\n }\n\n .header-controls[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n\n .configurations-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .config-stats[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .card-header[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .config-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n }\n\n .config-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n }\n\n .card-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\nkendo-splitter[_ngcontent-%COMP%] {\n background: transparent;\n}\n\n[_nghost-%COMP%] .k-splitter {\n border: none;\n background: transparent;\n}\n\n[_nghost-%COMP%] .k-splitbar {\n background: #e5e7eb;\n width: 6px;\n}\n\n[_nghost-%COMP%] .k-splitbar:hover {\n background: #c7d2fe;\n}\n\n[_nghost-%COMP%] .k-pane {\n overflow: hidden;\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: -480px;\n width: 480px;\n height: 100vh;\n background: white;\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: white;\n font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: 20px;\n font-weight: 700;\n color: #1e293b;\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #64748b;\n font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n background: white;\n border: 1px solid #e2e8f0;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #64748b;\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n color: #1e293b;\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n color: #4f46e5;\n}\n\n.feature-badge.default[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n color: #5b21b6;\n}\n\n.feature-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 12px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366f1;\n font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: #475569;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 12px;\n border: 1px solid #e2e8f0;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #1e293b;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] {\n color: #94a3b8;\n font-style: italic;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.detail-params-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 10px;\n border: 1px solid #e2e8f0;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #7c3aed;\n font-size: 14px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: #1e293b;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-value[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #475569;\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: white;\n padding: 4px 10px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.params-more[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6366f1;\n font-weight: 600;\n text-align: center;\n padding: 10px;\n background: #eef2ff;\n border-radius: 8px;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n padding: 20px 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 14px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n background: white;\n border: 2px solid #e2e8f0;\n color: #475569;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n border-color: #6366f1;\n color: #6366f1;\n background: #fafbff;\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n border: 2px solid transparent;\n color: white;\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n\n\n@media (max-width: 520px) {\n .detail-panel[_ngcontent-%COMP%] {\n width: 100%;\n right: -100%;\n }\n\n .detail-panel.visible[_ngcontent-%COMP%] {\n right: 0;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"] });
|
|
960
|
+
} }, dependencies: [i2.NgClass, i3.SplitterComponent, i3.SplitterPaneComponent, i4.LoadingComponent, i5.SystemConfigFilterPanelComponent], styles: ["\n\n\n\n\n\n\n.system-configuration-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-card);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n\n\n\n\n.dashboard-header[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n position: relative;\n z-index: 10;\n}\n\n.header-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 22px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.config-count[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 14px;\n font-weight: 500;\n padding: 6px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 20px;\n border: 1px solid var(--mj-border-default);\n}\n\n.header-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n padding: 3px;\n border: 1px solid var(--mj-border-default);\n}\n\n.view-btn[_ngcontent-%COMP%] {\n background: transparent;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 15px;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.control-btn.primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.control-btn.primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n\n\n\n.main-content[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.main-splitter[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n}\n\n.configurations-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: transparent;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n border-radius: 12px;\n color: var(--mj-status-error);\n font-size: 15px;\n font-weight: 500;\n}\n\n.error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 80px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 72px;\n color: var(--mj-border-strong);\n margin-bottom: 24px;\n display: block;\n opacity: 0.8;\n}\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 12px 0;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 28px;\n color: var(--mj-text-muted);\n}\n\n\n\n\n\n.configurations-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n gap: 24px;\n}\n\n\n\n\n\n.config-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--mj-border-default);\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n}\n\n.config-card[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: var(--mj-brand-primary);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.config-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n transform: translateY(-4px);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card[_ngcontent-%COMP%]:hover::before {\n opacity: 1;\n}\n\n.config-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded[_ngcontent-%COMP%]::before {\n opacity: 1;\n}\n\n\n\n.card-header[_ngcontent-%COMP%] {\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid var(--mj-border-default);\n transition: background 0.2s ease;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.config-info[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex: 1;\n}\n\n.config-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--mj-brand-primary);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n font-size: 24px;\n}\n\n.config-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.config-name[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: -0.02em;\n}\n\n.config-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: all 0.2s ease;\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n color: var(--mj-color-success-700);\n border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n\n\n.default-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n\n\n.expand-icon[_ngcontent-%COMP%] {\n font-size: 16px;\n color: var(--mj-text-disabled);\n transition: all 0.3s ease;\n padding: 8px;\n border-radius: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n color: var(--mj-brand-primary);\n}\n\n\n\n.card-body[_ngcontent-%COMP%] {\n padding: 0 24px 20px 24px;\n}\n\n.config-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: var(--mj-text-muted);\n}\n\n.config-description.text-muted[_ngcontent-%COMP%] {\n font-style: italic;\n color: var(--mj-text-disabled);\n}\n\n\n\n\n\n.expanded-content[_ngcontent-%COMP%] {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n animation: _ngcontent-%COMP%_slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.config-stats[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 12px;\n border: 1px solid var(--mj-border-default);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-secondary);\n font-weight: 600;\n}\n\n\n\n.prompts-section[_ngcontent-%COMP%] {\n margin-top: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.prompt-links[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.prompt-link[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n transform: translateX(4px);\n}\n\n.prompt-link-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.prompt-link-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.prompt-link-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n}\n\n.prompt-link-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.prompt-link-arrow[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.prompt-link[_ngcontent-%COMP%]:hover .prompt-link-arrow[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n transform: translateX(4px);\n}\n\n.no-prompt[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-disabled);\n font-style: italic;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px dashed var(--mj-border-default);\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n margin-top: 20px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.param-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.param-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.param-type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n.param-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.param-type[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-top: 2px;\n}\n\n.param-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 10px;\n border-radius: 6px;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.no-params[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-disabled);\n font-style: italic;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px dashed var(--mj-border-default);\n text-align: center;\n}\n\n\n\n\n\n.card-actions[_ngcontent-%COMP%] {\n padding: 16px 24px;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.action-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.action-btn-primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-warning);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n\n\n\n\n.configurations-list[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n}\n\n.configurations-table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.configurations-table[_ngcontent-%COMP%] thead[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n padding: 14px 20px;\n text-align: left;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:last-child {\n cursor: default;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:last-child:hover {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted.desc[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.configurations-table[_ngcontent-%COMP%] .sort-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.configurations-table[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%]:hover .sort-icon[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.configurations-table[_ngcontent-%COMP%] th.sorted[_ngcontent-%COMP%] .sort-icon[_ngcontent-%COMP%] {\n opacity: 1;\n color: var(--mj-brand-primary);\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n transition: background 0.2s ease;\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.configurations-table[_ngcontent-%COMP%] tbody[_ngcontent-%COMP%] tr[_ngcontent-%COMP%]:last-child {\n border-bottom: none;\n}\n\n.configurations-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 18px 20px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.config-name-cell[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.config-icon-small[_ngcontent-%COMP%] {\n width: 42px;\n height: 42px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.config-icon-small[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n font-size: 16px;\n}\n\n.config-name-text[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.config-description-small[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-top: 4px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.action-btn-small[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n\n\n\n\n@media (max-width: 1024px) {\n .configurations-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n }\n}\n\n@media (max-width: 768px) {\n .dashboard-header[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n\n .header-info[_ngcontent-%COMP%] {\n justify-content: space-between;\n flex-wrap: wrap;\n }\n\n .header-controls[_ngcontent-%COMP%] {\n justify-content: space-between;\n }\n\n .configurations-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .config-stats[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .card-header[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .config-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n }\n\n .config-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 20px;\n }\n\n .card-actions[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\nkendo-splitter[_ngcontent-%COMP%] {\n background: transparent;\n}\n\n[_nghost-%COMP%] .k-splitter {\n border: none;\n background: transparent;\n}\n\n[_nghost-%COMP%] .k-splitbar {\n background: var(--mj-border-default);\n width: 6px;\n}\n\n[_nghost-%COMP%] .k-splitbar:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n[_nghost-%COMP%] .k-pane {\n overflow: hidden;\n}\n\n\n\n\n\n\n.detail-panel-overlay[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.25s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.detail-panel[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n right: -480px;\n width: 480px;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n right: 0;\n}\n\n\n\n.detail-panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.detail-panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--mj-brand-primary);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n font-size: 24px;\n}\n\n.detail-title-info[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 4px 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.detail-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-panel-close[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n}\n\n.detail-panel-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n\n\n.detail-panel-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n margin-bottom: 28px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.detail-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.feature-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.feature-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.detail-description[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: var(--mj-text-secondary);\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n}\n\n.detail-grid.single-column[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 12px;\n border: 1px solid var(--mj-border-default);\n}\n\n.detail-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-text-primary);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-value[_ngcontent-%COMP%] .muted[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-style: italic;\n font-weight: 500;\n}\n\n.detail-value[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n}\n\n\n\n.detail-params-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-info[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.detail-param-item[_ngcontent-%COMP%] .param-value[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: var(--mj-bg-surface);\n padding: 4px 10px;\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.params-more[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n text-align: center;\n padding: 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 8px;\n}\n\n\n\n.detail-panel-actions[_ngcontent-%COMP%] {\n padding: 20px 24px;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.detail-action-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 14px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n border: 2px solid transparent;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n\n\n@media (max-width: 520px) {\n .detail-panel[_ngcontent-%COMP%] {\n width: 100%;\n right: -100%;\n }\n\n .detail-panel.visible[_ngcontent-%COMP%] {\n right: 0;\n }\n\n .detail-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}"] });
|
|
961
961
|
};
|
|
962
962
|
SystemConfigurationComponent = __decorate([
|
|
963
963
|
RegisterClass(BaseResourceComponent, 'AIConfigResource')
|
|
@@ -965,7 +965,7 @@ SystemConfigurationComponent = __decorate([
|
|
|
965
965
|
export { SystemConfigurationComponent };
|
|
966
966
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SystemConfigurationComponent, [{
|
|
967
967
|
type: Component,
|
|
968
|
-
args: [{ standalone: false, selector: 'app-system-configuration', template: "<div class=\"system-configuration-container\">\n <!-- Header -->\n <div class=\"dashboard-header\">\n <div class=\"header-info\">\n <h2 class=\"dashboard-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n AI Configuration\n </h2>\n <button\n type=\"button\"\n class=\"filter-toggle-btn\"\n (click)=\"toggleFilterPanel()\"\n title=\"Toggle Filters\">\n <i class=\"fa-solid fa-filter\"></i>\n @if (filterPanelVisible) {\n Hide Filters\n } @else {\n Show Filters\n }\n </button>\n <span class=\"config-count\">\n {{ filteredConfigurations.length }} of {{ configurations.length }} configurations\n </span>\n </div>\n\n <div class=\"header-controls\">\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button\n type=\"button\"\n class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"setViewMode('grid')\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-grid-2\"></i>\n </button>\n <button\n type=\"button\"\n class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"setViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n\n <button\n type=\"button\"\n class=\"control-btn\"\n (click)=\"loadData()\"\n [disabled]=\"isLoading\"\n title=\"Refresh\">\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n Refresh\n </button>\n </div>\n </div>\n\n <!-- Main Content with Splitter -->\n <div class=\"main-content\">\n <kendo-splitter\n class=\"main-splitter\"\n orientation=\"horizontal\">\n\n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane\n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-system-config-filter-panel\n [configurations]=\"configurations\"\n [filteredConfigurations]=\"filteredConfigurations\"\n [filters]=\"currentFilters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"toggleFilterPanel()\">\n </mj-system-config-filter-panel>\n </kendo-splitter-pane>\n\n <!-- Configurations List Panel -->\n <kendo-splitter-pane\n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"configurations-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading AI configurations...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <p class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ error }}\n </p>\n </div>\n }\n\n <!-- Configurations Content -->\n @if (!isLoading && !error) {\n @if (filteredConfigurations.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sliders\"></i>\n <h3>No configurations found</h3>\n <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n </div>\n } @else {\n <!-- Grid View -->\n @if (viewMode === 'grid') {\n <div class=\"configurations-grid\">\n @for (config of filteredConfigurations; track config.ID) {\n <div class=\"config-card\" [class.expanded]=\"config.isExpanded\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleExpanded(config)\">\n <div class=\"config-info\">\n <div class=\"config-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"config-details\">\n <h4 class=\"config-name\">{{ config.Name }}</h4>\n <div class=\"config-meta\">\n @if (config.IsDefault) {\n <span class=\"default-badge\">\n <i class=\"fa-solid fa-star\"></i>\n Default\n </span>\n }\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n <i [class]=\"getStatusIcon(config.Status)\"></i>\n {{ config.Status }}\n </span>\n </div>\n </div>\n </div>\n\n <i class=\"fa-solid fa-chevron-down expand-icon\"\n [class.rotated]=\"config.isExpanded\"></i>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\">\n @if (config.Description) {\n <p class=\"config-description\">{{ config.Description }}</p>\n } @else {\n <p class=\"config-description text-muted\">No description provided</p>\n }\n\n <!-- Expanded Content -->\n @if (config.isExpanded) {\n <div class=\"expanded-content\">\n <!-- Stats Grid -->\n <div class=\"config-stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parameters</span>\n <span class=\"stat-value\">{{ config.params?.length || 0 }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Created</span>\n <span class=\"stat-value\">{{ formatDate(config.__mj_CreatedAt) }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Updated</span>\n <span class=\"stat-value\">{{ formatDate(config.__mj_UpdatedAt) }}</span>\n </div>\n </div>\n\n <!-- Linked Prompts -->\n <div class=\"prompts-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-message-lines\"></i>\n Linked Prompts\n </h5>\n <div class=\"prompt-links\">\n @if (config.compressionPrompt) {\n <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextCompressionID!); $event.stopPropagation()\">\n <div class=\"prompt-link-info\">\n <div class=\"prompt-link-icon\">\n <i class=\"fa-solid fa-compress\"></i>\n </div>\n <div class=\"prompt-link-details\">\n <span class=\"prompt-link-label\">Context Compression</span>\n <span class=\"prompt-link-name\">{{ config.compressionPrompt.Name }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n </div>\n } @else {\n <div class=\"no-prompt\">No compression prompt configured</div>\n }\n\n @if (config.summarizationPrompt) {\n <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextSummarizationID!); $event.stopPropagation()\">\n <div class=\"prompt-link-info\">\n <div class=\"prompt-link-icon\">\n <i class=\"fa-solid fa-file-lines\"></i>\n </div>\n <div class=\"prompt-link-details\">\n <span class=\"prompt-link-label\">Context Summarization</span>\n <span class=\"prompt-link-name\">{{ config.summarizationPrompt.Name }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n </div>\n } @else {\n <div class=\"no-prompt\">No summarization prompt configured</div>\n }\n </div>\n </div>\n\n <!-- Configuration Parameters -->\n @if (config.params && config.params.length > 0) {\n <div class=\"params-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Configuration Parameters\n </h5>\n <div class=\"params-grid\">\n @for (param of config.params; track param.ID) {\n <div class=\"param-item\" (click)=\"onOpenParam(param); $event.stopPropagation()\">\n <div class=\"param-info\">\n <div class=\"param-type-icon\">\n <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n </div>\n <div class=\"param-details\">\n <span class=\"param-name\">{{ param.Name }}</span>\n <span class=\"param-type\">{{ param.Type }}</span>\n </div>\n </div>\n <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"params-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Configuration Parameters\n </h5>\n <div class=\"no-params\">No parameters configured</div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Card Actions -->\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n class=\"action-btn\"\n (click)=\"showConfigDetails(config, $event)\"\n title=\"View Details\">\n <i class=\"fa-solid fa-eye\"></i>\n Details\n </button>\n\n <button\n type=\"button\"\n class=\"action-btn action-btn-primary\"\n (click)=\"onOpenConfiguration(config)\">\n <i class=\"fa-solid fa-edit\"></i>\n Configure\n </button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- List View -->\n @if (viewMode === 'list') {\n <div class=\"configurations-list\">\n <table class=\"configurations-table\">\n <thead>\n <tr>\n <th (click)=\"sortBy('Name')\"\n [class.sorted]=\"sortColumn === 'Name'\"\n [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Configuration\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Status')\"\n [class.sorted]=\"sortColumn === 'Status'\"\n [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Status\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Parameters')\"\n [class.sorted]=\"sortColumn === 'Parameters'\"\n [class.desc]=\"sortColumn === 'Parameters' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Parameters\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Updated')\"\n [class.sorted]=\"sortColumn === 'Updated'\"\n [class.desc]=\"sortColumn === 'Updated' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Updated\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (config of filteredConfigurations; track config.ID) {\n <tr>\n <td>\n <div class=\"config-name-cell\">\n <div class=\"config-icon-small\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div>\n <div class=\"config-name-text\">\n {{ config.Name }}\n @if (config.IsDefault) {\n <span class=\"default-badge\" style=\"margin-left: 8px;\">\n <i class=\"fa-solid fa-star\"></i>\n Default\n </span>\n }\n </div>\n @if (config.Description) {\n <div class=\"config-description-small\">{{ config.Description }}</div>\n }\n </div>\n </div>\n </td>\n <td>\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n <i [class]=\"getStatusIcon(config.Status)\"></i>\n {{ config.Status }}\n </span>\n </td>\n <td>{{ config.params?.length || 0 }}</td>\n <td>{{ formatDate(config.__mj_UpdatedAt) }}</td>\n <td>\n <div class=\"table-actions\">\n <button\n type=\"button\"\n class=\"action-btn-small\"\n (click)=\"showConfigDetails(config)\"\n title=\"View Details\">\n <i class=\"fa-solid fa-eye\"></i>\n </button>\n <button\n type=\"button\"\n class=\"action-btn-small primary\"\n (click)=\"onOpenConfiguration(config)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n }\n }\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Detail Panel Overlay -->\n @if (detailPanelVisible) {\n <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n }\n\n <!-- Detail Panel -->\n <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n @if (selectedConfig) {\n <!-- Panel Header -->\n <div class=\"detail-panel-header\">\n <div class=\"detail-panel-title\">\n <div class=\"detail-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"detail-title-info\">\n <h3>{{ selectedConfig.Name }}</h3>\n <span class=\"detail-subtitle\">AI Configuration</span>\n </div>\n </div>\n <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Panel Content -->\n <div class=\"detail-panel-content\">\n <!-- Status Section -->\n <div class=\"detail-section\">\n <div class=\"detail-badges\">\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(selectedConfig.Status)\">\n <i [class]=\"getStatusIcon(selectedConfig.Status)\"></i>\n {{ selectedConfig.Status }}\n </span>\n @if (selectedConfig.IsDefault) {\n <span class=\"feature-badge default\">\n <i class=\"fa-solid fa-star\"></i>\n Default Configuration\n </span>\n }\n </div>\n </div>\n\n <!-- Description -->\n @if (selectedConfig.Description) {\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-align-left\"></i>\n Description\n </h4>\n <p class=\"detail-description\">{{ selectedConfig.Description }}</p>\n </div>\n }\n\n <!-- Configuration Stats -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-chart-bar\"></i>\n Overview\n </h4>\n <div class=\"detail-grid\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Parameters</span>\n <span class=\"detail-value\">{{ selectedConfig.params?.length || 0 }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Status</span>\n <span class=\"detail-value\">{{ selectedConfig.Status }}</span>\n </div>\n </div>\n </div>\n\n <!-- Linked Prompts -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-message-lines\"></i>\n Linked Prompts\n </h4>\n <div class=\"detail-grid single-column\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Context Compression</span>\n <span class=\"detail-value\">\n @if (selectedConfig.compressionPrompt) {\n {{ selectedConfig.compressionPrompt.Name }}\n } @else {\n <span class=\"muted\">Not configured</span>\n }\n </span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Context Summarization</span>\n <span class=\"detail-value\">\n @if (selectedConfig.summarizationPrompt) {\n {{ selectedConfig.summarizationPrompt.Name }}\n } @else {\n <span class=\"muted\">Not configured</span>\n }\n </span>\n </div>\n </div>\n </div>\n\n <!-- Parameters Preview -->\n @if (selectedConfig.params && selectedConfig.params.length > 0) {\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Parameters ({{ selectedConfig.params.length }})\n </h4>\n <div class=\"detail-params-list\">\n @for (param of selectedConfig.params.slice(0, 5); track param.ID) {\n <div class=\"detail-param-item\">\n <div class=\"param-info\">\n <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n <span class=\"param-name\">{{ param.Name }}</span>\n </div>\n <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n </div>\n }\n @if (selectedConfig.params.length > 5) {\n <div class=\"params-more\">\n +{{ selectedConfig.params.length - 5 }} more parameters\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Timestamps -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-clock\"></i>\n Timestamps\n </h4>\n <div class=\"detail-grid\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Created</span>\n <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_CreatedAt) }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Updated</span>\n <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_UpdatedAt) }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Panel Actions -->\n <div class=\"detail-panel-actions\">\n <button\n type=\"button\"\n class=\"detail-action-btn primary\"\n (click)=\"openConfigFromPanel()\">\n <i class=\"fa-solid fa-edit\"></i>\n Open Full Record\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* ============================================================================\n CONTAINER & LAYOUT\n ============================================================================ */\n.system-configuration-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ============================================================================\n HEADER\n ============================================================================ */\n.dashboard-header {\n background: white;\n padding: 16px 24px;\n border-bottom: 1px solid #e0e6ed;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n position: relative;\n z-index: 10;\n}\n\n.header-info {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.dashboard-title {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: #1e293b;\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-title i {\n color: #6366f1;\n font-size: 22px;\n}\n\n.filter-toggle-btn {\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border: 1px solid #dee2e6;\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);\n border-color: #ced4da;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n color: #6366f1;\n font-size: 14px;\n}\n\n.config-count {\n color: #6c757d;\n font-size: 14px;\n font-weight: 500;\n padding: 6px 12px;\n background: #f8f9fa;\n border-radius: 20px;\n border: 1px solid #e9ecef;\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: #f8f9fa;\n border-radius: 8px;\n padding: 3px;\n border: 1px solid #dee2e6;\n}\n\n.view-btn {\n background: transparent;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n color: #6c757d;\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 15px;\n}\n\n.view-btn:hover {\n color: #495057;\n}\n\n.view-btn.active {\n background: white;\n color: #6366f1;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n background: white;\n border: 1px solid #dee2e6;\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: #495057;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn:hover {\n background: #f8f9fa;\n border-color: #ced4da;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n font-size: 14px;\n}\n\n.control-btn.primary {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.control-btn.primary:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n/* ============================================================================\n MAIN CONTENT AREA\n ============================================================================ */\n.main-content {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.main-splitter {\n flex: 1;\n min-height: 0;\n}\n\n.configurations-content {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: transparent;\n}\n\n/* ============================================================================\n LOADING STATE\n ============================================================================ */\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n/* ============================================================================\n ERROR STATE\n ============================================================================ */\n.error-container {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n.error-message {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n border: 1px solid #fecaca;\n border-radius: 12px;\n color: #dc2626;\n font-size: 15px;\n font-weight: 500;\n}\n\n.error-message i {\n font-size: 20px;\n}\n\n/* ============================================================================\n EMPTY STATE\n ============================================================================ */\n.empty-state {\n text-align: center;\n padding: 80px 20px;\n color: #6c757d;\n}\n\n.empty-state i {\n font-size: 72px;\n color: #d1d5db;\n margin-bottom: 24px;\n display: block;\n opacity: 0.8;\n}\n\n.empty-state h3 {\n color: #374151;\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 12px 0;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 28px;\n color: #6b7280;\n}\n\n/* ============================================================================\n CONFIGURATION GRID\n ============================================================================ */\n.configurations-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n gap: 24px;\n}\n\n/* ============================================================================\n CONFIGURATION CARD\n ============================================================================ */\n.config-card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid #e5e7eb;\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n}\n\n.config-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.config-card:hover {\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n transform: translateY(-4px);\n border-color: #c7d2fe;\n}\n\n.config-card:hover::before {\n opacity: 1;\n}\n\n.config-card.expanded {\n box-shadow: 0 12px 40px rgba(99, 102, 241, 0.15);\n}\n\n.config-card.expanded::before {\n opacity: 1;\n}\n\n/* Card Header */\n.card-header {\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid #f3f4f6;\n transition: background 0.2s ease;\n}\n\n.card-header:hover {\n background: #fafbfc;\n}\n\n.config-info {\n display: flex;\n gap: 18px;\n flex: 1;\n}\n\n.config-icon {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.config-icon i {\n color: white;\n font-size: 24px;\n}\n\n.config-details {\n flex: 1;\n min-width: 0;\n}\n\n.config-name {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 700;\n color: #1f2937;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: -0.02em;\n}\n\n.config-meta {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* Status Badge */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: all 0.2s ease;\n}\n\n.status-badge i {\n font-size: 11px;\n}\n\n.status-badge.status-active {\n background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);\n color: #166534;\n border: 1px solid #86efac;\n}\n\n.status-badge.status-preview {\n background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n color: #92400e;\n border: 1px solid #fcd34d;\n}\n\n.status-badge.status-inactive {\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n color: #4b5563;\n border: 1px solid #d1d5db;\n}\n\n.status-badge.status-deprecated {\n background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n color: #991b1b;\n border: 1px solid #fca5a5;\n}\n\n/* Default Badge */\n.default-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n color: #5b21b6;\n border: 1px solid #c4b5fd;\n}\n\n.default-badge i {\n font-size: 11px;\n color: #7c3aed;\n}\n\n/* Expand Icon */\n.expand-icon {\n font-size: 16px;\n color: #9ca3af;\n transition: all 0.3s ease;\n padding: 8px;\n border-radius: 8px;\n}\n\n.expand-icon:hover {\n color: #6366f1;\n background: #f3f4f6;\n}\n\n.expand-icon.rotated {\n transform: rotate(180deg);\n color: #6366f1;\n}\n\n/* Card Body */\n.card-body {\n padding: 0 24px 20px 24px;\n}\n\n.config-description {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: #6b7280;\n}\n\n.config-description.text-muted {\n font-style: italic;\n color: #9ca3af;\n}\n\n/* ============================================================================\n EXPANDED CONTENT\n ============================================================================ */\n.expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid #f3f4f6;\n animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stats Grid */\n.config-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 12px;\n border: 1px solid #e2e8f0;\n}\n\n.stat-label {\n font-size: 11px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.stat-value {\n font-size: 14px;\n color: #334155;\n font-weight: 600;\n}\n\n/* Prompts Section */\n.prompts-section {\n margin-top: 20px;\n}\n\n.section-title {\n font-size: 13px;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.75px;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: #6366f1;\n font-size: 14px;\n}\n\n.prompt-links {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.prompt-link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.prompt-link:hover {\n background: #f8fafc;\n border-color: #c7d2fe;\n transform: translateX(4px);\n}\n\n.prompt-link-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);\n color: #2563eb;\n flex-shrink: 0;\n}\n\n.prompt-link-icon i {\n font-size: 14px;\n}\n\n.prompt-link-details {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-label {\n font-size: 11px;\n font-weight: 600;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n}\n\n.prompt-link-name {\n font-size: 14px;\n font-weight: 600;\n color: #1e293b;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.prompt-link-arrow {\n color: #94a3b8;\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.prompt-link:hover .prompt-link-arrow {\n color: #6366f1;\n transform: translateX(4px);\n}\n\n.no-prompt {\n font-size: 13px;\n color: #94a3b8;\n font-style: italic;\n padding: 12px 16px;\n background: #f8fafc;\n border-radius: 10px;\n border: 1px dashed #e2e8f0;\n}\n\n/* Parameters Section */\n.params-section {\n margin-top: 20px;\n}\n\n.params-grid {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.param-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.param-item:hover {\n background: #f8fafc;\n border-color: #c7d2fe;\n}\n\n.param-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.param-type-icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n color: #7c3aed;\n flex-shrink: 0;\n}\n\n.param-type-icon i {\n font-size: 13px;\n}\n\n.param-details {\n flex: 1;\n min-width: 0;\n}\n\n.param-name {\n font-size: 14px;\n font-weight: 600;\n color: #1e293b;\n}\n\n.param-type {\n font-size: 12px;\n color: #64748b;\n margin-top: 2px;\n}\n\n.param-value {\n font-size: 13px;\n color: #475569;\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: #f1f5f9;\n padding: 4px 10px;\n border-radius: 6px;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.no-params {\n font-size: 13px;\n color: #94a3b8;\n font-style: italic;\n padding: 12px 16px;\n background: #f8fafc;\n border-radius: 10px;\n border: 1px dashed #e2e8f0;\n text-align: center;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n.card-actions {\n padding: 16px 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-top: 1px solid #e5e7eb;\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.action-btn {\n background: white;\n border: 1px solid #e5e7eb;\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n color: #475569;\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.action-btn-primary {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.action-btn-primary:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);\n}\n\n.action-btn-warning {\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n border-color: #f59e0b;\n color: #78350f;\n}\n\n.action-btn-warning:hover {\n background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);\n}\n\n.action-btn-danger {\n color: #dc2626;\n border-color: #fecaca;\n}\n\n.action-btn-danger:hover {\n background: #fef2f2;\n border-color: #dc2626;\n}\n\n/* ============================================================================\n LIST VIEW\n ============================================================================ */\n.configurations-list {\n background: white;\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid #e5e7eb;\n overflow: hidden;\n}\n\n.configurations-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.configurations-table thead {\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-bottom: 2px solid #e5e7eb;\n}\n\n.configurations-table th {\n padding: 14px 20px;\n text-align: left;\n font-size: 12px;\n font-weight: 700;\n color: #475569;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.configurations-table th:hover {\n background: #e2e8f0;\n color: #6366f1;\n}\n\n.configurations-table th:last-child {\n cursor: default;\n}\n\n.configurations-table th:last-child:hover {\n background: transparent;\n color: #475569;\n}\n\n.configurations-table th.sorted {\n color: #6366f1;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n}\n\n.configurations-table th.sorted.desc .sort-icon {\n transform: rotate(180deg);\n}\n\n.configurations-table .sort-header {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.configurations-table .sort-icon {\n font-size: 10px;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.configurations-table th:hover .sort-icon {\n opacity: 0.5;\n}\n\n.configurations-table th.sorted .sort-icon {\n opacity: 1;\n color: #6366f1;\n}\n\n.configurations-table tbody tr {\n border-bottom: 1px solid #f1f5f9;\n transition: background 0.2s ease;\n}\n\n.configurations-table tbody tr:hover {\n background: #fafbfc;\n}\n\n.configurations-table tbody tr:last-child {\n border-bottom: none;\n}\n\n.configurations-table td {\n padding: 18px 20px;\n font-size: 14px;\n color: #475569;\n}\n\n.config-name-cell {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.config-icon-small {\n width: 42px;\n height: 42px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n flex-shrink: 0;\n}\n\n.config-icon-small i {\n color: white;\n font-size: 16px;\n}\n\n.config-name-text {\n font-weight: 600;\n color: #1e293b;\n}\n\n.config-description-small {\n font-size: 13px;\n color: #64748b;\n margin-top: 4px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.table-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small {\n background: white;\n border: 1px solid #e5e7eb;\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: #475569;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.action-btn-small:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n}\n\n.action-btn-small.primary {\n background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n border-color: #4f46e5;\n color: white;\n}\n\n.action-btn-small.primary:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);\n}\n\n/* ============================================================================\n RESPONSIVE DESIGN\n ============================================================================ */\n@media (max-width: 1024px) {\n .configurations-grid {\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n }\n}\n\n@media (max-width: 768px) {\n .dashboard-header {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n\n .header-info {\n justify-content: space-between;\n flex-wrap: wrap;\n }\n\n .header-controls {\n justify-content: space-between;\n }\n\n .configurations-grid {\n grid-template-columns: 1fr;\n }\n\n .config-stats {\n grid-template-columns: 1fr;\n }\n\n .card-header {\n padding: 20px;\n }\n\n .config-icon {\n width: 48px;\n height: 48px;\n }\n\n .config-icon i {\n font-size: 20px;\n }\n\n .card-actions {\n flex-wrap: wrap;\n }\n}\n\n/* ============================================================================\n SPLITTER CUSTOMIZATION\n ============================================================================ */\nkendo-splitter {\n background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n border: none;\n background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n background: #e5e7eb;\n width: 6px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n background: #c7d2fe;\n}\n\n:host ::ng-deep .k-pane {\n overflow: hidden;\n}\n\n/* ============================================================================\n DETAIL PANEL - SLIDE-IN OVERLAY\n ============================================================================ */\n\n.detail-panel-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n z-index: 1000;\n animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.detail-panel {\n position: fixed;\n top: 0;\n right: -480px;\n width: 480px;\n height: 100vh;\n background: white;\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.detail-panel.visible {\n right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-bottom: 1px solid #e2e8f0;\n flex-shrink: 0;\n}\n\n.detail-panel-title {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.detail-icon {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-icon i {\n color: white;\n font-size: 24px;\n}\n\n.detail-title-info h3 {\n margin: 0 0 4px 0;\n font-size: 20px;\n font-weight: 700;\n color: #1e293b;\n}\n\n.detail-subtitle {\n font-size: 13px;\n color: #64748b;\n font-weight: 500;\n}\n\n.detail-panel-close {\n background: white;\n border: 1px solid #e2e8f0;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: #64748b;\n}\n\n.detail-panel-close:hover {\n background: #f8fafc;\n border-color: #cbd5e1;\n color: #1e293b;\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.detail-section {\n margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n margin-bottom: 0;\n}\n\n.detail-badges {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.feature-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);\n color: #4f46e5;\n}\n\n.feature-badge.default {\n background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);\n color: #5b21b6;\n}\n\n.feature-badge i {\n font-size: 11px;\n}\n\n.detail-section-title {\n margin: 0 0 16px 0;\n font-size: 12px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-section-title i {\n color: #6366f1;\n font-size: 14px;\n}\n\n.detail-description {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: #475569;\n}\n\n.detail-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n}\n\n.detail-grid.single-column {\n grid-template-columns: 1fr;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 12px;\n border: 1px solid #e2e8f0;\n}\n\n.detail-label {\n font-size: 11px;\n font-weight: 700;\n color: #64748b;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.detail-value {\n font-size: 14px;\n color: #1e293b;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-value .muted {\n color: #94a3b8;\n font-style: italic;\n font-weight: 500;\n}\n\n.detail-value i {\n font-size: 13px;\n}\n\n/* Detail Params List */\n.detail-params-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-param-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-radius: 10px;\n border: 1px solid #e2e8f0;\n}\n\n.detail-param-item .param-info {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.detail-param-item .param-info i {\n color: #7c3aed;\n font-size: 14px;\n}\n\n.detail-param-item .param-name {\n font-size: 13px;\n font-weight: 600;\n color: #1e293b;\n}\n\n.detail-param-item .param-value {\n font-size: 12px;\n color: #475569;\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: white;\n padding: 4px 10px;\n border-radius: 6px;\n border: 1px solid #e2e8f0;\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.params-more {\n font-size: 12px;\n color: #6366f1;\n font-weight: 600;\n text-align: center;\n padding: 10px;\n background: #eef2ff;\n border-radius: 8px;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n padding: 20px 24px;\n background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);\n border-top: 1px solid #e2e8f0;\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.detail-action-btn {\n flex: 1;\n padding: 14px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.detail-action-btn.secondary {\n background: white;\n border: 2px solid #e2e8f0;\n color: #475569;\n}\n\n.detail-action-btn.secondary:hover {\n border-color: #6366f1;\n color: #6366f1;\n background: #fafbff;\n}\n\n.detail-action-btn.primary {\n background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n border: 2px solid transparent;\n color: white;\n box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n}\n\n.detail-action-btn.primary:hover {\n background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);\n transform: translateY(-1px);\n box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n .detail-panel {\n width: 100%;\n right: -100%;\n }\n\n .detail-panel.visible {\n right: 0;\n }\n\n .detail-grid {\n grid-template-columns: 1fr;\n }\n}\n"] }]
|
|
968
|
+
args: [{ standalone: false, selector: 'app-system-configuration', template: "<div class=\"system-configuration-container\">\n <!-- Header -->\n <div class=\"dashboard-header\">\n <div class=\"header-info\">\n <h2 class=\"dashboard-title\">\n <i class=\"fa-solid fa-sliders\"></i>\n AI Configuration\n </h2>\n <button\n type=\"button\"\n class=\"filter-toggle-btn\"\n (click)=\"toggleFilterPanel()\"\n title=\"Toggle Filters\">\n <i class=\"fa-solid fa-filter\"></i>\n @if (filterPanelVisible) {\n Hide Filters\n } @else {\n Show Filters\n }\n </button>\n <span class=\"config-count\">\n {{ filteredConfigurations.length }} of {{ configurations.length }} configurations\n </span>\n </div>\n\n <div class=\"header-controls\">\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button\n type=\"button\"\n class=\"view-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"setViewMode('grid')\"\n title=\"Grid View\">\n <i class=\"fa-solid fa-grid-2\"></i>\n </button>\n <button\n type=\"button\"\n class=\"view-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"setViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n\n <button\n type=\"button\"\n class=\"control-btn\"\n (click)=\"loadData()\"\n [disabled]=\"isLoading\"\n title=\"Refresh\">\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n Refresh\n </button>\n </div>\n </div>\n\n <!-- Main Content with Splitter -->\n <div class=\"main-content\">\n <kendo-splitter\n class=\"main-splitter\"\n orientation=\"horizontal\">\n\n <!-- Filter Panel (Left) -->\n <kendo-splitter-pane\n [size]=\"filterPanelVisible ? '320px' : '0px'\"\n [collapsible]=\"false\"\n [resizable]=\"filterPanelVisible\"\n [scrollable]=\"false\"\n [hidden]=\"!filterPanelVisible\">\n <mj-system-config-filter-panel\n [configurations]=\"configurations\"\n [filteredConfigurations]=\"filteredConfigurations\"\n [filters]=\"currentFilters\"\n (filtersChange)=\"onFiltersChange($event)\"\n (filterChange)=\"onFilterChange()\"\n (resetFilters)=\"onResetFilters()\"\n (closePanel)=\"toggleFilterPanel()\">\n </mj-system-config-filter-panel>\n </kendo-splitter-pane>\n\n <!-- Configurations List Panel -->\n <kendo-splitter-pane\n [resizable]=\"true\"\n [scrollable]=\"false\">\n <div class=\"configurations-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading AI configurations...\" size=\"large\"></mj-loading>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <p class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ error }}\n </p>\n </div>\n }\n\n <!-- Configurations Content -->\n @if (!isLoading && !error) {\n @if (filteredConfigurations.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-sliders\"></i>\n <h3>No configurations found</h3>\n <p>No AI configurations match your current filters. Try adjusting your search criteria or create a new configuration.</p>\n </div>\n } @else {\n <!-- Grid View -->\n @if (viewMode === 'grid') {\n <div class=\"configurations-grid\">\n @for (config of filteredConfigurations; track config.ID) {\n <div class=\"config-card\" [class.expanded]=\"config.isExpanded\">\n <!-- Card Header -->\n <div class=\"card-header\" (click)=\"toggleExpanded(config)\">\n <div class=\"config-info\">\n <div class=\"config-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"config-details\">\n <h4 class=\"config-name\">{{ config.Name }}</h4>\n <div class=\"config-meta\">\n @if (config.IsDefault) {\n <span class=\"default-badge\">\n <i class=\"fa-solid fa-star\"></i>\n Default\n </span>\n }\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n <i [class]=\"getStatusIcon(config.Status)\"></i>\n {{ config.Status }}\n </span>\n </div>\n </div>\n </div>\n\n <i class=\"fa-solid fa-chevron-down expand-icon\"\n [class.rotated]=\"config.isExpanded\"></i>\n </div>\n\n <!-- Card Body -->\n <div class=\"card-body\">\n @if (config.Description) {\n <p class=\"config-description\">{{ config.Description }}</p>\n } @else {\n <p class=\"config-description text-muted\">No description provided</p>\n }\n\n <!-- Expanded Content -->\n @if (config.isExpanded) {\n <div class=\"expanded-content\">\n <!-- Stats Grid -->\n <div class=\"config-stats\">\n <div class=\"stat-item\">\n <span class=\"stat-label\">Parameters</span>\n <span class=\"stat-value\">{{ config.params?.length || 0 }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Created</span>\n <span class=\"stat-value\">{{ formatDate(config.__mj_CreatedAt) }}</span>\n </div>\n <div class=\"stat-item\">\n <span class=\"stat-label\">Updated</span>\n <span class=\"stat-value\">{{ formatDate(config.__mj_UpdatedAt) }}</span>\n </div>\n </div>\n\n <!-- Linked Prompts -->\n <div class=\"prompts-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-message-lines\"></i>\n Linked Prompts\n </h5>\n <div class=\"prompt-links\">\n @if (config.compressionPrompt) {\n <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextCompressionID!); $event.stopPropagation()\">\n <div class=\"prompt-link-info\">\n <div class=\"prompt-link-icon\">\n <i class=\"fa-solid fa-compress\"></i>\n </div>\n <div class=\"prompt-link-details\">\n <span class=\"prompt-link-label\">Context Compression</span>\n <span class=\"prompt-link-name\">{{ config.compressionPrompt.Name }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n </div>\n } @else {\n <div class=\"no-prompt\">No compression prompt configured</div>\n }\n\n @if (config.summarizationPrompt) {\n <div class=\"prompt-link\" (click)=\"onOpenPrompt(config.DefaultPromptForContextSummarizationID!); $event.stopPropagation()\">\n <div class=\"prompt-link-info\">\n <div class=\"prompt-link-icon\">\n <i class=\"fa-solid fa-file-lines\"></i>\n </div>\n <div class=\"prompt-link-details\">\n <span class=\"prompt-link-label\">Context Summarization</span>\n <span class=\"prompt-link-name\">{{ config.summarizationPrompt.Name }}</span>\n </div>\n </div>\n <i class=\"fa-solid fa-arrow-right prompt-link-arrow\"></i>\n </div>\n } @else {\n <div class=\"no-prompt\">No summarization prompt configured</div>\n }\n </div>\n </div>\n\n <!-- Configuration Parameters -->\n @if (config.params && config.params.length > 0) {\n <div class=\"params-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Configuration Parameters\n </h5>\n <div class=\"params-grid\">\n @for (param of config.params; track param.ID) {\n <div class=\"param-item\" (click)=\"onOpenParam(param); $event.stopPropagation()\">\n <div class=\"param-info\">\n <div class=\"param-type-icon\">\n <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n </div>\n <div class=\"param-details\">\n <span class=\"param-name\">{{ param.Name }}</span>\n <span class=\"param-type\">{{ param.Type }}</span>\n </div>\n </div>\n <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"params-section\">\n <h5 class=\"section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Configuration Parameters\n </h5>\n <div class=\"no-params\">No parameters configured</div>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Card Actions -->\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <button\n type=\"button\"\n class=\"action-btn\"\n (click)=\"showConfigDetails(config, $event)\"\n title=\"View Details\">\n <i class=\"fa-solid fa-eye\"></i>\n Details\n </button>\n\n <button\n type=\"button\"\n class=\"action-btn action-btn-primary\"\n (click)=\"onOpenConfiguration(config)\">\n <i class=\"fa-solid fa-edit\"></i>\n Configure\n </button>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- List View -->\n @if (viewMode === 'list') {\n <div class=\"configurations-list\">\n <table class=\"configurations-table\">\n <thead>\n <tr>\n <th (click)=\"sortBy('Name')\"\n [class.sorted]=\"sortColumn === 'Name'\"\n [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Configuration\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Status')\"\n [class.sorted]=\"sortColumn === 'Status'\"\n [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Status\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Parameters')\"\n [class.sorted]=\"sortColumn === 'Parameters'\"\n [class.desc]=\"sortColumn === 'Parameters' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Parameters\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th (click)=\"sortBy('Updated')\"\n [class.sorted]=\"sortColumn === 'Updated'\"\n [class.desc]=\"sortColumn === 'Updated' && sortDirection === 'desc'\">\n <span class=\"sort-header\">\n Updated\n <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n </span>\n </th>\n <th>Actions</th>\n </tr>\n </thead>\n <tbody>\n @for (config of filteredConfigurations; track config.ID) {\n <tr>\n <td>\n <div class=\"config-name-cell\">\n <div class=\"config-icon-small\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div>\n <div class=\"config-name-text\">\n {{ config.Name }}\n @if (config.IsDefault) {\n <span class=\"default-badge\" style=\"margin-left: 8px;\">\n <i class=\"fa-solid fa-star\"></i>\n Default\n </span>\n }\n </div>\n @if (config.Description) {\n <div class=\"config-description-small\">{{ config.Description }}</div>\n }\n </div>\n </div>\n </td>\n <td>\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(config.Status)\">\n <i [class]=\"getStatusIcon(config.Status)\"></i>\n {{ config.Status }}\n </span>\n </td>\n <td>{{ config.params?.length || 0 }}</td>\n <td>{{ formatDate(config.__mj_UpdatedAt) }}</td>\n <td>\n <div class=\"table-actions\">\n <button\n type=\"button\"\n class=\"action-btn-small\"\n (click)=\"showConfigDetails(config)\"\n title=\"View Details\">\n <i class=\"fa-solid fa-eye\"></i>\n </button>\n <button\n type=\"button\"\n class=\"action-btn-small primary\"\n (click)=\"onOpenConfiguration(config)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n </div>\n </td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n }\n }\n }\n </div>\n </kendo-splitter-pane>\n </kendo-splitter>\n </div>\n\n <!-- Detail Panel Overlay -->\n @if (detailPanelVisible) {\n <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n }\n\n <!-- Detail Panel -->\n <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n @if (selectedConfig) {\n <!-- Panel Header -->\n <div class=\"detail-panel-header\">\n <div class=\"detail-panel-title\">\n <div class=\"detail-icon\">\n <i class=\"fa-solid fa-sliders\"></i>\n </div>\n <div class=\"detail-title-info\">\n <h3>{{ selectedConfig.Name }}</h3>\n <span class=\"detail-subtitle\">AI Configuration</span>\n </div>\n </div>\n <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n\n <!-- Panel Content -->\n <div class=\"detail-panel-content\">\n <!-- Status Section -->\n <div class=\"detail-section\">\n <div class=\"detail-badges\">\n <span class=\"status-badge\" [ngClass]=\"getStatusClass(selectedConfig.Status)\">\n <i [class]=\"getStatusIcon(selectedConfig.Status)\"></i>\n {{ selectedConfig.Status }}\n </span>\n @if (selectedConfig.IsDefault) {\n <span class=\"feature-badge default\">\n <i class=\"fa-solid fa-star\"></i>\n Default Configuration\n </span>\n }\n </div>\n </div>\n\n <!-- Description -->\n @if (selectedConfig.Description) {\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-align-left\"></i>\n Description\n </h4>\n <p class=\"detail-description\">{{ selectedConfig.Description }}</p>\n </div>\n }\n\n <!-- Configuration Stats -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-chart-bar\"></i>\n Overview\n </h4>\n <div class=\"detail-grid\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Parameters</span>\n <span class=\"detail-value\">{{ selectedConfig.params?.length || 0 }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Status</span>\n <span class=\"detail-value\">{{ selectedConfig.Status }}</span>\n </div>\n </div>\n </div>\n\n <!-- Linked Prompts -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-message-lines\"></i>\n Linked Prompts\n </h4>\n <div class=\"detail-grid single-column\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Context Compression</span>\n <span class=\"detail-value\">\n @if (selectedConfig.compressionPrompt) {\n {{ selectedConfig.compressionPrompt.Name }}\n } @else {\n <span class=\"muted\">Not configured</span>\n }\n </span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Context Summarization</span>\n <span class=\"detail-value\">\n @if (selectedConfig.summarizationPrompt) {\n {{ selectedConfig.summarizationPrompt.Name }}\n } @else {\n <span class=\"muted\">Not configured</span>\n }\n </span>\n </div>\n </div>\n </div>\n\n <!-- Parameters Preview -->\n @if (selectedConfig.params && selectedConfig.params.length > 0) {\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-gear\"></i>\n Parameters ({{ selectedConfig.params.length }})\n </h4>\n <div class=\"detail-params-list\">\n @for (param of selectedConfig.params.slice(0, 5); track param.ID) {\n <div class=\"detail-param-item\">\n <div class=\"param-info\">\n <i [class]=\"getParamTypeIcon(param.Type)\"></i>\n <span class=\"param-name\">{{ param.Name }}</span>\n </div>\n <span class=\"param-value\">{{ formatParamValue(param) }}</span>\n </div>\n }\n @if (selectedConfig.params.length > 5) {\n <div class=\"params-more\">\n +{{ selectedConfig.params.length - 5 }} more parameters\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Timestamps -->\n <div class=\"detail-section\">\n <h4 class=\"detail-section-title\">\n <i class=\"fa-solid fa-clock\"></i>\n Timestamps\n </h4>\n <div class=\"detail-grid\">\n <div class=\"detail-item\">\n <span class=\"detail-label\">Created</span>\n <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_CreatedAt) }}</span>\n </div>\n <div class=\"detail-item\">\n <span class=\"detail-label\">Updated</span>\n <span class=\"detail-value\">{{ formatDate(selectedConfig.__mj_UpdatedAt) }}</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Panel Actions -->\n <div class=\"detail-panel-actions\">\n <button\n type=\"button\"\n class=\"detail-action-btn primary\"\n (click)=\"openConfigFromPanel()\">\n <i class=\"fa-solid fa-edit\"></i>\n Open Full Record\n </button>\n </div>\n }\n </div>\n</div>\n", styles: ["/* AI Configuration Dashboard - World-Class Design */\n\n/* ============================================================================\n CONTAINER & LAYOUT\n ============================================================================ */\n.system-configuration-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-card);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n}\n\n/* ============================================================================\n HEADER\n ============================================================================ */\n.dashboard-header {\n background: var(--mj-bg-surface);\n padding: 16px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n position: relative;\n z-index: 10;\n}\n\n.header-info {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.dashboard-title {\n margin: 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-title i {\n color: var(--mj-brand-primary);\n font-size: 22px;\n}\n\n.filter-toggle-btn {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.filter-toggle-btn:hover {\n background: var(--mj-border-default);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.filter-toggle-btn i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.config-count {\n color: var(--mj-text-muted);\n font-size: 14px;\n font-weight: 500;\n padding: 6px 12px;\n background: var(--mj-bg-surface-card);\n border-radius: 20px;\n border: 1px solid var(--mj-border-default);\n}\n\n.header-controls {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: var(--mj-bg-surface-card);\n border-radius: 8px;\n padding: 3px;\n border: 1px solid var(--mj-border-default);\n}\n\n.view-btn {\n background: transparent;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n color: var(--mj-text-muted);\n cursor: pointer;\n transition: all 0.2s ease;\n font-size: 15px;\n}\n\n.view-btn:hover {\n color: var(--mj-text-secondary);\n}\n\n.view-btn.active {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 10px 18px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.control-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n font-size: 14px;\n}\n\n.control-btn.primary {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* ============================================================================\n MAIN CONTENT AREA\n ============================================================================ */\n.main-content {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n}\n\n.main-splitter {\n flex: 1;\n min-height: 0;\n}\n\n.configurations-content {\n height: 100%;\n overflow-y: auto;\n padding: 24px;\n background: transparent;\n}\n\n/* ============================================================================\n LOADING STATE\n ============================================================================ */\n.loading-container {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n min-height: 400px;\n}\n\n/* ============================================================================\n ERROR STATE\n ============================================================================ */\n.error-container {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 60px 20px;\n}\n\n.error-message {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 24px;\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n border-radius: 12px;\n color: var(--mj-status-error);\n font-size: 15px;\n font-weight: 500;\n}\n\n.error-message i {\n font-size: 20px;\n}\n\n/* ============================================================================\n EMPTY STATE\n ============================================================================ */\n.empty-state {\n text-align: center;\n padding: 80px 20px;\n color: var(--mj-text-muted);\n}\n\n.empty-state i {\n font-size: 72px;\n color: var(--mj-border-strong);\n margin-bottom: 24px;\n display: block;\n opacity: 0.8;\n}\n\n.empty-state h3 {\n color: var(--mj-text-secondary);\n font-size: 22px;\n font-weight: 600;\n margin: 0 0 12px 0;\n}\n\n.empty-state p {\n font-size: 15px;\n line-height: 1.6;\n max-width: 400px;\n margin: 0 auto 28px;\n color: var(--mj-text-muted);\n}\n\n/* ============================================================================\n CONFIGURATION GRID\n ============================================================================ */\n.configurations-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));\n gap: 24px;\n}\n\n/* ============================================================================\n CONFIGURATION CARD\n ============================================================================ */\n.config-card {\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--mj-border-default);\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n position: relative;\n}\n\n.config-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: var(--mj-brand-primary);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.config-card:hover {\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);\n transform: translateY(-4px);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.config-card:hover::before {\n opacity: 1;\n}\n\n.config-card.expanded {\n box-shadow: 0 12px 40px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.config-card.expanded::before {\n opacity: 1;\n}\n\n/* Card Header */\n.card-header {\n padding: 24px;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n cursor: pointer;\n user-select: none;\n border-bottom: 1px solid var(--mj-border-default);\n transition: background 0.2s ease;\n}\n\n.card-header:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.config-info {\n display: flex;\n gap: 18px;\n flex: 1;\n}\n\n.config-icon {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--mj-brand-primary);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.config-icon i {\n color: var(--mj-text-inverse);\n font-size: 24px;\n}\n\n.config-details {\n flex: 1;\n min-width: 0;\n}\n\n.config-name {\n margin: 0 0 8px 0;\n font-size: 18px;\n font-weight: 700;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: -0.02em;\n}\n\n.config-meta {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n align-items: center;\n}\n\n/* Status Badge */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n transition: all 0.2s ease;\n}\n\n.status-badge i {\n font-size: 11px;\n}\n\n.status-badge.status-active {\n background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n color: var(--mj-color-success-700);\n border: 1px solid color-mix(in srgb, var(--mj-status-success) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-preview {\n background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n color: color-mix(in srgb, var(--mj-status-warning) 70%, black);\n border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n}\n\n.status-badge.status-inactive {\n background: var(--mj-bg-surface-card);\n color: var(--mj-text-secondary);\n border: 1px solid var(--mj-border-strong);\n}\n\n.status-badge.status-deprecated {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border: 1px solid color-mix(in srgb, var(--mj-status-error) 35%, var(--mj-bg-surface));\n}\n\n/* Default Badge */\n.default-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n border: 1px solid var(--mj-brand-accent);\n}\n\n.default-badge i {\n font-size: 11px;\n color: var(--mj-brand-primary);\n}\n\n/* Expand Icon */\n.expand-icon {\n font-size: 16px;\n color: var(--mj-text-disabled);\n transition: all 0.3s ease;\n padding: 8px;\n border-radius: 8px;\n}\n\n.expand-icon:hover {\n color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-card);\n}\n\n.expand-icon.rotated {\n transform: rotate(180deg);\n color: var(--mj-brand-primary);\n}\n\n/* Card Body */\n.card-body {\n padding: 0 24px 20px 24px;\n}\n\n.config-description {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: var(--mj-text-muted);\n}\n\n.config-description.text-muted {\n font-style: italic;\n color: var(--mj-text-disabled);\n}\n\n/* ============================================================================\n EXPANDED CONTENT\n ============================================================================ */\n.expanded-content {\n margin-top: 20px;\n padding-top: 20px;\n border-top: 1px solid var(--mj-border-default);\n animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stats Grid */\n.config-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 16px;\n margin-bottom: 20px;\n}\n\n.stat-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 12px;\n border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n font-size: 11px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n}\n\n.stat-value {\n font-size: 14px;\n color: var(--mj-text-secondary);\n font-weight: 600;\n}\n\n/* Prompts Section */\n.prompts-section {\n margin-top: 20px;\n}\n\n.section-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.75px;\n margin: 0 0 12px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.section-title i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.prompt-links {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.prompt-link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.prompt-link:hover {\n background: var(--mj-bg-surface-card);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n transform: translateX(4px);\n}\n\n.prompt-link-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-icon {\n width: 36px;\n height: 36px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.prompt-link-icon i {\n font-size: 14px;\n}\n\n.prompt-link-details {\n flex: 1;\n min-width: 0;\n}\n\n.prompt-link-label {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n margin-bottom: 2px;\n}\n\n.prompt-link-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.prompt-link-arrow {\n color: var(--mj-text-disabled);\n font-size: 14px;\n transition: all 0.2s ease;\n}\n\n.prompt-link:hover .prompt-link-arrow {\n color: var(--mj-brand-primary);\n transform: translateX(4px);\n}\n\n.no-prompt {\n font-size: 13px;\n color: var(--mj-text-disabled);\n font-style: italic;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px dashed var(--mj-border-default);\n}\n\n/* Parameters Section */\n.params-section {\n margin-top: 20px;\n}\n\n.params-grid {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.param-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 10px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.param-item:hover {\n background: var(--mj-bg-surface-card);\n border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.param-info {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n}\n\n.param-type-icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.param-type-icon i {\n font-size: 13px;\n}\n\n.param-details {\n flex: 1;\n min-width: 0;\n}\n\n.param-name {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.param-type {\n font-size: 12px;\n color: var(--mj-text-muted);\n margin-top: 2px;\n}\n\n.param-value {\n font-size: 13px;\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 10px;\n border-radius: 6px;\n max-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.no-params {\n font-size: 13px;\n color: var(--mj-text-disabled);\n font-style: italic;\n padding: 12px 16px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px dashed var(--mj-border-default);\n text-align: center;\n}\n\n/* ============================================================================\n CARD ACTIONS\n ============================================================================ */\n.card-actions {\n padding: 16px 24px;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 10px;\n justify-content: flex-end;\n}\n\n.action-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 8px 16px;\n border-radius: 8px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.action-btn:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.action-btn i {\n font-size: 12px;\n}\n\n.action-btn-primary {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.action-btn-primary:hover {\n background: var(--mj-brand-primary-hover);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.action-btn-warning {\n background: color-mix(in srgb, var(--mj-status-warning) 80%, var(--mj-bg-surface));\n border-color: var(--mj-status-warning);\n color: color-mix(in srgb, var(--mj-status-warning) 60%, black);\n}\n\n.action-btn-warning:hover {\n background: var(--mj-status-warning);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n.action-btn-danger {\n color: var(--mj-status-error);\n border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n}\n\n.action-btn-danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n border-color: var(--mj-status-error);\n}\n\n/* ============================================================================\n LIST VIEW\n ============================================================================ */\n.configurations-list {\n background: var(--mj-bg-surface);\n border-radius: 16px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);\n border: 1px solid var(--mj-border-default);\n overflow: hidden;\n}\n\n.configurations-table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.configurations-table thead {\n background: var(--mj-bg-surface-card);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.configurations-table th {\n padding: 14px 20px;\n text-align: left;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n cursor: pointer;\n user-select: none;\n transition: all 0.2s ease;\n}\n\n.configurations-table th:hover {\n background: var(--mj-border-default);\n color: var(--mj-brand-primary);\n}\n\n.configurations-table th:last-child {\n cursor: default;\n}\n\n.configurations-table th:last-child:hover {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.configurations-table th.sorted {\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.configurations-table th.sorted.desc .sort-icon {\n transform: rotate(180deg);\n}\n\n.configurations-table .sort-header {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.configurations-table .sort-icon {\n font-size: 10px;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.configurations-table th:hover .sort-icon {\n opacity: 0.5;\n}\n\n.configurations-table th.sorted .sort-icon {\n opacity: 1;\n color: var(--mj-brand-primary);\n}\n\n.configurations-table tbody tr {\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n transition: background 0.2s ease;\n}\n\n.configurations-table tbody tr:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.configurations-table tbody tr:last-child {\n border-bottom: none;\n}\n\n.configurations-table td {\n padding: 18px 20px;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n.config-name-cell {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n.config-icon-small {\n width: 42px;\n height: 42px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.config-icon-small i {\n color: var(--mj-text-inverse);\n font-size: 16px;\n}\n\n.config-name-text {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.config-description-small {\n font-size: 13px;\n color: var(--mj-text-muted);\n margin-top: 4px;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.table-actions {\n display: flex;\n gap: 8px;\n}\n\n.action-btn-small {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n padding: 6px 12px;\n border-radius: 6px;\n font-size: 12px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.action-btn-small:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n}\n\n.action-btn-small.primary {\n background: var(--mj-brand-primary);\n border-color: var(--mj-brand-primary-hover);\n color: var(--mj-text-inverse);\n}\n\n.action-btn-small.primary:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n/* ============================================================================\n RESPONSIVE DESIGN\n ============================================================================ */\n@media (max-width: 1024px) {\n .configurations-grid {\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n }\n}\n\n@media (max-width: 768px) {\n .dashboard-header {\n flex-direction: column;\n gap: 16px;\n align-items: stretch;\n }\n\n .header-info {\n justify-content: space-between;\n flex-wrap: wrap;\n }\n\n .header-controls {\n justify-content: space-between;\n }\n\n .configurations-grid {\n grid-template-columns: 1fr;\n }\n\n .config-stats {\n grid-template-columns: 1fr;\n }\n\n .card-header {\n padding: 20px;\n }\n\n .config-icon {\n width: 48px;\n height: 48px;\n }\n\n .config-icon i {\n font-size: 20px;\n }\n\n .card-actions {\n flex-wrap: wrap;\n }\n}\n\n/* ============================================================================\n SPLITTER CUSTOMIZATION\n ============================================================================ */\nkendo-splitter {\n background: transparent;\n}\n\n:host ::ng-deep .k-splitter {\n border: none;\n background: transparent;\n}\n\n:host ::ng-deep .k-splitbar {\n background: var(--mj-border-default);\n width: 6px;\n}\n\n:host ::ng-deep .k-splitbar:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n:host ::ng-deep .k-pane {\n overflow: hidden;\n}\n\n/* ============================================================================\n DETAIL PANEL - SLIDE-IN OVERLAY\n ============================================================================ */\n\n.detail-panel-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n z-index: 1000;\n animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n.detail-panel {\n position: fixed;\n top: 0;\n right: -480px;\n width: 480px;\n height: 100vh;\n background: var(--mj-bg-surface);\n box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n display: flex;\n flex-direction: column;\n transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n overflow: hidden;\n}\n\n.detail-panel.visible {\n right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.detail-panel-title {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.detail-icon {\n width: 56px;\n height: 56px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: var(--mj-brand-primary);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n color: var(--mj-text-inverse);\n font-size: 24px;\n}\n\n.detail-title-info h3 {\n margin: 0 0 4px 0;\n font-size: 20px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n font-size: 13px;\n color: var(--mj-text-muted);\n font-weight: 500;\n}\n\n.detail-panel-close {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s ease;\n color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n background: var(--mj-bg-surface-card);\n border-color: var(--mj-border-strong);\n color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n}\n\n.detail-section {\n margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n margin-bottom: 0;\n}\n\n.detail-badges {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n}\n\n.feature-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: 20px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge.default {\n background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.feature-badge i {\n font-size: 11px;\n}\n\n.detail-section-title {\n margin: 0 0 16px 0;\n font-size: 12px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.detail-section-title i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.detail-description {\n margin: 0;\n font-size: 14px;\n line-height: 1.7;\n color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n}\n\n.detail-grid.single-column {\n grid-template-columns: 1fr;\n}\n\n.detail-item {\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding: 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 12px;\n border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n font-size: 11px;\n font-weight: 700;\n color: var(--mj-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.detail-value {\n font-size: 14px;\n color: var(--mj-text-primary);\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.detail-value .muted {\n color: var(--mj-text-disabled);\n font-style: italic;\n font-weight: 500;\n}\n\n.detail-value i {\n font-size: 13px;\n}\n\n/* Detail Params List */\n.detail-params-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.detail-param-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 14px;\n background: var(--mj-bg-surface-card);\n border-radius: 10px;\n border: 1px solid var(--mj-border-default);\n}\n\n.detail-param-item .param-info {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.detail-param-item .param-info i {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.detail-param-item .param-name {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.detail-param-item .param-value {\n font-size: 12px;\n color: var(--mj-text-secondary);\n font-family: 'SF Mono', Monaco, 'Consolas', monospace;\n background: var(--mj-bg-surface);\n padding: 4px 10px;\n border-radius: 6px;\n border: 1px solid var(--mj-border-default);\n max-width: 150px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.params-more {\n font-size: 12px;\n color: var(--mj-brand-primary);\n font-weight: 600;\n text-align: center;\n padding: 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-radius: 8px;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n padding: 20px 24px;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n display: flex;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.detail-action-btn {\n flex: 1;\n padding: 14px 20px;\n border-radius: 12px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.detail-action-btn.secondary {\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.detail-action-btn.primary {\n background: var(--mj-brand-primary);\n border: 2px solid transparent;\n color: var(--mj-text-inverse);\n box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n background: var(--mj-brand-primary-hover);\n transform: translateY(-1px);\n box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n .detail-panel {\n width: 100%;\n right: -100%;\n }\n\n .detail-panel.visible {\n right: 0;\n }\n\n .detail-grid {\n grid-template-columns: 1fr;\n }\n}\n"] }]
|
|
969
969
|
}], () => [{ type: i1.NavigationService }, { type: i0.ChangeDetectorRef }], null); })();
|
|
970
970
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SystemConfigurationComponent, { className: "SystemConfigurationComponent", filePath: "src/AI/components/system/system-configuration.component.ts", lineNumber: 32 }); })();
|
|
971
971
|
//# sourceMappingURL=system-configuration.component.js.map
|