@cqa-lib/cqa-ui 1.1.130 → 1.1.132

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -5694,6 +5694,37 @@ class StepRendererComponent {
                 }
             }
         }
+        // If isUploadingBaseline or isMakingCurrentBaseline changed, update nested component instances
+        if (changes['isUploadingBaseline'] || changes['isMakingCurrentBaseline']) {
+            const instance = StepRendererComponent.componentInstances.get(this.container);
+            const componentRef = StepRendererComponent.componentRefs.get(this.container);
+            if (instance && componentRef) {
+                // Update isUploadingBaseline if it changed
+                if (changes['isUploadingBaseline']) {
+                    instance.isUploadingBaseline = this.isUploadingBaseline;
+                    // Also update in config if it exists
+                    if (instance.config) {
+                        instance.config.isUploadingBaseline = this.isUploadingBaseline;
+                    }
+                }
+                // Update isMakingCurrentBaseline if it changed
+                if (changes['isMakingCurrentBaseline']) {
+                    instance.isMakingCurrentBaseline = this.isMakingCurrentBaseline;
+                    // Also update in config if it exists
+                    if (instance.config) {
+                        instance.config.isMakingCurrentBaseline = this.isMakingCurrentBaseline;
+                    }
+                }
+                // Trigger change detection on the component instance
+                if (componentRef.injector) {
+                    const instanceCdr = componentRef.injector.get(ChangeDetectorRef, null);
+                    if (instanceCdr) {
+                        instanceCdr.markForCheck();
+                        instanceCdr.detectChanges();
+                    }
+                }
+            }
+        }
         // Get step identifiers
         const currentStepId = currentStep.testStepResultId || currentStep.id;
         const currentStepType = currentStep.type;
@@ -5765,7 +5796,8 @@ class StepRendererComponent {
         // List of properties that commonly change and need to be updated
         const importantProperties = ['status', 'duration', 'expanded', 'subSteps', 'children', 'nestedSteps', 'steps',
             'executionData', 'action', 'title', 'result', 'method', 'endpoint', 'statusCode', 'branches',
-            'responseTime', 'actions', 'prompt', 'optimizedRun', 'actionCount', 'iterations', 'selectedIterationId', 'stepNumber'];
+            'responseTime', 'actions', 'prompt', 'optimizedRun', 'actionCount', 'iterations', 'selectedIterationId', 'stepNumber',
+            'isUploadingBaseline', 'isMakingCurrentBaseline'];
         // Update important properties
         importantProperties.forEach(key => {
             // For selectedIterationId on loop steps, prioritize the input value over step value
@@ -5799,6 +5831,19 @@ class StepRendererComponent {
                     }
                 }
             }
+            else if (key === 'isUploadingBaseline' || key === 'isMakingCurrentBaseline') {
+                // For loading state objects, always use the input value (they're passed from parent)
+                const currentValue = key === 'isUploadingBaseline' ? this.isUploadingBaseline : this.isMakingCurrentBaseline;
+                const previousValue = instance[key];
+                // Always update if the reference changed (new object created)
+                if (currentValue !== previousValue) {
+                    instance[key] = currentValue;
+                    if (instance.config) {
+                        instance.config[key] = currentValue;
+                    }
+                    hasChanges = true;
+                }
+            }
             else {
                 const currentValue = currentStep[key];
                 const previousValue = previousStep[key];
@@ -7597,10 +7642,10 @@ class StepGroupComponent extends BaseStepComponent {
     }
 }
 StepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", isLoading: "isLoading", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", step: "step" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    \n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px] cqa-font-inter\">\n      {{ config?.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div class=\"cqa-step-renderer-wrapper\" [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "isLive"], outputs: ["componentReady"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", isLoading: "isLoading", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", step: "step" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    \n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px] cqa-font-inter\">\n      {{ config?.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div class=\"cqa-step-renderer-wrapper\" [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "isLive"], outputs: ["componentReady"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    \n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px] cqa-font-inter\">\n      {{ config?.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div class=\"cqa-step-renderer-wrapper\" [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n              [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n              [onStepClickHandler]=\"onStepClickHandler\"\n              [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n              [isUploadingBaseline]=\"isUploadingBaseline\"\n              [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n              [selectedIterationId]=\"step?.selectedIterationId || ''\"\n              [isLive]=\"isLive\"\n              (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" style=\"border-bottom: '1px solid #F3F4F6'\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    \n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px] cqa-font-inter\">\n      {{ config?.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div class=\"cqa-step-renderer-wrapper\" [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -9590,7 +9635,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 class FileDownloadStepComponent extends BaseStepComponent {
     ngOnInit() {
-        // Build config from individual inputs
+        this.updateConfigFromInputs();
+        super.ngOnInit();
+    }
+    ngOnChanges(changes) {
+        this.updateConfigFromInputs();
+        if (changes['expanded']) {
+            this.isExpanded = this.expanded ?? false;
+        }
+    }
+    updateConfigFromInputs() {
         this.config = {
             id: this.id,
             testStepResultId: this.testStepResultId,
@@ -9607,7 +9661,6 @@ class FileDownloadStepComponent extends BaseStepComponent {
             timingBreakdown: this.timingBreakdown,
             expanded: this.expanded,
         };
-        super.ngOnInit();
     }
     getFileTypeBadgeClass() {
         const type = this.fileType.toLowerCase();
@@ -9640,10 +9693,10 @@ class FileDownloadStepComponent extends BaseStepComponent {
     }
 }
 FileDownloadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Download Icon -->\n    <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n        File Download\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- File Details Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n            <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.fileType }}\n            </span>\n          </div>\n          <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            {{ config.fileSize }}\n          </div>\n        </div>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          Downloaded\n        </button>\n      </div>\n    </div>\n\n    <!-- Download Attachment Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n            Access the downloaded file\n          </div>\n        </div>\n        <button\n          *ngIf=\"!config.downloaded\"\n          (click)=\"onDownload()\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n      </div>\n    </div>\n\n    <!-- File Path Cards -->\n    <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n          <span>{{ config.filePath }}</span>\n        </div>\n        <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Path not available</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Download Icon -->\n    <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n        File Download\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- File Details Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n            <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.fileType }}\n            </span>\n          </div>\n          <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            {{ config.fileSize }}\n          </div>\n        </div>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          Downloaded\n        </button>\n      </div>\n    </div>\n\n    <!-- Download Attachment Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n            Access the downloaded file\n          </div>\n        </div>\n        <button\n          *ngIf=\"!config.downloaded\"\n          (click)=\"onDownload()\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n      </div>\n    </div>\n\n    <!-- File Path Cards -->\n    <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n          <span>{{ config.filePath }}</span>\n        </div>\n        <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Path not available</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-file-download-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Download Icon -->\n    <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n        File Download\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- File Details Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n            <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.fileType }}\n            </span>\n          </div>\n          <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            {{ config.fileSize }}\n          </div>\n        </div>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          Downloaded\n        </button>\n      </div>\n    </div>\n\n    <!-- Download Attachment Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n            Access the downloaded file\n          </div>\n        </div>\n        <button\n          *ngIf=\"!config.downloaded\"\n          (click)=\"onDownload()\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n      </div>\n    </div>\n\n    <!-- File Path Cards -->\n    <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n          <span>{{ config.filePath }}</span>\n        </div>\n        <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Path not available</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-file-download-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\">\n    \n    <!-- Status Icon -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" ><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div *ngIf=\"config.status.toLowerCase() === 'failed' || config.status.toLowerCase() === 'failure'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"config.status.toLowerCase() === 'skipped' || config.status.toLowerCase() === 'skip'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <!-- Download Icon -->\n    <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n      <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n        {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n      </span>\n      <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n        File Download\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n    <!-- File Details Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n            <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n              {{ config.fileType }}\n            </span>\n          </div>\n          <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            {{ config.fileSize }}\n          </div>\n        </div>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          Downloaded\n        </button>\n      </div>\n    </div>\n\n    <!-- Download Attachment Card -->\n    <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n        <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n            Access the downloaded file\n          </div>\n        </div>\n        <button\n          *ngIf=\"!config.downloaded\"\n          (click)=\"onDownload()\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n        <button\n          *ngIf=\"config.downloaded\"\n          disabled\n          class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n          Download\n        </button>\n      </div>\n    </div>\n\n    <!-- File Path Cards -->\n    <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n          <span>{{ config.filePath }}</span>\n        </div>\n        <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </button>\n      </div>\n    </div>\n\n    <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n          <span>Path not available</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Timing Breakdown -->\n  <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n      <span>Timing breakdown</span>\n    </div>\n    <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n      <div>\n        App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n      </div>\n      <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n      <div>\n        Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n      </div>\n    </span>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{