@memberjunction/ng-dashboards 5.14.0 → 5.15.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/execution-monitoring.component.js +3 -3
- package/dist/APIKeys/api-applications-panel.component.js +4 -4
- package/dist/APIKeys/api-key-create-dialog.component.js +4 -4
- package/dist/APIKeys/api-key-edit-panel.component.js +4 -4
- package/dist/APIKeys/api-scopes-panel.component.js +5 -5
- package/dist/APIKeys/api-usage-panel.component.js +3 -3
- package/dist/Actions/components/actions-list-view.component.js +4 -4
- package/dist/Actions/components/actions-overview.component.js +5 -5
- package/dist/Actions/components/categories-list-view.component.js +4 -4
- package/dist/Actions/components/execution-monitoring.component.js +4 -4
- package/dist/Actions/components/explorer/action-toolbar.component.js +3 -3
- package/dist/Actions/components/explorer/action-tree-panel.component.js +3 -3
- package/dist/Actions/components/explorer/new-action-panel.component.js +4 -4
- package/dist/Actions/components/explorer/new-category-panel.component.js +4 -4
- package/dist/ComponentStudio/components/artifact-load-dialog.component.js +3 -3
- package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +3 -3
- package/dist/ComponentStudio/components/browser/component-browser.component.js +3 -3
- package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +3 -3
- package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +3 -3
- package/dist/ComponentStudio/components/editors/requirements-editor.component.js +3 -3
- package/dist/ComponentStudio/components/editors/spec-editor.component.js +3 -3
- package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +3 -3
- package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +4 -4
- package/dist/ComponentStudio/components/text-import-dialog.component.js +3 -3
- package/dist/DataExplorer/data-explorer-dashboard.component.js +1 -1
- package/dist/Home/home-dashboard.component.js +3 -3
- package/dist/QueryBrowser/query-browser-resource.component.js +3 -3
- package/dist/actions-dashboards.module.d.ts +42 -0
- package/dist/actions-dashboards.module.d.ts.map +1 -0
- package/dist/actions-dashboards.module.js +156 -0
- package/dist/actions-dashboards.module.js.map +1 -0
- package/dist/ai-dashboards.module.d.ts +43 -0
- package/dist/ai-dashboards.module.d.ts.map +1 -0
- package/dist/ai-dashboards.module.js +169 -0
- package/dist/ai-dashboards.module.js.map +1 -0
- package/dist/communication-dashboards.module.d.ts +26 -0
- package/dist/communication-dashboards.module.d.ts.map +1 -0
- package/dist/communication-dashboards.module.js +93 -0
- package/dist/communication-dashboards.module.js.map +1 -0
- package/dist/component-studio-dashboards.module.d.ts +37 -0
- package/dist/component-studio-dashboards.module.d.ts.map +1 -0
- package/dist/component-studio-dashboards.module.js +131 -0
- package/dist/component-studio-dashboards.module.js.map +1 -0
- package/dist/core-dashboards.module.d.ts +49 -0
- package/dist/core-dashboards.module.d.ts.map +1 -0
- package/dist/core-dashboards.module.js +197 -0
- package/dist/core-dashboards.module.js.map +1 -0
- package/dist/credentials-dashboards.module.d.ts +27 -0
- package/dist/credentials-dashboards.module.d.ts.map +1 -0
- package/dist/credentials-dashboards.module.js +100 -0
- package/dist/credentials-dashboards.module.js.map +1 -0
- package/dist/data-explorer-dashboards.module.d.ts +32 -0
- package/dist/data-explorer-dashboards.module.d.ts.map +1 -0
- package/dist/data-explorer-dashboards.module.js +110 -0
- package/dist/data-explorer-dashboards.module.js.map +1 -0
- package/dist/lists-dashboards.module.d.ts +25 -0
- package/dist/lists-dashboards.module.d.ts.map +1 -0
- package/dist/lists-dashboards.module.js +94 -0
- package/dist/lists-dashboards.module.js.map +1 -0
- package/dist/module.d.ts +31 -150
- package/dist/module.d.ts.map +1 -1
- package/dist/module.js +109 -735
- package/dist/module.js.map +1 -1
- package/dist/public-api.d.ts +11 -1
- package/dist/public-api.d.ts.map +1 -1
- package/dist/public-api.js +15 -2
- package/dist/public-api.js.map +1 -1
- package/dist/scheduling-dashboards.module.d.ts +29 -0
- package/dist/scheduling-dashboards.module.d.ts.map +1 -0
- package/dist/scheduling-dashboards.module.js +106 -0
- package/dist/scheduling-dashboards.module.js.map +1 -0
- package/dist/shared/shared-dashboard-widgets.module.d.ts +16 -0
- package/dist/shared/shared-dashboard-widgets.module.d.ts.map +1 -0
- package/dist/shared/shared-dashboard-widgets.module.js +40 -0
- package/dist/shared/shared-dashboard-widgets.module.js.map +1 -0
- package/dist/testing-dashboards.module.d.ts +38 -0
- package/dist/testing-dashboards.module.d.ts.map +1 -0
- package/dist/testing-dashboards.module.js +145 -0
- package/dist/testing-dashboards.module.js.map +1 -0
- package/package.json +100 -42
|
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
|
|
|
2
2
|
import { Metadata, RunView } from '@memberjunction/core';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "@angular/common";
|
|
5
|
-
import * as i2 from "@progress/kendo-angular-
|
|
6
|
-
import * as i3 from "@progress/kendo-angular-
|
|
5
|
+
import * as i2 from "@progress/kendo-angular-buttons";
|
|
6
|
+
import * as i3 from "@progress/kendo-angular-dialog";
|
|
7
7
|
import * as i4 from "@memberjunction/ng-shared-generic";
|
|
8
8
|
function APIUsagePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
9
9
|
i0.ɵɵelement(0, "mj-loading", 1);
|
|
@@ -1006,7 +1006,7 @@ export class APIUsagePanelComponent {
|
|
|
1006
1006
|
i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
|
|
1007
1007
|
i0.ɵɵadvance();
|
|
1008
1008
|
i0.ɵɵconditional(ctx.ShowLogsPanel ? 3 : -1);
|
|
1009
|
-
} }, dependencies: [i1.NgClass, i2.WindowComponent, i2.WindowTitleBarComponent, i3.ButtonComponent, i4.LoadingComponent], styles: [".usage-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 24px;\n background: var(--mj-bg-page);\n min-height: 100%;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.time-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: transparent;\n border: none;\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.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 18px 20px;\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n font-size: 18px;\n}\n\n.kpi-icon.requests[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-brand-primary);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n font-size: 22px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.legend-color.requests[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n display: flex;\n height: 200px;\n gap: 8px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: flex-end;\n gap: 4px;\n padding-bottom: 24px;\n}\n\n.bar-group[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n}\n\n.bar-wrapper[_ngcontent-%COMP%] {\n width: 100%;\n height: 160px;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n}\n\n.bar[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 32px;\n border-radius: 4px 4px 0 0;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.bar.requests-bar[_ngcontent-%COMP%] {\n background: linear-gradient(180deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n}\n\n.chart-y-axis[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding-bottom: 24px;\n font-size: 10px;\n color: var(--mj-text-muted);\n text-align: right;\n min-width: 40px;\n}\n\n.empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--mj-text-muted);\n}\n\n.empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n\n\n.breakdown-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 20px;\n}\n\n.breakdown-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.breakdown-content[_ngcontent-%COMP%] {\n padding: 12px;\n max-height: 280px;\n overflow-y: auto;\n}\n\n\n\n.endpoint-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.endpoint-item[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.endpoint-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n flex: 1;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.method-get[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put[_ngcontent-%COMP%] { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.endpoint-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.endpoint-requests[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-color-indigo-500);\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 500;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.key-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.key-last-used[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.key-requests[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\n}\n\n\n\n.status-distribution[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.status-bar[_ngcontent-%COMP%] {\n display: flex;\n height: 24px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--mj-bg-surface-sunken);\n}\n\n.status-segment[_ngcontent-%COMP%] {\n transition: all 0.3s ease;\n}\n\n.status-segment[_ngcontent-%COMP%]:hover {\n filter: brightness(1.1);\n}\n\n.status-legend[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.status-legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n}\n\n.status-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.status-label[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-secondary);\n}\n\n.status-count[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.logs-table[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.logs-table-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n gap: 12px;\n padding: 12px 20px;\n background: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.logs-table-body[_ngcontent-%COMP%] {\n max-height: 320px;\n overflow-y: auto;\n}\n\n.logs-table-body.scrollable[_ngcontent-%COMP%] {\n max-height: 380px;\n}\n\n.log-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n gap: 12px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n font-family: 'Fira Code', monospace;\n font-size: 12px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.col-status[_ngcontent-%COMP%] {\n font-weight: 600;\n text-align: center;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.col-status.status-info[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n.col-status.status-warning[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.col-status.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 20px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.empty-state.large[_ngcontent-%COMP%] {\n padding: 48px 24px;\n}\n\n.empty-state.large[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 12px;\n}\n\n\n\n.drilldown-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n font-size: 15px;\n}\n\n.drilldown-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-hover);\n}\n\n.drilldown-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: hidden;\n}\n\n.drilldown-logs[_ngcontent-%COMP%] {\n height: 100%;\n}\n\n\n\n[_nghost-%COMP%] kendo-window {\n border-radius: 12px !important;\n overflow: hidden;\n box-shadow: var(--mj-shadow-2xl) !important;\n}\n\n[_nghost-%COMP%] kendo-window .k-window-content {\n padding: 0 !important;\n}\n\n[_nghost-%COMP%] kendo-window-titlebar {\n padding: 16px 20px !important;\n background: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n\n\n@media (max-width: 1400px) {\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (max-width: 1200px) {\n .breakdown-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media (max-width: 900px) {\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .breakdown-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .logs-table-header[_ngcontent-%COMP%], \n .log-row[_ngcontent-%COMP%] {\n grid-template-columns: 80px 100px 60px 1fr 60px;\n }\n\n .col-duration[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n@media (max-width: 600px) {\n .panel-header[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .time-filters[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .logs-table-header[_ngcontent-%COMP%], \n .log-row[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 60px;\n }\n\n .col-key[_ngcontent-%COMP%], \n .col-method[_ngcontent-%COMP%], \n .col-endpoint[_ngcontent-%COMP%] {\n display: none;\n }\n}"] });
|
|
1009
|
+
} }, dependencies: [i1.NgClass, i2.ButtonComponent, i3.WindowComponent, i3.WindowTitleBarComponent, i4.LoadingComponent], styles: [".usage-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 24px;\n background: var(--mj-bg-page);\n min-height: 100%;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n gap: 24px;\n flex-wrap: wrap;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n margin: 0;\n font-size: 24px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.time-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n background: var(--mj-bg-surface);\n padding: 4px;\n border-radius: 10px;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.time-btn[_ngcontent-%COMP%] {\n padding: 8px 16px;\n background: transparent;\n border: none;\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.2s ease;\n}\n\n.time-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.time-btn.active[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-600) 100%);\n color: var(--mj-text-inverse);\n box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-color-indigo-500) 30%, transparent);\n}\n\n\n\n.kpi-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 16px;\n}\n\n.kpi-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 18px 20px;\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n transition: all 0.2s ease;\n}\n\n.kpi-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-lg);\n transform: translateY(-2px);\n}\n\n.kpi-card.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success-bg);\n}\n\n.kpi-card.warning[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n}\n\n.kpi-icon[_ngcontent-%COMP%] {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n font-size: 18px;\n}\n\n.kpi-icon.requests[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-info-100) 0%, var(--mj-color-info-100) 100%);\n color: var(--mj-color-info-600);\n}\n\n.kpi-icon.success-rate[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-success-100) 0%, var(--mj-color-success-200) 100%);\n color: var(--mj-color-success-600);\n}\n\n.kpi-icon.errors[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-error-100) 0%, var(--mj-color-error-200) 100%);\n color: var(--mj-color-error-600);\n}\n\n.kpi-icon.response-time[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-indigo-100) 0%, var(--mj-color-indigo-200) 100%);\n color: var(--mj-color-indigo-600);\n}\n\n.kpi-icon.keys[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n color: var(--mj-brand-primary-hover);\n}\n\n.kpi-icon.endpoints[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, var(--mj-color-violet-50) 0%, var(--mj-color-violet-200) 100%);\n color: var(--mj-brand-primary);\n}\n\n.kpi-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.kpi-value[_ngcontent-%COMP%] {\n font-size: 22px;\n font-weight: 700;\n color: var(--mj-text-primary);\n}\n\n.kpi-label[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n\n\n.chart-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n padding: 20px;\n box-shadow: var(--mj-shadow-sm);\n}\n\n.chart-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.chart-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.chart-legend[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n}\n\n.legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.legend-color.requests[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n}\n\n.legend-color.errors[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n\n.chart-container[_ngcontent-%COMP%] {\n display: flex;\n height: 200px;\n gap: 8px;\n}\n\n.chart-bars[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n align-items: flex-end;\n gap: 4px;\n padding-bottom: 24px;\n}\n\n.bar-group[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n}\n\n.bar-wrapper[_ngcontent-%COMP%] {\n width: 100%;\n height: 160px;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n}\n\n.bar[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 32px;\n border-radius: 4px 4px 0 0;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.bar.requests-bar[_ngcontent-%COMP%] {\n background: linear-gradient(180deg, var(--mj-color-indigo-500) 0%, var(--mj-color-indigo-400) 100%);\n}\n\n.bar.requests-bar[_ngcontent-%COMP%]:hover {\n background: linear-gradient(180deg, var(--mj-color-indigo-600) 0%, var(--mj-color-indigo-500) 100%);\n}\n\n.bar.errors-bar[_ngcontent-%COMP%] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: var(--mj-status-error);\n border-radius: 0;\n}\n\n.bar-label[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 10px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: 100%;\n}\n\n.chart-y-axis[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding-bottom: 24px;\n font-size: 10px;\n color: var(--mj-text-muted);\n text-align: right;\n min-width: 40px;\n}\n\n.empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 200px;\n color: var(--mj-text-muted);\n}\n\n.empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n\n\n.breakdown-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 20px;\n}\n\n.breakdown-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.breakdown-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.breakdown-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.breakdown-content[_ngcontent-%COMP%] {\n padding: 12px;\n max-height: 280px;\n overflow-y: auto;\n}\n\n\n\n.endpoint-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.endpoint-item[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.endpoint-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.endpoint-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n flex: 1;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n flex-shrink: 0;\n}\n\n.method-get[_ngcontent-%COMP%] { background: var(--mj-status-info-bg); color: var(--mj-color-info-600); }\n.method-post[_ngcontent-%COMP%] { background: var(--mj-color-success-100); color: var(--mj-color-success-600); }\n.method-put[_ngcontent-%COMP%] { background: var(--mj-color-brand-100); color: var(--mj-brand-primary-hover); }\n.method-delete[_ngcontent-%COMP%] { background: var(--mj-color-error-100); color: var(--mj-color-error-600); }\n.method-other[_ngcontent-%COMP%] { background: var(--mj-bg-surface-sunken); color: var(--mj-text-secondary); }\n\n.endpoint-path[_ngcontent-%COMP%] {\n font-size: 12px;\n font-family: 'Fira Code', monospace;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.endpoint-stats[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 11px;\n flex-shrink: 0;\n}\n\n.endpoint-requests[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-color-indigo-500);\n}\n\n.endpoint-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.endpoint-error[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.endpoint-error.has-errors[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 500;\n}\n\n\n\n.key-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.key-item[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 12px;\n background: var(--mj-bg-page);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.key-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.key-info[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.key-last-used[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n}\n\n.key-requests[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-color-indigo-500);\n}\n\n\n\n.status-distribution[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.status-bar[_ngcontent-%COMP%] {\n display: flex;\n height: 24px;\n border-radius: 6px;\n overflow: hidden;\n background: var(--mj-bg-surface-sunken);\n}\n\n.status-segment[_ngcontent-%COMP%] {\n transition: all 0.3s ease;\n}\n\n.status-segment[_ngcontent-%COMP%]:hover {\n filter: brightness(1.1);\n}\n\n.status-legend[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.status-legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 12px;\n}\n\n.status-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 3px;\n}\n\n.status-label[_ngcontent-%COMP%] {\n flex: 1;\n color: var(--mj-text-secondary);\n}\n\n.status-count[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n}\n\n\n\n.logs-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: var(--mj-shadow-sm);\n overflow: hidden;\n}\n\n.logs-header[_ngcontent-%COMP%] {\n padding: 16px 20px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.logs-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.logs-table[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.logs-table-header[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n gap: 12px;\n padding: 12px 20px;\n background: var(--mj-bg-surface-sunken);\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.logs-table-body[_ngcontent-%COMP%] {\n max-height: 320px;\n overflow-y: auto;\n}\n\n.logs-table-body.scrollable[_ngcontent-%COMP%] {\n max-height: 380px;\n}\n\n.log-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 120px 70px 1fr 70px 80px;\n gap: 12px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n font-size: 13px;\n align-items: center;\n transition: background 0.2s ease;\n}\n\n.log-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-page);\n}\n\n.col-time[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 12px;\n}\n\n.col-key[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n font-family: 'Fira Code', monospace;\n font-size: 12px;\n color: var(--mj-text-secondary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.col-status[_ngcontent-%COMP%] {\n font-weight: 600;\n text-align: center;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.col-status.status-info[_ngcontent-%COMP%] { color: var(--mj-status-info); }\n.col-status.status-warning[_ngcontent-%COMP%] { color: var(--mj-color-warning-500); }\n.col-status.status-error[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.col-duration[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n text-align: right;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px 20px;\n color: var(--mj-text-muted);\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 8px;\n opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.empty-state.large[_ngcontent-%COMP%] {\n padding: 48px 24px;\n}\n\n.empty-state.large[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n font-size: 12px;\n}\n\n\n\n.drilldown-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n font-weight: 600;\n font-size: 15px;\n}\n\n.drilldown-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-color-indigo-500);\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n padding: 4px 10px;\n background: var(--mj-color-indigo-100);\n border-radius: 12px;\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-color-indigo-600);\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n margin-left: auto;\n color: var(--mj-text-muted);\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-hover);\n}\n\n.drilldown-content[_ngcontent-%COMP%] {\n height: 100%;\n overflow: hidden;\n}\n\n.drilldown-logs[_ngcontent-%COMP%] {\n height: 100%;\n}\n\n\n\n[_nghost-%COMP%] kendo-window {\n border-radius: 12px !important;\n overflow: hidden;\n box-shadow: var(--mj-shadow-2xl) !important;\n}\n\n[_nghost-%COMP%] kendo-window .k-window-content {\n padding: 0 !important;\n}\n\n[_nghost-%COMP%] kendo-window-titlebar {\n padding: 16px 20px !important;\n background: var(--mj-bg-page) !important;\n border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n\n\n@media (max-width: 1400px) {\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (max-width: 1200px) {\n .breakdown-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n@media (max-width: 900px) {\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .breakdown-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .logs-table-header[_ngcontent-%COMP%], \n .log-row[_ngcontent-%COMP%] {\n grid-template-columns: 80px 100px 60px 1fr 60px;\n }\n\n .col-duration[_ngcontent-%COMP%] {\n display: none;\n }\n}\n\n@media (max-width: 600px) {\n .panel-header[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .time-filters[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n\n .kpi-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n\n .logs-table-header[_ngcontent-%COMP%], \n .log-row[_ngcontent-%COMP%] {\n grid-template-columns: 1fr 60px;\n }\n\n .col-key[_ngcontent-%COMP%], \n .col-method[_ngcontent-%COMP%], \n .col-endpoint[_ngcontent-%COMP%] {\n display: none;\n }\n}"] });
|
|
1010
1010
|
}
|
|
1011
1011
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIUsagePanelComponent, [{
|
|
1012
1012
|
type: Component,
|
|
@@ -4,9 +4,9 @@ import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
|
|
|
4
4
|
import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
5
5
|
import * as i0 from "@angular/core";
|
|
6
6
|
import * as i1 from "@angular/common";
|
|
7
|
-
import * as i2 from "@progress/kendo-angular-
|
|
8
|
-
import * as i3 from "@progress/kendo-angular-
|
|
9
|
-
import * as i4 from "@progress/kendo-angular-
|
|
7
|
+
import * as i2 from "@progress/kendo-angular-buttons";
|
|
8
|
+
import * as i3 from "@progress/kendo-angular-dropdowns";
|
|
9
|
+
import * as i4 from "@progress/kendo-angular-inputs";
|
|
10
10
|
import * as i5 from "@memberjunction/ng-shared-generic";
|
|
11
11
|
const _c0 = a0 => ({ nodes: a0 });
|
|
12
12
|
const _forTrack0 = ($index, $item) => $item.category.ID;
|
|
@@ -551,7 +551,7 @@ export class ActionsListViewComponent {
|
|
|
551
551
|
i0.ɵɵconditional(ctx.filteredActions.length > 0 ? 23 : !ctx.isLoading ? 24 : -1);
|
|
552
552
|
i0.ɵɵadvance(2);
|
|
553
553
|
i0.ɵɵconditional(ctx.isLoading ? 25 : -1);
|
|
554
|
-
} }, dependencies: [i1.NgTemplateOutlet, i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i4.ChipComponent, i5.LoadingComponent, i1.DatePipe], styles: [".actions-list-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--kendo-color-app-surface);\n position: relative; \n\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] {\n padding: 1.5rem;\n border-bottom: 1px solid var(--kendo-color-border);\n background: var(--kendo-color-surface);\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: var(--kendo-color-subtle);\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n color: var(--kendo-color-primary);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n margin-left: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 120px;\n right: 20px;\n width: 350px;\n max-height: 70vh;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 100;\n display: flex;\n flex-direction: column;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] {\n padding: 8px;\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button.selected[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--kendo-color-base-subtle);\n color: var(--kendo-color-on-app-surface);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n padding-left: 8px;\n margin-bottom: 2px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button.selected[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n color: var(--kendo-color-primary);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .expand-button[_ngcontent-%COMP%] {\n padding: 0;\n min-width: 20px;\n width: 20px;\n height: 20px;\n margin-right: 4px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .expand-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .no-expand[_ngcontent-%COMP%] {\n display: inline-block;\n width: 24px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] i.fa-folder[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--kendo-color-warning);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--kendo-color-base-subtle);\n color: var(--kendo-color-on-app-surface);\n padding: 2px 6px;\n border-radius: 12px;\n font-size: 11px;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 1.5rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1.5rem;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n margin-bottom: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 0.5rem;\n background: var(--kendo-color-primary-subtle);\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n font-size: 1.25rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--kendo-color-on-app-surface);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] kendo-chip[_ngcontent-%COMP%]:has(i) {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n color: var(--kendo-color-subtle);\n line-height: 1.5;\n margin-bottom: 1rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1.5rem;\n flex-wrap: wrap;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] .detail-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] .detail-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n width: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%]:hover .action-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem 2rem;\n text-align: center;\n color: var(--kendo-color-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1.125rem;\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 768px) {\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] {\n align-self: flex-start;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n}"] });
|
|
554
|
+
} }, dependencies: [i1.NgTemplateOutlet, i2.ButtonComponent, i2.ChipComponent, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.LoadingComponent, i1.DatePipe], styles: [".actions-list-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--kendo-color-app-surface);\n position: relative; \n\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] {\n padding: 1.5rem;\n border-bottom: 1px solid var(--kendo-color-border);\n background: var(--kendo-color-surface);\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: var(--kendo-color-subtle);\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n.actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] .category-filter-button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n color: var(--kendo-color-primary);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 12px;\n margin-left: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] {\n position: absolute;\n top: 120px;\n right: 20px;\n width: 350px;\n max-height: 70vh;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n z-index: 100;\n display: flex;\n flex-direction: column;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] {\n padding: 8px;\n border-bottom: 1px solid var(--kendo-color-border);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button.selected[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--kendo-color-base-subtle);\n color: var(--kendo-color-on-app-surface);\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n padding-left: 8px;\n margin-bottom: 2px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button.selected[_ngcontent-%COMP%] {\n background: var(--kendo-color-primary-subtle);\n color: var(--kendo-color-primary);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .expand-button[_ngcontent-%COMP%] {\n padding: 0;\n min-width: 20px;\n width: 20px;\n height: 20px;\n margin-right: 4px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .expand-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .no-expand[_ngcontent-%COMP%] {\n display: inline-block;\n width: 24px;\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] i.fa-folder[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--kendo-color-warning);\n}\n.actions-list-view[_ngcontent-%COMP%] .category-tree-panel[_ngcontent-%COMP%] .tree-content[_ngcontent-%COMP%] .tree-node[_ngcontent-%COMP%] .tree-node-button[_ngcontent-%COMP%] .badge[_ngcontent-%COMP%] {\n margin-left: auto;\n background: var(--kendo-color-base-subtle);\n color: var(--kendo-color-on-app-surface);\n padding: 2px 6px;\n border-radius: 12px;\n font-size: 11px;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 1.5rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n padding: 1.5rem;\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n margin-bottom: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%]:hover {\n background: var(--kendo-color-base-hover);\n border-color: var(--kendo-color-primary);\n transform: translateY(-1px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: 0.5rem;\n background: var(--kendo-color-primary-subtle);\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n font-size: 1.25rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n color: var(--kendo-color-on-app-surface);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] kendo-chip[_ngcontent-%COMP%]:has(i) {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n color: var(--kendo-color-subtle);\n line-height: 1.5;\n margin-bottom: 1rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1.5rem;\n flex-wrap: wrap;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] .detail-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] .detail-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--kendo-color-primary);\n width: 0.75rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%]:hover .action-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem 2rem;\n text-align: center;\n color: var(--kendo-color-subtle);\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1.125rem;\n font-weight: 600;\n}\n.actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.actions-list-view[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 768px) {\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .actions-list-view[_ngcontent-%COMP%] .list-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 0.5rem;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-header[_ngcontent-%COMP%] .action-badges[_ngcontent-%COMP%] {\n align-self: flex-start;\n }\n .actions-list-view[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-card[_ngcontent-%COMP%] .action-main[_ngcontent-%COMP%] .action-details[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n}"] });
|
|
555
555
|
}
|
|
556
556
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionsListViewComponent, [{
|
|
557
557
|
type: Component,
|
|
@@ -13,10 +13,10 @@ import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
import * as i1 from "@memberjunction/ng-shared";
|
|
15
15
|
import * as i2 from "@angular/forms";
|
|
16
|
-
import * as i3 from "@progress/kendo-angular-
|
|
17
|
-
import * as i4 from "@progress/kendo-angular-
|
|
18
|
-
import * as i5 from "@
|
|
19
|
-
import * as i6 from "@
|
|
16
|
+
import * as i3 from "@progress/kendo-angular-buttons";
|
|
17
|
+
import * as i4 from "@progress/kendo-angular-dropdowns";
|
|
18
|
+
import * as i5 from "@progress/kendo-angular-inputs";
|
|
19
|
+
import * as i6 from "@memberjunction/ng-code-editor";
|
|
20
20
|
import * as i7 from "@memberjunction/ng-shared-generic";
|
|
21
21
|
import * as i8 from "@angular/common";
|
|
22
22
|
const _c0 = () => ({ text: "All Statuses", value: "all" });
|
|
@@ -619,7 +619,7 @@ let ActionsOverviewComponent = class ActionsOverviewComponent extends BaseResour
|
|
|
619
619
|
i0.ɵɵconditional(ctx.recentExecutions.length > 0 ? 95 : 96);
|
|
620
620
|
i0.ɵɵadvance(2);
|
|
621
621
|
i0.ɵɵconditional(ctx.isLoading ? 97 : -1);
|
|
622
|
-
} }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.CodeEditorComponent, i6.ButtonComponent, i6.ChipComponent, i7.LoadingComponent, i8.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-xl);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: var(--mj-font-bold);\n line-height: var(--mj-leading-none);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.pending[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.disabled[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.recent[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.custom[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.primary[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.info[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.warning[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.gallery[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] .metric.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-weight: var(--mj-font-semibold);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] {\n width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] {\n height: 6px;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] .progress-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-status-success);\n transition: width var(--mj-transition-slow);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: var(--mj-radius-sm);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] {\n margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: unset;\n }\n}"] });
|
|
622
|
+
} }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i3.ChipComponent, i4.DropDownListComponent, i5.TextBoxComponent, i5.TextBoxPrefixTemplateDirective, i6.CodeEditorComponent, i7.LoadingComponent, i8.DatePipe], styles: [".actions-overview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n position: relative; \n\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: 150px;\n}\n.actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 1.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.5rem;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n border-radius: var(--mj-radius-md);\n font-size: var(--mj-text-xl);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: var(--mj-font-bold);\n line-height: var(--mj-leading-none);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-muted);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.active[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.pending[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.disabled[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.recent[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-breakdown[_ngcontent-%COMP%] span.custom[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.primary[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.info[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-info);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.warning[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] .metric-card.gallery[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n gap: 1.5rem;\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n overflow: hidden;\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n background: var(--mj-bg-surface-elevated);\n border-bottom: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-base);\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .panel[_ngcontent-%COMP%] .panel-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n height: calc(100% - 60px);\n overflow-y: auto;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-info[_ngcontent-%COMP%] .category-metrics[_ngcontent-%COMP%] .metric.success-rate[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n font-weight: var(--mj-font-semibold);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] {\n width: 60px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] {\n height: 6px;\n background: var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n overflow: hidden;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .category-stats[_ngcontent-%COMP%] .category-list[_ngcontent-%COMP%] .category-item[_ngcontent-%COMP%] .category-chart[_ngcontent-%COMP%] .progress-bar[_ngcontent-%COMP%] .progress-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: var(--mj-status-success);\n transition: width var(--mj-transition-slow);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: var(--mj-radius-sm);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-base);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-info[_ngcontent-%COMP%] .action-description[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n line-height: var(--mj-leading-snug);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-actions[_ngcontent-%COMP%] .actions-list[_ngcontent-%COMP%] .action-item[_ngcontent-%COMP%] .action-status[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1/-1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all var(--mj-transition-base);\n margin-bottom: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n cursor: pointer;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n min-width: 80px;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n margin-bottom: 0.25rem;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-primary);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-info[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-header[_ngcontent-%COMP%] .execution-expand-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-xs);\n margin-left: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mj-bg-surface-card);\n border-top: 1px solid var(--mj-border-default);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] {\n margin-bottom: 1rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .params-section[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-xs);\n}\n.actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.actions-overview[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--mj-text-sm);\n}\n.actions-overview[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n .actions-overview[_ngcontent-%COMP%] .content-grid[_ngcontent-%COMP%] .recent-executions[_ngcontent-%COMP%] {\n grid-column: 1;\n }\n}\n@media (max-width: 768px) {\n .actions-overview[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .metrics-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .actions-overview[_ngcontent-%COMP%] .overview-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-container[_ngcontent-%COMP%] {\n min-width: unset;\n }\n}"] });
|
|
623
623
|
};
|
|
624
624
|
ActionsOverviewComponent = __decorate([
|
|
625
625
|
RegisterClass(BaseResourceComponent, 'ActionsOverviewResource')
|
|
@@ -4,9 +4,9 @@ import { Subject, BehaviorSubject } from 'rxjs';
|
|
|
4
4
|
import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
5
5
|
import { UUIDsEqual } from '@memberjunction/global';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
|
-
import * as i1 from "@progress/kendo-angular-
|
|
8
|
-
import * as i2 from "@
|
|
9
|
-
import * as i3 from "@
|
|
7
|
+
import * as i1 from "@progress/kendo-angular-buttons";
|
|
8
|
+
import * as i2 from "@progress/kendo-angular-inputs";
|
|
9
|
+
import * as i3 from "@memberjunction/ng-container-directives";
|
|
10
10
|
import * as i4 from "@memberjunction/ng-shared-generic";
|
|
11
11
|
const _forTrack0 = ($index, $item) => $item.ID;
|
|
12
12
|
function CategoriesListViewComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -203,7 +203,7 @@ export class CategoriesListViewComponent {
|
|
|
203
203
|
i0.ɵɵconditional(ctx.filteredCategories.length > 0 ? 12 : !ctx.isLoading ? 13 : -1);
|
|
204
204
|
i0.ɵɵadvance(2);
|
|
205
205
|
i0.ɵɵconditional(ctx.isLoading ? 14 : -1);
|
|
206
|
-
} }, dependencies: [i1.
|
|
206
|
+
} }, dependencies: [i1.ButtonComponent, i2.TextBoxComponent, i2.TextBoxPrefixTemplateDirective, i3.FillContainer, i4.LoadingComponent], styles: [".categories-list-view[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n\n .list-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n\n .header-title {\n display: flex;\n align-items: baseline;\n gap: 1rem;\n\n h2 {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n\n i {\n color: var(--kendo-color-primary);\n }\n }\n\n .results-count {\n color: var(--kendo-color-subtle);\n font-size: 0.875rem;\n }\n }\n\n .search-container {\n min-width: 250px;\n \n kendo-textbox {\n width: 100%;\n }\n }\n }\n\n .categories-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 1.5rem;\n flex: 1;\n align-content: start;\n\n .category-card {\n background: var(--kendo-color-surface);\n border: 1px solid var(--kendo-color-border);\n border-radius: 0.75rem;\n padding: 1.5rem;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n border-color: var(--kendo-color-primary);\n }\n\n .category-header {\n display: flex;\n align-items: center;\n gap: 1rem;\n\n .category-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3rem;\n height: 3rem;\n background: var(--kendo-color-primary-subtle);\n border-radius: 0.5rem;\n\n i {\n color: var(--kendo-color-primary);\n font-size: 1.25rem;\n }\n }\n\n .category-name {\n margin: 0;\n font-size: 1.125rem;\n font-weight: 600;\n flex: 1;\n }\n }\n\n .category-description {\n color: var(--kendo-color-subtle);\n font-size: 0.875rem;\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .category-stats {\n display: flex;\n gap: 2rem;\n padding: 1rem;\n background: var(--kendo-color-app-surface);\n border-radius: 0.5rem;\n\n .stat-item {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--kendo-color-on-app-surface);\n\n &.active {\n color: var(--kendo-color-success);\n }\n }\n\n .stat-label {\n font-size: 0.75rem;\n color: var(--kendo-color-subtle);\n font-weight: 600;\n }\n }\n }\n\n .category-footer {\n display: flex;\n justify-content: flex-end;\n margin-top: auto;\n }\n }\n }\n\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem;\n text-align: center;\n color: var(--kendo-color-subtle);\n\n i {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n }\n\n h3 {\n margin: 0 0 0.5rem 0;\n font-size: 1.25rem;\n font-weight: 600;\n }\n\n p {\n margin: 0;\n font-size: 0.875rem;\n }\n }\n\n .loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n }\n\n @media (max-width: 768px) {\n .categories-list-view[_ngcontent-%COMP%] {\n padding: 1rem;\n\n .list-header {\n flex-direction: column;\n align-items: stretch;\n\n .search-container {\n min-width: unset;\n }\n }\n\n .categories-grid {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n }\n }"] });
|
|
207
207
|
}
|
|
208
208
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CategoriesListViewComponent, [{
|
|
209
209
|
type: Component,
|
|
@@ -12,9 +12,9 @@ import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
|
|
|
12
12
|
import { debounceTime, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
import * as i1 from "@memberjunction/ng-shared";
|
|
15
|
-
import * as i2 from "@progress/kendo-angular-
|
|
16
|
-
import * as i3 from "@progress/kendo-angular-
|
|
17
|
-
import * as i4 from "@progress/kendo-angular-
|
|
15
|
+
import * as i2 from "@progress/kendo-angular-buttons";
|
|
16
|
+
import * as i3 from "@progress/kendo-angular-dropdowns";
|
|
17
|
+
import * as i4 from "@progress/kendo-angular-inputs";
|
|
18
18
|
import * as i5 from "@memberjunction/ng-shared-generic";
|
|
19
19
|
import * as i6 from "@angular/common";
|
|
20
20
|
const _forTrack0 = ($index, $item) => $item.date;
|
|
@@ -597,7 +597,7 @@ let ExecutionMonitoringComponent = class ExecutionMonitoringComponent extends Ba
|
|
|
597
597
|
i0.ɵɵconditional(ctx.filteredExecutions.length > 0 ? 85 : 86);
|
|
598
598
|
i0.ɵɵadvance(2);
|
|
599
599
|
i0.ɵɵconditional(ctx.isLoading ? 87 : -1);
|
|
600
|
-
} }, dependencies: [i2.DropDownListComponent, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i4.ChipComponent, i5.LoadingComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .refresh-btn[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-detail[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.total[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.error[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.duration[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.activity[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.running[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 80px;\n border-radius: 0.25rem;\n overflow: hidden;\n background: var(--mj-border-default);\n position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-total[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 1.5rem 0;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-check-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-exclamation-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-spinner[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-question[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n}"] });
|
|
600
|
+
} }, dependencies: [i2.ButtonComponent, i2.ChipComponent, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.LoadingComponent, i6.DatePipe], styles: [".execution-monitoring[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n padding: 1.5rem;\n height: 100%;\n overflow-y: auto;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.25rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] .refresh-btn[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n min-width: 140px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1.25rem;\n border-radius: 0.75rem;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n transition: all 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.clickable[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px color-mix(in srgb, var(--mj-text-primary) 15%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 0.5rem;\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.5rem;\n font-weight: 700;\n line-height: 1;\n margin-bottom: 0.25rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-muted);\n margin-bottom: 0.125rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-detail[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.total[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.success[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.error[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.duration[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.activity[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card.running[_ngcontent-%COMP%] .metric-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n padding: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n margin-bottom: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n display: flex;\n align-items: end;\n gap: 1rem;\n height: 120px;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: 80px;\n border-radius: 0.25rem;\n overflow: hidden;\n background: var(--mj-border-default);\n position: relative;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-container[_ngcontent-%COMP%] .bar-failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n width: 100%;\n min-height: 2px;\n transition: height 0.3s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-label[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] .trend-bar[_ngcontent-%COMP%] .bar-total[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color[_ngcontent-%COMP%] {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.success[_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .chart-legend[_ngcontent-%COMP%] .legend-item[_ngcontent-%COMP%] .legend-color.failed[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 120px;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .empty-chart[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 0.75rem;\n display: flex;\n flex-direction: column;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 1.5rem 0;\n margin-bottom: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .section-header[_ngcontent-%COMP%] .results-count[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] {\n flex: 1;\n min-height: 0;\n overflow-y: auto;\n padding: 0 1.5rem 1.5rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n border-radius: 0.5rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface-elevated);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n box-shadow: 0 2px 4px color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-check-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-exclamation-circle[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-spinner[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-info-circle[_ngcontent-%COMP%], .execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-status[_ngcontent-%COMP%] i.fa-question[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%] {\n font-weight: 600;\n margin-bottom: 0.25rem;\n color: var(--mj-brand-primary);\n cursor: pointer;\n transition: color 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-action[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary-hover);\n text-decoration: underline;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n font-size: 0.75rem;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-time[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-user[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-main[_ngcontent-%COMP%] .execution-details[_ngcontent-%COMP%] .execution-duration[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-result[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] {\n flex-shrink: 0;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%] .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 0;\n transition: opacity 0.2s ease;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .execution-item[_ngcontent-%COMP%]:hover .execution-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n opacity: 1;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 3rem 2rem;\n text-align: center;\n color: var(--mj-text-muted);\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3rem;\n margin-bottom: 1rem;\n opacity: 0.5;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\n margin: 0 0 0.5rem 0;\n font-size: 1rem;\n font-weight: 600;\n}\n.execution-monitoring[_ngcontent-%COMP%] .executions-section[_ngcontent-%COMP%] .executions-list[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 0.875rem;\n}\n.execution-monitoring[_ngcontent-%COMP%] .loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n@media (max-width: 1200px) {\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(3, 1fr);\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n}\n@media (max-width: 768px) {\n .execution-monitoring[_ngcontent-%COMP%] {\n padding: 1rem;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .metrics-summary[_ngcontent-%COMP%] .metric-card[_ngcontent-%COMP%] .metric-content[_ngcontent-%COMP%] .metric-value[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .header-title[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n gap: 1rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .search-container[_ngcontent-%COMP%], \n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n min-width: unset;\n }\n .execution-monitoring[_ngcontent-%COMP%] .monitoring-header[_ngcontent-%COMP%] .filters-row[_ngcontent-%COMP%] .filter-group[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n gap: 0.5rem;\n }\n .execution-monitoring[_ngcontent-%COMP%] .trends-section[_ngcontent-%COMP%] .trends-chart[_ngcontent-%COMP%] .trend-bars[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n}"] });
|
|
601
601
|
};
|
|
602
602
|
ExecutionMonitoringComponent = __decorate([
|
|
603
603
|
RegisterClass(BaseResourceComponent, 'ActionsMonitorResource')
|
|
@@ -3,8 +3,8 @@ import { Subject } from 'rxjs';
|
|
|
3
3
|
import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "../../services/action-explorer-state.service";
|
|
6
|
-
import * as i2 from "@progress/kendo-angular-
|
|
7
|
-
import * as i3 from "@progress/kendo-angular-
|
|
6
|
+
import * as i2 from "@progress/kendo-angular-buttons";
|
|
7
|
+
import * as i3 from "@progress/kendo-angular-inputs";
|
|
8
8
|
const _forTrack0 = ($index, $item) => $item.value;
|
|
9
9
|
const _forTrack1 = ($index, $item) => $item.field;
|
|
10
10
|
function ActionToolbarComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -466,7 +466,7 @@ export class ActionToolbarComponent {
|
|
|
466
466
|
i0.ɵɵproperty("fillMode", "flat");
|
|
467
467
|
i0.ɵɵadvance(2);
|
|
468
468
|
i0.ɵɵproperty("fillMode", "solid")("themeColor", "primary");
|
|
469
|
-
} }, dependencies: [i2.
|
|
469
|
+
} }, dependencies: [i2.ButtonComponent, i2.ChipComponent, i3.TextBoxComponent, i3.TextBoxSuffixTemplateDirective, i3.TextBoxPrefixTemplateDirective], styles: [".action-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n background: var(--mj-bg-surface-card);\n border-bottom: 1px solid var(--mj-border-default);\n gap: 16px;\n flex-wrap: wrap;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n min-width: 200px;\n max-width: 320px;\n flex: 1;\n}\n\n.search-container[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.search-container[_ngcontent-%COMP%] i.fa-search[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-muted);\n}\n\n\n\n.dropdown-container[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.dropdown-container[_ngcontent-%COMP%] > button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dropdown-container[_ngcontent-%COMP%] > button.active[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.dropdown-container[_ngcontent-%COMP%] > button[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:last-child {\n font-size: 10px;\n margin-left: 4px;\n}\n\n.filter-badge[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: 10px;\n min-width: 18px;\n text-align: center;\n}\n\n\n\n.dropdown-menu[_ngcontent-%COMP%] {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n z-index: 100;\n min-width: 220px;\n padding: 8px 0;\n}\n\n.dropdown-menu.sort-menu[_ngcontent-%COMP%] {\n right: 0;\n left: auto;\n}\n\n\n\n.dropdown-section[_ngcontent-%COMP%] {\n padding: 8px 12px;\n}\n\n.dropdown-section[_ngcontent-%COMP%]:not(:last-child) {\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--mj-text-muted);\n letter-spacing: 0.5px;\n}\n\n.section-header[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n font-size: 11px;\n padding: 2px 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 8px;\n border-radius: 4px;\n cursor: pointer;\n transition: background 0.15s ease;\n font-size: 13px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.filter-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n display: none;\n}\n\n.filter-option[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n width: 18px;\n color: var(--mj-text-muted);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.status-dot[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n}\n\n.status-dot[data-status=\"Active\"][_ngcontent-%COMP%] {\n background: var(--mj-status-success);\n}\n\n.status-dot[data-status=\"Pending\"][_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n}\n\n.status-dot[data-status=\"Disabled\"][_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n}\n\n.dropdown-footer[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.dropdown-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n\n\n.sort-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 12px;\n border: none;\n background: transparent;\n cursor: pointer;\n font-size: 13px;\n text-align: left;\n transition: background 0.15s ease;\n}\n\n.sort-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.sort-option.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n width: 18px;\n color: var(--mj-text-muted);\n}\n\n.sort-option.selected[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n color: var(--mj-brand-primary);\n}\n\n.sort-option[_ngcontent-%COMP%] .direction-icon[_ngcontent-%COMP%] {\n margin-left: auto;\n font-size: 11px;\n}\n\n\n\n.active-filters[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.active-filters[_ngcontent-%COMP%] kendo-chip[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.results-count[_ngcontent-%COMP%] {\n display: flex;\n align-items: baseline;\n gap: 4px;\n font-size: 13px;\n color: var(--mj-text-muted);\n white-space: nowrap;\n}\n\n.results-count[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n font-size: 14px;\n}\n\n.results-count[_ngcontent-%COMP%] .of-total[_ngcontent-%COMP%] {\n opacity: 0.7;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n}\n\n.view-toggle[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n border-radius: 0;\n border: none;\n min-width: 36px;\n}\n\n.view-toggle[_ngcontent-%COMP%] button[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n}\n\n\n\n@media (max-width: 1024px) {\n .action-toolbar[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n }\n\n .toolbar-left[_ngcontent-%COMP%], \n .toolbar-right[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: flex-start;\n }\n\n .search-container[_ngcontent-%COMP%] {\n max-width: none;\n flex: 1;\n }\n}\n\n@media (max-width: 640px) {\n .toolbar-right[_ngcontent-%COMP%] {\n flex-wrap: wrap;\n }\n\n .results-count[_ngcontent-%COMP%] {\n order: -1;\n width: 100%;\n }\n}"], changeDetection: 0 });
|
|
470
470
|
}
|
|
471
471
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionToolbarComponent, [{
|
|
472
472
|
type: Component,
|
|
@@ -4,8 +4,8 @@ import { takeUntil } from 'rxjs/operators';
|
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
import * as i1 from "../../services/action-explorer-state.service";
|
|
6
6
|
import * as i2 from "@angular/common";
|
|
7
|
-
import * as i3 from "@progress/kendo-angular-
|
|
8
|
-
import * as i4 from "@progress/kendo-angular-
|
|
7
|
+
import * as i3 from "@progress/kendo-angular-buttons";
|
|
8
|
+
import * as i4 from "@progress/kendo-angular-inputs";
|
|
9
9
|
const _c0 = a0 => ({ nodes: a0 });
|
|
10
10
|
const _forTrack0 = ($index, $item) => $item.category.ID;
|
|
11
11
|
function ActionTreePanelComponent_Conditional_0_ng_template_15_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -429,7 +429,7 @@ export class ActionTreePanelComponent {
|
|
|
429
429
|
i0.ɵɵconditionalCreate(0, ActionTreePanelComponent_Conditional_0_Template, 35, 23, "div", 1)(1, ActionTreePanelComponent_Conditional_1_Template, 5, 4, "div", 2);
|
|
430
430
|
} if (rf & 2) {
|
|
431
431
|
i0.ɵɵconditional(!ctx.IsCollapsed ? 0 : 1);
|
|
432
|
-
} }, dependencies: [i2.NgTemplateOutlet, i3.
|
|
432
|
+
} }, dependencies: [i2.NgTemplateOutlet, i3.ButtonComponent, i4.TextBoxComponent, i4.TextBoxSuffixTemplateDirective, i4.TextBoxPrefixTemplateDirective], styles: [".tree-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-card);\n border-right: 1px solid var(--mj-border-default);\n position: relative;\n min-width: 180px;\n max-width: 450px;\n}\n\n.tree-header[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.tree-header[_ngcontent-%COMP%] .header-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n}\n\n.tree-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.tree-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.tree-header[_ngcontent-%COMP%] .header-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n}\n\n.tree-header[_ngcontent-%COMP%] .header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 4px;\n min-width: 28px;\n height: 28px;\n}\n\n.tree-header[_ngcontent-%COMP%] .header-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.tree-search[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.tree-search[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.tree-search[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.tree-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n}\n\n.tree-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n gap: 8px;\n position: relative;\n color: var(--mj-text-primary);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n padding-right: 40px; \n\n}\n\n.tree-item[_ngcontent-%COMP%]:hover .item-count[_ngcontent-%COMP%] {\n display: none; \n\n}\n\n.tree-item.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.tree-item.selected[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.tree-item.root-item[_ngcontent-%COMP%], \n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n padding-left: 16px;\n margin-bottom: 4px;\n}\n\n.tree-item.root-item[_ngcontent-%COMP%] {\n font-weight: 600;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n opacity: 0.8;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%] .item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.tree-node[_ngcontent-%COMP%] {\n padding-left: calc(var(--level, 0) * 16px);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-active);\n}\n\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-text-muted);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n width: 20px;\n flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-status-warning);\n}\n\n.item-name[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 13px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.item-count[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-muted);\n background: var(--mj-bg-surface-sunken);\n padding: 2px 8px;\n border-radius: 10px;\n flex-shrink: 0;\n}\n\n.tree-item.selected[_ngcontent-%COMP%] .item-count[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n}\n\n.item-actions[_ngcontent-%COMP%] {\n display: none;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover .item-actions[_ngcontent-%COMP%] {\n display: flex;\n}\n\n.item-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 2px;\n min-width: 24px;\n height: 24px;\n}\n\n.item-actions[_ngcontent-%COMP%] button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n}\n\n.tree-children[_ngcontent-%COMP%] {\n \n\n}\n\n.tree-footer[_ngcontent-%COMP%] {\n padding: 12px 16px;\n border-top: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.new-category-btn[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n right: 0;\n width: 4px;\n height: 100%;\n cursor: ew-resize;\n background: transparent;\n transition: background 0.15s ease;\n z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary);\n}\n\n\n\n.tree-panel-collapsed[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 8px 4px;\n background: var(--mj-bg-surface-card);\n border-right: 1px solid var(--mj-border-default);\n width: 44px;\n gap: 4px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n padding: 8px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%] button.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--mj-border-default);\n border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n background: var(--mj-text-muted);\n}\n\n\n\n@media (max-width: 768px) {\n .tree-panel[_ngcontent-%COMP%] {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n z-index: 100;\n box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n }\n}"], changeDetection: 0 });
|
|
433
433
|
}
|
|
434
434
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionTreePanelComponent, [{
|
|
435
435
|
type: Component,
|