@memberjunction/ng-dashboards 5.0.0 → 5.2.0

package/dist/Testing/components/testing-execution.component.js

@@ -1,845 +0,0 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
-import { Subject, combineLatest, BehaviorSubject } from 'rxjs';
-import { takeUntil, map } from 'rxjs/operators';
-import { CompositeKey, Metadata } from '@memberjunction/core';
-import { SharedService } from '@memberjunction/ng-shared';
-import { GraphQLTestingClient } from '@memberjunction/graphql-dataprovider';
-import { TestRunDialogComponent } from '@memberjunction/ng-testing';
-import * as i0 from "@angular/core";
-import * as i1 from "../services/testing-instrumentation.service";
-import * as i2 from "@progress/kendo-angular-dialog";
-import * as i3 from "@angular/forms";
-import * as i4 from "@memberjunction/ng-testing";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@angular/common";
-const _forTrack0 = ($index, $item) => $item.id;
-const _c0 = () => [];
-function TestingExecutionComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "span", 61);
-    i0.ɵɵelementStart(2, "span", 62);
-    i0.ɵɵtext(3, "Live");
-    i0.ɵɵelementEnd()();
-} }
-function TestingExecutionComponent_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_Conditional_51_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
-    i0.ɵɵelement(1, "i", 23);
-    i0.ɵɵelementEnd();
-} }
-function TestingExecutionComponent_Conditional_112_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵelement(1, "mj-loading", 64);
-    i0.ɵɵelementEnd();
-} }
-function TestingExecutionComponent_Conditional_114_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵelement(1, "i", 65);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No test executions found");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 66);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_Conditional_114_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.startNewTest()); });
-    i0.ɵɵelement(5, "i", 14);
-    i0.ɵɵtext(6, " Run Your First Test ");
-    i0.ɵɵelementEnd()();
-} }
-function TestingExecutionComponent_For_116_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74);
-    i0.ɵɵelement(1, "div", 86);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const execution_r5 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", execution_r5.progress, "%");
-} }
-function TestingExecutionComponent_For_116_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 87);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Conditional_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelExecution(execution_r5)); });
-    i0.ɵɵelement(1, "i", 88);
-    i0.ɵɵelementEnd();
-} }
-function TestingExecutionComponent_For_116_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 89);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const execution_r5 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.rerunTest(execution_r5)); });
-    i0.ɵɵelement(1, "i", 90);
-    i0.ɵɵelementEnd();
-} }
-function TestingExecutionComponent_For_116_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 67)(1, "div", 68)(2, "div", 69)(3, "div", 70);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 71);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 72);
-    i0.ɵɵelement(8, "app-test-status-badge", 73);
-    i0.ɵɵtemplate(9, TestingExecutionComponent_For_116_Conditional_9_Template, 2, 2, "div", 74);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 75);
-    i0.ɵɵelement(11, "app-score-indicator", 76);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 77);
-    i0.ɵɵtext(13);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 78);
-    i0.ɵɵelement(15, "app-cost-display", 79);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 80);
-    i0.ɵɵtext(17);
-    i0.ɵɵpipe(18, "date");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 81)(20, "button", 82);
-    i0.ɵɵlistener("click", function TestingExecutionComponent_For_116_Template_button_click_20_listener() { const execution_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewDetails(execution_r5)); });
-    i0.ɵɵelement(21, "i", 83);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(22, TestingExecutionComponent_For_116_Conditional_22_Template, 2, 0, "button", 84)(23, TestingExecutionComponent_For_116_Conditional_23_Template, 2, 0, "button", 85);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const execution_r5 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("running", execution_r5.status === "Running");
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(execution_r5.testName);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(execution_r5.suiteName);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("status", execution_r5.status);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(execution_r5.status === "Running" ? 9 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("score", execution_r5.score)("showBar", false)("showIcon", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.formatDuration(execution_r5.duration), " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("cost", execution_r5.cost)("showIcon", false);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(18, 14, execution_r5.startedAt, "short"), " ");
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(execution_r5.status === "Running" ? 22 : 23);
-} }
-export class TestingExecutionComponent {
-    instrumentationService;
-    dialogService;
-    cdr;
-    viewContainerRef;
-    initialState;
-    stateChange = new EventEmitter();
-    destroy$ = new Subject();
-    activeDialogRef = null;
-    isRefreshing = false;
-    isLoading = false;
-    lastUpdated = new Date();
-    filters = {
-        status: 'all',
-        suite: 'all',
-        timeRange: 'month', // Default to "This Month" to show more data
-        searchText: ''
-    };
-    // Track previous time range to detect changes requiring server re-query
-    previousTimeRange = 'month';
-    // BehaviorSubject to trigger client-side filter updates
-    filterTrigger$ = new BehaviorSubject(undefined);
-    executions$;
-    filteredExecutions$;
-    runningCount$;
-    completedTodayCount$;
-    failedTodayCount$;
-    avgDurationToday$;
-    hasRunningTests$;
-    testingClient;
-    constructor(instrumentationService, dialogService, cdr, viewContainerRef) {
-        this.instrumentationService = instrumentationService;
-        this.dialogService = dialogService;
-        this.cdr = cdr;
-        this.viewContainerRef = viewContainerRef;
-        // Initialize GraphQL testing client for cancel/rerun operations
-        const dataProvider = Metadata.Provider;
-        this.testingClient = new GraphQLTestingClient(dataProvider);
-        // Subscribe to loading state
-        this.instrumentationService.isLoading$.pipe(takeUntil(this.destroy$)).subscribe(loading => {
-            this.isLoading = loading;
-            this.cdr.markForCheck();
-        });
-    }
-    ngOnInit() {
-        // Apply initial state if provided
-        if (this.initialState) {
-            this.filters = { ...this.filters, ...this.initialState.filters };
-        }
-        // Set the service date range based on the selected time range filter
-        this.updateServiceDateRange();
-        this.setupObservables();
-    }
-    ngOnDestroy() {
-        // Close any open dialog when component is destroyed
-        if (this.activeDialogRef) {
-            try {
-                this.activeDialogRef.close();
-            }
-            catch (error) {
-                // Dialog might already be closed, ignore error
-            }
-            this.activeDialogRef = null;
-        }
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    setupObservables() {
-        this.executions$ = this.instrumentationService.testRuns$.pipe(map(runs => runs.map(run => this.mapToExecutionItem(run))), takeUntil(this.destroy$));
-        // Combine executions with filter trigger to react to client-side filter changes
-        this.filteredExecutions$ = combineLatest([
-            this.executions$,
-            this.filterTrigger$
-        ]).pipe(map(([executions]) => this.applyFilters(executions)), takeUntil(this.destroy$));
-        // KPI counts are now based on the full executions$ (which respects the service date range)
-        // This means the counts will match the selected time range filter
-        this.runningCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Running').length));
-        this.completedTodayCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Passed').length));
-        this.failedTodayCount$ = this.executions$.pipe(map(execs => execs.filter(e => e.status === 'Failed' || e.status === 'Error').length));
-        this.avgDurationToday$ = this.executions$.pipe(map(execs => {
-            const completedExecs = execs.filter(e => e.completedAt || e.status !== 'Running');
-            if (completedExecs.length === 0)
-                return 0;
-            const totalDuration = completedExecs.reduce((sum, e) => sum + e.duration, 0);
-            return totalDuration / completedExecs.length;
-        }));
-        this.hasRunningTests$ = this.runningCount$.pipe(map(count => count > 0));
-    }
-    mapToExecutionItem(run) {
-        const startedAt = run.runDateTime;
-        const completedAt = null;
-        const duration = run.duration;
-        const progress = run.status === 'Running' ? Math.random() * 100 : 100;
-        return {
-            id: run.id,
-            testId: run.testId,
-            testName: run.testName,
-            suiteName: run.suiteName,
-            status: run.status,
-            score: run.score,
-            duration,
-            cost: run.cost,
-            startedAt,
-            completedAt,
-            progress
-        };
-    }
-    applyFilters(executions) {
-        let filtered = [...executions];
-        // Apply status filter
-        if (this.filters.status !== 'all') {
-            if (this.filters.status === 'running') {
-                filtered = filtered.filter(e => e.status === 'Running');
-            }
-            else if (this.filters.status === 'completed') {
-                filtered = filtered.filter(e => e.status === 'Passed' || e.status === 'Skipped');
-            }
-            else if (this.filters.status === 'failed') {
-                filtered = filtered.filter(e => e.status === 'Failed' || e.status === 'Error');
-            }
-            else if (this.filters.status === 'passed') {
-                filtered = filtered.filter(e => e.status === 'Passed');
-            }
-        }
-        // Note: Time range filtering is now handled by the service via updateServiceDateRange()
-        // This ensures the KPIs and list use the same data set
-        // Apply search text filter
-        if (this.filters.searchText) {
-            const searchLower = this.filters.searchText.toLowerCase();
-            filtered = filtered.filter(e => e.testName.toLowerCase().includes(searchLower) ||
-                e.suiteName.toLowerCase().includes(searchLower));
-        }
-        // Sort by most recent first
-        filtered.sort((a, b) => b.startedAt.getTime() - a.startedAt.getTime());
-        return filtered;
-    }
-    onFilterChange() {
-        // Only re-query server when time range changes - status/search filtering is client-side only
-        if (this.filters.timeRange !== this.previousTimeRange) {
-            this.previousTimeRange = this.filters.timeRange;
-            this.updateServiceDateRange();
-        }
-        // Trigger client-side filter update via observable
-        this.filterTrigger$.next();
-        this.emitStateChange();
-        this.cdr.markForCheck();
-    }
-    updateServiceDateRange() {
-        const now = new Date();
-        let startDate;
-        switch (this.filters.timeRange) {
-            case 'today':
-                startDate = new Date(now);
-                startDate.setHours(0, 0, 0, 0);
-                break;
-            case 'week':
-                startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-                break;
-            case 'month':
-                startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-                break;
-            case 'all':
-            default:
-                // For "all time", use a very old date (e.g., 1 year ago)
-                startDate = new Date(now.getTime() - 365 * 24 * 60 * 60 * 1000);
-                break;
-        }
-        this.instrumentationService.setDateRange(startDate, now);
-    }
-    clearSearch() {
-        this.filters.searchText = '';
-        this.onFilterChange();
-    }
-    refresh() {
-        this.isRefreshing = true;
-        this.instrumentationService.refresh();
-        setTimeout(() => {
-            this.isRefreshing = false;
-            this.lastUpdated = new Date();
-            this.cdr.markForCheck();
-        }, 1000);
-    }
-    filterByStatus(status) {
-        this.filters.status = status;
-        this.onFilterChange();
-    }
-    startNewTest() {
-        this.activeDialogRef = this.dialogService.open({
-            content: TestRunDialogComponent,
-            width: 1000,
-            height: 750,
-            title: 'Run Test',
-            actions: []
-        });
-        this.activeDialogRef.result.pipe(takeUntil(this.destroy$)).subscribe({
-            next: (result) => {
-                if (result && typeof result === 'object' && 'testExecuted' in result && result.testExecuted) {
-                    this.refresh();
-                }
-            },
-            error: () => {
-                this.activeDialogRef = null;
-            },
-            complete: () => {
-                this.activeDialogRef = null;
-            }
-        });
-    }
-    viewDetails(execution) {
-        SharedService.Instance.OpenEntityRecord('MJ: Test Runs', CompositeKey.FromID(execution.id));
-    }
-    async cancelExecution(execution) {
-        // For now, show a notification - full cancel support requires server-side CancelTest mutation
-        // which we documented in the plan but haven't implemented yet
-        SharedService.Instance.CreateSimpleNotification(`Cancellation requested for "${execution.testName}". Full cancellation support coming soon.`, 'warning', 3000);
-        // Refresh after a delay to pick up any status changes
-        setTimeout(() => this.refresh(), 1500);
-    }
-    async rerunTest(execution) {
-        if (!execution.testId) {
-            SharedService.Instance.CreateSimpleNotification('Cannot re-run: Test ID not available', 'error', 3000);
-            return;
-        }
-        // Open the test run dialog with the test pre-selected
-        this.activeDialogRef = this.dialogService.open({
-            content: TestRunDialogComponent,
-            width: 1000,
-            height: 750,
-            title: 'Re-run Test',
-            actions: []
-        });
-        // Pre-configure the dialog with the test
-        const dialogComponent = this.activeDialogRef.content.instance;
-        dialogComponent.runMode = 'test';
-        dialogComponent.selectedTestId = execution.testId;
-        this.activeDialogRef.result.pipe(takeUntil(this.destroy$)).subscribe({
-            next: (result) => {
-                if (result && typeof result === 'object' && 'testExecuted' in result && result.testExecuted) {
-                    SharedService.Instance.CreateSimpleNotification(`Test "${execution.testName}" completed`, 'success', 3000);
-                    this.refresh();
-                }
-            },
-            error: () => {
-                this.activeDialogRef = null;
-            },
-            complete: () => {
-                this.activeDialogRef = null;
-            }
-        });
-    }
-    formatDuration(milliseconds) {
-        if (milliseconds < 1000)
-            return `${milliseconds}ms`;
-        const seconds = Math.floor(milliseconds / 1000);
-        const minutes = Math.floor(seconds / 60);
-        if (minutes > 0)
-            return `${minutes}m ${seconds % 60}s`;
-        return `${seconds}s`;
-    }
-    getTimeRangeLabel() {
-        switch (this.filters.timeRange) {
-            case 'today': return 'Today';
-            case 'week': return 'This Week';
-            case 'month': return 'This Month';
-            case 'all': return 'All Time';
-            default: return '';
-        }
-    }
-    emitStateChange() {
-        this.stateChange.emit({
-            filters: this.filters
-        });
-    }
-    static ɵfac = function TestingExecutionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingExecutionComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i2.DialogService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingExecutionComponent, selectors: [["app-testing-execution"]], inputs: { initialState: "initialState" }, outputs: { stateChange: "stateChange" }, decls: 118, vars: 41, consts: [["kendoDialogContainer", "", 1, "testing-execution"], [1, "execution-header"], [1, "header-left"], [1, "header-icon"], [1, "fa-solid", "fa-play-circle"], [1, "header-text"], [1, "header-meta"], [1, "last-updated"], [1, "fa-solid", "fa-clock"], [1, "live-indicator"], [1, "header-actions"], [1, "action-btn", "refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-sync-alt"], [1, "action-btn", "primary-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "filter-bar"], [1, "filter-chips"], [1, "filter-chip", 3, "click"], [1, "filter-chip", "running", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "filter-chip", "passed", 3, "click"], [1, "fa-solid", "fa-check"], [1, "filter-chip", "failed", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-controls"], [1, "time-select"], [3, "ngModelChange", "change", "ngModel"], ["value", "today"], ["value", "week"], ["value", "month"], ["value", "all"], [1, "search-input"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search tests...", 3, "ngModelChange", "input", "ngModel"], [1, "clear-btn"], [1, "kpi-grid"], [1, "kpi-card", "running", "clickable", 3, "click"], [1, "kpi-icon"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-arrow"], [1, "fa-solid", "fa-chevron-right"], [1, "kpi-card", "passed", "clickable", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-card", "failed", "clickable", 3, "click"], [1, "fa-solid", "fa-exclamation-circle"], [1, "kpi-card", "duration"], [1, "execution-content"], [1, "execution-list"], [1, "list-header"], [1, "header-cell", "test-name"], [1, "header-cell", "status"], [1, "header-cell", "score"], [1, "header-cell", "duration"], [1, "header-cell", "cost"], [1, "header-cell", "timestamp"], [1, "header-cell", "actions"], [1, "loading-placeholder"], [1, "no-data"], [1, "execution-row", 3, "running"], [1, "pulse"], [1, "text"], [1, "clear-btn", 3, "click"], ["text", "Loading test executions..."], [1, "fa-solid", "fa-inbox"], [1, "action-btn", "primary", 3, "click"], [1, "execution-row"], [1, "cell", "test-name"], [1, "test-info"], [1, "name"], [1, "suite"], [1, "cell", "status"], [3, "status"], [1, "progress-bar"], [1, "cell", "score"], [3, "score", "showBar", "showIcon"], [1, "cell", "duration"], [1, "cell", "cost"], [3, "cost", "showIcon"], [1, "cell", "timestamp"], [1, "cell", "actions"], ["title", "View Details", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["title", "Cancel", 1, "icon-btn", "danger"], ["title", "Re-run", 1, "icon-btn"], [1, "progress-fill"], ["title", "Cancel", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-stop"], ["title", "Re-run", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-redo"]], template: function TestingExecutionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
-            i0.ɵɵelement(4, "i", 4);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "div", 5)(6, "h2");
-            i0.ɵɵtext(7, "Test Execution Monitor");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div", 6)(9, "span", 7);
-            i0.ɵɵelement(10, "i", 8);
-            i0.ɵɵtext(11);
-            i0.ɵɵpipe(12, "date");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(13, TestingExecutionComponent_Conditional_13_Template, 4, 0, "div", 9);
-            i0.ɵɵpipe(14, "async");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(15, "div", 10)(16, "button", 11);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_16_listener() { return ctx.refresh(); });
-            i0.ɵɵelement(17, "i", 12);
-            i0.ɵɵelementStart(18, "span");
-            i0.ɵɵtext(19, "Refresh");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(20, "button", 13);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_20_listener() { return ctx.startNewTest(); });
-            i0.ɵɵelement(21, "i", 14);
-            i0.ɵɵelementStart(22, "span");
-            i0.ɵɵtext(23, "Run Test");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(24, "div", 15)(25, "div", 16)(26, "button", 17);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_26_listener() { ctx.filters.status = "all"; return ctx.onFilterChange(); });
-            i0.ɵɵtext(27, " All ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(28, "button", 18);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_28_listener() { ctx.filters.status = "running"; return ctx.onFilterChange(); });
-            i0.ɵɵelement(29, "i", 19);
-            i0.ɵɵtext(30, " Running ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(31, "button", 20);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_31_listener() { ctx.filters.status = "passed"; return ctx.onFilterChange(); });
-            i0.ɵɵelement(32, "i", 21);
-            i0.ɵɵtext(33, " Passed ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "button", 22);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_button_click_34_listener() { ctx.filters.status = "failed"; return ctx.onFilterChange(); });
-            i0.ɵɵelement(35, "i", 23);
-            i0.ɵɵtext(36, " Failed ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(37, "div", 24)(38, "div", 25)(39, "select", 26);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_select_ngModelChange_39_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.timeRange, $event) || (ctx.filters.timeRange = $event); return $event; });
-            i0.ɵɵlistener("change", function TestingExecutionComponent_Template_select_change_39_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵelementStart(40, "option", 27);
-            i0.ɵɵtext(41, "Today");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "option", 28);
-            i0.ɵɵtext(43, "This Week");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(44, "option", 29);
-            i0.ɵɵtext(45, "This Month");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(46, "option", 30);
-            i0.ɵɵtext(47, "All Time");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(48, "div", 31);
-            i0.ɵɵelement(49, "i", 32);
-            i0.ɵɵelementStart(50, "input", 33);
-            i0.ɵɵtwoWayListener("ngModelChange", function TestingExecutionComponent_Template_input_ngModelChange_50_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.filters.searchText, $event) || (ctx.filters.searchText = $event); return $event; });
-            i0.ɵɵlistener("input", function TestingExecutionComponent_Template_input_input_50_listener() { return ctx.onFilterChange(); });
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(51, TestingExecutionComponent_Conditional_51_Template, 2, 0, "button", 34);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(52, "div", 35)(53, "div", 36);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_53_listener() { return ctx.filterByStatus("running"); });
-            i0.ɵɵelementStart(54, "div", 37);
-            i0.ɵɵelement(55, "i", 19);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(56, "div", 38)(57, "div", 39);
-            i0.ɵɵtext(58);
-            i0.ɵɵpipe(59, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(60, "div", 40);
-            i0.ɵɵtext(61, "Running Now");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(62, "div", 41);
-            i0.ɵɵelement(63, "i", 42);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(64, "div", 43);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_64_listener() { return ctx.filterByStatus("passed"); });
-            i0.ɵɵelementStart(65, "div", 37);
-            i0.ɵɵelement(66, "i", 44);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(67, "div", 38)(68, "div", 39);
-            i0.ɵɵtext(69);
-            i0.ɵɵpipe(70, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(71, "div", 40);
-            i0.ɵɵtext(72);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(73, "div", 41);
-            i0.ɵɵelement(74, "i", 42);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(75, "div", 45);
-            i0.ɵɵlistener("click", function TestingExecutionComponent_Template_div_click_75_listener() { return ctx.filterByStatus("failed"); });
-            i0.ɵɵelementStart(76, "div", 37);
-            i0.ɵɵelement(77, "i", 46);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(78, "div", 38)(79, "div", 39);
-            i0.ɵɵtext(80);
-            i0.ɵɵpipe(81, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(82, "div", 40);
-            i0.ɵɵtext(83);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(84, "div", 41);
-            i0.ɵɵelement(85, "i", 42);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(86, "div", 47)(87, "div", 37);
-            i0.ɵɵelement(88, "i", 8);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(89, "div", 38)(90, "div", 39);
-            i0.ɵɵtext(91);
-            i0.ɵɵpipe(92, "async");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(93, "div", 40);
-            i0.ɵɵtext(94, "Avg Duration");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(95, "div", 48)(96, "div", 49)(97, "div", 50)(98, "div", 51);
-            i0.ɵɵtext(99, "Test Name");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(100, "div", 52);
-            i0.ɵɵtext(101, "Status");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(102, "div", 53);
-            i0.ɵɵtext(103, "Score");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(104, "div", 54);
-            i0.ɵɵtext(105, "Duration");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(106, "div", 55);
-            i0.ɵɵtext(107, "Cost");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(108, "div", 56);
-            i0.ɵɵtext(109, "Started At");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(110, "div", 57);
-            i0.ɵɵtext(111, "Actions");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(112, TestingExecutionComponent_Conditional_112_Template, 2, 0, "div", 58);
-            i0.ɵɵpipe(113, "async");
-            i0.ɵɵtemplate(114, TestingExecutionComponent_Conditional_114_Template, 7, 0, "div", 59);
-            i0.ɵɵrepeaterCreate(115, TestingExecutionComponent_For_116_Template, 24, 17, "div", 60, _forTrack0);
-            i0.ɵɵpipe(117, "async");
-            i0.ɵɵelementEnd()()();
-        } if (rf & 2) {
-            let tmp_11_0;
-            let tmp_12_0;
-            let tmp_14_0;
-            let tmp_16_0;
-            let tmp_17_0;
-            let tmp_18_0;
-            i0.ɵɵadvance(11);
-            i0.ɵɵtextInterpolate1(" Updated ", i0.ɵɵpipeBind2(12, 23, ctx.lastUpdated, "shortTime"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(i0.ɵɵpipeBind1(14, 26, ctx.hasRunningTests$) ? 13 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("disabled", ctx.isRefreshing);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("spinning", ctx.isRefreshing);
-            i0.ɵɵadvance(9);
-            i0.ɵɵclassProp("active", ctx.filters.status === "all");
-            i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.filters.status === "running");
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("active", ctx.filters.status === "passed");
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("active", ctx.filters.status === "failed");
-            i0.ɵɵadvance(5);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.filters.timeRange);
-            i0.ɵɵadvance(11);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.filters.searchText);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.filters.searchText ? 51 : -1);
-            i0.ɵɵadvance(7);
-            i0.ɵɵtextInterpolate((tmp_11_0 = i0.ɵɵpipeBind1(59, 28, ctx.runningCount$)) !== null && tmp_11_0 !== undefined ? tmp_11_0 : 0);
-            i0.ɵɵadvance(11);
-            i0.ɵɵtextInterpolate((tmp_12_0 = i0.ɵɵpipeBind1(70, 30, ctx.completedTodayCount$)) !== null && tmp_12_0 !== undefined ? tmp_12_0 : 0);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("Passed ", ctx.getTimeRangeLabel(), "");
-            i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate((tmp_14_0 = i0.ɵɵpipeBind1(81, 32, ctx.failedTodayCount$)) !== null && tmp_14_0 !== undefined ? tmp_14_0 : 0);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("Failed ", ctx.getTimeRangeLabel(), "");
-            i0.ɵɵadvance(8);
-            i0.ɵɵtextInterpolate(ctx.formatDuration((tmp_16_0 = i0.ɵɵpipeBind1(92, 34, ctx.avgDurationToday$)) !== null && tmp_16_0 !== undefined ? tmp_16_0 : 0));
-            i0.ɵɵadvance(21);
-            i0.ɵɵconditional(ctx.isLoading ? 112 : ((tmp_17_0 = i0.ɵɵpipeBind1(113, 36, ctx.filteredExecutions$)) == null ? null : tmp_17_0.length) === 0 ? 114 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵrepeater((tmp_18_0 = i0.ɵɵpipeBind1(117, 38, ctx.filteredExecutions$)) !== null && tmp_18_0 !== undefined ? tmp_18_0 : i0.ɵɵpureFunction0(40, _c0));
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i2.DialogContainerDirective, i4.TestStatusBadgeComponent, i4.ScoreIndicatorComponent, i4.CostDisplayComponent, i5.LoadingComponent, i6.AsyncPipe, i6.DatePipe], styles: ["\n\n\n\n\n    .testing-execution[_ngcontent-%COMP%] {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);\n    }\n\n    \n\n    .execution-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      padding: 24px 28px;\n      border-radius: 16px;\n      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      color: white;\n    }\n\n    .header-text[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0 0 4px 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .header-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .last-updated[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: rgba(255, 255, 255, 0.8);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .last-updated[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .live-indicator[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .pulse[_ngcontent-%COMP%] {\n      width: 8px;\n      height: 8px;\n      background: #22c55e;\n      border-radius: 50%;\n      animation: _ngcontent-%COMP%_pulse 2s infinite;\n      box-shadow: 0 0 8px #22c55e;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      background: rgba(255, 255, 255, 0.15);\n      color: white;\n      border: 1px solid rgba(255, 255, 255, 0.25);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.25);\n      transform: translateY(-1px);\n    }\n\n    .primary-btn[_ngcontent-%COMP%] {\n      background: white;\n      color: #6366f1;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .primary-btn[_ngcontent-%COMP%]:hover {\n      background: #f8f9ff;\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n    }\n\n    .action-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none !important;\n    }\n\n    .spinning[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_spin 1s linear infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    \n\n    .filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 16px 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n    }\n\n    .filter-chips[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .filter-chip[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #f1f5f9;\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .filter-chip[_ngcontent-%COMP%]:hover {\n      background: #e2e8f0;\n      color: #475569;\n    }\n\n    .filter-chip.active[_ngcontent-%COMP%] {\n      background: #6366f1;\n      color: white;\n      border-color: #6366f1;\n    }\n\n    .filter-chip.running.active[_ngcontent-%COMP%] {\n      background: #3b82f6;\n      border-color: #3b82f6;\n    }\n\n    .filter-chip.passed.active[_ngcontent-%COMP%] {\n      background: #22c55e;\n      border-color: #22c55e;\n    }\n\n    .filter-chip.failed.active[_ngcontent-%COMP%] {\n      background: #ef4444;\n      border-color: #ef4444;\n    }\n\n    .filter-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }\n\n    .filter-controls[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-select[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 10px 14px;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #475569;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-select[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 16px;\n      background: #f8fafc;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      min-width: 250px;\n      transition: all 0.2s ease;\n    }\n\n    .search-input[_ngcontent-%COMP%]:focus-within {\n      border-color: #6366f1;\n      background: white;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #94a3b8;\n      font-size: 14px;\n    }\n\n    .search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n      color: #94a3b8;\n    }\n\n    .clear-btn[_ngcontent-%COMP%] {\n      padding: 4px 8px;\n      border: none;\n      background: transparent;\n      color: #94a3b8;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n    }\n\n    .clear-btn[_ngcontent-%COMP%]:hover {\n      background: #e2e8f0;\n      color: #64748b;\n    }\n\n    \n\n    .kpi-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .kpi-card[_ngcontent-%COMP%]::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      border-radius: 4px 0 0 4px;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%] {\n      cursor: pointer;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%]:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);\n    }\n\n    .kpi-card.running[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #3b82f6, #60a5fa); }\n    .kpi-card.passed[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #22c55e, #4ade80); }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #ef4444, #f87171); }\n    .kpi-card.duration[_ngcontent-%COMP%]::before { background: linear-gradient(180deg, #8b5cf6, #a78bfa); }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .kpi-card.running[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(59, 130, 246, 0.1);\n      color: #3b82f6;\n    }\n\n    .kpi-card.passed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(34, 197, 94, 0.1);\n      color: #22c55e;\n    }\n\n    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.1);\n      color: #ef4444;\n    }\n\n    .kpi-card.duration[_ngcontent-%COMP%]   .kpi-icon[_ngcontent-%COMP%] {\n      background: rgba(139, 92, 246, 0.1);\n      color: #8b5cf6;\n    }\n\n    .kpi-content[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .kpi-value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 500;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-arrow[_ngcontent-%COMP%] {\n      color: #cbd5e1;\n      font-size: 14px;\n      opacity: 0;\n      transition: all 0.3s ease;\n    }\n\n    .kpi-card.clickable[_ngcontent-%COMP%]:hover   .kpi-arrow[_ngcontent-%COMP%] {\n      opacity: 1;\n      color: #6366f1;\n      transform: translateX(4px);\n    }\n\n    \n\n    .execution-content[_ngcontent-%COMP%] {\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      overflow: hidden;\n    }\n\n    .execution-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    \n\n    .list-header[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 16px 24px;\n      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);\n      border-bottom: 1px solid #e2e8f0;\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .header-cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    \n\n    .execution-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 18px 24px;\n      border-bottom: 1px solid #f1f5f9;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .execution-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .execution-row[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);\n    }\n\n    .execution-row.running[_ngcontent-%COMP%] {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);\n      border-left: 3px solid #3b82f6;\n    }\n\n    .execution-row.running[_ngcontent-%COMP%]:hover {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);\n    }\n\n    \n\n    .cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .cell.test-name[_ngcontent-%COMP%] {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .name[_ngcontent-%COMP%] {\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .test-info[_ngcontent-%COMP%]   .suite[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #64748b;\n    }\n\n    .cell.status[_ngcontent-%COMP%] {\n      flex-direction: column;\n      gap: 8px;\n      align-items: flex-start;\n    }\n\n    .progress-bar[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 4px;\n      background: #e2e8f0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      background: linear-gradient(90deg, #3b82f6, #60a5fa);\n      border-radius: 2px;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions[_ngcontent-%COMP%] {\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    \n\n    .icon-btn[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      color: #64748b;\n      cursor: pointer;\n      border-radius: 10px;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n      font-size: 14px;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: #6366f1;\n      border-color: #6366f1;\n      color: white;\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    }\n\n    .icon-btn.danger[_ngcontent-%COMP%]:hover {\n      background: #ef4444;\n      border-color: #ef4444;\n      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n    }\n\n    \n\n    .loading-placeholder[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    \n\n    .no-data[_ngcontent-%COMP%] {\n      padding: 80px 40px;\n      text-align: center;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    .no-data[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 64px;\n      color: #cbd5e1;\n      margin-bottom: 20px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: #64748b;\n      margin-bottom: 24px;\n    }\n\n    .no-data[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 12px 24px;\n      border-radius: 12px;\n      font-weight: 600;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);\n    }\n\n    .no-data[_ngcontent-%COMP%]   .action-btn[_ngcontent-%COMP%]:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);\n    }\n\n    \n\n    @media (max-width: 1400px) {\n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-chips[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .filter-controls[_ngcontent-%COMP%] {\n        justify-content: center;\n      }\n\n      .list-header[_ngcontent-%COMP%], \n   .execution-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 100px 80px 100px;\n      }\n\n      .header-cell.cost[_ngcontent-%COMP%], \n   .header-cell.timestamp[_ngcontent-%COMP%], \n   .cell.cost[_ngcontent-%COMP%], \n   .cell.timestamp[_ngcontent-%COMP%] {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .kpi-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .search-input[_ngcontent-%COMP%] {\n        min-width: 200px;\n      }\n    }"], changeDetection: 0 });
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingExecutionComponent, [{
-        type: Component,
-        args: [{ selector: 'app-testing-execution', changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="testing-execution" kendoDialogContainer>
-      <!-- Premium Header with Gradient -->
-      <div class="execution-header">
-        <div class="header-left">
-          <div class="header-icon">
-            <i class="fa-solid fa-play-circle"></i>
-          </div>
-          <div class="header-text">
-            <h2>Test Execution Monitor</h2>
-            <div class="header-meta">
-              <span class="last-updated">
-                <i class="fa-solid fa-clock"></i>
-                Updated {{ lastUpdated | date:'shortTime' }}
-              </span>
-              @if (hasRunningTests$ | async) {
-                <div class="live-indicator">
-                  <span class="pulse"></span>
-                  <span class="text">Live</span>
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-        <div class="header-actions">
-          <button class="action-btn refresh-btn" (click)="refresh()" [disabled]="isRefreshing">
-            <i class="fa-solid fa-sync-alt" [class.spinning]="isRefreshing"></i>
-            <span>Refresh</span>
-          </button>
-          <button class="action-btn primary-btn" (click)="startNewTest()">
-            <i class="fa-solid fa-play"></i>
-            <span>Run Test</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Smart Filter Bar -->
-      <div class="filter-bar">
-        <div class="filter-chips">
-          <button
-            class="filter-chip"
-            [class.active]="filters.status === 'all'"
-            (click)="filters.status = 'all'; onFilterChange()"
-          >
-            All
-          </button>
-          <button
-            class="filter-chip running"
-            [class.active]="filters.status === 'running'"
-            (click)="filters.status = 'running'; onFilterChange()"
-          >
-            <i class="fa-solid fa-spinner fa-spin"></i>
-            Running
-          </button>
-          <button
-            class="filter-chip passed"
-            [class.active]="filters.status === 'passed'"
-            (click)="filters.status = 'passed'; onFilterChange()"
-          >
-            <i class="fa-solid fa-check"></i>
-            Passed
-          </button>
-          <button
-            class="filter-chip failed"
-            [class.active]="filters.status === 'failed'"
-            (click)="filters.status = 'failed'; onFilterChange()"
-          >
-            <i class="fa-solid fa-times"></i>
-            Failed
-          </button>
-        </div>
-
-        <div class="filter-controls">
-          <div class="time-select">
-            <select [(ngModel)]="filters.timeRange" (change)="onFilterChange()">
-              <option value="today">Today</option>
-              <option value="week">This Week</option>
-              <option value="month">This Month</option>
-              <option value="all">All Time</option>
-            </select>
-          </div>
-
-          <div class="search-input">
-            <i class="fa-solid fa-search"></i>
-            <input
-              type="text"
-              [(ngModel)]="filters.searchText"
-              (input)="onFilterChange()"
-              placeholder="Search tests..."
-            />
-            @if (filters.searchText) {
-              <button class="clear-btn" (click)="clearSearch()">
-                <i class="fa-solid fa-times"></i>
-              </button>
-            }
-          </div>
-        </div>
-      </div>
-
-      <!-- KPI Cards (Actionable) -->
-      <div class="kpi-grid">
-        <div
-          class="kpi-card running clickable"
-          (click)="filterByStatus('running')"
-        >
-          <div class="kpi-icon">
-            <i class="fa-solid fa-spinner fa-spin"></i>
-          </div>
-          <div class="kpi-content">
-            <div class="kpi-value">{{ (runningCount$ | async) ?? 0 }}</div>
-            <div class="kpi-label">Running Now</div>
-          </div>
-          <div class="kpi-arrow">
-            <i class="fa-solid fa-chevron-right"></i>
-          </div>
-        </div>
-
-        <div
-          class="kpi-card passed clickable"
-          (click)="filterByStatus('passed')"
-        >
-          <div class="kpi-icon">
-            <i class="fa-solid fa-check-circle"></i>
-          </div>
-          <div class="kpi-content">
-            <div class="kpi-value">{{ (completedTodayCount$ | async) ?? 0 }}</div>
-            <div class="kpi-label">Passed {{ getTimeRangeLabel() }}</div>
-          </div>
-          <div class="kpi-arrow">
-            <i class="fa-solid fa-chevron-right"></i>
-          </div>
-        </div>
-
-        <div
-          class="kpi-card failed clickable"
-          (click)="filterByStatus('failed')"
-        >
-          <div class="kpi-icon">
-            <i class="fa-solid fa-exclamation-circle"></i>
-          </div>
-          <div class="kpi-content">
-            <div class="kpi-value">{{ (failedTodayCount$ | async) ?? 0 }}</div>
-            <div class="kpi-label">Failed {{ getTimeRangeLabel() }}</div>
-          </div>
-          <div class="kpi-arrow">
-            <i class="fa-solid fa-chevron-right"></i>
-          </div>
-        </div>
-
-        <div class="kpi-card duration">
-          <div class="kpi-icon">
-            <i class="fa-solid fa-clock"></i>
-          </div>
-          <div class="kpi-content">
-            <div class="kpi-value">{{ formatDuration((avgDurationToday$ | async) ?? 0) }}</div>
-            <div class="kpi-label">Avg Duration</div>
-          </div>
-        </div>
-      </div>
-
-      <div class="execution-content">
-        <div class="execution-list">
-          <div class="list-header">
-            <div class="header-cell test-name">Test Name</div>
-            <div class="header-cell status">Status</div>
-            <div class="header-cell score">Score</div>
-            <div class="header-cell duration">Duration</div>
-            <div class="header-cell cost">Cost</div>
-            <div class="header-cell timestamp">Started At</div>
-            <div class="header-cell actions">Actions</div>
-          </div>
-
-          @if (isLoading) {
-            <div class="loading-placeholder">
-              <mj-loading text="Loading test executions..."></mj-loading>
-            </div>
-          } @else if ((filteredExecutions$ | async)?.length === 0) {
-            <div class="no-data">
-              <i class="fa-solid fa-inbox"></i>
-              <p>No test executions found</p>
-              <button class="action-btn primary" (click)="startNewTest()">
-                <i class="fa-solid fa-play"></i>
-                Run Your First Test
-              </button>
-            </div>
-          }
-
-          @for (execution of (filteredExecutions$ | async) ?? []; track execution.id) {
-            <div class="execution-row" [class.running]="execution.status === 'Running'">
-              <div class="cell test-name">
-                <div class="test-info">
-                  <div class="name">{{ execution.testName }}</div>
-                  <div class="suite">{{ execution.suiteName }}</div>
-                </div>
-              </div>
-              <div class="cell status">
-                <app-test-status-badge [status]="execution.status"></app-test-status-badge>
-                @if (execution.status === 'Running') {
-                  <div class="progress-bar">
-                    <div class="progress-fill" [style.width.%]="execution.progress"></div>
-                  </div>
-                }
-              </div>
-              <div class="cell score">
-                <app-score-indicator
-                  [score]="execution.score"
-                  [showBar]="false"
-                  [showIcon]="false"
-                ></app-score-indicator>
-              </div>
-              <div class="cell duration">
-                {{ formatDuration(execution.duration) }}
-              </div>
-              <div class="cell cost">
-                <app-cost-display [cost]="execution.cost" [showIcon]="false"></app-cost-display>
-              </div>
-              <div class="cell timestamp">
-                {{ execution.startedAt | date:'short' }}
-              </div>
-              <div class="cell actions">
-                <button class="icon-btn" (click)="viewDetails(execution)" title="View Details">
-                  <i class="fa-solid fa-eye"></i>
-                </button>
-                @if (execution.status === 'Running') {
-                  <button class="icon-btn danger" (click)="cancelExecution(execution)" title="Cancel">
-                    <i class="fa-solid fa-stop"></i>
-                  </button>
-                } @else {
-                  <button class="icon-btn" (click)="rerunTest(execution)" title="Re-run">
-                    <i class="fa-solid fa-redo"></i>
-                  </button>
-                }
-              </div>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  `, styles: ["\n    /* ============================================\n       Testing Execution - Premium Design System\n       ============================================ */\n\n    .testing-execution {\n      padding: 24px;\n      height: 100%;\n      overflow-y: auto;\n      background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);\n    }\n\n    /* Premium Header */\n    .execution-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      padding: 24px 28px;\n      border-radius: 16px;\n      box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-icon {\n      width: 48px;\n      height: 48px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n      color: white;\n    }\n\n    .header-text h2 {\n      margin: 0 0 4px 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .header-meta {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .last-updated {\n      font-size: 12px;\n      color: rgba(255, 255, 255, 0.8);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .last-updated i {\n      font-size: 11px;\n    }\n\n    .live-indicator {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 12px;\n      background: rgba(255, 255, 255, 0.2);\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      color: white;\n    }\n\n    .pulse {\n      width: 8px;\n      height: 8px;\n      background: #22c55e;\n      border-radius: 50%;\n      animation: pulse 2s infinite;\n      box-shadow: 0 0 8px #22c55e;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.5; transform: scale(1.3); }\n    }\n\n    .header-actions {\n      display: flex;\n      gap: 12px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: none;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .refresh-btn {\n      background: rgba(255, 255, 255, 0.15);\n      color: white;\n      border: 1px solid rgba(255, 255, 255, 0.25);\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.25);\n      transform: translateY(-1px);\n    }\n\n    .primary-btn {\n      background: white;\n      color: #6366f1;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n    }\n\n    .primary-btn:hover {\n      background: #f8f9ff;\n      transform: translateY(-2px);\n      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);\n    }\n\n    .action-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n      transform: none !important;\n    }\n\n    .spinning {\n      animation: spin 1s linear infinite;\n    }\n\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n\n    /* Smart Filter Bar */\n    .filter-bar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: 16px;\n      margin-bottom: 20px;\n      padding: 16px 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n    }\n\n    .filter-chips {\n      display: flex;\n      gap: 8px;\n    }\n\n    .filter-chip {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 8px 16px;\n      background: #f1f5f9;\n      border: 2px solid transparent;\n      border-radius: 20px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #64748b;\n      cursor: pointer;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .filter-chip:hover {\n      background: #e2e8f0;\n      color: #475569;\n    }\n\n    .filter-chip.active {\n      background: #6366f1;\n      color: white;\n      border-color: #6366f1;\n    }\n\n    .filter-chip.running.active {\n      background: #3b82f6;\n      border-color: #3b82f6;\n    }\n\n    .filter-chip.passed.active {\n      background: #22c55e;\n      border-color: #22c55e;\n    }\n\n    .filter-chip.failed.active {\n      background: #ef4444;\n      border-color: #ef4444;\n    }\n\n    .filter-chip i {\n      font-size: 11px;\n    }\n\n    .filter-controls {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n\n    .time-select select {\n      padding: 10px 14px;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #475569;\n      background: white;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .time-select select:focus {\n      outline: none;\n      border-color: #6366f1;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 16px;\n      background: #f8fafc;\n      border: 2px solid #e2e8f0;\n      border-radius: 10px;\n      min-width: 250px;\n      transition: all 0.2s ease;\n    }\n\n    .search-input:focus-within {\n      border-color: #6366f1;\n      background: white;\n      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n    }\n\n    .search-input i {\n      color: #94a3b8;\n      font-size: 14px;\n    }\n\n    .search-input input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      outline: none;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .search-input input::placeholder {\n      color: #94a3b8;\n    }\n\n    .clear-btn {\n      padding: 4px 8px;\n      border: none;\n      background: transparent;\n      color: #94a3b8;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.2s ease;\n    }\n\n    .clear-btn:hover {\n      background: #e2e8f0;\n      color: #64748b;\n    }\n\n    /* KPI Cards Grid */\n    .kpi-grid {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      padding: 20px;\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .kpi-card::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 4px;\n      height: 100%;\n      border-radius: 4px 0 0 4px;\n    }\n\n    .kpi-card.clickable {\n      cursor: pointer;\n    }\n\n    .kpi-card.clickable:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);\n    }\n\n    .kpi-card.running::before { background: linear-gradient(180deg, #3b82f6, #60a5fa); }\n    .kpi-card.passed::before { background: linear-gradient(180deg, #22c55e, #4ade80); }\n    .kpi-card.failed::before { background: linear-gradient(180deg, #ef4444, #f87171); }\n    .kpi-card.duration::before { background: linear-gradient(180deg, #8b5cf6, #a78bfa); }\n\n    .kpi-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n    }\n\n    .kpi-card.running .kpi-icon {\n      background: rgba(59, 130, 246, 0.1);\n      color: #3b82f6;\n    }\n\n    .kpi-card.passed .kpi-icon {\n      background: rgba(34, 197, 94, 0.1);\n      color: #22c55e;\n    }\n\n    .kpi-card.failed .kpi-icon {\n      background: rgba(239, 68, 68, 0.1);\n      color: #ef4444;\n    }\n\n    .kpi-card.duration .kpi-icon {\n      background: rgba(139, 92, 246, 0.1);\n      color: #8b5cf6;\n    }\n\n    .kpi-content {\n      flex: 1;\n    }\n\n    .kpi-value {\n      font-size: 26px;\n      font-weight: 700;\n      color: #1e293b;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-label {\n      font-size: 12px;\n      font-weight: 500;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .kpi-arrow {\n      color: #cbd5e1;\n      font-size: 14px;\n      opacity: 0;\n      transition: all 0.3s ease;\n    }\n\n    .kpi-card.clickable:hover .kpi-arrow {\n      opacity: 1;\n      color: #6366f1;\n      transform: translateX(4px);\n    }\n\n    /* Execution List Container */\n    .execution-content {\n      background: white;\n      border-radius: 14px;\n      box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06);\n      overflow: hidden;\n    }\n\n    .execution-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* List Header */\n    .list-header {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 16px 24px;\n      background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);\n      border-bottom: 1px solid #e2e8f0;\n      font-size: 11px;\n      font-weight: 700;\n      color: #64748b;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .header-cell {\n      display: flex;\n      align-items: center;\n    }\n\n    /* Execution Row */\n    .execution-row {\n      display: grid;\n      grid-template-columns: 2fr 120px 100px 100px 140px 100px;\n      gap: 20px;\n      padding: 18px 24px;\n      border-bottom: 1px solid #f1f5f9;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .execution-row:last-child {\n      border-bottom: none;\n    }\n\n    .execution-row:hover {\n      background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);\n    }\n\n    .execution-row.running {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);\n      border-left: 3px solid #3b82f6;\n    }\n\n    .execution-row.running:hover {\n      background: linear-gradient(90deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);\n    }\n\n    /* Cells */\n    .cell {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      color: #334155;\n    }\n\n    .cell.test-name {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 4px;\n    }\n\n    .test-info .name {\n      font-weight: 600;\n      color: #1e293b;\n      font-size: 14px;\n    }\n\n    .test-info .suite {\n      font-size: 12px;\n      color: #64748b;\n    }\n\n    .cell.status {\n      flex-direction: column;\n      gap: 8px;\n      align-items: flex-start;\n    }\n\n    .progress-bar {\n      width: 100%;\n      height: 4px;\n      background: #e2e8f0;\n      border-radius: 2px;\n      overflow: hidden;\n    }\n\n    .progress-fill {\n      height: 100%;\n      background: linear-gradient(90deg, #3b82f6, #60a5fa);\n      border-radius: 2px;\n      transition: width 0.3s ease;\n    }\n\n    .cell.actions {\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    /* Action Buttons */\n    .icon-btn {\n      width: 36px;\n      height: 36px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #f8fafc;\n      border: 1px solid #e2e8f0;\n      color: #64748b;\n      cursor: pointer;\n      border-radius: 10px;\n      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n      font-size: 14px;\n    }\n\n    .icon-btn:hover {\n      background: #6366f1;\n      border-color: #6366f1;\n      color: white;\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);\n    }\n\n    .icon-btn.danger:hover {\n      background: #ef4444;\n      border-color: #ef4444;\n      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n    }\n\n    /* Loading State */\n    .loading-placeholder {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 80px 40px;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    /* Empty State */\n    .no-data {\n      padding: 80px 40px;\n      text-align: center;\n      background: linear-gradient(180deg, #fafbff 0%, #f8fafc 100%);\n    }\n\n    .no-data i {\n      font-size: 64px;\n      color: #cbd5e1;\n      margin-bottom: 20px;\n    }\n\n    .no-data p {\n      font-size: 16px;\n      color: #64748b;\n      margin-bottom: 24px;\n    }\n\n    .no-data .action-btn {\n      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n      color: white;\n      padding: 12px 24px;\n      border-radius: 12px;\n      font-weight: 600;\n      box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);\n    }\n\n    .no-data .action-btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 6px 24px rgba(99, 102, 241, 0.4);\n    }\n\n    /* Responsive */\n    @media (max-width: 1400px) {\n      .kpi-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 1200px) {\n      .filter-bar {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .filter-chips {\n        justify-content: center;\n      }\n\n      .filter-controls {\n        justify-content: center;\n      }\n\n      .list-header,\n      .execution-row {\n        grid-template-columns: 1fr 100px 80px 100px;\n      }\n\n      .header-cell.cost,\n      .header-cell.timestamp,\n      .cell.cost,\n      .cell.timestamp {\n        display: none;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .kpi-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .search-input {\n        min-width: 200px;\n      }\n    }\n  "] }]
-    }], () => [{ type: i1.TestingInstrumentationService }, { type: i2.DialogService }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }], { initialState: [{
-            type: Input
-        }], stateChange: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingExecutionComponent, { className: "TestingExecutionComponent" }); })();
-//# sourceMappingURL=testing-execution.component.js.map