@cqa-lib/cqa-ui 1.1.93 → 1.1.95

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

@@ -7124,12 +7124,19 @@ class BasicStepComponent extends BaseStepComponent {
             this.showFailedStepDetails = false;
         }
     }
+    // Check if this step is currently loading nested children
+    isStepLoading() {
+        if (this.isStepLoadingHandler && this.config) {
+            return this.isStepLoadingHandler(this.config);
+        }
+        return this.isLoading || false;
+    }
 }
 BasicStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", nestedSteps: "nestedSteps", hasChild: "hasChild", 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", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [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 && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 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(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(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", nestedSteps: "nestedSteps", 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", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [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 && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 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(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(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], 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: BasicStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-basic-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)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [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 && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 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(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(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-basic-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)=\"toggleHeader()\"\n     style=\"border-bottom: '1px solid #F3F4F6'\"\n    >\n    \n    <!-- Status Icon -->\n    <!-- {{ getStatusIcon(config.status) }} -->\n<!-- Success -->\n    <div *ngIf=\"config.status.toLowerCase() === 'success'\" >\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"config.status.toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"config.status.toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0)\" [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 && (hasSubSteps || (config.nestedSteps && config.nestedSteps.length > 0))\">\n    <!-- Sub-steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9\">\n      <div\n        *ngFor=\"let subStep of subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <!-- <mat-icon\n          class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\"\n          [ngClass]=\"getStatusColorClass(subStep.status)\">\n          {{ getStatusIcon(subStep.status) }}\n        </mat-icon> -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-mt-1 cqa-pt-4 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(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(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n  </div>\n\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"subSteps\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -7170,6 +7177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], hasChild: [{
                 type: Input
+            }], isLoading: [{
+                type: Input
             }], onExpandHandler: [{
                 type: Input
             }], getConditionBranchesHandler: [{
@@ -7423,12 +7432,19 @@ class StepGroupComponent extends BaseStepComponent {
         const loopStep = step;
         return loopStep.showViewAllIterations;
     }
+    // Check if this step is currently loading nested children
+    isStepLoading() {
+        if (this.isStepLoadingHandler && this.config) {
+            return this.isStepLoadingHandler(this.config);
+        }
+        return this.isLoading || false;
+    }
 }
 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", 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", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\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    </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]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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      <ng-container *ngFor=\"let step of config.steps\">\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          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\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", "isLive"] }], 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", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\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    </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]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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        <!-- 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          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\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", "isLive"] }], 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 style=\"border-bottom: '1px solid #F3F4F6'\">\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>\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    </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]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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      <ng-container *ngFor=\"let step of config.steps\">\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          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div style=\"border-bottom: '1px solid #F3F4F6'\">\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>\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    </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]\">\n      {{ config.stepNumber }}. Step group: {{ config.groupName }}\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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        <!-- 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          [isUploadingBaseline]=\"isUploadingBaseline\"\n          [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n          [selectedIterationId]=\"step?.selectedIterationId || ''\"\n          [isLive]=\"isLive\">\n        </cqa-step-renderer>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -7451,6 +7467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], hasChild: [{
                 type: Input
+            }], isLoading: [{
+                type: Input
             }], onExpandHandler: [{
                 type: Input
             }], getConditionBranchesHandler: [{
@@ -8010,12 +8028,19 @@ class LoopStepComponent extends BaseStepComponent {
         const loopStep = step;
         return loopStep.showViewAllIterations;
     }
+    // Check if this step is currently loading nested children
+    isStepLoading() {
+        if (this.isStepLoadingHandler && this.config) {
+            return this.isStepLoadingHandler(this.config);
+        }
+        return this.isLoading || false;
+    }
 }
 LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", 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", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, 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)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"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=\"status.toLowerCase() === 'failure' || 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=\"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=\"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    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" 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      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations && config?.iterations?.length > 0)\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", hasChild: "hasChild", isLive: "isLive", 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", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", iterationData: "iterationData" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, 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)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"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=\"status.toLowerCase() === 'failure' || 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=\"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=\"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    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" 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      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations && config?.iterations?.length > 0)\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator when nested steps are being loaded -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-loop-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)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"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=\"status.toLowerCase() === 'failure' || 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=\"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=\"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    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" 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      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations && config?.iterations?.length > 0)\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-loop-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)=\"toggleHeader()\">\n    \n    <!-- Status Icon -->\n    <div>\n      <!-- Success -->\n      <svg *ngIf=\"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=\"status.toLowerCase() === 'failure' || 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=\"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=\"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    </div>\n\n    <!-- Loop Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/><path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F43EE\" 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      \n      <!-- Loop Type Badges -->\n      <span *ngFor=\"let badge of getLoopTypeBadges()\" \n        class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n        {{ badge }}\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\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    <!-- Iteration Selector -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-py-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\" *ngIf=\"!isLive || (isLive && config?.iterations && config?.iterations?.length > 0)\">\n      <label>Iteration</label>\n      <div class=\"cqa-relative cqa-w-full cqa-max-w-[156px]\">\n        <!-- Status indicator for selected iteration -->\n        <div *ngIf=\"selectedIteration\" class=\"cqa-absolute cqa-left-[10px] cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none cqa-z-10\">\n          <svg *ngIf=\"selectedIteration.status === 'success'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#00A63E\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'failed'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#EF4444\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'pending'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#9CA3AF\"/></svg>\n          <svg *ngIf=\"selectedIteration.status === 'running'\" width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"3\" cy=\"3\" r=\"3\" fill=\"#3B82F6\"/></svg>\n        </div>\n        <select\n          class=\"cqa-pl-[22px] cqa-pr-6 cqa-py-[5px] cqa-w-full cqa-border cqa-border-[#E5E5E5] cqa-rounded-md cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FAFAFA] cqa-text-black-100 cqa-appearance-none\"\n          [(ngModel)]=\"selectedIteration\"\n          (ngModelChange)=\"handleIterationChange($event)\"\n          [compareWith]=\"compareIteration\"\n          [disabled]=\"isLive && (status === 'running' || status === 'RUNNING')\">\n          <option *ngFor=\"let iteration of config.iterations\" [ngValue]=\"iteration\">\n            {{ getIterationLabel(iteration) }}\n          </option>\n        </select>\n        <!-- Dropdown arrow -->\n        <div class=\"cqa-absolute cqa-right-2 cqa-top-1/2 cqa-transform cqa--translate-y-1/2 cqa-pointer-events-none\">\n          <svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1 1L5 5L9 1\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </div>\n      </div>\n      <span class=\"cqa-ml-auto\">\n        Default: {{ config.defaultIteration === 'last' ? 'last iteration' : 'first iteration' }}\n      </span>\n    </div>\n\n    <!-- Selected Iteration Sub-steps -->\n    <div *ngIf=\"selectedIteration && selectedIteration.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-py-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div\n        *ngFor=\"let subStep of selectedIteration.subSteps\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        \n        <!-- Sub-step Status Icon -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n          <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>\n        </div>\n        <!-- Failure -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n          <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>\n        </div>\n        <!-- Pending -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n          <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>\n        </div>\n        <!-- Running - Show spinner -->\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n          <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n            <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n          </svg>\n        </div>\n\n\n        <!-- Sub-step Description -->\n        <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n          {{ subStep.description }}\n        </span>\n\n        <!-- Sub-step Duration -->\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator when nested steps are being loaded -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- View All Iterations Link -->\n    <div *ngIf=\"config.showViewAllIterations && !isLive\" class=\"cqa-flex cqa-justify-end cqa-px-3 cqa-py-[10px]\">\n      <a href=\"#\" (click)=\"onViewAllIterationsClick($event)\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-semibold cqa-flex cqa-items-center cqa-gap-1\">\n        View all iterations\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.63636 11.267L6.75852 10.3977L9.38778 7.76847H3V6.49858H9.38778L6.75852 3.87358L7.63636 3L11.7699 7.13352L7.63636 11.267Z\" fill=\"#3F43EE\"/></svg>\n      </a>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton &&showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [testStepResultId]=\"testStepResultId\"\n      [timingBreakdown]=\"timingBreakdown\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -8048,6 +8073,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLive: [{
                 type: Input
+            }], isLoading: [{
+                type: Input
             }], onExpandHandler: [{
                 type: Input
             }], getConditionBranchesHandler: [{
@@ -8270,6 +8297,13 @@ class ConditionStepComponent extends BaseStepComponent {
     getSubStepIndex(subSteps, subStep) {
         return subSteps.indexOf(subStep) + 1;
     }
+    // Check if this step is currently loading nested children
+    isStepLoading() {
+        if (this.isStepLoadingHandler && this.config) {
+            return this.isStepLoadingHandler(this.config);
+        }
+        return this.isLoading || false;
+    }
     onViewMoreFailedStepClick(expanded) {
         this.showFailedStepDetails = expanded;
     }
@@ -8364,10 +8398,10 @@ class ConditionStepComponent extends BaseStepComponent {
     }
 }
 ConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", nestedSteps: "nestedSteps", hasChild: "hasChild", ifChild: "ifChild", activeBranchStepId: "activeBranchStepId", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"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=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><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 *ngIf=\"status.toLowerCase() === 'pending'\"><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      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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 }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\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 *ngIf=\"hasExpandableContent\" [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    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <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>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <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>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <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>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isLoading: "isLoading", nestedSteps: "nestedSteps", hasChild: "hasChild", ifChild: "ifChild", activeBranchStepId: "activeBranchStepId", onExpandHandler: "onExpandHandler", getConditionBranchesHandler: "getConditionBranchesHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive" }, outputs: { onBranchClickEvent: "onBranchClickEvent", onExpand: "onExpand", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"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=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><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 *ngIf=\"status.toLowerCase() === 'pending'\"><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      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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 }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\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 *ngIf=\"hasExpandableContent\" [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    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <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>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <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>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <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>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\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", "isLive"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"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=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><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 *ngIf=\"status.toLowerCase() === 'pending'\"><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      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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 }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\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 *ngIf=\"hasExpandableContent\" [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    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <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>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <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>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <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>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"config.nestedSteps && config.nestedSteps.length > 0\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <ng-container *ngFor=\"let step of config.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
+            args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n  <div class=\"cqa-p-2\">\n    <!-- Header -->\n    <div\n      class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n      (click)=\"toggleHeader()\">\n      \n      <!-- Status Icon -->\n      <div *ngIf=\"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=\"status.toLowerCase() === 'failure' || status.toLowerCase() === 'failed'\"><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 *ngIf=\"status.toLowerCase() === 'pending'\"><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      <div *ngIf=\"status.toLowerCase() === 'running'\"><svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/><path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/></svg></div>\n\n      <!-- Condition Icon -->\n      <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" 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 }}. Condition: <span [innerHTML]=\"config.conditionText\"></span>\n        </span>\n        \n        <!-- Condition Badge -->\n        <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n          CONDITION\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 *ngIf=\"hasExpandableContent\" [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    <!-- Branch Buttons - Read-only, showing executed status only -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-flex-wrap\">\n      <div\n        *ngFor=\"let branch of config.branches\"\n        class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\"\n        [ngClass]=\"getBranchClass(branch)\" (click)=\"onBranchClick(branch)\">\n        <!-- Checkmark icon for executed branch -->\n        <div *ngIf=\"branch.executed\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <span>{{ branch.type.toUpperCase() }}</span>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLoading\">\n\n    <!-- Executed Branch Sub-steps -->\n    <div *ngFor=\"let branch of config.branches\">\n      <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n        <div\n          *ngFor=\"let subStep of branch.subSteps\"\n          class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n          \n          <!-- Sub-step Status Icon -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\" >\n            <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>\n          </div>\n          <!-- Failure -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.toLowerCase() === 'failed'\">\n            <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>\n          </div>\n          <!-- Pending -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'pending'\">\n            <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>\n          </div>\n          <!-- Running - Show spinner -->\n          <div *ngIf=\"subStep?.status?.toLowerCase() === 'running'\">\n            <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n              <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n            </svg>\n          </div>\n  \n\n          <!-- Sub-step Description -->\n          <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">\n            {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. <span [innerHTML]=\"subStep.description\"></span>\n          </span>\n\n          <!-- Sub-step Duration -->\n          <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n            {{ formatDuration(subStep.duration) }}\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Unexecuted Branch Message -->\n    <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n      </p>\n    </div>\n\n    <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n      <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n        {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n      </p>\n    </div>\n\n    <!-- Nested Steps -->\n    <div *ngIf=\"hasChild || (config.nestedSteps && config.nestedSteps.length > 0)\" class=\"cqa-ml-9 cqa-pb-1\" style=\"border-bottom: '1px solid #F3F4F6'\">\n      <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373] cqa-py-[2px] cqa-px-3\">Nested steps</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-pl-[18px]\" style=\"border-left: 2px solid #C5C7FA;\">\n        <!-- Loading indicator for nested steps -->\n        <div *ngIf=\"hasChild && (!config.nestedSteps || config.nestedSteps.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.nestedSteps\">\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            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\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            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\">\n          </cqa-step-renderer>\n        </ng-container>\n      </div>\n    </div>\n\n      <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\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\n  <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n  <div *ngIf=\"showViewMoreButton && !isLoading\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-view-more-failed-step-button\n      [timingBreakdown]=\"timingBreakdown\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [isExpanded]=\"showFailedStepDetails\"\n      (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n    </cqa-view-more-failed-step-button>\n  </div>\n\n  <!-- Updated Failed Step Component - shown when button is clicked -->\n  <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n    <cqa-updated-failed-step\n      [timingBreakdown]=\"timingBreakdown\"\n      [testStepResultId]=\"testStepResultId\"\n      [expanded]=\"true\"\n      [subSteps]=\"getSubStepsForFailedStep()\"\n      [failureDetails]=\"failureDetails\"\n      [reasoning]=\"reasoning\"\n      [confidence]=\"confidence\"\n      [isUploadingBaseline]=\"isUploadingBaseline\"\n      [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n      [isLive]=\"isLive\"\n      (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n      (uploadBaseline)=\"onUploadBaseline($event)\"\n      (analyze)=\"onAnalyze()\"\n      (viewFullLogs)=\"onViewFullLogs()\">\n    </cqa-updated-failed-step>\n  </div>\n</div>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -11331,6 +11365,506 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class DbQueryExecutionItemComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.isExpanded = false;
+        this.responseTableColumns = [];
+        this.emptyStateConfig = {
+            title: 'No Data',
+            description: 'No data returned from this query.',
+            imageUrl: EMPTY_STATE_IMAGES.DASHBOARD,
+            actions: [],
+        };
+        this.pageIndex = 0;
+        this.pageSize = 10;
+    }
+    ngOnInit() {
+        this.setupResponseTableColumns();
+    }
+    toggle() {
+        this.isExpanded = !this.isExpanded;
+        if (this.isExpanded) {
+            this.setupResponseTableColumns();
+        }
+        this.cdr.markForCheck();
+        this.cdr.detectChanges();
+    }
+    copyQuery() {
+        var _a;
+        if ((_a = this.queryResult) === null || _a === void 0 ? void 0 : _a.query) {
+            navigator.clipboard.writeText(this.queryResult.query).then(() => {
+            });
+        }
+    }
+    copyResponse() {
+        const response = JSON.stringify(this.queryResult.data, null, 2);
+        navigator.clipboard.writeText(response).then(() => {
+        });
+    }
+    formatDuration(seconds) {
+        if (seconds < 1) {
+            return `${(seconds * 1000).toFixed(0)}ms`;
+        }
+        if (seconds < 60 && !Number.isInteger(seconds)) {
+            return `${seconds.toFixed(1)}s`;
+        }
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = Math.floor(seconds % 60);
+        const parts = [];
+        if (hours > 0) {
+            parts.push(`${hours}h`);
+        }
+        if (minutes > 0) {
+            parts.push(`${minutes}m`);
+        }
+        if (secs > 0 || (hours === 0 && minutes === 0)) {
+            parts.push(`${secs}s`);
+        }
+        return parts.join(' ');
+    }
+    get isEmptyResponse() {
+        var _a, _b;
+        return ((_b = (_a = this.queryResult) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    }
+    setupResponseTableColumns() {
+        var _a;
+        const data = ((_a = this.queryResult) === null || _a === void 0 ? void 0 : _a.data) || [];
+        if (data.length === 0) {
+            this.responseTableColumns = [];
+            return;
+        }
+        // Get all unique keys from the data objects
+        const firstItem = data[0];
+        if (typeof firstItem !== 'object' || firstItem === null) {
+            this.responseTableColumns = [];
+            return;
+        }
+        const keys = Object.keys(firstItem);
+        this.responseTableColumns = keys.map(key => ({
+            fieldId: key,
+            fieldName: key,
+            fieldValue: key,
+            isShow: true,
+            weight: 1,
+            render: (row) => {
+                var _a;
+                const value = (_a = row[key]) !== null && _a !== void 0 ? _a : '-';
+                const displayValue = value === null || value === undefined ? '' : String(value);
+                return `
+          <div class="cqa-text-[12px] cqa-text-[#0F172B]">
+            ${this.escapeHtml(displayValue)}
+          </div>
+        `;
+            }
+        }));
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    onPageChange(event) {
+        this.pageIndex = event.pageIndex;
+        this.pageSize = event.pageSize;
+    }
+}
+DbQueryExecutionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158]\">Query {{ queryNumber }}</span>\n      \n      <!-- Status Badge -->\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'passed'\"\n        label=\"Passed\"\n        backgroundColor=\"#DCFCE7\"\n        textColor=\"#22C55E\"\n        inlineStyles=\"border-radius: 50px;\"\n        icon=\"check_circle\"\n        size=\"small\">\n      </cqa-badge>\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'failed'\"\n        label=\"Failed\"\n        backgroundColor=\"#FEE2E2\"\n        textColor=\"#DC2626\"\n        icon=\"error\"\n        inlineStyles=\"border-radius: 50px;\"\n        size=\"small\">\n      </cqa-badge>\n      \n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E]\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n        {{ formatDuration(queryResult?.duration) }}\n        <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n        <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n      </span>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button\n        (click)=\"copyQuery(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\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        Copy Query\n      </button>\n      <button\n        (click)=\"copyResponse(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\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        Copy Response\n      </button>\n      \n      <!-- Chevron Icon -->\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        class=\"cqa-transition-transform cqa-ml-2\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQuery()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponse()\"\n          class=\"cqa-cursor-pointer cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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\"/>\n          </svg>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-db-query-execution-item', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158]\">Query {{ queryNumber }}</span>\n      \n      <!-- Status Badge -->\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'passed'\"\n        label=\"Passed\"\n        backgroundColor=\"#DCFCE7\"\n        textColor=\"#22C55E\"\n        inlineStyles=\"border-radius: 50px;\"\n        icon=\"check_circle\"\n        size=\"small\">\n      </cqa-badge>\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'failed'\"\n        label=\"Failed\"\n        backgroundColor=\"#FEE2E2\"\n        textColor=\"#DC2626\"\n        icon=\"error\"\n        inlineStyles=\"border-radius: 50px;\"\n        size=\"small\">\n      </cqa-badge>\n      \n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E]\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n        {{ formatDuration(queryResult?.duration) }}\n        <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n        <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n      </span>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button\n        (click)=\"copyQuery(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\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        Copy Query\n      </button>\n      <button\n        (click)=\"copyResponse(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\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        Copy Response\n      </button>\n      \n      <!-- Chevron Icon -->\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        class=\"cqa-transition-transform cqa-ml-2\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQuery()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponse()\"\n          class=\"cqa-cursor-pointer cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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\"/>\n          </svg>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { queryNumber: [{
+                type: Input
+            }], queryKey: [{
+                type: Input
+            }], queryResult: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], variableName: [{
+                type: Input
+            }] } });
+
+class DbVerificationStepComponent extends BaseStepComponent {
+    constructor() {
+        super(...arguments);
+        this.isUploadingBaseline = {};
+        this.isMakingCurrentBaseline = {};
+        this.isLive = false;
+        this.showFailedStepDetails = false;
+        this.makeCurrentBaseline = new EventEmitter();
+        this.uploadBaseline = new EventEmitter();
+        this.analyze = new EventEmitter();
+        this.viewFullLogs = new EventEmitter();
+        this.selfHealAction = new EventEmitter();
+        this.verificationFilter = 'all';
+        this.filterSegments = [
+            { label: 'All', value: 'all' },
+            { label: 'Failed only', value: 'failed' },
+            { label: 'Passed only', value: 'passed' },
+        ];
+        this.verificationTableColumns = [];
+        this.emptyStateConfig = {
+            title: 'No Assertions',
+            description: 'No verification assertions found for this database query.',
+            imageUrl: EMPTY_STATE_IMAGES.DASHBOARD,
+            actions: [],
+        };
+        this.pageIndex = 0;
+        this.pageSize = 10;
+        // Cached query results to avoid recreating components on every change detection
+        this.cachedQueryResults = [];
+    }
+    ngOnInit() {
+        this.updateConfig();
+        this.setupTableColumns();
+        this.updateCachedQueryResults();
+        super.ngOnInit();
+        if (this.expanded !== undefined) {
+            this.isExpanded = this.expanded;
+        }
+    }
+    getStatus() {
+        var _a;
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.status) || this.status;
+    }
+    ngOnChanges(changes) {
+        // Update config when inputs change
+        if (changes['dbTestResult'] || changes['dbConfig'] || changes['expanded'] || changes['status'] || changes['duration']) {
+            this.updateConfig();
+            if (changes['dbTestResult']) {
+                this.setupTableColumns();
+                this.updateCachedQueryResults();
+            }
+        }
+        // Update expanded state if changed
+        if (changes['expanded'] && this.expanded !== undefined) {
+            this.isExpanded = this.expanded;
+        }
+    }
+    updateConfig() {
+        this.config = {
+            id: this.id,
+            testStepResultId: this.testStepResultId,
+            stepNumber: this.stepNumber,
+            title: this.title,
+            status: this.status,
+            duration: this.duration,
+            type: 'db-verification',
+            dbTestResult: this.dbTestResult,
+            dbConfig: this.dbConfig,
+            timingBreakdown: this.timingBreakdown,
+            expanded: this.expanded,
+        };
+    }
+    toggleHeader() {
+        this.toggle();
+        if (!this.isExpanded) {
+            this.showFailedStepDetails = false;
+        }
+    }
+    updateCachedQueryResults() {
+        var _a;
+        if (!((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.results)) {
+            this.cachedQueryResults = [];
+            return;
+        }
+        this.cachedQueryResults = Object.entries(this.dbTestResult.results).map(([key, result]) => ({ key, result }));
+    }
+    getQueryResults() {
+        return this.cachedQueryResults;
+    }
+    trackByQueryKey(index, item) {
+        return item.key;
+    }
+    getTotalRowsReturned() {
+        var _a;
+        if (!((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.results))
+            return 0;
+        return Object.values(this.dbTestResult.results).reduce((total, result) => {
+            return total + (Array.isArray(result.data) ? result.data.length : 0);
+        }, 0);
+    }
+    getQueryStatus(queryKey) {
+        var _a;
+        if (!((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.assertionResults))
+            return 'passed';
+        const queryAssertions = this.dbTestResult.assertionResults.filter(assertion => assertion.variableName === queryKey);
+        if (queryAssertions.length === 0)
+            return 'passed';
+        return queryAssertions.every(a => a.passed) ? 'passed' : 'failed';
+    }
+    getFilteredAssertions() {
+        var _a;
+        if (!((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.assertionResults))
+            return [];
+        switch (this.verificationFilter) {
+            case 'failed':
+                return this.dbTestResult.assertionResults.filter(a => !a.passed);
+            case 'passed':
+                return this.dbTestResult.assertionResults.filter(a => a.passed);
+            default:
+                return this.dbTestResult.assertionResults;
+        }
+    }
+    setVerificationFilter(filter) {
+        this.verificationFilter = filter;
+    }
+    onFilterChange(value) {
+        this.verificationFilter = value;
+    }
+    setupTableColumns() {
+        this.verificationTableColumns = [
+            {
+                fieldId: 'jsonPath',
+                fieldName: 'JSON path',
+                fieldValue: 'jsonPath',
+                isShow: true,
+                weight: 2,
+                render: (row) => {
+                    return `
+            <div class="cqa-text-[12px] cqa-text-[#4B5563] cqa-font-mono">
+              ${this.escapeHtml(row.jsonPath)}
+            </div>
+          `;
+                }
+            },
+            {
+                fieldId: 'verificationType',
+                fieldName: 'Verification type',
+                fieldValue: 'verificationType',
+                isShow: true,
+                weight: 1.5,
+                render: (row) => {
+                    return `
+            <div class="cqa-text-[12px] cqa-text-[#4B5563]">
+              ${this.escapeHtml(this.formatVerificationType(row.verificationType))}
+            </div>
+          `;
+                }
+            },
+            {
+                fieldId: 'actualValue',
+                fieldName: 'Actual value',
+                fieldValue: 'actualValue',
+                isShow: true,
+                weight: 1.5,
+                render: (row) => {
+                    const value = typeof row.actualValue === 'object' ? JSON.stringify(row.actualValue) : String(row.actualValue);
+                    return `
+            <div class="cqa-text-[12px] cqa-text-[#4B5563]">
+              ${this.escapeHtml(value)}
+            </div>
+          `;
+                }
+            },
+            {
+                fieldId: 'expectedValue',
+                fieldName: 'Expected value',
+                fieldValue: 'expectedValue',
+                isShow: true,
+                weight: 1.5,
+                render: (row) => {
+                    const value = typeof row.expectedValue === 'object' ? JSON.stringify(row.expectedValue) : String(row.expectedValue);
+                    return `
+            <div class="cqa-text-[12px] cqa-text-[#4B5563]">
+              ${this.escapeHtml(value)}
+            </div>
+          `;
+                }
+            },
+            {
+                fieldId: 'result',
+                fieldName: 'Result',
+                fieldValue: 'passed',
+                isShow: true,
+                weight: 1,
+                render: (row) => {
+                    if (row.passed) {
+                        return `
+              <span class="cqa-inline-block cqa-text-center cqa-w-11 cqa-px-2 cqa-py-1 cqa-rounded-[5px] cqa-text-[12px] cqa-bg-[#2E7D32] cqa-text-[#FFFFFF]">
+                Pass
+              </span>
+            `;
+                    }
+                    else {
+                        return `
+              <span class="cqa-inline-block cqa-text-center cqa-w-11 cqa-px-2 cqa-py-1 cqa-rounded-[5px] cqa-text-[12px] cqa-bg-[#DC2626] cqa-text-[#FFFFFF]">
+                Fail
+              </span>
+            `;
+                    }
+                }
+            },
+        ];
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    getTableData() {
+        return this.getFilteredAssertions();
+    }
+    get isEmptyTable() {
+        return this.getTableData().length === 0;
+    }
+    onPageChange(event) {
+        this.pageIndex = event.pageIndex;
+        this.pageSize = event.pageSize;
+    }
+    copyQuery(query) {
+        navigator.clipboard.writeText(query).then(() => {
+        });
+    }
+    copyResponse(queryResult) {
+        const response = JSON.stringify(queryResult.data, null, 2);
+        navigator.clipboard.writeText(response).then(() => {
+        });
+    }
+    copyEnvironment() {
+        var _a;
+        if ((_a = this.dbConfig) === null || _a === void 0 ? void 0 : _a.name) {
+            navigator.clipboard.writeText(this.dbConfig.name).then(() => {
+            });
+        }
+    }
+    getFailureMessage() {
+        var _a, _b;
+        if (!this.dbTestResult || ((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.allAssertionsPassed))
+            return null;
+        const failedAssertion = (_b = this.dbTestResult.assertionResults) === null || _b === void 0 ? void 0 : _b.find(a => !a.passed);
+        if (failedAssertion) {
+            const queryKey = failedAssertion.variableName;
+            const queryIndex = this.getQueryResults().findIndex(q => q.key === queryKey) + 1;
+            return `Assertion failed in Query ${queryIndex}. Expected value "${failedAssertion.expectedValue}" but got "${failedAssertion.actualValue}".`;
+        }
+        return null;
+    }
+    formatVerificationType(type) {
+        const typeMap = {
+            'equals': 'Equals',
+            'not_equals': 'Not Equals',
+            'contains': 'Contains',
+            'not_contains': 'Not Contains',
+            'greater_than': 'Greater Than',
+            'less_than': 'Less Than',
+            'greater_than_or_equals': 'Greater Than Or Equals',
+            'less_than_or_equals': 'Less Than Or Equals',
+            'exists': 'Exists',
+            'not_exists': 'Not Exists',
+        };
+        return typeMap[type] || type;
+    }
+    onViewMoreFailedStepClick(expanded) {
+        this.showFailedStepDetails = expanded;
+    }
+    getSubStepsForFailedStep() {
+        var _a, _b;
+        // Convert DB verification query results to SubStep[] for the failed step component
+        const subSteps = [];
+        if ((_a = this.dbTestResult) === null || _a === void 0 ? void 0 : _a.results) {
+            Object.entries(this.dbTestResult.results).forEach(([key, result], index) => {
+                subSteps.push({
+                    id: `query-${index}`,
+                    description: `Query ${index + 1}: ${key}`,
+                    status: this.getQueryStatus(key) === 'passed' ? 'success' : 'failed',
+                    duration: result.duration || 0,
+                });
+            });
+        }
+        // Add assertion results as sub-steps
+        if ((_b = this.dbTestResult) === null || _b === void 0 ? void 0 : _b.assertionResults) {
+            this.dbTestResult.assertionResults.forEach((assertion, index) => {
+                subSteps.push({
+                    id: `assertion-${index}`,
+                    description: `Assertion: ${assertion.jsonPath} - ${this.formatVerificationType(assertion.verificationType)}`,
+                    status: assertion.passed ? 'success' : 'failed',
+                    duration: 0,
+                });
+            });
+        }
+        return subSteps;
+    }
+    get showViewMoreButton() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return this.isExpanded && Boolean(this.failureDetails) &&
+            ((Boolean(((_a = this.failureDetails) === null || _a === void 0 ? void 0 : _a.expected) || ((_b = this.failureDetails) === null || _b === void 0 ? void 0 : _b.actual))) ||
+                (Boolean(((_d = (_c = this.failureDetails) === null || _c === void 0 ? void 0 : _c.screenshots) === null || _d === void 0 ? void 0 : _d.current) || ((_f = (_e = this.failureDetails) === null || _e === void 0 ? void 0 : _e.screenshots) === null || _f === void 0 ? void 0 : _f.baseline) || ((_h = (_g = this.failureDetails) === null || _g === void 0 ? void 0 : _g.screenshots) === null || _h === void 0 ? void 0 : _h.difference))
+                    || Boolean((_k = (_j = this.failureDetails) === null || _j === void 0 ? void 0 : _j.logs) === null || _k === void 0 ? void 0 : _k.length)) ||
+                (Boolean(((_l = this.failureDetails) === null || _l === void 0 ? void 0 : _l.aiFixApplied) && (((_m = this.failureDetails) === null || _m === void 0 ? void 0 : _m.aiFixMessage) || this.confidence || ((_o = this.reasoning) === null || _o === void 0 ? void 0 : _o.length)))));
+    }
+    onMakeCurrentBaseline(event) {
+        this.makeCurrentBaseline.emit(event);
+    }
+    onUploadBaseline(event) {
+        this.uploadBaseline.emit(event);
+    }
+    onAnalyze() {
+        this.analyze.emit();
+    }
+    onViewFullLogs() {
+        this.viewFullLogs.emit();
+    }
+    onSelfHealAction(event) {
+        this.selfHealAction.emit(event);
+    }
+}
+DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", isLive: "isLive" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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)=\"toggleHeader()\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>    \n      \n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(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-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer\">\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            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\n          [showSearchBar]=\"false\"\n          [showFilterButton]=\"false\"\n          [showSettingsButton]=\"false\"\n          [showAutoRefreshButton]=\"false\"\n          [showOtherButton]=\"false\"\n          [showFilterPanel]=\"false\"\n          [serverSidePagination]=\"false\"\n          (pageChange)=\"onPageChange($event)\">\n        </cqa-table-template>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 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-[#374151]\">{{ formatDuration(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-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], 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: DbVerificationStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-db-verification-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)=\"toggleHeader()\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <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>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <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>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <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>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </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]\">\n      {{ stepNumber }}. <span [innerHTML]=\"title\"></span>    \n      \n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(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-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer\">\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            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\n          [showSearchBar]=\"false\"\n          [showFilterButton]=\"false\"\n          [showSettingsButton]=\"false\"\n          [showAutoRefreshButton]=\"false\"\n          [showOtherButton]=\"false\"\n          [showFilterPanel]=\"false\"\n          [serverSidePagination]=\"false\"\n          (pageChange)=\"onPageChange($event)\">\n        </cqa-table-template>\n      </div>\n    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 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-[#374151]\">{{ formatDuration(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-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], testStepResultId: [{
+                type: Input
+            }], stepNumber: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }], duration: [{
+                type: Input
+            }], timingBreakdown: [{
+                type: Input
+            }], expanded: [{
+                type: Input
+            }], dbTestResult: [{
+                type: Input
+            }], dbConfig: [{
+                type: Input
+            }], failureDetails: [{
+                type: Input
+            }], reasoning: [{
+                type: Input
+            }], confidence: [{
+                type: Input
+            }], isUploadingBaseline: [{
+                type: Input
+            }], isMakingCurrentBaseline: [{
+                type: Input
+            }], selfHealAnalysis: [{
+                type: Input
+            }], getSelfHealLoadingStatesHandler: [{
+                type: Input
+            }], isLive: [{
+                type: Input
+            }], makeCurrentBaseline: [{
+                type: Output
+            }], uploadBaseline: [{
+                type: Output
+            }], analyze: [{
+                type: Output
+            }], viewFullLogs: [{
+                type: Output
+            }], selfHealAction: [{
+                type: Output
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -11403,7 +11937,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ExecutionResultModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
-        StepStatusCardComponent], imports: [CommonModule,
+        StepStatusCardComponent,
+        DbVerificationStepComponent,
+        DbQueryExecutionItemComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatIconModule,
@@ -11485,7 +12021,9 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ExecutionResultModalComponent,
         ProgressIndicatorComponent,
         StepProgressCardComponent,
-        StepStatusCardComponent] });
+        StepStatusCardComponent,
+        DbVerificationStepComponent,
+        DbQueryExecutionItemComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
         {
@@ -11502,6 +12040,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
                 ['file-download', FileDownloadStepComponent],
                 ['document-verification', DocumentVerificationStepComponent],
                 ['live-execution', LiveExecutionStepComponent],
+                ['db-verification', DbVerificationStepComponent],
             ])
         }
     ], imports: [[
@@ -11594,7 +12133,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ExecutionResultModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
-                        StepStatusCardComponent
+                        StepStatusCardComponent,
+                        DbVerificationStepComponent,
+                        DbQueryExecutionItemComponent
                     ],
                     imports: [
                         CommonModule,
@@ -11682,7 +12223,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ExecutionResultModalComponent,
                         ProgressIndicatorComponent,
                         StepProgressCardComponent,
-                        StepStatusCardComponent
+                        StepStatusCardComponent,
+                        DbVerificationStepComponent,
+                        DbQueryExecutionItemComponent
                     ],
                     providers: [
                         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
@@ -11700,6 +12243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                                 ['file-download', FileDownloadStepComponent],
                                 ['document-verification', DocumentVerificationStepComponent],
                                 ['live-execution', LiveExecutionStepComponent],
+                                ['db-verification', DbVerificationStepComponent],
                             ])
                         }
                     ]
@@ -11842,5 +12386,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
+export { AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map