@cqa-lib/cqa-ui 1.1.21 → 1.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/execution-screen/basic-step/basic-step.component.mjs +3 -3
- package/esm2020/lib/execution-screen/execution-step.models.mjs +1 -1
- package/esm2020/lib/execution-screen/failed-step/failed-step.component.mjs +1 -1
- package/esm2020/lib/execution-screen/loop-step/loop-step.component.mjs +10 -4
- package/esm2020/lib/execution-screen/updated-failed-step/updated-failed-step.component.mjs +64 -0
- package/esm2020/lib/execution-screen/view-more-failed-step-button/view-more-failed-step-button.component.mjs +27 -0
- package/esm2020/lib/execution-screen/visual-comparison/visual-comparison.component.mjs +9 -3
- package/esm2020/lib/ui-kit.module.mjs +13 -1
- package/esm2020/lib/visual-difference-modal/visual-difference-modal.component.mjs +11 -2
- package/esm2020/public-api.mjs +3 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +236 -122
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +236 -122
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/execution-step.models.d.ts +2 -0
- package/lib/execution-screen/loop-step/loop-step.component.d.ts +3 -2
- package/lib/execution-screen/updated-failed-step/updated-failed-step.component.d.ts +24 -0
- package/lib/execution-screen/view-more-failed-step-button/view-more-failed-step-button.component.d.ts +13 -0
- package/lib/execution-screen/visual-comparison/visual-comparison.component.d.ts +3 -1
- package/lib/ui-kit.module.d.ts +38 -36
- package/lib/visual-difference-modal/visual-difference-modal.component.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
- package/styles.css +1 -1
|
@@ -5634,10 +5634,10 @@ class BasicStepComponent extends BaseStepComponent {
|
|
|
5634
5634
|
}
|
|
5635
5635
|
}
|
|
5636
5636
|
BasicStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5637
|
-
BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <!-- {{ getStatusIcon(config.status) }} -->\n <div><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\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-[9px] cqa-leading-[11px] 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 && hasSubSteps\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <!-- 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 (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</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5637
|
+
BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <!-- {{ getStatusIcon(config.status) }} -->\n <div><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\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <!-- 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 (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</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5638
5638
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, decorators: [{
|
|
5639
5639
|
type: Component,
|
|
5640
|
-
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)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <!-- {{ getStatusIcon(config.status) }} -->\n <div><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\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-[9px] cqa-leading-[11px] 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 && hasSubSteps\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <!-- 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 (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</div>\n", styles: [] }]
|
|
5640
|
+
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)=\"toggle()\"\n style=\"border-bottom: '1px solid #F3F4F6'\"\n >\n \n <!-- Status Icon -->\n <!-- {{ getStatusIcon(config.status) }} -->\n <div><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\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(duration) }}\n </span>\n <svg *ngIf=\"hasSubSteps\" [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\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <!-- 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 (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</div>\n", styles: [] }]
|
|
5641
5641
|
}], propDecorators: { id: [{
|
|
5642
5642
|
type: Input
|
|
5643
5643
|
}], stepNumber: [{
|
|
@@ -5788,6 +5788,8 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
5788
5788
|
this.onExpand = new EventEmitter();
|
|
5789
5789
|
// Output event for when "View all iterations" is clicked
|
|
5790
5790
|
this.onViewAllIterations = new EventEmitter();
|
|
5791
|
+
// Output event for when iteration selection changes
|
|
5792
|
+
this.onIterationChange = new EventEmitter();
|
|
5791
5793
|
this.selectedIteration = null;
|
|
5792
5794
|
}
|
|
5793
5795
|
ngOnInit() {
|
|
@@ -5830,8 +5832,10 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
5830
5832
|
this.selectedIteration = this.iterations[0];
|
|
5831
5833
|
}
|
|
5832
5834
|
}
|
|
5833
|
-
|
|
5835
|
+
handleIterationChange(iterationId) {
|
|
5834
5836
|
this.selectedIteration = this.iterations.find(iter => iter.id === iterationId) || null;
|
|
5837
|
+
// Emit the event with the iteration ID
|
|
5838
|
+
this.onIterationChange.emit(iterationId);
|
|
5835
5839
|
}
|
|
5836
5840
|
getLoopTypeBadges() {
|
|
5837
5841
|
const badges = ['LOOP'];
|
|
@@ -5852,10 +5856,10 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
5852
5856
|
}
|
|
5853
5857
|
}
|
|
5854
5858
|
LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5855
|
-
LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations" }, outputs: { onExpand: "onExpand", onViewAllIterations: "onViewAllIterations" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 === '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 === '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 === '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 }}. {{ config.title }}\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\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]\">\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 [value]=\"selectedIteration?.id\"\n (change)=\"onIterationChange($any($event.target).value)\">\n <option *ngFor=\"let iteration of config.iterations\" [value]=\"iteration.id\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <cqa-step-renderer *ngFor=\"let step of config.nestedSteps\" [step]=\"step\"></cqa-step-renderer>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" 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 <!-- 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</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
5859
|
+
LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations" }, outputs: { onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 === '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 === '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 === '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 }}. {{ config.title }}\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\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]\">\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 [value]=\"selectedIteration?.id\"\n (change)=\"handleIterationChange($any($event.target).value)\">\n <option *ngFor=\"let iteration of config.iterations\" [value]=\"iteration.id\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <cqa-step-renderer *ngFor=\"let step of config.nestedSteps\" [step]=\"step\"></cqa-step-renderer>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" 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 <!-- 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</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
5856
5860
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
|
|
5857
5861
|
type: Component,
|
|
5858
|
-
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)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 === '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 === '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 === '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 }}. {{ config.title }}\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\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]\">\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 [value]=\"selectedIteration?.id\"\n (change)=\"onIterationChange($any($event.target).value)\">\n <option *ngFor=\"let iteration of config.iterations\" [value]=\"iteration.id\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <cqa-step-renderer *ngFor=\"let step of config.nestedSteps\" [step]=\"step\"></cqa-step-renderer>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" 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 <!-- 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</div>\n", styles: [] }]
|
|
5862
|
+
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)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 === '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 === '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 === '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 }}. {{ config.title }}\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-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\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]\">\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 [value]=\"selectedIteration?.id\"\n (change)=\"handleIterationChange($any($event.target).value)\">\n <option *ngFor=\"let iteration of config.iterations\" [value]=\"iteration.id\">\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><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=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 6L5.5 7L7.5 5\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></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 <cqa-step-renderer *ngFor=\"let step of config.nestedSteps\" [step]=\"step\"></cqa-step-renderer>\n </div>\n </div>\n\n <!-- View All Iterations Link -->\n <div *ngIf=\"config.showViewAllIterations\" 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 <!-- 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</div>\n", styles: [] }]
|
|
5859
5863
|
}], propDecorators: { id: [{
|
|
5860
5864
|
type: Input
|
|
5861
5865
|
}], stepNumber: [{
|
|
@@ -5886,6 +5890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5886
5890
|
type: Output
|
|
5887
5891
|
}], onViewAllIterations: [{
|
|
5888
5892
|
type: Output
|
|
5893
|
+
}], onIterationChange: [{
|
|
5894
|
+
type: Output
|
|
5889
5895
|
}] } });
|
|
5890
5896
|
|
|
5891
5897
|
class ConditionStepComponent extends BaseStepComponent {
|
|
@@ -5947,6 +5953,7 @@ class VisualComparisonComponent {
|
|
|
5947
5953
|
this.uploadBaseline = new EventEmitter();
|
|
5948
5954
|
this.analyze = new EventEmitter();
|
|
5949
5955
|
this.viewFullLogs = new EventEmitter();
|
|
5956
|
+
this.imageClick = new EventEmitter();
|
|
5950
5957
|
}
|
|
5951
5958
|
onMakeBaseline() {
|
|
5952
5959
|
console.log('Make current baseline clicked');
|
|
@@ -5974,12 +5981,15 @@ class VisualComparisonComponent {
|
|
|
5974
5981
|
return 'cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]';
|
|
5975
5982
|
}
|
|
5976
5983
|
}
|
|
5984
|
+
onImageClick(image) {
|
|
5985
|
+
this.imageClick.emit(image);
|
|
5986
|
+
}
|
|
5977
5987
|
}
|
|
5978
5988
|
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5979
|
-
VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink" }, outputs: { makeBaseline: "makeBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-4 cqa-w-full\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n Make current baseline\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n Upload baseline\n </button>\n <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button>\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-4\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]\">\n No logs available\n </div>\n </div>\n\n <a \n *ngIf=\"showFullLogsLink\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a>\n </div>\n</div>\n\n", 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"] }] });
|
|
5989
|
+
VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink" }, outputs: { makeBaseline: "makeBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", imageClick: "imageClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-4 cqa-w-full\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n Make current baseline\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n Upload baseline\n </button>\n <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button>\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-4\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]\">\n No logs available\n </div>\n </div>\n\n <a \n *ngIf=\"showFullLogsLink\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a>\n </div>\n</div>\n\n", 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"] }] });
|
|
5980
5990
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
|
|
5981
5991
|
type: Component,
|
|
5982
|
-
args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-4 cqa-w-full\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n Make current baseline\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n Upload baseline\n </button>\n <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button>\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-4\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]\">\n No logs available\n </div>\n </div>\n\n <a \n *ngIf=\"showFullLogsLink\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a>\n </div>\n</div>\n\n", styles: [] }]
|
|
5992
|
+
args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-4 cqa-w-full\">\n <!-- Left Panel: Screenshots & Visual Comparison -->\n <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Screenshots & Visual Comparison\n </div>\n \n <!-- Screenshot Comparison Grid -->\n <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n <!-- Baseline -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('baseline')\">\n <div *ngIf=\"!screenshots?.baseline\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.baseline\" [src]=\"screenshots.baseline\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Current -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('current')\">\n <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n\n <!-- Difference -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-min-h-[112px]\" (click)=\"onImageClick('difference')\">\n <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n </div>\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n <button \n (click)=\"onMakeBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n Make current baseline\n </button>\n <button \n (click)=\"onUploadBaseline()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n Upload baseline\n </button>\n <button \n (click)=\"onAnalyze()\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n Analyze\n </button>\n </div>\n </div>\n\n <!-- Right Panel: Logs -->\n <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Logs\n </div>\n \n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-4\">\n <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n \n <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" [ngClass]=\"getLogClass(log.level)\">\n {{ log.message }}\n </div>\n \n <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]\">\n No logs available\n </div>\n </div>\n\n <a \n *ngIf=\"showFullLogsLink\"\n (click)=\"onViewFullLogs()\"\n class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline\">\n View full logs Iterations\n <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n </a>\n </div>\n</div>\n\n", styles: [] }]
|
|
5983
5993
|
}], propDecorators: { screenshots: [{
|
|
5984
5994
|
type: Input
|
|
5985
5995
|
}], logs: [{
|
|
@@ -5994,6 +6004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5994
6004
|
type: Output
|
|
5995
6005
|
}], viewFullLogs: [{
|
|
5996
6006
|
type: Output
|
|
6007
|
+
}], imageClick: [{
|
|
6008
|
+
type: Output
|
|
5997
6009
|
}] } });
|
|
5998
6010
|
|
|
5999
6011
|
class FailedStepComponent extends BaseStepComponent {
|
|
@@ -6027,7 +6039,7 @@ class FailedStepComponent extends BaseStepComponent {
|
|
|
6027
6039
|
}
|
|
6028
6040
|
}
|
|
6029
6041
|
FailedStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6030
|
-
FailedStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepComponent, selector: "cqa-failed-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", failureDetails: "failureDetails" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer cqa-bg-[#FFFAFA]\"\n style=\"border-left: '2px solid #EF4444'\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\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=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- 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-[#7F1D1D] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. {{ config.title }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[20px] cqa-font-bold cqa-text-[#B91C1C]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 3.75L5 6.25L7.5 3.75\" stroke=\"#F87171\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-p-2\" style=\"border-left: '2px solid #FAC7C7'; border-bottom: '1px solid #FEE2E2'\">\n <!-- Sub-steps -->\n <div *ngIf=\"config.subSteps && config.subSteps.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pl-[9px]\" style=\"border-left: 1px solid #F3F4F6;\">\n <div\n *ngFor=\"let subStep of config.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[9px] cqa-leading-[20px]\"\n [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#B91C1C]' : 'cqa-text-[#475569]'\">\n \n <!-- Failed Action Indicator -->\n <span *ngIf=\"subStep.description === config.failureDetails.failedAction\" class=\"cqa-text-[#EF4444] cqa-font-bold\">\u2022</span>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1\" [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-font-medium' : ''\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Timestamp or Duration -->\n <span [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#FCA5A5]' : 'cqa-text-[#D1D5DB]'\">\n {{ subStep.timestamp || formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Expected vs Actual Comparison -->\n <div *ngIf=\"config.failureDetails\" class=\"cqa-grid cqa-grid-cols-2 cqa-rounded cqa-overflow-hidden cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- Expected Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-white\" style=\"border-right: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-[#9CA3AF]\">EXPECTED</div>\n <div class=\"cqa-text-[#374151]\">\n {{ config.failureDetails.expected }}\n </div>\n </div>\n\n <!-- Actual Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-[#FEF8F8]\">\n <div class=\"cqa-text-[#F87171]\">ACTUAL</div>\n <div class=\"cqa-text-[#991B1B]\">\n {{ config.failureDetails.actual }}\n </div>\n </div>\n </div>\n\n <!-- Visual Comparison Component -->\n <cqa-visual-comparison\n *ngIf=\"config.failureDetails\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeBaseline)=\"onMakeBaseline()\"\n (uploadBaseline)=\"onUploadBaseline()\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-visual-comparison>\n\n <!-- AI Fix Message -->\n <div *ngIf=\"config.failureDetails.aiFixApplied\" class=\"cqa-px-3 cqa-pt-1.5 cqa-pb-2 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#FAF5FF]\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0F172A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3\">\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=\"url(#paint0_linear_4070_7201)\"/><path d=\"M8.00941 3.5C8.06489 3.52274 8.08859 3.57827 8.11131 3.62985C8.12269 3.6599 8.13314 3.69012 8.14329 3.72058C8.14726 3.73225 8.15123 3.74392 8.15532 3.75594C8.20806 3.913 8.25504 4.07175 8.30229 4.23038C8.31297 4.26619 8.32369 4.30199 8.33442 4.33778C8.38905 4.52004 8.44327 4.7024 8.49719 4.88484C8.50476 4.91047 8.51234 4.93609 8.51992 4.96171C8.54128 5.03395 8.56262 5.10619 8.58383 5.17847C8.62867 5.3312 8.67473 5.48347 8.72378 5.63501C8.72807 5.64827 8.73236 5.66152 8.73677 5.67518C8.8642 6.065 9.04482 6.41437 9.3409 6.71196C9.34823 6.7197 9.35556 6.72744 9.36312 6.73541C9.4895 6.86437 9.65169 6.96771 9.8138 7.05111C9.82206 7.05542 9.83031 7.05974 9.83882 7.06419C10.3159 7.30925 10.8895 7.41704 11.4062 7.5605C11.6326 7.6234 11.8583 7.68829 12.0832 7.75603C12.099 7.76079 12.1148 7.76554 12.1306 7.77028C12.1778 7.78445 12.225 7.79887 12.2721 7.81347C12.2831 7.81679 12.2941 7.82011 12.3054 7.82353C12.3703 7.84406 12.4324 7.86829 12.4857 7.91027C12.5019 7.94418 12.5019 7.94418 12.4975 7.9781C12.4456 8.02736 12.3942 8.05046 12.3258 8.073C12.316 8.07632 12.3062 8.07965 12.2961 8.08308C12.1806 8.12183 12.0635 8.15575 11.9463 8.18935C11.9222 8.1963 11.8981 8.20326 11.8741 8.21021C11.7257 8.25301 11.5771 8.2949 11.4283 8.33632C11.2323 8.39088 11.0366 8.44634 10.8411 8.50243C10.8091 8.51162 10.7771 8.52078 10.745 8.52991C10.5767 8.57786 10.4092 8.62753 10.2431 8.68208C10.2294 8.68659 10.2156 8.6911 10.2014 8.69574C9.64511 8.88082 9.2211 9.22609 8.95571 9.73099C8.81263 10.0148 8.72823 10.3216 8.64214 10.6245C8.61884 10.7062 8.59409 10.7875 8.56905 10.8687C8.5494 10.9326 8.5302 10.9966 8.51149 11.0608C8.50926 11.0684 8.50703 11.0761 8.50473 11.0839C8.49394 11.1209 8.48319 11.1579 8.47252 11.195C8.44519 11.2888 8.41578 11.3819 8.38555 11.4749C8.33191 11.6402 8.2831 11.8067 8.23459 11.9735C8.16144 12.2246 8.16144 12.2246 8.11997 12.3453C8.11721 12.3534 8.11446 12.3615 8.11163 12.3698C8.09649 12.4128 8.08092 12.4523 8.05226 12.4887C8.00867 12.4979 8.00867 12.4979 7.96951 12.5C7.92473 12.4376 7.89508 12.3771 7.87133 12.3051C7.86787 12.2949 7.86441 12.2847 7.86085 12.2741C7.81684 12.1425 7.77751 12.0095 7.73817 11.8765C7.72916 11.846 7.72011 11.8156 7.71106 11.7852C7.6436 11.5586 7.57725 11.3317 7.51101 11.1048C7.23507 9.98224 7.23507 9.98224 6.539 9.07466C6.52784 9.06596 6.51669 9.05726 6.50519 9.0483C6.04913 8.69902 5.44834 8.5697 4.89815 8.41813C4.76207 8.38062 4.62605 8.34293 4.49003 8.30523C4.47814 8.30193 4.47814 8.30193 4.466 8.29857C4.26981 8.24417 4.07367 8.18963 3.87822 8.13283C3.86996 8.13045 3.86169 8.12806 3.85317 8.12561C3.5529 8.03883 3.5529 8.03883 3.50065 7.9781C3.49917 7.95054 3.49917 7.95054 3.51247 7.92157C3.56708 7.8704 3.62008 7.84848 3.69216 7.82619C3.7026 7.82284 3.71303 7.81948 3.72379 7.81603C3.75575 7.80582 3.78779 7.79584 3.81985 7.78592C3.829 7.78305 3.83815 7.78017 3.84758 7.77722C3.91228 7.75693 3.97722 7.7374 4.04226 7.71809C4.05824 7.71332 4.05824 7.71332 4.07454 7.70846C4.35227 7.62587 4.63181 7.549 4.91126 7.47196C5.1195 7.41455 5.32738 7.35618 5.5346 7.29548C5.54413 7.29271 5.55365 7.28993 5.56346 7.28707C6.0435 7.14696 6.51278 6.94816 6.82274 6.5537C6.82738 6.54785 6.83202 6.542 6.8368 6.53597C7.18197 6.09815 7.31658 5.56572 7.46696 5.04621C7.51642 4.87535 7.56649 4.70464 7.61673 4.53399C7.63064 4.48673 7.64453 4.43947 7.65836 4.39219C7.71394 4.20229 7.77035 4.01264 7.83 3.82386C7.83558 3.80619 7.84114 3.7885 7.84666 3.77081C7.93017 3.50399 7.93017 3.50399 8.00941 3.5Z\" fill=\"white\"/><path d=\"M10.7358 4.05535C10.7901 4.11409 10.801 4.18312 10.8179 4.25813C10.8742 4.49376 10.9392 4.71042 11.1645 4.8473C11.3036 4.92083 11.4693 4.9543 11.6234 4.9859C11.6884 4.99951 11.7434 5.01758 11.7991 5.0537C11.8117 5.07278 11.8117 5.07278 11.8109 5.10598C11.798 5.14637 11.7867 5.15939 11.7526 5.18582C11.7153 5.19775 11.7153 5.19775 11.6706 5.20702C11.6536 5.21074 11.6367 5.21449 11.6198 5.21828C11.6107 5.22029 11.6017 5.2223 11.5924 5.22437C11.3168 5.28531 11.3168 5.28531 11.0787 5.42322C11.071 5.42918 11.0632 5.43514 11.0552 5.44128C10.885 5.58479 10.849 5.82351 10.7978 6.0235C10.7949 6.03448 10.7919 6.04546 10.7889 6.05678C10.7864 6.0665 10.7838 6.07622 10.7812 6.08624C10.7702 6.11593 10.7587 6.13528 10.7358 6.15803C10.6722 6.16576 10.6722 6.16576 10.6413 6.15803C10.592 6.12155 10.581 6.07999 10.5682 6.02414C10.566 6.01549 10.5639 6.00685 10.5616 5.99794C10.5548 5.97032 10.5481 5.94266 10.5415 5.91498C10.4897 5.69946 10.4311 5.488 10.2244 5.36167C10.0628 5.2755 9.86634 5.23475 9.68575 5.20185C9.63625 5.19199 9.60789 5.1796 9.57725 5.1406C9.5706 5.10104 9.5706 5.10104 9.57725 5.06147C9.62435 5.01486 9.6739 5.00348 9.73759 4.9894C9.75766 4.98465 9.77772 4.97987 9.79777 4.97505C9.80813 4.97258 9.81849 4.97011 9.82917 4.96756C9.882 4.95456 9.93431 4.93998 9.9866 4.92511C9.99611 4.92247 10.0056 4.91984 10.0154 4.91712C10.1217 4.88673 10.2134 4.84786 10.2984 4.77885C10.3063 4.77261 10.3143 4.76638 10.3224 4.75995C10.4547 4.64614 10.4996 4.47516 10.5404 4.31562C10.5435 4.30351 10.5466 4.2914 10.5498 4.27892C10.556 4.25459 10.5621 4.23023 10.5681 4.20585C10.5723 4.18888 10.5723 4.18888 10.5767 4.17157C10.5791 4.16144 10.5816 4.1513 10.5842 4.14086C10.5951 4.1086 10.6094 4.08326 10.6294 4.05535C10.668 4.03692 10.695 4.04525 10.7358 4.05535Z\" fill=\"#EDE9FE\"/><path d=\"M5.29554 9.74722C5.3096 9.74731 5.3096 9.74731 5.32395 9.74741C5.42486 9.75035 5.49314 9.78127 5.56745 9.84613C5.65393 9.93545 5.69386 10.0362 5.69159 10.1566C5.68188 10.2542 5.62167 10.3395 5.54782 10.4055C5.4609 10.4725 5.37322 10.4947 5.26215 10.4916C5.1685 10.4812 5.08039 10.4386 5.01402 10.3746C4.93147 10.2669 4.90734 10.1682 4.91944 10.0355C4.94443 9.93104 5.01646 9.84625 5.1086 9.78678C5.1726 9.75576 5.22408 9.74665 5.29554 9.74722Z\" fill=\"white\"/><defs><linearGradient id=\"paint0_linear_4070_7201\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#8B5CF6\"/><stop offset=\"1\" stop-color=\"#9333EA\"/></linearGradient></defs></svg></div>\n {{ config.failureDetails.aiFixMessage || 'AI Insights' }}\n <span class=\"cqa-inline-block cqa-py-[2px] cqa-px-[10px] cqa-text-center cqa-rounded-[5px] cqa-bg-[#EDE9FE] cqa-text-[8px] cqa-leading-[12px] cqa-text-[#6D28D9]\">94% confidence</span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Reasoning</div>\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Stale state: test attribute as primary locator (highest priority)\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Confidence score: 94% based on DOM similarity analysis\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Increased wait time from 2s to 5s due to button latency\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Environment binding: speed of assets by 20% through optimized caching\n </li>\n </ul>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Suggested Fixes</div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Update locator to use data-testid='registration-submit' instead of #submit-btn\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Add explicit wait for network idle before clicking submit\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Consider adding retry logic for form submission step\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: ["screenshots", "logs", "showFullLogsLink"], outputs: ["makeBaseline", "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"] }] });
|
|
6042
|
+
FailedStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepComponent, selector: "cqa-failed-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", failureDetails: "failureDetails" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer cqa-bg-[#FFFAFA]\"\n style=\"border-left: '2px solid #EF4444'\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\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=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- 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-[#7F1D1D] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. {{ config.title }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[20px] cqa-font-bold cqa-text-[#B91C1C]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 3.75L5 6.25L7.5 3.75\" stroke=\"#F87171\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-p-2\" style=\"border-left: '2px solid #FAC7C7'; border-bottom: '1px solid #FEE2E2'\">\n <!-- Sub-steps -->\n <div *ngIf=\"config.subSteps && config.subSteps.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pl-[9px]\" style=\"border-left: 1px solid #F3F4F6;\">\n <div\n *ngFor=\"let subStep of config.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[9px] cqa-leading-[20px]\"\n [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#B91C1C]' : 'cqa-text-[#475569]'\">\n \n <!-- Failed Action Indicator -->\n <span *ngIf=\"subStep.description === config.failureDetails.failedAction\" class=\"cqa-text-[#EF4444] cqa-font-bold\">\u2022</span>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1\" [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-font-medium' : ''\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Timestamp or Duration -->\n <span [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#FCA5A5]' : 'cqa-text-[#D1D5DB]'\">\n {{ subStep.timestamp || formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Expected vs Actual Comparison -->\n <div *ngIf=\"config.failureDetails\" class=\"cqa-grid cqa-grid-cols-2 cqa-rounded cqa-overflow-hidden cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- Expected Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-white\" style=\"border-right: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-[#9CA3AF]\">EXPECTED</div>\n <div class=\"cqa-text-[#374151]\">\n {{ config.failureDetails.expected }}\n </div>\n </div>\n\n <!-- Actual Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-[#FEF8F8]\">\n <div class=\"cqa-text-[#F87171]\">ACTUAL</div>\n <div class=\"cqa-text-[#991B1B]\">\n {{ config.failureDetails.actual }}\n </div>\n </div>\n </div>\n\n <!-- Visual Comparison Component -->\n <cqa-visual-comparison\n *ngIf=\"config.failureDetails\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeBaseline)=\"onMakeBaseline()\"\n (uploadBaseline)=\"onUploadBaseline()\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-visual-comparison>\n\n <!-- AI Fix Message -->\n <div *ngIf=\"config.failureDetails.aiFixApplied\" class=\"cqa-px-3 cqa-pt-1.5 cqa-pb-2 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#FAF5FF]\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0F172A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3\">\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=\"url(#paint0_linear_4070_7201)\"/><path d=\"M8.00941 3.5C8.06489 3.52274 8.08859 3.57827 8.11131 3.62985C8.12269 3.6599 8.13314 3.69012 8.14329 3.72058C8.14726 3.73225 8.15123 3.74392 8.15532 3.75594C8.20806 3.913 8.25504 4.07175 8.30229 4.23038C8.31297 4.26619 8.32369 4.30199 8.33442 4.33778C8.38905 4.52004 8.44327 4.7024 8.49719 4.88484C8.50476 4.91047 8.51234 4.93609 8.51992 4.96171C8.54128 5.03395 8.56262 5.10619 8.58383 5.17847C8.62867 5.3312 8.67473 5.48347 8.72378 5.63501C8.72807 5.64827 8.73236 5.66152 8.73677 5.67518C8.8642 6.065 9.04482 6.41437 9.3409 6.71196C9.34823 6.7197 9.35556 6.72744 9.36312 6.73541C9.4895 6.86437 9.65169 6.96771 9.8138 7.05111C9.82206 7.05542 9.83031 7.05974 9.83882 7.06419C10.3159 7.30925 10.8895 7.41704 11.4062 7.5605C11.6326 7.6234 11.8583 7.68829 12.0832 7.75603C12.099 7.76079 12.1148 7.76554 12.1306 7.77028C12.1778 7.78445 12.225 7.79887 12.2721 7.81347C12.2831 7.81679 12.2941 7.82011 12.3054 7.82353C12.3703 7.84406 12.4324 7.86829 12.4857 7.91027C12.5019 7.94418 12.5019 7.94418 12.4975 7.9781C12.4456 8.02736 12.3942 8.05046 12.3258 8.073C12.316 8.07632 12.3062 8.07965 12.2961 8.08308C12.1806 8.12183 12.0635 8.15575 11.9463 8.18935C11.9222 8.1963 11.8981 8.20326 11.8741 8.21021C11.7257 8.25301 11.5771 8.2949 11.4283 8.33632C11.2323 8.39088 11.0366 8.44634 10.8411 8.50243C10.8091 8.51162 10.7771 8.52078 10.745 8.52991C10.5767 8.57786 10.4092 8.62753 10.2431 8.68208C10.2294 8.68659 10.2156 8.6911 10.2014 8.69574C9.64511 8.88082 9.2211 9.22609 8.95571 9.73099C8.81263 10.0148 8.72823 10.3216 8.64214 10.6245C8.61884 10.7062 8.59409 10.7875 8.56905 10.8687C8.5494 10.9326 8.5302 10.9966 8.51149 11.0608C8.50926 11.0684 8.50703 11.0761 8.50473 11.0839C8.49394 11.1209 8.48319 11.1579 8.47252 11.195C8.44519 11.2888 8.41578 11.3819 8.38555 11.4749C8.33191 11.6402 8.2831 11.8067 8.23459 11.9735C8.16144 12.2246 8.16144 12.2246 8.11997 12.3453C8.11721 12.3534 8.11446 12.3615 8.11163 12.3698C8.09649 12.4128 8.08092 12.4523 8.05226 12.4887C8.00867 12.4979 8.00867 12.4979 7.96951 12.5C7.92473 12.4376 7.89508 12.3771 7.87133 12.3051C7.86787 12.2949 7.86441 12.2847 7.86085 12.2741C7.81684 12.1425 7.77751 12.0095 7.73817 11.8765C7.72916 11.846 7.72011 11.8156 7.71106 11.7852C7.6436 11.5586 7.57725 11.3317 7.51101 11.1048C7.23507 9.98224 7.23507 9.98224 6.539 9.07466C6.52784 9.06596 6.51669 9.05726 6.50519 9.0483C6.04913 8.69902 5.44834 8.5697 4.89815 8.41813C4.76207 8.38062 4.62605 8.34293 4.49003 8.30523C4.47814 8.30193 4.47814 8.30193 4.466 8.29857C4.26981 8.24417 4.07367 8.18963 3.87822 8.13283C3.86996 8.13045 3.86169 8.12806 3.85317 8.12561C3.5529 8.03883 3.5529 8.03883 3.50065 7.9781C3.49917 7.95054 3.49917 7.95054 3.51247 7.92157C3.56708 7.8704 3.62008 7.84848 3.69216 7.82619C3.7026 7.82284 3.71303 7.81948 3.72379 7.81603C3.75575 7.80582 3.78779 7.79584 3.81985 7.78592C3.829 7.78305 3.83815 7.78017 3.84758 7.77722C3.91228 7.75693 3.97722 7.7374 4.04226 7.71809C4.05824 7.71332 4.05824 7.71332 4.07454 7.70846C4.35227 7.62587 4.63181 7.549 4.91126 7.47196C5.1195 7.41455 5.32738 7.35618 5.5346 7.29548C5.54413 7.29271 5.55365 7.28993 5.56346 7.28707C6.0435 7.14696 6.51278 6.94816 6.82274 6.5537C6.82738 6.54785 6.83202 6.542 6.8368 6.53597C7.18197 6.09815 7.31658 5.56572 7.46696 5.04621C7.51642 4.87535 7.56649 4.70464 7.61673 4.53399C7.63064 4.48673 7.64453 4.43947 7.65836 4.39219C7.71394 4.20229 7.77035 4.01264 7.83 3.82386C7.83558 3.80619 7.84114 3.7885 7.84666 3.77081C7.93017 3.50399 7.93017 3.50399 8.00941 3.5Z\" fill=\"white\"/><path d=\"M10.7358 4.05535C10.7901 4.11409 10.801 4.18312 10.8179 4.25813C10.8742 4.49376 10.9392 4.71042 11.1645 4.8473C11.3036 4.92083 11.4693 4.9543 11.6234 4.9859C11.6884 4.99951 11.7434 5.01758 11.7991 5.0537C11.8117 5.07278 11.8117 5.07278 11.8109 5.10598C11.798 5.14637 11.7867 5.15939 11.7526 5.18582C11.7153 5.19775 11.7153 5.19775 11.6706 5.20702C11.6536 5.21074 11.6367 5.21449 11.6198 5.21828C11.6107 5.22029 11.6017 5.2223 11.5924 5.22437C11.3168 5.28531 11.3168 5.28531 11.0787 5.42322C11.071 5.42918 11.0632 5.43514 11.0552 5.44128C10.885 5.58479 10.849 5.82351 10.7978 6.0235C10.7949 6.03448 10.7919 6.04546 10.7889 6.05678C10.7864 6.0665 10.7838 6.07622 10.7812 6.08624C10.7702 6.11593 10.7587 6.13528 10.7358 6.15803C10.6722 6.16576 10.6722 6.16576 10.6413 6.15803C10.592 6.12155 10.581 6.07999 10.5682 6.02414C10.566 6.01549 10.5639 6.00685 10.5616 5.99794C10.5548 5.97032 10.5481 5.94266 10.5415 5.91498C10.4897 5.69946 10.4311 5.488 10.2244 5.36167C10.0628 5.2755 9.86634 5.23475 9.68575 5.20185C9.63625 5.19199 9.60789 5.1796 9.57725 5.1406C9.5706 5.10104 9.5706 5.10104 9.57725 5.06147C9.62435 5.01486 9.6739 5.00348 9.73759 4.9894C9.75766 4.98465 9.77772 4.97987 9.79777 4.97505C9.80813 4.97258 9.81849 4.97011 9.82917 4.96756C9.882 4.95456 9.93431 4.93998 9.9866 4.92511C9.99611 4.92247 10.0056 4.91984 10.0154 4.91712C10.1217 4.88673 10.2134 4.84786 10.2984 4.77885C10.3063 4.77261 10.3143 4.76638 10.3224 4.75995C10.4547 4.64614 10.4996 4.47516 10.5404 4.31562C10.5435 4.30351 10.5466 4.2914 10.5498 4.27892C10.556 4.25459 10.5621 4.23023 10.5681 4.20585C10.5723 4.18888 10.5723 4.18888 10.5767 4.17157C10.5791 4.16144 10.5816 4.1513 10.5842 4.14086C10.5951 4.1086 10.6094 4.08326 10.6294 4.05535C10.668 4.03692 10.695 4.04525 10.7358 4.05535Z\" fill=\"#EDE9FE\"/><path d=\"M5.29554 9.74722C5.3096 9.74731 5.3096 9.74731 5.32395 9.74741C5.42486 9.75035 5.49314 9.78127 5.56745 9.84613C5.65393 9.93545 5.69386 10.0362 5.69159 10.1566C5.68188 10.2542 5.62167 10.3395 5.54782 10.4055C5.4609 10.4725 5.37322 10.4947 5.26215 10.4916C5.1685 10.4812 5.08039 10.4386 5.01402 10.3746C4.93147 10.2669 4.90734 10.1682 4.91944 10.0355C4.94443 9.93104 5.01646 9.84625 5.1086 9.78678C5.1726 9.75576 5.22408 9.74665 5.29554 9.74722Z\" fill=\"white\"/><defs><linearGradient id=\"paint0_linear_4070_7201\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#8B5CF6\"/><stop offset=\"1\" stop-color=\"#9333EA\"/></linearGradient></defs></svg></div>\n {{ config.failureDetails.aiFixMessage || 'AI Insights' }}\n <span class=\"cqa-inline-block cqa-py-[2px] cqa-px-[10px] cqa-text-center cqa-rounded-[5px] cqa-bg-[#EDE9FE] cqa-text-[8px] cqa-leading-[12px] cqa-text-[#6D28D9]\">94% confidence</span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Reasoning</div>\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Stale state: test attribute as primary locator (highest priority)\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Confidence score: 94% based on DOM similarity analysis\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Increased wait time from 2s to 5s due to button latency\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Environment binding: speed of assets by 20% through optimized caching\n </li>\n </ul>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Suggested Fixes</div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Update locator to use data-testid='registration-submit' instead of #submit-btn\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Add explicit wait for network idle before clicking submit\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Consider adding retry logic for form submission step\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", components: [{ type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: ["screenshots", "logs", "showFullLogsLink"], outputs: ["makeBaseline", "uploadBaseline", "analyze", "viewFullLogs", "imageClick"] }], 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"] }] });
|
|
6031
6043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepComponent, decorators: [{
|
|
6032
6044
|
type: Component,
|
|
6033
6045
|
args: [{ selector: 'cqa-failed-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 cqa-bg-[#FFFAFA]\"\n style=\"border-left: '2px solid #EF4444'\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\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=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- 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-[#7F1D1D] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. {{ config.title }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[20px] cqa-font-bold cqa-text-[#B91C1C]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.5 3.75L5 6.25L7.5 3.75\" stroke=\"#F87171\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-p-2\" style=\"border-left: '2px solid #FAC7C7'; border-bottom: '1px solid #FEE2E2'\">\n <!-- Sub-steps -->\n <div *ngIf=\"config.subSteps && config.subSteps.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pl-[9px]\" style=\"border-left: 1px solid #F3F4F6;\">\n <div\n *ngFor=\"let subStep of config.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[9px] cqa-leading-[20px]\"\n [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#B91C1C]' : 'cqa-text-[#475569]'\">\n \n <!-- Failed Action Indicator -->\n <span *ngIf=\"subStep.description === config.failureDetails.failedAction\" class=\"cqa-text-[#EF4444] cqa-font-bold\">\u2022</span>\n\n <!-- Sub-step Description -->\n <span class=\"cqa-flex-1\" [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-font-medium' : ''\">\n {{ subStep.description }}\n </span>\n\n <!-- Sub-step Timestamp or Duration -->\n <span [ngClass]=\"subStep.description === config.failureDetails.failedAction ? 'cqa-text-[#FCA5A5]' : 'cqa-text-[#D1D5DB]'\">\n {{ subStep.timestamp || formatDuration(subStep.duration) }}\n </span>\n </div>\n </div>\n\n <!-- Expected vs Actual Comparison -->\n <div *ngIf=\"config.failureDetails\" class=\"cqa-grid cqa-grid-cols-2 cqa-rounded cqa-overflow-hidden cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- Expected Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-white\" style=\"border-right: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-[#9CA3AF]\">EXPECTED</div>\n <div class=\"cqa-text-[#374151]\">\n {{ config.failureDetails.expected }}\n </div>\n </div>\n\n <!-- Actual Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-[#FEF8F8]\">\n <div class=\"cqa-text-[#F87171]\">ACTUAL</div>\n <div class=\"cqa-text-[#991B1B]\">\n {{ config.failureDetails.actual }}\n </div>\n </div>\n </div>\n\n <!-- Visual Comparison Component -->\n <cqa-visual-comparison\n *ngIf=\"config.failureDetails\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeBaseline)=\"onMakeBaseline()\"\n (uploadBaseline)=\"onUploadBaseline()\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-visual-comparison>\n\n <!-- AI Fix Message -->\n <div *ngIf=\"config.failureDetails.aiFixApplied\" class=\"cqa-px-3 cqa-pt-1.5 cqa-pb-2 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#FAF5FF]\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0F172A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3\">\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=\"url(#paint0_linear_4070_7201)\"/><path d=\"M8.00941 3.5C8.06489 3.52274 8.08859 3.57827 8.11131 3.62985C8.12269 3.6599 8.13314 3.69012 8.14329 3.72058C8.14726 3.73225 8.15123 3.74392 8.15532 3.75594C8.20806 3.913 8.25504 4.07175 8.30229 4.23038C8.31297 4.26619 8.32369 4.30199 8.33442 4.33778C8.38905 4.52004 8.44327 4.7024 8.49719 4.88484C8.50476 4.91047 8.51234 4.93609 8.51992 4.96171C8.54128 5.03395 8.56262 5.10619 8.58383 5.17847C8.62867 5.3312 8.67473 5.48347 8.72378 5.63501C8.72807 5.64827 8.73236 5.66152 8.73677 5.67518C8.8642 6.065 9.04482 6.41437 9.3409 6.71196C9.34823 6.7197 9.35556 6.72744 9.36312 6.73541C9.4895 6.86437 9.65169 6.96771 9.8138 7.05111C9.82206 7.05542 9.83031 7.05974 9.83882 7.06419C10.3159 7.30925 10.8895 7.41704 11.4062 7.5605C11.6326 7.6234 11.8583 7.68829 12.0832 7.75603C12.099 7.76079 12.1148 7.76554 12.1306 7.77028C12.1778 7.78445 12.225 7.79887 12.2721 7.81347C12.2831 7.81679 12.2941 7.82011 12.3054 7.82353C12.3703 7.84406 12.4324 7.86829 12.4857 7.91027C12.5019 7.94418 12.5019 7.94418 12.4975 7.9781C12.4456 8.02736 12.3942 8.05046 12.3258 8.073C12.316 8.07632 12.3062 8.07965 12.2961 8.08308C12.1806 8.12183 12.0635 8.15575 11.9463 8.18935C11.9222 8.1963 11.8981 8.20326 11.8741 8.21021C11.7257 8.25301 11.5771 8.2949 11.4283 8.33632C11.2323 8.39088 11.0366 8.44634 10.8411 8.50243C10.8091 8.51162 10.7771 8.52078 10.745 8.52991C10.5767 8.57786 10.4092 8.62753 10.2431 8.68208C10.2294 8.68659 10.2156 8.6911 10.2014 8.69574C9.64511 8.88082 9.2211 9.22609 8.95571 9.73099C8.81263 10.0148 8.72823 10.3216 8.64214 10.6245C8.61884 10.7062 8.59409 10.7875 8.56905 10.8687C8.5494 10.9326 8.5302 10.9966 8.51149 11.0608C8.50926 11.0684 8.50703 11.0761 8.50473 11.0839C8.49394 11.1209 8.48319 11.1579 8.47252 11.195C8.44519 11.2888 8.41578 11.3819 8.38555 11.4749C8.33191 11.6402 8.2831 11.8067 8.23459 11.9735C8.16144 12.2246 8.16144 12.2246 8.11997 12.3453C8.11721 12.3534 8.11446 12.3615 8.11163 12.3698C8.09649 12.4128 8.08092 12.4523 8.05226 12.4887C8.00867 12.4979 8.00867 12.4979 7.96951 12.5C7.92473 12.4376 7.89508 12.3771 7.87133 12.3051C7.86787 12.2949 7.86441 12.2847 7.86085 12.2741C7.81684 12.1425 7.77751 12.0095 7.73817 11.8765C7.72916 11.846 7.72011 11.8156 7.71106 11.7852C7.6436 11.5586 7.57725 11.3317 7.51101 11.1048C7.23507 9.98224 7.23507 9.98224 6.539 9.07466C6.52784 9.06596 6.51669 9.05726 6.50519 9.0483C6.04913 8.69902 5.44834 8.5697 4.89815 8.41813C4.76207 8.38062 4.62605 8.34293 4.49003 8.30523C4.47814 8.30193 4.47814 8.30193 4.466 8.29857C4.26981 8.24417 4.07367 8.18963 3.87822 8.13283C3.86996 8.13045 3.86169 8.12806 3.85317 8.12561C3.5529 8.03883 3.5529 8.03883 3.50065 7.9781C3.49917 7.95054 3.49917 7.95054 3.51247 7.92157C3.56708 7.8704 3.62008 7.84848 3.69216 7.82619C3.7026 7.82284 3.71303 7.81948 3.72379 7.81603C3.75575 7.80582 3.78779 7.79584 3.81985 7.78592C3.829 7.78305 3.83815 7.78017 3.84758 7.77722C3.91228 7.75693 3.97722 7.7374 4.04226 7.71809C4.05824 7.71332 4.05824 7.71332 4.07454 7.70846C4.35227 7.62587 4.63181 7.549 4.91126 7.47196C5.1195 7.41455 5.32738 7.35618 5.5346 7.29548C5.54413 7.29271 5.55365 7.28993 5.56346 7.28707C6.0435 7.14696 6.51278 6.94816 6.82274 6.5537C6.82738 6.54785 6.83202 6.542 6.8368 6.53597C7.18197 6.09815 7.31658 5.56572 7.46696 5.04621C7.51642 4.87535 7.56649 4.70464 7.61673 4.53399C7.63064 4.48673 7.64453 4.43947 7.65836 4.39219C7.71394 4.20229 7.77035 4.01264 7.83 3.82386C7.83558 3.80619 7.84114 3.7885 7.84666 3.77081C7.93017 3.50399 7.93017 3.50399 8.00941 3.5Z\" fill=\"white\"/><path d=\"M10.7358 4.05535C10.7901 4.11409 10.801 4.18312 10.8179 4.25813C10.8742 4.49376 10.9392 4.71042 11.1645 4.8473C11.3036 4.92083 11.4693 4.9543 11.6234 4.9859C11.6884 4.99951 11.7434 5.01758 11.7991 5.0537C11.8117 5.07278 11.8117 5.07278 11.8109 5.10598C11.798 5.14637 11.7867 5.15939 11.7526 5.18582C11.7153 5.19775 11.7153 5.19775 11.6706 5.20702C11.6536 5.21074 11.6367 5.21449 11.6198 5.21828C11.6107 5.22029 11.6017 5.2223 11.5924 5.22437C11.3168 5.28531 11.3168 5.28531 11.0787 5.42322C11.071 5.42918 11.0632 5.43514 11.0552 5.44128C10.885 5.58479 10.849 5.82351 10.7978 6.0235C10.7949 6.03448 10.7919 6.04546 10.7889 6.05678C10.7864 6.0665 10.7838 6.07622 10.7812 6.08624C10.7702 6.11593 10.7587 6.13528 10.7358 6.15803C10.6722 6.16576 10.6722 6.16576 10.6413 6.15803C10.592 6.12155 10.581 6.07999 10.5682 6.02414C10.566 6.01549 10.5639 6.00685 10.5616 5.99794C10.5548 5.97032 10.5481 5.94266 10.5415 5.91498C10.4897 5.69946 10.4311 5.488 10.2244 5.36167C10.0628 5.2755 9.86634 5.23475 9.68575 5.20185C9.63625 5.19199 9.60789 5.1796 9.57725 5.1406C9.5706 5.10104 9.5706 5.10104 9.57725 5.06147C9.62435 5.01486 9.6739 5.00348 9.73759 4.9894C9.75766 4.98465 9.77772 4.97987 9.79777 4.97505C9.80813 4.97258 9.81849 4.97011 9.82917 4.96756C9.882 4.95456 9.93431 4.93998 9.9866 4.92511C9.99611 4.92247 10.0056 4.91984 10.0154 4.91712C10.1217 4.88673 10.2134 4.84786 10.2984 4.77885C10.3063 4.77261 10.3143 4.76638 10.3224 4.75995C10.4547 4.64614 10.4996 4.47516 10.5404 4.31562C10.5435 4.30351 10.5466 4.2914 10.5498 4.27892C10.556 4.25459 10.5621 4.23023 10.5681 4.20585C10.5723 4.18888 10.5723 4.18888 10.5767 4.17157C10.5791 4.16144 10.5816 4.1513 10.5842 4.14086C10.5951 4.1086 10.6094 4.08326 10.6294 4.05535C10.668 4.03692 10.695 4.04525 10.7358 4.05535Z\" fill=\"#EDE9FE\"/><path d=\"M5.29554 9.74722C5.3096 9.74731 5.3096 9.74731 5.32395 9.74741C5.42486 9.75035 5.49314 9.78127 5.56745 9.84613C5.65393 9.93545 5.69386 10.0362 5.69159 10.1566C5.68188 10.2542 5.62167 10.3395 5.54782 10.4055C5.4609 10.4725 5.37322 10.4947 5.26215 10.4916C5.1685 10.4812 5.08039 10.4386 5.01402 10.3746C4.93147 10.2669 4.90734 10.1682 4.91944 10.0355C4.94443 9.93104 5.01646 9.84625 5.1086 9.78678C5.1726 9.75576 5.22408 9.74665 5.29554 9.74722Z\" fill=\"white\"/><defs><linearGradient id=\"paint0_linear_4070_7201\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#8B5CF6\"/><stop offset=\"1\" stop-color=\"#9333EA\"/></linearGradient></defs></svg></div>\n {{ config.failureDetails.aiFixMessage || 'AI Insights' }}\n <span class=\"cqa-inline-block cqa-py-[2px] cqa-px-[10px] cqa-text-center cqa-rounded-[5px] cqa-bg-[#EDE9FE] cqa-text-[8px] cqa-leading-[12px] cqa-text-[#6D28D9]\">94% confidence</span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Reasoning</div>\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Stale state: test attribute as primary locator (highest priority)\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Confidence score: 94% based on DOM similarity analysis\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Increased wait time from 2s to 5s due to button latency\n </li>\n <li class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1.5\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n Environment binding: speed of assets by 20% through optimized caching\n </li>\n </ul>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Suggested Fixes</div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Update locator to use data-testid='registration-submit' instead of #submit-btn\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Add explicit wait for network idle before clicking submit\n </div>\n <div class=\"cqa-px-[10px] cqa-py-[2px] cqa-rounded-[5px] cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#065F46] cqa-bg-[#ECFDF5] cqa-border cqa-border-solid cqa-border-[#D1FAE5]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.66662 5.83336C1.58777 5.83363 1.51047 5.81152 1.44369 5.7696C1.3769 5.72768 1.32339 5.66768 1.28935 5.59655C1.25532 5.52543 1.24216 5.4461 1.25141 5.3678C1.26067 5.2895 1.29195 5.21543 1.34162 5.15419L5.46662 0.904194C5.49757 0.868478 5.53973 0.844342 5.5862 0.835749C5.63267 0.827156 5.68067 0.834616 5.72234 0.856904C5.76401 0.879192 5.79687 0.914984 5.81551 0.958406C5.83416 1.00183 5.83749 1.0503 5.82496 1.09586L5.02496 3.60419C5.00137 3.66733 4.99344 3.73524 5.00187 3.80211C5.01029 3.86898 5.03481 3.93281 5.07333 3.98812C5.11184 4.04343 5.16319 4.08857 5.22299 4.11968C5.28278 4.15078 5.34922 4.16691 5.41662 4.16669H8.33329C8.41214 4.16643 8.48944 4.18853 8.55622 4.23045C8.62301 4.27237 8.67653 4.33238 8.71056 4.4035C8.7446 4.47463 8.75775 4.55395 8.7485 4.63225C8.73924 4.71056 8.70796 4.78463 8.65829 4.84586L4.53329 9.09586C4.50235 9.13158 4.46018 9.15571 4.41371 9.1643C4.36725 9.1729 4.31924 9.16544 4.27757 9.14315C4.2359 9.12086 4.20305 9.08507 4.1844 9.04165C4.16575 8.99823 4.16242 8.94976 4.17496 8.90419L4.97496 6.39586C4.99855 6.33273 5.00647 6.26481 4.99804 6.19794C4.98962 6.13107 4.9651 6.06724 4.92659 6.01193C4.88807 5.95662 4.83672 5.91148 4.77692 5.88038C4.71713 5.84927 4.65069 5.83314 4.58329 5.83336H1.66662Z\" stroke=\"#059669\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n Consider adding retry logic for form submission step\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [] }]
|
|
@@ -6051,6 +6063,211 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6051
6063
|
type: Input
|
|
6052
6064
|
}] } });
|
|
6053
6065
|
|
|
6066
|
+
class VisualDifferenceModalComponent {
|
|
6067
|
+
constructor() {
|
|
6068
|
+
this.baselineUrl = '';
|
|
6069
|
+
this.currentUrl = '';
|
|
6070
|
+
this.differenceUrl = '';
|
|
6071
|
+
this.title = 'Visual Difference';
|
|
6072
|
+
this.subtitle = 'Comparing Baseline vs. Current Execution';
|
|
6073
|
+
this.isOpen = false;
|
|
6074
|
+
this.initialView = 'baseline';
|
|
6075
|
+
this.close = new EventEmitter();
|
|
6076
|
+
this.currentView = 'baseline';
|
|
6077
|
+
this.baselineImageError = false;
|
|
6078
|
+
this.currentImageError = false;
|
|
6079
|
+
this.differenceImageError = false;
|
|
6080
|
+
}
|
|
6081
|
+
ngOnChanges(changes) {
|
|
6082
|
+
if (changes['baselineUrl']) {
|
|
6083
|
+
this.baselineImageError = false;
|
|
6084
|
+
}
|
|
6085
|
+
if (changes['currentUrl']) {
|
|
6086
|
+
this.currentImageError = false;
|
|
6087
|
+
}
|
|
6088
|
+
if (changes['differenceUrl']) {
|
|
6089
|
+
this.differenceImageError = false;
|
|
6090
|
+
}
|
|
6091
|
+
if (changes['isOpen'] && this.isOpen) {
|
|
6092
|
+
this.currentView = this.initialView;
|
|
6093
|
+
}
|
|
6094
|
+
if (changes['initialView'] && this.isOpen) {
|
|
6095
|
+
this.currentView = this.initialView;
|
|
6096
|
+
}
|
|
6097
|
+
}
|
|
6098
|
+
get currentImageUrl() {
|
|
6099
|
+
switch (this.currentView) {
|
|
6100
|
+
case 'baseline':
|
|
6101
|
+
return this.baselineUrl;
|
|
6102
|
+
case 'current':
|
|
6103
|
+
return this.currentUrl;
|
|
6104
|
+
case 'difference':
|
|
6105
|
+
return this.differenceUrl;
|
|
6106
|
+
default:
|
|
6107
|
+
return '';
|
|
6108
|
+
}
|
|
6109
|
+
}
|
|
6110
|
+
onClose() {
|
|
6111
|
+
this.close.emit();
|
|
6112
|
+
}
|
|
6113
|
+
onBackdropClick(event) {
|
|
6114
|
+
const target = event.target;
|
|
6115
|
+
const currentTarget = event.currentTarget;
|
|
6116
|
+
if (target === currentTarget || target.classList.contains('modal-backdrop')) {
|
|
6117
|
+
this.onClose();
|
|
6118
|
+
}
|
|
6119
|
+
}
|
|
6120
|
+
onImageError(event) {
|
|
6121
|
+
const img = event.target;
|
|
6122
|
+
img.style.display = 'none';
|
|
6123
|
+
}
|
|
6124
|
+
onThumbnailError(type, event) {
|
|
6125
|
+
const img = event.target;
|
|
6126
|
+
img.style.display = 'none';
|
|
6127
|
+
if (type === 'baseline') {
|
|
6128
|
+
this.baselineImageError = true;
|
|
6129
|
+
}
|
|
6130
|
+
else if (type === 'current') {
|
|
6131
|
+
this.currentImageError = true;
|
|
6132
|
+
}
|
|
6133
|
+
else if (type === 'difference') {
|
|
6134
|
+
this.differenceImageError = true;
|
|
6135
|
+
}
|
|
6136
|
+
}
|
|
6137
|
+
hasThumbnailImage(type) {
|
|
6138
|
+
if (type === 'baseline') {
|
|
6139
|
+
return !!this.baselineUrl && !this.baselineImageError;
|
|
6140
|
+
}
|
|
6141
|
+
else if (type === 'current') {
|
|
6142
|
+
return !!this.currentUrl && !this.currentImageError;
|
|
6143
|
+
}
|
|
6144
|
+
else if (type === 'difference') {
|
|
6145
|
+
return !!this.differenceUrl && !this.differenceImageError;
|
|
6146
|
+
}
|
|
6147
|
+
return false;
|
|
6148
|
+
}
|
|
6149
|
+
setView(view) {
|
|
6150
|
+
this.currentView = view;
|
|
6151
|
+
}
|
|
6152
|
+
navigatePrevious() {
|
|
6153
|
+
const views = ['baseline', 'current', 'difference'];
|
|
6154
|
+
const currentIndex = views.indexOf(this.currentView);
|
|
6155
|
+
const previousIndex = currentIndex > 0 ? currentIndex - 1 : views.length - 1;
|
|
6156
|
+
this.currentView = views[previousIndex];
|
|
6157
|
+
}
|
|
6158
|
+
navigateNext() {
|
|
6159
|
+
const views = ['baseline', 'current', 'difference'];
|
|
6160
|
+
const currentIndex = views.indexOf(this.currentView);
|
|
6161
|
+
const nextIndex = currentIndex < views.length - 1 ? currentIndex + 1 : 0;
|
|
6162
|
+
this.currentView = views[nextIndex];
|
|
6163
|
+
}
|
|
6164
|
+
}
|
|
6165
|
+
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6166
|
+
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: { baselineUrl: "baselineUrl", currentUrl: "currentUrl", differenceUrl: "differenceUrl", title: "title", subtitle: "subtitle", isOpen: "isOpen", initialView: "initialView" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
|
|
6168
|
+
type: Component,
|
|
6169
|
+
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6170
|
+
}], propDecorators: { baselineUrl: [{
|
|
6171
|
+
type: Input
|
|
6172
|
+
}], currentUrl: [{
|
|
6173
|
+
type: Input
|
|
6174
|
+
}], differenceUrl: [{
|
|
6175
|
+
type: Input
|
|
6176
|
+
}], title: [{
|
|
6177
|
+
type: Input
|
|
6178
|
+
}], subtitle: [{
|
|
6179
|
+
type: Input
|
|
6180
|
+
}], isOpen: [{
|
|
6181
|
+
type: Input
|
|
6182
|
+
}], initialView: [{
|
|
6183
|
+
type: Input
|
|
6184
|
+
}], close: [{
|
|
6185
|
+
type: Output
|
|
6186
|
+
}] } });
|
|
6187
|
+
|
|
6188
|
+
class UpdatedFailedStepComponent extends BaseStepComponent {
|
|
6189
|
+
constructor() {
|
|
6190
|
+
super(...arguments);
|
|
6191
|
+
this.isModalOpen = false;
|
|
6192
|
+
this.initialModalView = 'baseline';
|
|
6193
|
+
}
|
|
6194
|
+
ngOnInit() {
|
|
6195
|
+
// Build config from individual inputs
|
|
6196
|
+
this.config = {
|
|
6197
|
+
type: 'failed',
|
|
6198
|
+
subSteps: this.subSteps,
|
|
6199
|
+
failureDetails: this.failureDetails,
|
|
6200
|
+
timingBreakdown: this.timingBreakdown,
|
|
6201
|
+
expanded: this.expanded,
|
|
6202
|
+
reasoning: this.reasoning,
|
|
6203
|
+
confidence: this.confidence,
|
|
6204
|
+
};
|
|
6205
|
+
super.ngOnInit();
|
|
6206
|
+
}
|
|
6207
|
+
onMakeBaseline() {
|
|
6208
|
+
console.log('Make current baseline clicked');
|
|
6209
|
+
}
|
|
6210
|
+
onUploadBaseline() {
|
|
6211
|
+
console.log('Upload baseline clicked');
|
|
6212
|
+
}
|
|
6213
|
+
onAnalyze() {
|
|
6214
|
+
console.log('Analyze clicked');
|
|
6215
|
+
}
|
|
6216
|
+
onViewFullLogs() {
|
|
6217
|
+
console.log('View full logs clicked');
|
|
6218
|
+
}
|
|
6219
|
+
onImageClick(image) {
|
|
6220
|
+
this.initialModalView = image;
|
|
6221
|
+
this.isModalOpen = true;
|
|
6222
|
+
}
|
|
6223
|
+
onCloseModal() {
|
|
6224
|
+
this.isModalOpen = false;
|
|
6225
|
+
}
|
|
6226
|
+
}
|
|
6227
|
+
UpdatedFailedStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UpdatedFailedStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6228
|
+
UpdatedFailedStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: { timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-p-2\" style=\"border-left: '2px solid #FAC7C7'; border-bottom: '1px solid #FEE2E2'\">\n <!-- Sub-steps -->\n\n <!-- Expected vs Actual Comparison -->\n <div *ngIf=\"config.failureDetails\" class=\"cqa-grid cqa-grid-cols-2 cqa-rounded cqa-overflow-hidden cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- Expected Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-white\" style=\"border-right: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-[#9CA3AF]\">EXPECTED</div>\n <div class=\"cqa-text-[#374151]\">\n {{ config.failureDetails.expected }}\n </div>\n </div>\n\n <!-- Actual Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-[#FEF8F8]\">\n <div class=\"cqa-text-[#F87171]\">ACTUAL</div>\n <div class=\"cqa-text-[#991B1B]\">\n {{ config.failureDetails.actual }}\n </div>\n </div>\n </div>\n\n <!-- Visual Comparison Component -->\n <cqa-visual-comparison\n *ngIf=\"config.failureDetails\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeBaseline)=\"onMakeBaseline()\"\n (uploadBaseline)=\"onUploadBaseline()\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\"\n (imageClick)=\"onImageClick($event)\">\n </cqa-visual-comparison>\n\n <!-- AI Fix Message -->\n <div *ngIf=\"config.failureDetails.aiFixApplied\" class=\"cqa-px-3 cqa-pt-1.5 cqa-pb-2 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#FAF5FF]\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0F172A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3\">\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=\"url(#paint0_linear_4070_7201)\"/><path d=\"M8.00941 3.5C8.06489 3.52274 8.08859 3.57827 8.11131 3.62985C8.12269 3.6599 8.13314 3.69012 8.14329 3.72058C8.14726 3.73225 8.15123 3.74392 8.15532 3.75594C8.20806 3.913 8.25504 4.07175 8.30229 4.23038C8.31297 4.26619 8.32369 4.30199 8.33442 4.33778C8.38905 4.52004 8.44327 4.7024 8.49719 4.88484C8.50476 4.91047 8.51234 4.93609 8.51992 4.96171C8.54128 5.03395 8.56262 5.10619 8.58383 5.17847C8.62867 5.3312 8.67473 5.48347 8.72378 5.63501C8.72807 5.64827 8.73236 5.66152 8.73677 5.67518C8.8642 6.065 9.04482 6.41437 9.3409 6.71196C9.34823 6.7197 9.35556 6.72744 9.36312 6.73541C9.4895 6.86437 9.65169 6.96771 9.8138 7.05111C9.82206 7.05542 9.83031 7.05974 9.83882 7.06419C10.3159 7.30925 10.8895 7.41704 11.4062 7.5605C11.6326 7.6234 11.8583 7.68829 12.0832 7.75603C12.099 7.76079 12.1148 7.76554 12.1306 7.77028C12.1778 7.78445 12.225 7.79887 12.2721 7.81347C12.2831 7.81679 12.2941 7.82011 12.3054 7.82353C12.3703 7.84406 12.4324 7.86829 12.4857 7.91027C12.5019 7.94418 12.5019 7.94418 12.4975 7.9781C12.4456 8.02736 12.3942 8.05046 12.3258 8.073C12.316 8.07632 12.3062 8.07965 12.2961 8.08308C12.1806 8.12183 12.0635 8.15575 11.9463 8.18935C11.9222 8.1963 11.8981 8.20326 11.8741 8.21021C11.7257 8.25301 11.5771 8.2949 11.4283 8.33632C11.2323 8.39088 11.0366 8.44634 10.8411 8.50243C10.8091 8.51162 10.7771 8.52078 10.745 8.52991C10.5767 8.57786 10.4092 8.62753 10.2431 8.68208C10.2294 8.68659 10.2156 8.6911 10.2014 8.69574C9.64511 8.88082 9.2211 9.22609 8.95571 9.73099C8.81263 10.0148 8.72823 10.3216 8.64214 10.6245C8.61884 10.7062 8.59409 10.7875 8.56905 10.8687C8.5494 10.9326 8.5302 10.9966 8.51149 11.0608C8.50926 11.0684 8.50703 11.0761 8.50473 11.0839C8.49394 11.1209 8.48319 11.1579 8.47252 11.195C8.44519 11.2888 8.41578 11.3819 8.38555 11.4749C8.33191 11.6402 8.2831 11.8067 8.23459 11.9735C8.16144 12.2246 8.16144 12.2246 8.11997 12.3453C8.11721 12.3534 8.11446 12.3615 8.11163 12.3698C8.09649 12.4128 8.08092 12.4523 8.05226 12.4887C8.00867 12.4979 8.00867 12.4979 7.96951 12.5C7.92473 12.4376 7.89508 12.3771 7.87133 12.3051C7.86787 12.2949 7.86441 12.2847 7.86085 12.2741C7.81684 12.1425 7.77751 12.0095 7.73817 11.8765C7.72916 11.846 7.72011 11.8156 7.71106 11.7852C7.6436 11.5586 7.57725 11.3317 7.51101 11.1048C7.23507 9.98224 7.23507 9.98224 6.539 9.07466C6.52784 9.06596 6.51669 9.05726 6.50519 9.0483C6.04913 8.69902 5.44834 8.5697 4.89815 8.41813C4.76207 8.38062 4.62605 8.34293 4.49003 8.30523C4.47814 8.30193 4.47814 8.30193 4.466 8.29857C4.26981 8.24417 4.07367 8.18963 3.87822 8.13283C3.86996 8.13045 3.86169 8.12806 3.85317 8.12561C3.5529 8.03883 3.5529 8.03883 3.50065 7.9781C3.49917 7.95054 3.49917 7.95054 3.51247 7.92157C3.56708 7.8704 3.62008 7.84848 3.69216 7.82619C3.7026 7.82284 3.71303 7.81948 3.72379 7.81603C3.75575 7.80582 3.78779 7.79584 3.81985 7.78592C3.829 7.78305 3.83815 7.78017 3.84758 7.77722C3.91228 7.75693 3.97722 7.7374 4.04226 7.71809C4.05824 7.71332 4.05824 7.71332 4.07454 7.70846C4.35227 7.62587 4.63181 7.549 4.91126 7.47196C5.1195 7.41455 5.32738 7.35618 5.5346 7.29548C5.54413 7.29271 5.55365 7.28993 5.56346 7.28707C6.0435 7.14696 6.51278 6.94816 6.82274 6.5537C6.82738 6.54785 6.83202 6.542 6.8368 6.53597C7.18197 6.09815 7.31658 5.56572 7.46696 5.04621C7.51642 4.87535 7.56649 4.70464 7.61673 4.53399C7.63064 4.48673 7.64453 4.43947 7.65836 4.39219C7.71394 4.20229 7.77035 4.01264 7.83 3.82386C7.83558 3.80619 7.84114 3.7885 7.84666 3.77081C7.93017 3.50399 7.93017 3.50399 8.00941 3.5Z\" fill=\"white\"/><path d=\"M10.7358 4.05535C10.7901 4.11409 10.801 4.18312 10.8179 4.25813C10.8742 4.49376 10.9392 4.71042 11.1645 4.8473C11.3036 4.92083 11.4693 4.9543 11.6234 4.9859C11.6884 4.99951 11.7434 5.01758 11.7991 5.0537C11.8117 5.07278 11.8117 5.07278 11.8109 5.10598C11.798 5.14637 11.7867 5.15939 11.7526 5.18582C11.7153 5.19775 11.7153 5.19775 11.6706 5.20702C11.6536 5.21074 11.6367 5.21449 11.6198 5.21828C11.6107 5.22029 11.6017 5.2223 11.5924 5.22437C11.3168 5.28531 11.3168 5.28531 11.0787 5.42322C11.071 5.42918 11.0632 5.43514 11.0552 5.44128C10.885 5.58479 10.849 5.82351 10.7978 6.0235C10.7949 6.03448 10.7919 6.04546 10.7889 6.05678C10.7864 6.0665 10.7838 6.07622 10.7812 6.08624C10.7702 6.11593 10.7587 6.13528 10.7358 6.15803C10.6722 6.16576 10.6722 6.16576 10.6413 6.15803C10.592 6.12155 10.581 6.07999 10.5682 6.02414C10.566 6.01549 10.5639 6.00685 10.5616 5.99794C10.5548 5.97032 10.5481 5.94266 10.5415 5.91498C10.4897 5.69946 10.4311 5.488 10.2244 5.36167C10.0628 5.2755 9.86634 5.23475 9.68575 5.20185C9.63625 5.19199 9.60789 5.1796 9.57725 5.1406C9.5706 5.10104 9.5706 5.10104 9.57725 5.06147C9.62435 5.01486 9.6739 5.00348 9.73759 4.9894C9.75766 4.98465 9.77772 4.97987 9.79777 4.97505C9.80813 4.97258 9.81849 4.97011 9.82917 4.96756C9.882 4.95456 9.93431 4.93998 9.9866 4.92511C9.99611 4.92247 10.0056 4.91984 10.0154 4.91712C10.1217 4.88673 10.2134 4.84786 10.2984 4.77885C10.3063 4.77261 10.3143 4.76638 10.3224 4.75995C10.4547 4.64614 10.4996 4.47516 10.5404 4.31562C10.5435 4.30351 10.5466 4.2914 10.5498 4.27892C10.556 4.25459 10.5621 4.23023 10.5681 4.20585C10.5723 4.18888 10.5723 4.18888 10.5767 4.17157C10.5791 4.16144 10.5816 4.1513 10.5842 4.14086C10.5951 4.1086 10.6094 4.08326 10.6294 4.05535C10.668 4.03692 10.695 4.04525 10.7358 4.05535Z\" fill=\"#EDE9FE\"/><path d=\"M5.29554 9.74722C5.3096 9.74731 5.3096 9.74731 5.32395 9.74741C5.42486 9.75035 5.49314 9.78127 5.56745 9.84613C5.65393 9.93545 5.69386 10.0362 5.69159 10.1566C5.68188 10.2542 5.62167 10.3395 5.54782 10.4055C5.4609 10.4725 5.37322 10.4947 5.26215 10.4916C5.1685 10.4812 5.08039 10.4386 5.01402 10.3746C4.93147 10.2669 4.90734 10.1682 4.91944 10.0355C4.94443 9.93104 5.01646 9.84625 5.1086 9.78678C5.1726 9.75576 5.22408 9.74665 5.29554 9.74722Z\" fill=\"white\"/><defs><linearGradient id=\"paint0_linear_4070_7201\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#8B5CF6\"/><stop offset=\"1\" stop-color=\"#9333EA\"/></linearGradient></defs></svg></div>\n {{ config.failureDetails.aiFixMessage || 'AI Insights' }}\n <span *ngIf=\"config?.confidence\" class=\"cqa-inline-block cqa-py-[2px] cqa-px-[10px] cqa-text-center cqa-rounded-[5px] cqa-bg-[#EDE9FE] cqa-text-[8px] cqa-leading-[12px] cqa-text-[#6D28D9]\">{{ config?.confidence }} confidence</span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Reasoning</div>\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <li *ngFor=\"let point of config.reasoning\" class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n {{ point }}</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n\n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"config.failureDetails?.screenshots?.baseline || ''\"\n [currentUrl]=\"config.failureDetails?.screenshots?.current || ''\"\n [differenceUrl]=\"config.failureDetails?.screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>", components: [{ type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: ["screenshots", "logs", "showFullLogsLink"], outputs: ["makeBaseline", "uploadBaseline", "analyze", "viewFullLogs", "imageClick"] }, { type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: ["baselineUrl", "currentUrl", "differenceUrl", "title", "subtitle", "isOpen", "initialView"], outputs: ["close"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UpdatedFailedStepComponent, decorators: [{
|
|
6230
|
+
type: Component,
|
|
6231
|
+
args: [{ selector: 'cqa-updated-failed-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <!-- Header -->\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-p-2\" style=\"border-left: '2px solid #FAC7C7'; border-bottom: '1px solid #FEE2E2'\">\n <!-- Sub-steps -->\n\n <!-- Expected vs Actual Comparison -->\n <div *ngIf=\"config.failureDetails\" class=\"cqa-grid cqa-grid-cols-2 cqa-rounded cqa-overflow-hidden cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- Expected Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-white\" style=\"border-right: 1px solid #E5E7EB;\">\n <div class=\"cqa-text-[#9CA3AF]\">EXPECTED</div>\n <div class=\"cqa-text-[#374151]\">\n {{ config.failureDetails.expected }}\n </div>\n </div>\n\n <!-- Actual Column -->\n <div class=\"cqa-p-1.5 cqa-text-[9px] cqa-leading-[20px] cqa-bg-[#FEF8F8]\">\n <div class=\"cqa-text-[#F87171]\">ACTUAL</div>\n <div class=\"cqa-text-[#991B1B]\">\n {{ config.failureDetails.actual }}\n </div>\n </div>\n </div>\n\n <!-- Visual Comparison Component -->\n <cqa-visual-comparison\n *ngIf=\"config.failureDetails\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeBaseline)=\"onMakeBaseline()\"\n (uploadBaseline)=\"onUploadBaseline()\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\"\n (imageClick)=\"onImageClick($event)\">\n </cqa-visual-comparison>\n\n <!-- AI Fix Message -->\n <div *ngIf=\"config.failureDetails.aiFixApplied\" class=\"cqa-px-3 cqa-pt-1.5 cqa-pb-2 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#FAF5FF]\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0F172A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-3\">\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=\"url(#paint0_linear_4070_7201)\"/><path d=\"M8.00941 3.5C8.06489 3.52274 8.08859 3.57827 8.11131 3.62985C8.12269 3.6599 8.13314 3.69012 8.14329 3.72058C8.14726 3.73225 8.15123 3.74392 8.15532 3.75594C8.20806 3.913 8.25504 4.07175 8.30229 4.23038C8.31297 4.26619 8.32369 4.30199 8.33442 4.33778C8.38905 4.52004 8.44327 4.7024 8.49719 4.88484C8.50476 4.91047 8.51234 4.93609 8.51992 4.96171C8.54128 5.03395 8.56262 5.10619 8.58383 5.17847C8.62867 5.3312 8.67473 5.48347 8.72378 5.63501C8.72807 5.64827 8.73236 5.66152 8.73677 5.67518C8.8642 6.065 9.04482 6.41437 9.3409 6.71196C9.34823 6.7197 9.35556 6.72744 9.36312 6.73541C9.4895 6.86437 9.65169 6.96771 9.8138 7.05111C9.82206 7.05542 9.83031 7.05974 9.83882 7.06419C10.3159 7.30925 10.8895 7.41704 11.4062 7.5605C11.6326 7.6234 11.8583 7.68829 12.0832 7.75603C12.099 7.76079 12.1148 7.76554 12.1306 7.77028C12.1778 7.78445 12.225 7.79887 12.2721 7.81347C12.2831 7.81679 12.2941 7.82011 12.3054 7.82353C12.3703 7.84406 12.4324 7.86829 12.4857 7.91027C12.5019 7.94418 12.5019 7.94418 12.4975 7.9781C12.4456 8.02736 12.3942 8.05046 12.3258 8.073C12.316 8.07632 12.3062 8.07965 12.2961 8.08308C12.1806 8.12183 12.0635 8.15575 11.9463 8.18935C11.9222 8.1963 11.8981 8.20326 11.8741 8.21021C11.7257 8.25301 11.5771 8.2949 11.4283 8.33632C11.2323 8.39088 11.0366 8.44634 10.8411 8.50243C10.8091 8.51162 10.7771 8.52078 10.745 8.52991C10.5767 8.57786 10.4092 8.62753 10.2431 8.68208C10.2294 8.68659 10.2156 8.6911 10.2014 8.69574C9.64511 8.88082 9.2211 9.22609 8.95571 9.73099C8.81263 10.0148 8.72823 10.3216 8.64214 10.6245C8.61884 10.7062 8.59409 10.7875 8.56905 10.8687C8.5494 10.9326 8.5302 10.9966 8.51149 11.0608C8.50926 11.0684 8.50703 11.0761 8.50473 11.0839C8.49394 11.1209 8.48319 11.1579 8.47252 11.195C8.44519 11.2888 8.41578 11.3819 8.38555 11.4749C8.33191 11.6402 8.2831 11.8067 8.23459 11.9735C8.16144 12.2246 8.16144 12.2246 8.11997 12.3453C8.11721 12.3534 8.11446 12.3615 8.11163 12.3698C8.09649 12.4128 8.08092 12.4523 8.05226 12.4887C8.00867 12.4979 8.00867 12.4979 7.96951 12.5C7.92473 12.4376 7.89508 12.3771 7.87133 12.3051C7.86787 12.2949 7.86441 12.2847 7.86085 12.2741C7.81684 12.1425 7.77751 12.0095 7.73817 11.8765C7.72916 11.846 7.72011 11.8156 7.71106 11.7852C7.6436 11.5586 7.57725 11.3317 7.51101 11.1048C7.23507 9.98224 7.23507 9.98224 6.539 9.07466C6.52784 9.06596 6.51669 9.05726 6.50519 9.0483C6.04913 8.69902 5.44834 8.5697 4.89815 8.41813C4.76207 8.38062 4.62605 8.34293 4.49003 8.30523C4.47814 8.30193 4.47814 8.30193 4.466 8.29857C4.26981 8.24417 4.07367 8.18963 3.87822 8.13283C3.86996 8.13045 3.86169 8.12806 3.85317 8.12561C3.5529 8.03883 3.5529 8.03883 3.50065 7.9781C3.49917 7.95054 3.49917 7.95054 3.51247 7.92157C3.56708 7.8704 3.62008 7.84848 3.69216 7.82619C3.7026 7.82284 3.71303 7.81948 3.72379 7.81603C3.75575 7.80582 3.78779 7.79584 3.81985 7.78592C3.829 7.78305 3.83815 7.78017 3.84758 7.77722C3.91228 7.75693 3.97722 7.7374 4.04226 7.71809C4.05824 7.71332 4.05824 7.71332 4.07454 7.70846C4.35227 7.62587 4.63181 7.549 4.91126 7.47196C5.1195 7.41455 5.32738 7.35618 5.5346 7.29548C5.54413 7.29271 5.55365 7.28993 5.56346 7.28707C6.0435 7.14696 6.51278 6.94816 6.82274 6.5537C6.82738 6.54785 6.83202 6.542 6.8368 6.53597C7.18197 6.09815 7.31658 5.56572 7.46696 5.04621C7.51642 4.87535 7.56649 4.70464 7.61673 4.53399C7.63064 4.48673 7.64453 4.43947 7.65836 4.39219C7.71394 4.20229 7.77035 4.01264 7.83 3.82386C7.83558 3.80619 7.84114 3.7885 7.84666 3.77081C7.93017 3.50399 7.93017 3.50399 8.00941 3.5Z\" fill=\"white\"/><path d=\"M10.7358 4.05535C10.7901 4.11409 10.801 4.18312 10.8179 4.25813C10.8742 4.49376 10.9392 4.71042 11.1645 4.8473C11.3036 4.92083 11.4693 4.9543 11.6234 4.9859C11.6884 4.99951 11.7434 5.01758 11.7991 5.0537C11.8117 5.07278 11.8117 5.07278 11.8109 5.10598C11.798 5.14637 11.7867 5.15939 11.7526 5.18582C11.7153 5.19775 11.7153 5.19775 11.6706 5.20702C11.6536 5.21074 11.6367 5.21449 11.6198 5.21828C11.6107 5.22029 11.6017 5.2223 11.5924 5.22437C11.3168 5.28531 11.3168 5.28531 11.0787 5.42322C11.071 5.42918 11.0632 5.43514 11.0552 5.44128C10.885 5.58479 10.849 5.82351 10.7978 6.0235C10.7949 6.03448 10.7919 6.04546 10.7889 6.05678C10.7864 6.0665 10.7838 6.07622 10.7812 6.08624C10.7702 6.11593 10.7587 6.13528 10.7358 6.15803C10.6722 6.16576 10.6722 6.16576 10.6413 6.15803C10.592 6.12155 10.581 6.07999 10.5682 6.02414C10.566 6.01549 10.5639 6.00685 10.5616 5.99794C10.5548 5.97032 10.5481 5.94266 10.5415 5.91498C10.4897 5.69946 10.4311 5.488 10.2244 5.36167C10.0628 5.2755 9.86634 5.23475 9.68575 5.20185C9.63625 5.19199 9.60789 5.1796 9.57725 5.1406C9.5706 5.10104 9.5706 5.10104 9.57725 5.06147C9.62435 5.01486 9.6739 5.00348 9.73759 4.9894C9.75766 4.98465 9.77772 4.97987 9.79777 4.97505C9.80813 4.97258 9.81849 4.97011 9.82917 4.96756C9.882 4.95456 9.93431 4.93998 9.9866 4.92511C9.99611 4.92247 10.0056 4.91984 10.0154 4.91712C10.1217 4.88673 10.2134 4.84786 10.2984 4.77885C10.3063 4.77261 10.3143 4.76638 10.3224 4.75995C10.4547 4.64614 10.4996 4.47516 10.5404 4.31562C10.5435 4.30351 10.5466 4.2914 10.5498 4.27892C10.556 4.25459 10.5621 4.23023 10.5681 4.20585C10.5723 4.18888 10.5723 4.18888 10.5767 4.17157C10.5791 4.16144 10.5816 4.1513 10.5842 4.14086C10.5951 4.1086 10.6094 4.08326 10.6294 4.05535C10.668 4.03692 10.695 4.04525 10.7358 4.05535Z\" fill=\"#EDE9FE\"/><path d=\"M5.29554 9.74722C5.3096 9.74731 5.3096 9.74731 5.32395 9.74741C5.42486 9.75035 5.49314 9.78127 5.56745 9.84613C5.65393 9.93545 5.69386 10.0362 5.69159 10.1566C5.68188 10.2542 5.62167 10.3395 5.54782 10.4055C5.4609 10.4725 5.37322 10.4947 5.26215 10.4916C5.1685 10.4812 5.08039 10.4386 5.01402 10.3746C4.93147 10.2669 4.90734 10.1682 4.91944 10.0355C4.94443 9.93104 5.01646 9.84625 5.1086 9.78678C5.1726 9.75576 5.22408 9.74665 5.29554 9.74722Z\" fill=\"white\"/><defs><linearGradient id=\"paint0_linear_4070_7201\" x1=\"0\" y1=\"0\" x2=\"16\" y2=\"16\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#8B5CF6\"/><stop offset=\"1\" stop-color=\"#9333EA\"/></linearGradient></defs></svg></div>\n {{ config.failureDetails.aiFixMessage || 'AI Insights' }}\n <span *ngIf=\"config?.confidence\" class=\"cqa-inline-block cqa-py-[2px] cqa-px-[10px] cqa-text-center cqa-rounded-[5px] cqa-bg-[#EDE9FE] cqa-text-[8px] cqa-leading-[12px] cqa-text-[#6D28D9]\">{{ config?.confidence }} confidence</span>\n </div>\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#64748B]\">Reasoning</div>\n <ul class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <li *ngFor=\"let point of config.reasoning\" class=\"cqa-flex cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#475569]\">\n <div class=\"cqa-mt-1\"><svg width=\"6\" height=\"6\" viewBox=\"0 0 6 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"6\" height=\"6\" rx=\"3\" fill=\"#A78BFA\"/></svg></div>\n {{ point }}</li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n\n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"config.failureDetails?.screenshots?.baseline || ''\"\n [currentUrl]=\"config.failureDetails?.screenshots?.current || ''\"\n [differenceUrl]=\"config.failureDetails?.screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>", styles: [] }]
|
|
6232
|
+
}], propDecorators: { timingBreakdown: [{
|
|
6233
|
+
type: Input
|
|
6234
|
+
}], expanded: [{
|
|
6235
|
+
type: Input
|
|
6236
|
+
}], subSteps: [{
|
|
6237
|
+
type: Input
|
|
6238
|
+
}], failureDetails: [{
|
|
6239
|
+
type: Input
|
|
6240
|
+
}], reasoning: [{
|
|
6241
|
+
type: Input
|
|
6242
|
+
}], confidence: [{
|
|
6243
|
+
type: Input
|
|
6244
|
+
}] } });
|
|
6245
|
+
|
|
6246
|
+
class ViewMoreFailedStepButtonComponent {
|
|
6247
|
+
constructor() {
|
|
6248
|
+
this.viewMoreClick = new EventEmitter();
|
|
6249
|
+
this.isExpanded = false;
|
|
6250
|
+
}
|
|
6251
|
+
onViewMoreClick() {
|
|
6252
|
+
this.isExpanded = !this.isExpanded;
|
|
6253
|
+
this.viewMoreClick.emit(this.isExpanded);
|
|
6254
|
+
}
|
|
6255
|
+
}
|
|
6256
|
+
ViewMoreFailedStepButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewMoreFailedStepButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6257
|
+
ViewMoreFailedStepButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: { timingBreakdown: "timingBreakdown", subSteps: "subSteps", failureDetails: "failureDetails" }, outputs: { viewMoreClick: "viewMoreClick" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-end\">\n <div class=\"cqa-flex-1\"></div>\n <button\n (click)=\"onViewMoreClick()\"\n class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#3F43EE] cqa-font-medium cqa-text-[10px] cqa-bg-transparent cqa-border-none cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\">\n <span>View More</span>\n <span [class.cqa-rotate-90]=\"isExpanded\" class=\"material-symbols-outlined cqa-text-[10px]\">chevron_right</span>\n </button>\n </div>\n</div>\n\n" });
|
|
6258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewMoreFailedStepButtonComponent, decorators: [{
|
|
6259
|
+
type: Component,
|
|
6260
|
+
args: [{ selector: 'cqa-view-more-failed-step-button', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-end\">\n <div class=\"cqa-flex-1\"></div>\n <button\n (click)=\"onViewMoreClick()\"\n class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#3F43EE] cqa-font-medium cqa-text-[10px] cqa-bg-transparent cqa-border-none cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\">\n <span>View More</span>\n <span [class.cqa-rotate-90]=\"isExpanded\" class=\"material-symbols-outlined cqa-text-[10px]\">chevron_right</span>\n </button>\n </div>\n</div>\n\n", styles: [] }]
|
|
6261
|
+
}], propDecorators: { timingBreakdown: [{
|
|
6262
|
+
type: Input
|
|
6263
|
+
}], subSteps: [{
|
|
6264
|
+
type: Input
|
|
6265
|
+
}], failureDetails: [{
|
|
6266
|
+
type: Input
|
|
6267
|
+
}], viewMoreClick: [{
|
|
6268
|
+
type: Output
|
|
6269
|
+
}] } });
|
|
6270
|
+
|
|
6054
6271
|
class AIAgentStepComponent extends BaseStepComponent {
|
|
6055
6272
|
constructor() {
|
|
6056
6273
|
super(...arguments);
|
|
@@ -6882,119 +7099,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6882
7099
|
type: Input
|
|
6883
7100
|
}] } });
|
|
6884
7101
|
|
|
6885
|
-
class VisualDifferenceModalComponent {
|
|
6886
|
-
constructor() {
|
|
6887
|
-
this.baselineUrl = '';
|
|
6888
|
-
this.currentUrl = '';
|
|
6889
|
-
this.differenceUrl = '';
|
|
6890
|
-
this.title = 'Visual Difference';
|
|
6891
|
-
this.subtitle = 'Comparing Baseline vs. Current Execution';
|
|
6892
|
-
this.isOpen = false;
|
|
6893
|
-
this.close = new EventEmitter();
|
|
6894
|
-
this.currentView = 'baseline';
|
|
6895
|
-
this.baselineImageError = false;
|
|
6896
|
-
this.currentImageError = false;
|
|
6897
|
-
this.differenceImageError = false;
|
|
6898
|
-
}
|
|
6899
|
-
ngOnChanges(changes) {
|
|
6900
|
-
if (changes['baselineUrl']) {
|
|
6901
|
-
this.baselineImageError = false;
|
|
6902
|
-
}
|
|
6903
|
-
if (changes['currentUrl']) {
|
|
6904
|
-
this.currentImageError = false;
|
|
6905
|
-
}
|
|
6906
|
-
if (changes['differenceUrl']) {
|
|
6907
|
-
this.differenceImageError = false;
|
|
6908
|
-
}
|
|
6909
|
-
}
|
|
6910
|
-
get currentImageUrl() {
|
|
6911
|
-
switch (this.currentView) {
|
|
6912
|
-
case 'baseline':
|
|
6913
|
-
return this.baselineUrl;
|
|
6914
|
-
case 'current':
|
|
6915
|
-
return this.currentUrl;
|
|
6916
|
-
case 'difference':
|
|
6917
|
-
return this.differenceUrl;
|
|
6918
|
-
default:
|
|
6919
|
-
return '';
|
|
6920
|
-
}
|
|
6921
|
-
}
|
|
6922
|
-
onClose() {
|
|
6923
|
-
this.close.emit();
|
|
6924
|
-
}
|
|
6925
|
-
onBackdropClick(event) {
|
|
6926
|
-
const target = event.target;
|
|
6927
|
-
const currentTarget = event.currentTarget;
|
|
6928
|
-
if (target === currentTarget || target.classList.contains('modal-backdrop')) {
|
|
6929
|
-
this.onClose();
|
|
6930
|
-
}
|
|
6931
|
-
}
|
|
6932
|
-
onImageError(event) {
|
|
6933
|
-
const img = event.target;
|
|
6934
|
-
img.style.display = 'none';
|
|
6935
|
-
}
|
|
6936
|
-
onThumbnailError(type, event) {
|
|
6937
|
-
const img = event.target;
|
|
6938
|
-
img.style.display = 'none';
|
|
6939
|
-
if (type === 'baseline') {
|
|
6940
|
-
this.baselineImageError = true;
|
|
6941
|
-
}
|
|
6942
|
-
else if (type === 'current') {
|
|
6943
|
-
this.currentImageError = true;
|
|
6944
|
-
}
|
|
6945
|
-
else if (type === 'difference') {
|
|
6946
|
-
this.differenceImageError = true;
|
|
6947
|
-
}
|
|
6948
|
-
}
|
|
6949
|
-
hasThumbnailImage(type) {
|
|
6950
|
-
if (type === 'baseline') {
|
|
6951
|
-
return !!this.baselineUrl && !this.baselineImageError;
|
|
6952
|
-
}
|
|
6953
|
-
else if (type === 'current') {
|
|
6954
|
-
return !!this.currentUrl && !this.currentImageError;
|
|
6955
|
-
}
|
|
6956
|
-
else if (type === 'difference') {
|
|
6957
|
-
return !!this.differenceUrl && !this.differenceImageError;
|
|
6958
|
-
}
|
|
6959
|
-
return false;
|
|
6960
|
-
}
|
|
6961
|
-
setView(view) {
|
|
6962
|
-
this.currentView = view;
|
|
6963
|
-
}
|
|
6964
|
-
navigatePrevious() {
|
|
6965
|
-
const views = ['baseline', 'current', 'difference'];
|
|
6966
|
-
const currentIndex = views.indexOf(this.currentView);
|
|
6967
|
-
const previousIndex = currentIndex > 0 ? currentIndex - 1 : views.length - 1;
|
|
6968
|
-
this.currentView = views[previousIndex];
|
|
6969
|
-
}
|
|
6970
|
-
navigateNext() {
|
|
6971
|
-
const views = ['baseline', 'current', 'difference'];
|
|
6972
|
-
const currentIndex = views.indexOf(this.currentView);
|
|
6973
|
-
const nextIndex = currentIndex < views.length - 1 ? currentIndex + 1 : 0;
|
|
6974
|
-
this.currentView = views[nextIndex];
|
|
6975
|
-
}
|
|
6976
|
-
}
|
|
6977
|
-
VisualDifferenceModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6978
|
-
VisualDifferenceModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualDifferenceModalComponent, selector: "cqa-visual-difference-modal", inputs: { baselineUrl: "baselineUrl", currentUrl: "currentUrl", differenceUrl: "differenceUrl", title: "title", subtitle: "subtitle", isOpen: "isOpen" }, outputs: { close: "close" }, usesOnChanges: true, ngImport: i0, template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6979
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualDifferenceModalComponent, decorators: [{
|
|
6980
|
-
type: Component,
|
|
6981
|
-
args: [{ selector: 'cqa-visual-difference-modal', template: "<div \n *ngIf=\"isOpen\"\n class=\"modal-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n (click)=\"onBackdropClick($event)\">\n <div \n class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-xl cqa-flex cqa-flex-col cqa-max-w-[90vw] cqa-h-[70vh] cqa-w-full cqa-overflow-hidden\"\n style=\"max-width: 1200px;\"\n (click)=\"$event.stopPropagation()\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-6 cqa-pb-4 cqa-border-b cqa-border-gray-200 cqa-bg-[#FBFCFF] cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <h2 class=\"cqa-text-[18px] cqa-font-medium cqa-text-[#0B0B0B] cqa-m-0\">\n {{ title }}\n </h2>\n <p class=\"cqa-text-xs cqa-text-[#6D6D74] cqa-m-0\">{{ subtitle }}</p>\n </div>\n \n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <button\n type=\"button\"\n class=\"cqa-p-1.5 cqa-rounded-md cqa-text-gray-400 hover:cqa-text-gray-600 hover:cqa-bg-gray-100 cqa-transition-colors cqa-outline-none\"\n (click)=\"onClose(); $event.stopPropagation()\"\n aria-label=\"Close modal\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n </div>\n \n <div class=\"cqa-flex-1 cqa-overflow-auto cqa-relative\">\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-left-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigatePrevious()\" style=\"transform: translate(-50%, -50%);\"\n aria-label=\"Previous image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"cqa-w-full cqa-h-full cqa-flex cqa-items-center cqa-justify-center cqa-p-8 cqa-px-16 cqa-overflow-auto\">\n <div *ngIf=\"currentImageUrl\" \n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-h-full\"\n [style.transition]=\"'transform 0.2s ease-in-out'\">\n <img\n [src]=\"currentImageUrl\"\n [alt]=\"currentView + ' image'\"\n class=\"cqa-max-w-full cqa-max-h-full cqa-object-contain cqa-rounded-md cqa-shadow-lg cqa-bg-white\"\n (error)=\"onImageError($event)\"\n />\n </div>\n \n <div *ngIf=\"!currentImageUrl\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-6\">\n <svg width=\"80\" height=\"80\" viewBox=\"0 0 80 80\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"12\" y=\"12\" width=\"56\" height=\"56\" rx=\"4\" stroke=\"#9CA3AF\" stroke-width=\"2\"/>\n <path d=\"M12 52L28 36L40 48L68 20\" stroke=\"#9CA3AF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <circle cx=\"52\" cy=\"28\" r=\"6\" fill=\"#9CA3AF\"/>\n </svg>\n <p class=\"cqa-text-gray-500 cqa-text-sm cqa-font-medium cqa-mt-2\">No image available</p>\n </div>\n </div>\n\n <button\n type=\"button\"\n class=\"cqa-absolute cqa-right-8 cqa-top-1/2 cqa-transform -cqa-translate-y-1/2 cqa-z-10 cqa-w-10 cqa-h-10 cqa-rounded-full cqa-bg-[#00000080] cqa-text-white hover:cqa-bg-gray-700 cqa-transition-colors cqa-flex cqa-items-center cqa-justify-center cqa-outline-none cqa-shadow-lg\"\n (click)=\"navigateNext()\" style=\"transform: translate(50%, -50%);\"\n aria-label=\"Next image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-p-4 cqa-bg-white\" style=\"border-top: 1px solid #D8D9FC;\">\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'baseline' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'baseline' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('baseline')\">\n <img \n *ngIf=\"hasThumbnailImage('baseline')\"\n [src]=\"baselineUrl\" \n alt=\"Baseline image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('baseline', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('baseline')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Baseline</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'current' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'current' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('current')\">\n <img \n *ngIf=\"hasThumbnailImage('current')\"\n [src]=\"currentUrl\" \n alt=\"Current image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('current', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('current')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Current</span>\n </div>\n </div>\n\n <div class=\"cqa-h-[52px] cqa-w-[76px] cqa-rounded-[6px] cqa-relative cqa-overflow-hidden cqa-cursor-pointer\" style=\"border: 2px solid #374151;\" [ngStyle]=\"{'border-color': currentView === 'difference' ? '#3F43EE' : '#374151', 'box-shadow': currentView === 'difference' ? '0px 0px 0px 2px #3B82F64D' : 'none'}\" (click)=\"setView('difference')\">\n <img \n *ngIf=\"hasThumbnailImage('difference')\"\n [src]=\"differenceUrl\" \n alt=\"Difference image\" \n class=\"cqa-h-full cqa-w-full cqa-object-cover\"\n (error)=\"onThumbnailError('difference', $event)\">\n <div \n *ngIf=\"!hasThumbnailImage('difference')\"\n class=\"cqa-h-full cqa-w-full cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-text-gray-400\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"2\"/>\n <path d=\"M3 15L9 9L13 13L21 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n <div class=\"cqa-absolute cqa-bottom-0 cqa-left-0 cqa-w-full cqa-h-[19px] cqa-p-[2px] cqa-text-center cqa-bg-[#00000080] cqa-flex cqa-items-center cqa-justify-center\">\n <span class=\"cqa-text-[10px] cqa-text-white cqa-font-medium cqa-capitalize\">Difference</span>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [] }]
|
|
6982
|
-
}], propDecorators: { baselineUrl: [{
|
|
6983
|
-
type: Input
|
|
6984
|
-
}], currentUrl: [{
|
|
6985
|
-
type: Input
|
|
6986
|
-
}], differenceUrl: [{
|
|
6987
|
-
type: Input
|
|
6988
|
-
}], title: [{
|
|
6989
|
-
type: Input
|
|
6990
|
-
}], subtitle: [{
|
|
6991
|
-
type: Input
|
|
6992
|
-
}], isOpen: [{
|
|
6993
|
-
type: Input
|
|
6994
|
-
}], close: [{
|
|
6995
|
-
type: Output
|
|
6996
|
-
}] } });
|
|
6997
|
-
|
|
6998
7102
|
class ConfigurationCardComponent {
|
|
6999
7103
|
constructor() {
|
|
7000
7104
|
this.data = [];
|
|
@@ -8037,6 +8141,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
8037
8141
|
LoopStepComponent,
|
|
8038
8142
|
ConditionStepComponent,
|
|
8039
8143
|
FailedStepComponent,
|
|
8144
|
+
UpdatedFailedStepComponent,
|
|
8145
|
+
ViewMoreFailedStepButtonComponent,
|
|
8040
8146
|
SelfHealAnalysisComponent,
|
|
8041
8147
|
AIAgentStepComponent,
|
|
8042
8148
|
ApiStepComponent,
|
|
@@ -8111,6 +8217,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
|
|
|
8111
8217
|
LoopStepComponent,
|
|
8112
8218
|
ConditionStepComponent,
|
|
8113
8219
|
FailedStepComponent,
|
|
8220
|
+
UpdatedFailedStepComponent,
|
|
8221
|
+
ViewMoreFailedStepButtonComponent,
|
|
8114
8222
|
SelfHealAnalysisComponent,
|
|
8115
8223
|
AIAgentStepComponent,
|
|
8116
8224
|
ApiStepComponent,
|
|
@@ -8141,6 +8249,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
|
|
|
8141
8249
|
['loop', LoopStepComponent],
|
|
8142
8250
|
['condition', ConditionStepComponent],
|
|
8143
8251
|
['failed', FailedStepComponent],
|
|
8252
|
+
['updated-failed', UpdatedFailedStepComponent],
|
|
8144
8253
|
['ai-agent', AIAgentStepComponent],
|
|
8145
8254
|
['api', ApiStepComponent],
|
|
8146
8255
|
['file-download', FileDownloadStepComponent],
|
|
@@ -8210,6 +8319,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
8210
8319
|
LoopStepComponent,
|
|
8211
8320
|
ConditionStepComponent,
|
|
8212
8321
|
FailedStepComponent,
|
|
8322
|
+
UpdatedFailedStepComponent,
|
|
8323
|
+
ViewMoreFailedStepButtonComponent,
|
|
8213
8324
|
SelfHealAnalysisComponent,
|
|
8214
8325
|
AIAgentStepComponent,
|
|
8215
8326
|
ApiStepComponent,
|
|
@@ -8290,6 +8401,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
8290
8401
|
LoopStepComponent,
|
|
8291
8402
|
ConditionStepComponent,
|
|
8292
8403
|
FailedStepComponent,
|
|
8404
|
+
UpdatedFailedStepComponent,
|
|
8405
|
+
ViewMoreFailedStepButtonComponent,
|
|
8293
8406
|
SelfHealAnalysisComponent,
|
|
8294
8407
|
AIAgentStepComponent,
|
|
8295
8408
|
ApiStepComponent,
|
|
@@ -8321,6 +8434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
8321
8434
|
['loop', LoopStepComponent],
|
|
8322
8435
|
['condition', ConditionStepComponent],
|
|
8323
8436
|
['failed', FailedStepComponent],
|
|
8437
|
+
['updated-failed', UpdatedFailedStepComponent],
|
|
8324
8438
|
['ai-agent', AIAgentStepComponent],
|
|
8325
8439
|
['api', ApiStepComponent],
|
|
8326
8440
|
['file-download', FileDownloadStepComponent],
|
|
@@ -8465,5 +8579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
8465
8579
|
* Generated bundle index. Do not edit.
|
|
8466
8580
|
*/
|
|
8467
8581
|
|
|
8468
|
-
export { AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, 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, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepGroupComponent, StepRendererComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
8582
|
+
export { AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, 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, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepGroupComponent, StepRendererComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
|
|
8469
8583
|
//# sourceMappingURL=cqa-lib-cqa-ui.mjs.map
|