@cqa-lib/cqa-ui 1.1.35 → 1.1.37
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/ai-agent-step/ai-agent-step.component.mjs +47 -7
- package/esm2020/lib/execution-screen/api-step/api-step.component.mjs +46 -7
- package/esm2020/lib/execution-screen/basic-step/basic-step.component.mjs +35 -21
- package/esm2020/lib/execution-screen/condition-step/condition-step.component.mjs +45 -6
- package/esm2020/lib/execution-screen/execution-step.models.mjs +1 -1
- package/esm2020/lib/execution-screen/failed-step/failed-step.component.mjs +31 -6
- package/esm2020/lib/execution-screen/file-download-step/file-download-step.component.mjs +5 -2
- package/esm2020/lib/execution-screen/loop-step/loop-step.component.mjs +46 -7
- package/esm2020/lib/execution-screen/self-heal-analysis/self-heal-analysis.component.mjs +5 -4
- package/esm2020/lib/execution-screen/step-group/step-group.component.mjs +5 -2
- package/esm2020/lib/execution-screen/updated-failed-step/updated-failed-step.component.mjs +31 -6
- package/esm2020/lib/execution-screen/visual-comparison/visual-comparison.component.mjs +39 -10
- package/fesm2015/cqa-lib-cqa-ui.mjs +301 -47
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +299 -47
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/execution-screen/ai-agent-step/ai-agent-step.component.d.ts +23 -3
- package/lib/execution-screen/api-step/api-step.component.d.ts +23 -3
- package/lib/execution-screen/basic-step/basic-step.component.d.ts +17 -5
- package/lib/execution-screen/condition-step/condition-step.component.d.ts +22 -2
- package/lib/execution-screen/execution-step.models.d.ts +1 -0
- package/lib/execution-screen/failed-step/failed-step.component.d.ts +12 -4
- package/lib/execution-screen/file-download-step/file-download-step.component.d.ts +2 -1
- package/lib/execution-screen/loop-step/loop-step.component.d.ts +22 -2
- package/lib/execution-screen/step-group/step-group.component.d.ts +2 -1
- package/lib/execution-screen/updated-failed-step/updated-failed-step.component.d.ts +11 -4
- package/lib/execution-screen/visual-comparison/visual-comparison.component.d.ts +18 -5
- package/package.json +1 -1
|
@@ -5572,10 +5572,10 @@ class SelfHealAnalysisComponent {
|
|
|
5572
5572
|
}
|
|
5573
5573
|
}
|
|
5574
5574
|
SelfHealAnalysisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5575
|
-
SelfHealAnalysisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: { originalLocator: "originalLocator", healedLocator: "healedLocator", confidence: "confidence", healMethod: "healMethod" }, outputs: { action: "action" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\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)=\"onAccept()\"\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-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n Accept\n </button>\n <button \n (click)=\"onReject()\"\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-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button>\n <button \n (click)=\"onModifyAccept()\"\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-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n Modify & Accept\n </button>\n </div>\n</div>\n", directives: [{ type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
5575
|
+
SelfHealAnalysisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: { originalLocator: "originalLocator", healedLocator: "healedLocator", confidence: "confidence", healMethod: "healMethod" }, outputs: { action: "action" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\" *ngIf=\"data?.confidence\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <!-- <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\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)=\"onAccept()\"\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-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n Accept\n </button>\n <!-- <button \n (click)=\"onReject()\"\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-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button> -->\n <button \n (click)=\"onModifyAccept()\"\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-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n Modify & Accept\n </button>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
5576
5576
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelfHealAnalysisComponent, decorators: [{
|
|
5577
5577
|
type: Component,
|
|
5578
|
-
args: [{ selector: 'cqa-self-heal-analysis', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\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)=\"onAccept()\"\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-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n Accept\n </button>\n <button \n (click)=\"onReject()\"\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-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button>\n <button \n (click)=\"onModifyAccept()\"\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-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n Modify & Accept\n </button>\n </div>\n</div>\n", styles: [] }]
|
|
5578
|
+
args: [{ selector: 'cqa-self-heal-analysis', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-bg-[#E7F8F2] cqa-border cqa-border-solid cqa-border-[#0B9D68] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-px-4 cqa-py-3 cqa-rounded-lg\">\n <!-- Header -->\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-1.5\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <div><svg width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"17\" height=\"17\" rx=\"8.5\" fill=\"#AEE9D4\"/><path d=\"M8.50941 4C8.56489 4.02274 8.58859 4.07827 8.61131 4.12985C8.62269 4.1599 8.63314 4.19012 8.64329 4.22058C8.64726 4.23225 8.65123 4.24392 8.65532 4.25594C8.70806 4.413 8.75504 4.57175 8.80229 4.73038C8.81297 4.76619 8.82369 4.80199 8.83442 4.83778C8.88905 5.02004 8.94327 5.2024 8.99719 5.38484C9.00476 5.41047 9.01234 5.43609 9.01992 5.46171C9.04128 5.53395 9.06262 5.60619 9.08383 5.67847C9.12867 5.8312 9.17473 5.98347 9.22378 6.13501C9.22807 6.14827 9.23236 6.16152 9.23677 6.17518C9.3642 6.565 9.54482 6.91437 9.8409 7.21196C9.84823 7.2197 9.85556 7.22744 9.86312 7.23541C9.9895 7.36437 10.1517 7.46771 10.3138 7.55111C10.3221 7.55542 10.3303 7.55974 10.3388 7.56419C10.8159 7.80925 11.3895 7.91704 11.9062 8.0605C12.1326 8.1234 12.3583 8.18829 12.5832 8.25603C12.599 8.26079 12.6148 8.26554 12.6306 8.27028C12.6778 8.28445 12.725 8.29887 12.7721 8.31347C12.7831 8.31679 12.7941 8.32011 12.8054 8.32353C12.8703 8.34406 12.9324 8.36829 12.9857 8.41027C13.0019 8.44418 13.0019 8.44418 12.9975 8.4781C12.9456 8.52736 12.8942 8.55046 12.8258 8.573C12.816 8.57632 12.8062 8.57965 12.7961 8.58308C12.6806 8.62183 12.5635 8.65575 12.4463 8.68935C12.4222 8.6963 12.3981 8.70326 12.3741 8.71021C12.2257 8.75301 12.0771 8.7949 11.9283 8.83632C11.7323 8.89088 11.5366 8.94634 11.3411 9.00243C11.3091 9.01162 11.2771 9.02078 11.245 9.02991C11.0767 9.07786 10.9092 9.12753 10.7431 9.18208C10.7294 9.18659 10.7156 9.1911 10.7014 9.19574C10.1451 9.38082 9.7211 9.72609 9.45571 10.231C9.31263 10.5148 9.22823 10.8216 9.14214 11.1245C9.11884 11.2062 9.09409 11.2875 9.06905 11.3687C9.0494 11.4326 9.0302 11.4966 9.01149 11.5608C9.00926 11.5684 9.00703 11.5761 9.00473 11.5839C8.99394 11.6209 8.98319 11.6579 8.97252 11.695C8.94519 11.7888 8.91578 11.8819 8.88555 11.9749C8.83191 12.1402 8.7831 12.3067 8.73459 12.4735C8.66144 12.7246 8.66144 12.7246 8.61997 12.8453C8.61721 12.8534 8.61446 12.8615 8.61163 12.8698C8.59649 12.9128 8.58092 12.9523 8.55226 12.9887C8.50867 12.9979 8.50867 12.9979 8.46951 13C8.42473 12.9376 8.39508 12.8771 8.37133 12.8051C8.36787 12.7949 8.36441 12.7847 8.36085 12.7741C8.31684 12.6425 8.27751 12.5095 8.23817 12.3765C8.22916 12.346 8.22011 12.3156 8.21105 12.2852C8.1436 12.0586 8.07725 11.8317 8.01101 11.6048C7.73507 10.4822 7.73507 10.4822 7.039 9.57466C7.02784 9.56596 7.01669 9.55726 7.00519 9.5483C6.54913 9.19902 5.94834 9.06969 5.39815 8.91813C5.26207 8.88062 5.12605 8.84293 4.99003 8.80523C4.97814 8.80193 4.97814 8.80193 4.966 8.79857C4.76981 8.74417 4.57367 8.68963 4.37822 8.63283C4.36996 8.63045 4.36169 8.62806 4.35317 8.62561C4.0529 8.53883 4.0529 8.53883 4.00065 8.4781C3.99917 8.45054 3.99917 8.45054 4.01247 8.42157C4.06708 8.3704 4.12008 8.34848 4.19216 8.32619C4.2026 8.32284 4.21303 8.31948 4.22379 8.31603C4.25575 8.30582 4.28779 8.29584 4.31985 8.28592C4.329 8.28305 4.33815 8.28017 4.34758 8.27722C4.41228 8.25693 4.47722 8.2374 4.54226 8.21809C4.55824 8.21332 4.55824 8.21332 4.57454 8.20846C4.85227 8.12587 5.13181 8.049 5.41126 7.97196C5.6195 7.91455 5.82738 7.85618 6.0346 7.79548C6.04413 7.79271 6.05365 7.78993 6.06346 7.78707C6.5435 7.64696 7.01278 7.44816 7.32274 7.0537C7.32738 7.04785 7.33202 7.042 7.3368 7.03597C7.68197 6.59815 7.81658 6.06572 7.96695 5.54621C8.01643 5.37534 8.06649 5.20464 8.11673 5.03399C8.13064 4.98673 8.14453 4.93947 8.15836 4.89219C8.21394 4.70229 8.27035 4.51264 8.33 4.32386C8.33558 4.30619 8.34114 4.2885 8.34666 4.27081C8.43017 4.00399 8.43017 4.00399 8.50941 4Z\" fill=\"#0DBD7D\"/><path d=\"M11.236 4.55535C11.2902 4.61409 11.3011 4.68312 11.318 4.75813C11.3744 4.99376 11.4393 5.21042 11.6647 5.3473C11.8037 5.42083 11.9694 5.4543 12.1235 5.4859C12.1885 5.49951 12.2435 5.51758 12.2992 5.5537C12.3118 5.57278 12.3118 5.57278 12.3111 5.60598C12.2981 5.64637 12.2868 5.65939 12.2527 5.68582C12.2154 5.69775 12.2154 5.69775 12.1707 5.70702C12.1537 5.71074 12.1368 5.71449 12.1199 5.71828C12.1109 5.72029 12.1018 5.7223 12.0925 5.72437C11.817 5.78531 11.817 5.78531 11.5788 5.92322C11.5711 5.92918 11.5633 5.93514 11.5554 5.94128C11.3852 6.08479 11.3492 6.32351 11.2979 6.5235C11.295 6.53448 11.2921 6.54546 11.289 6.55678C11.2865 6.5665 11.284 6.57622 11.2813 6.58624C11.2703 6.61593 11.2588 6.63528 11.236 6.65803C11.1723 6.66576 11.1723 6.66576 11.1414 6.65803C11.0922 6.62155 11.0811 6.57999 11.0683 6.52414C11.0661 6.51549 11.064 6.50685 11.0618 6.49794C11.0549 6.47032 11.0482 6.44266 11.0416 6.41498C10.9898 6.19946 10.9313 5.988 10.7245 5.86167C10.5629 5.7755 10.3665 5.73475 10.1859 5.70185C10.1364 5.69199 10.108 5.6796 10.0774 5.6406C10.0707 5.60104 10.0707 5.60104 10.0774 5.56147C10.1245 5.51486 10.174 5.50348 10.2377 5.4894C10.2578 5.48465 10.2778 5.47987 10.2979 5.47505C10.3083 5.47258 10.3186 5.47011 10.3293 5.46756C10.3821 5.45456 10.4344 5.43998 10.4867 5.42511C10.4962 5.42247 10.5057 5.41984 10.5155 5.41712C10.6218 5.38673 10.7136 5.34786 10.7985 5.27885C10.8065 5.27261 10.8144 5.26638 10.8226 5.25995C10.9548 5.14614 10.9997 4.97516 11.0405 4.81562C11.0436 4.80351 11.0467 4.7914 11.0499 4.77892C11.0561 4.75459 11.0622 4.73023 11.0682 4.70585C11.0724 4.68888 11.0724 4.68888 11.0768 4.67157C11.0793 4.66144 11.0818 4.6513 11.0843 4.64086C11.0952 4.6086 11.1095 4.58326 11.1296 4.55535C11.1681 4.53692 11.1951 4.54525 11.236 4.55535Z\" fill=\"#075F3F\"/><path d=\"M5.79542 10.2472C5.80948 10.2473 5.80948 10.2473 5.82383 10.2474C5.92474 10.2503 5.99301 10.2813 6.06733 10.3461C6.15381 10.4355 6.19374 10.5362 6.19146 10.6566C6.18175 10.7542 6.12155 10.8395 6.0477 10.9055C5.96078 10.9725 5.8731 10.9947 5.76203 10.9916C5.66838 10.9812 5.58027 10.9386 5.51389 10.8746C5.43135 10.7669 5.40722 10.6682 5.41932 10.5355C5.4443 10.431 5.51634 10.3463 5.60847 10.2868C5.67248 10.2558 5.72396 10.2466 5.79542 10.2472Z\" fill=\"#0DBD7D\"/></svg></div>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#075F3F]\">Self Heal Analysis</span>\n </div>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#043F2A] cqa-bg-[#AEE9D4] cqa-text-[8px] cqa-leading-[12px]\" *ngIf=\"data?.confidence\">\n Confidence : {{ data.confidence }}%\n </span>\n </div>\n\n <!-- Locators Comparison -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mb-1.5\">\n <!-- Original Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Original Locator</div>\n <div class=\"cqa-text-[#F87171]\">Failed</div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.originalLocator\" \n readonly\n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#FEF3C7] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#64748B]\"\n />\n </div>\n\n <!-- Healed Locator -->\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-1 cqa-mb-1 cqa-text-[8px] cqa-leading-[12px]\">\n <div class=\"cqa-text-[#075F3F]\">Current Locator</div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-[2px] cqa-text-[#10B981]\">\n <div><svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16671C7.3012 9.16671 9.16668 7.30123 9.16668 5.00004C9.16668 2.69885 7.3012 0.833374 5.00001 0.833374C2.69882 0.833374 0.833344 2.69885 0.833344 5.00004C0.833344 7.30123 2.69882 9.16671 5.00001 9.16671Z\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 4.99996L4.58333 5.83329L6.25 4.16663\" stroke=\"#10B981\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Applied</span>\n </div>\n </div>\n <input \n type=\"text\" \n [(ngModel)]=\"data.healedLocator\" \n class=\"cqa-w-full cqa-py-1 cqa-px-3 !cqa-border !cqa-border-solid !cqa-border-[#A7F3D0] cqa-rounded !cqa-bg-white cqa-text-[8px] cqa-leading-[12px] cqa-text-[#047857]\"\n />\n </div>\n </div>\n\n <!-- Heal Method -->\n <!-- <div class=\"cqa-mb-1.5 cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-text-[#0B9D68]\">Heal Method:</span>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#AEE9D4] cqa-text-[#075F3F] cqa-border cqa-border-solid cqa-border-[#0DBD7D]\">\n {{ data.healMethod }}\n </span>\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)=\"onAccept()\"\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-[#097E53] cqa-border cqa-border-solid cqa-border-[#097E53]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39748 7.93746L2.31248 5.85246L1.60248 6.55746L4.39748 9.35246L10.3975 3.35246L9.69248 2.64746L4.39748 7.93746Z\" fill=\"#097E53\"/></svg>\n Accept\n </button>\n <!-- <button \n (click)=\"onReject()\"\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-[#9F2A2A] cqa-border cqa-border-solid cqa-border-[#9F2A2A]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.5 3.205L8.795 2.5L6 5.295L3.205 2.5L2.5 3.205L5.295 6L2.5 8.795L3.205 9.5L6 6.705L8.795 9.5L9.5 8.795L6.705 6L9.5 3.205Z\" fill=\"#9F2A2A\"/></svg>\n Reject\n </button> -->\n <button \n (click)=\"onModifyAccept()\"\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-[#B18618] cqa-border cqa-border-solid cqa-border-[#B18618]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.02939 4.51L7.48939 4.97L2.95939 9.5H2.49939V9.04L7.02939 4.51ZM8.82939 1.5C8.70439 1.5 8.57439 1.55 8.47939 1.645L7.56439 2.56L9.43939 4.435L10.3544 3.52C10.5494 3.325 10.5494 3.01 10.3544 2.815L9.18439 1.645C9.08439 1.545 8.95939 1.5 8.82939 1.5ZM7.02939 3.095L1.49939 8.625V10.5H3.37439L8.90439 4.97L7.02939 3.095Z\" fill=\"#B18618\"/></svg>\n Modify & Accept\n </button>\n </div>\n</div>\n", styles: [] }]
|
|
5579
5579
|
}], propDecorators: { originalLocator: [{
|
|
5580
5580
|
type: Input
|
|
5581
5581
|
}], healedLocator: [{
|
|
@@ -5738,20 +5738,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5738
5738
|
class VisualComparisonComponent {
|
|
5739
5739
|
constructor() {
|
|
5740
5740
|
this.showFullLogsLink = true;
|
|
5741
|
-
this.
|
|
5741
|
+
this.isUploadingBaseline = {};
|
|
5742
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
5742
5743
|
this.uploadBaseline = new EventEmitter();
|
|
5743
5744
|
this.analyze = new EventEmitter();
|
|
5744
5745
|
this.viewFullLogs = new EventEmitter();
|
|
5745
5746
|
this.isModalOpen = false;
|
|
5746
5747
|
this.initialModalView = 'baseline';
|
|
5747
5748
|
}
|
|
5748
|
-
|
|
5749
|
-
|
|
5750
|
-
|
|
5749
|
+
get isCurrentImageAvailable() {
|
|
5750
|
+
return !!this.screenshots?.current;
|
|
5751
|
+
}
|
|
5752
|
+
onMakeCurrentBaseline() {
|
|
5753
|
+
if (this.screenshots?.current) {
|
|
5754
|
+
console.log('Make current baseline clicked with URL:', this.screenshots.current);
|
|
5755
|
+
this.makeCurrentBaseline.emit({
|
|
5756
|
+
testStepResultId: this.testStepResultId,
|
|
5757
|
+
currentUrl: this.screenshots.current
|
|
5758
|
+
});
|
|
5759
|
+
}
|
|
5751
5760
|
}
|
|
5752
5761
|
onUploadBaseline() {
|
|
5753
5762
|
console.log('Upload baseline clicked');
|
|
5754
|
-
this.
|
|
5763
|
+
this.fileInput.nativeElement.click();
|
|
5764
|
+
}
|
|
5765
|
+
onFileSelected(event) {
|
|
5766
|
+
const input = event.target;
|
|
5767
|
+
if (input.files && input.files.length > 0) {
|
|
5768
|
+
const file = input.files[0];
|
|
5769
|
+
console.log('File selected:', file.name);
|
|
5770
|
+
this.uploadBaseline.emit({
|
|
5771
|
+
file: file,
|
|
5772
|
+
testStepResultId: this.testStepResultId
|
|
5773
|
+
});
|
|
5774
|
+
// Reset file input
|
|
5775
|
+
input.value = '';
|
|
5776
|
+
}
|
|
5755
5777
|
}
|
|
5756
5778
|
onAnalyze() {
|
|
5757
5779
|
console.log('Analyze clicked');
|
|
@@ -5780,17 +5802,21 @@ class VisualComparisonComponent {
|
|
|
5780
5802
|
}
|
|
5781
5803
|
}
|
|
5782
5804
|
VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5783
|
-
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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n", components: [{ 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"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5805
|
+
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", isUploadingBaseline: "isUploadingBaseline", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], 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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable\"\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] disabled:cqa-cursor-not-allowed\">\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 [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\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] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" 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 <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\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\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"], components: [{ 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"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
5784
5806
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
|
|
5785
5807
|
type: Component,
|
|
5786
|
-
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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n", styles: [] }]
|
|
5808
|
+
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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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-h-[112px] cqa-cursor-pointer\" (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)=\"onMakeCurrentBaseline()\"\n [disabled]=\"!isCurrentImageAvailable\"\n [class.cqa-opacity-50]=\"!isCurrentImageAvailable\"\n [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable\"\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] disabled:cqa-cursor-not-allowed\">\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 [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\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] disabled:cqa-cursor-not-allowed\">\n <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" 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 <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n </svg>\n <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n </button>\n <!-- Hidden file input -->\n <input \n #fileInput\n type=\"file\" \n accept=\"image/*\"\n (change)=\"onFileSelected($event)\"\n style=\"display: none;\" \n />\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\n \n <cqa-visual-difference-modal\n [isOpen]=\"isModalOpen\"\n [baselineUrl]=\"screenshots?.baseline || ''\"\n [currentUrl]=\"screenshots?.current || ''\"\n [differenceUrl]=\"screenshots?.difference || ''\"\n [initialView]=\"initialModalView\"\n (close)=\"onCloseModal()\">\n </cqa-visual-difference-modal>\n</div>\n\n<style>\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n</style>", styles: ["\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n"] }]
|
|
5787
5809
|
}], propDecorators: { screenshots: [{
|
|
5788
5810
|
type: Input
|
|
5789
5811
|
}], logs: [{
|
|
5790
5812
|
type: Input
|
|
5791
5813
|
}], showFullLogsLink: [{
|
|
5792
5814
|
type: Input
|
|
5793
|
-
}],
|
|
5815
|
+
}], isUploadingBaseline: [{
|
|
5816
|
+
type: Input
|
|
5817
|
+
}], testStepResultId: [{
|
|
5818
|
+
type: Input
|
|
5819
|
+
}], makeCurrentBaseline: [{
|
|
5794
5820
|
type: Output
|
|
5795
5821
|
}], uploadBaseline: [{
|
|
5796
5822
|
type: Output
|
|
@@ -5798,13 +5824,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5798
5824
|
type: Output
|
|
5799
5825
|
}], viewFullLogs: [{
|
|
5800
5826
|
type: Output
|
|
5827
|
+
}], fileInput: [{
|
|
5828
|
+
type: ViewChild,
|
|
5829
|
+
args: ['fileInput']
|
|
5801
5830
|
}] } });
|
|
5802
5831
|
|
|
5803
5832
|
class UpdatedFailedStepComponent extends BaseStepComponent {
|
|
5833
|
+
constructor() {
|
|
5834
|
+
super(...arguments);
|
|
5835
|
+
this.isUploadingBaseline = {};
|
|
5836
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
5837
|
+
this.uploadBaseline = new EventEmitter();
|
|
5838
|
+
this.analyze = new EventEmitter();
|
|
5839
|
+
this.viewFullLogs = new EventEmitter();
|
|
5840
|
+
}
|
|
5804
5841
|
ngOnInit() {
|
|
5805
5842
|
// Build config from individual inputs
|
|
5806
5843
|
this.config = {
|
|
5807
5844
|
type: 'failed',
|
|
5845
|
+
testStepResultId: this.testStepResultId,
|
|
5808
5846
|
subSteps: this.subSteps,
|
|
5809
5847
|
failureDetails: this.failureDetails,
|
|
5810
5848
|
timingBreakdown: this.timingBreakdown,
|
|
@@ -5816,26 +5854,32 @@ class UpdatedFailedStepComponent extends BaseStepComponent {
|
|
|
5816
5854
|
// Ensure isExpanded reflects the expanded input
|
|
5817
5855
|
this.isExpanded = this.expanded ?? this.config.expanded ?? false;
|
|
5818
5856
|
}
|
|
5819
|
-
|
|
5857
|
+
onMakeCurrentBaseline(event) {
|
|
5820
5858
|
console.log('Make current baseline clicked');
|
|
5859
|
+
this.makeCurrentBaseline.emit(event);
|
|
5821
5860
|
}
|
|
5822
|
-
onUploadBaseline() {
|
|
5861
|
+
onUploadBaseline(event) {
|
|
5823
5862
|
console.log('Upload baseline clicked');
|
|
5863
|
+
this.uploadBaseline.emit(event);
|
|
5824
5864
|
}
|
|
5825
5865
|
onAnalyze() {
|
|
5826
5866
|
console.log('Analyze clicked');
|
|
5867
|
+
this.analyze.emit();
|
|
5827
5868
|
}
|
|
5828
5869
|
onViewFullLogs() {
|
|
5829
5870
|
console.log('View full logs clicked');
|
|
5871
|
+
this.viewFullLogs.emit();
|
|
5830
5872
|
}
|
|
5831
5873
|
}
|
|
5832
5874
|
UpdatedFailedStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UpdatedFailedStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5833
|
-
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 </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</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"] }] });
|
|
5875
|
+
UpdatedFailedStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: { timingBreakdown: "timingBreakdown", testStepResultId: "testStepResultId", expanded: "expanded", subSteps: "subSteps", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, 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 (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [testStepResultId]=\"testStepResultId\"\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 *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</div>", components: [{ type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: ["screenshots", "logs", "showFullLogsLink", "isUploadingBaseline", "testStepResultId"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5834
5876
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UpdatedFailedStepComponent, decorators: [{
|
|
5835
5877
|
type: Component,
|
|
5836
|
-
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 (
|
|
5878
|
+
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 (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n [testStepResultId]=\"testStepResultId\"\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 *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</div>", styles: [] }]
|
|
5837
5879
|
}], propDecorators: { timingBreakdown: [{
|
|
5838
5880
|
type: Input
|
|
5881
|
+
}], testStepResultId: [{
|
|
5882
|
+
type: Input
|
|
5839
5883
|
}], expanded: [{
|
|
5840
5884
|
type: Input
|
|
5841
5885
|
}], subSteps: [{
|
|
@@ -5846,17 +5890,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5846
5890
|
type: Input
|
|
5847
5891
|
}], confidence: [{
|
|
5848
5892
|
type: Input
|
|
5893
|
+
}], isUploadingBaseline: [{
|
|
5894
|
+
type: Input
|
|
5895
|
+
}], makeCurrentBaseline: [{
|
|
5896
|
+
type: Output
|
|
5897
|
+
}], uploadBaseline: [{
|
|
5898
|
+
type: Output
|
|
5899
|
+
}], analyze: [{
|
|
5900
|
+
type: Output
|
|
5901
|
+
}], viewFullLogs: [{
|
|
5902
|
+
type: Output
|
|
5849
5903
|
}] } });
|
|
5850
5904
|
|
|
5851
5905
|
class BasicStepComponent extends BaseStepComponent {
|
|
5852
5906
|
constructor() {
|
|
5853
5907
|
super(...arguments);
|
|
5908
|
+
this.isUploadingBaseline = {};
|
|
5909
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
5910
|
+
this.uploadBaseline = new EventEmitter();
|
|
5911
|
+
this.analyze = new EventEmitter();
|
|
5912
|
+
this.viewFullLogs = new EventEmitter();
|
|
5913
|
+
this.selfHealAction = new EventEmitter();
|
|
5854
5914
|
this.showFailedStepDetails = false;
|
|
5855
5915
|
}
|
|
5856
5916
|
ngOnInit() {
|
|
5857
5917
|
// Build config from individual inputs
|
|
5858
5918
|
this.config = {
|
|
5859
5919
|
id: this.id,
|
|
5920
|
+
testStepResultId: this.testStepResultId,
|
|
5860
5921
|
stepNumber: this.stepNumber,
|
|
5861
5922
|
title: this.title,
|
|
5862
5923
|
status: this.status,
|
|
@@ -5878,35 +5939,30 @@ class BasicStepComponent extends BaseStepComponent {
|
|
|
5878
5939
|
this.showFailedStepDetails = expanded;
|
|
5879
5940
|
}
|
|
5880
5941
|
onSelfHealAction(event) {
|
|
5881
|
-
|
|
5882
|
-
case 'accept':
|
|
5883
|
-
this.onAccept(event.healedLocator);
|
|
5884
|
-
break;
|
|
5885
|
-
case 'reject':
|
|
5886
|
-
this.onReject(event.healedLocator);
|
|
5887
|
-
break;
|
|
5888
|
-
case 'modify-accept':
|
|
5889
|
-
this.onModifyAccept(event.healedLocator);
|
|
5890
|
-
break;
|
|
5891
|
-
}
|
|
5942
|
+
this.selfHealAction.emit(event);
|
|
5892
5943
|
}
|
|
5893
|
-
|
|
5894
|
-
|
|
5944
|
+
onMakeCurrentBaseline(event) {
|
|
5945
|
+
this.makeCurrentBaseline.emit(event);
|
|
5895
5946
|
}
|
|
5896
|
-
|
|
5897
|
-
|
|
5947
|
+
onUploadBaseline(event) {
|
|
5948
|
+
this.uploadBaseline.emit(event);
|
|
5898
5949
|
}
|
|
5899
|
-
|
|
5900
|
-
|
|
5950
|
+
onAnalyze() {
|
|
5951
|
+
this.analyze.emit();
|
|
5952
|
+
}
|
|
5953
|
+
onViewFullLogs() {
|
|
5954
|
+
this.viewFullLogs.emit();
|
|
5901
5955
|
}
|
|
5902
5956
|
}
|
|
5903
5957
|
BasicStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
5904
|
-
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", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, 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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "expanded", "subSteps", "failureDetails", "reasoning", "confidence"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5958
|
+
BasicStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: BasicStepComponent, selector: "cqa-basic-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", selfHealAnalysis: "selfHealAnalysis", selfHealed: "selfHealed", selfHealDuration: "selfHealDuration", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
5905
5959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: BasicStepComponent, decorators: [{
|
|
5906
5960
|
type: Component,
|
|
5907
|
-
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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
5961
|
+
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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"subSteps\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
5908
5962
|
}], propDecorators: { id: [{
|
|
5909
5963
|
type: Input
|
|
5964
|
+
}], testStepResultId: [{
|
|
5965
|
+
type: Input
|
|
5910
5966
|
}], stepNumber: [{
|
|
5911
5967
|
type: Input
|
|
5912
5968
|
}], title: [{
|
|
@@ -5933,6 +5989,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5933
5989
|
type: Input
|
|
5934
5990
|
}], confidence: [{
|
|
5935
5991
|
type: Input
|
|
5992
|
+
}], isUploadingBaseline: [{
|
|
5993
|
+
type: Input
|
|
5994
|
+
}], makeCurrentBaseline: [{
|
|
5995
|
+
type: Output
|
|
5996
|
+
}], uploadBaseline: [{
|
|
5997
|
+
type: Output
|
|
5998
|
+
}], analyze: [{
|
|
5999
|
+
type: Output
|
|
6000
|
+
}], viewFullLogs: [{
|
|
6001
|
+
type: Output
|
|
6002
|
+
}], selfHealAction: [{
|
|
6003
|
+
type: Output
|
|
5936
6004
|
}] } });
|
|
5937
6005
|
|
|
5938
6006
|
/**
|
|
@@ -6002,6 +6070,7 @@ class StepGroupComponent extends BaseStepComponent {
|
|
|
6002
6070
|
// Build config from individual inputs
|
|
6003
6071
|
this.config = {
|
|
6004
6072
|
id: this.id,
|
|
6073
|
+
testStepResultId: this.testStepResultId,
|
|
6005
6074
|
stepNumber: this.stepNumber,
|
|
6006
6075
|
title: this.title,
|
|
6007
6076
|
status: this.status,
|
|
@@ -6028,12 +6097,14 @@ class StepGroupComponent extends BaseStepComponent {
|
|
|
6028
6097
|
}
|
|
6029
6098
|
}
|
|
6030
6099
|
StepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6031
|
-
StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div class=\"cqa-p-2\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2\">\n <cqa-step-renderer *ngFor=\"let step of config.steps\" [step]=\"step\"></cqa-step-renderer>\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"] }] });
|
|
6100
|
+
StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps" }, outputs: { onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div class=\"cqa-p-2\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2\">\n <cqa-step-renderer *ngFor=\"let step of config.steps\" [step]=\"step\"></cqa-step-renderer>\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"] }] });
|
|
6032
6101
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, decorators: [{
|
|
6033
6102
|
type: Component,
|
|
6034
6103
|
args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-p-2\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div>\n <!-- Success -->\n <svg *ngIf=\"config.status === '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 <!-- Folder Icon -->\n <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-font-bold cqa-flex-1 cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Step group: {{ config.groupName }}\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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 <!-- Nested Steps -->\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2\">\n <cqa-step-renderer *ngFor=\"let step of config.steps\" [step]=\"step\"></cqa-step-renderer>\n </div>\n </div>\n</div>\n", styles: [] }]
|
|
6035
6104
|
}], propDecorators: { id: [{
|
|
6036
6105
|
type: Input
|
|
6106
|
+
}], testStepResultId: [{
|
|
6107
|
+
type: Input
|
|
6037
6108
|
}], stepNumber: [{
|
|
6038
6109
|
type: Input
|
|
6039
6110
|
}], title: [{
|
|
@@ -6057,6 +6128,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6057
6128
|
class LoopStepComponent extends BaseStepComponent {
|
|
6058
6129
|
constructor() {
|
|
6059
6130
|
super(...arguments);
|
|
6131
|
+
this.isUploadingBaseline = {};
|
|
6132
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
6133
|
+
this.uploadBaseline = new EventEmitter();
|
|
6134
|
+
this.analyze = new EventEmitter();
|
|
6135
|
+
this.viewFullLogs = new EventEmitter();
|
|
6136
|
+
this.selfHealAction = new EventEmitter();
|
|
6060
6137
|
this.showFailedStepDetails = false;
|
|
6061
6138
|
// Output event for when the loop step expands
|
|
6062
6139
|
this.onExpand = new EventEmitter();
|
|
@@ -6070,6 +6147,7 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6070
6147
|
// Build config from individual inputs
|
|
6071
6148
|
this.config = {
|
|
6072
6149
|
id: this.id,
|
|
6150
|
+
testStepResultId: this.testStepResultId,
|
|
6073
6151
|
stepNumber: this.stepNumber,
|
|
6074
6152
|
title: this.title,
|
|
6075
6153
|
status: this.status,
|
|
@@ -6157,14 +6235,31 @@ class LoopStepComponent extends BaseStepComponent {
|
|
|
6157
6235
|
getSubStepsForFailedStep() {
|
|
6158
6236
|
return this.selectedIteration?.subSteps || [];
|
|
6159
6237
|
}
|
|
6238
|
+
onMakeCurrentBaseline(event) {
|
|
6239
|
+
this.makeCurrentBaseline.emit(event);
|
|
6240
|
+
}
|
|
6241
|
+
onUploadBaseline(event) {
|
|
6242
|
+
this.uploadBaseline.emit(event);
|
|
6243
|
+
}
|
|
6244
|
+
onAnalyze() {
|
|
6245
|
+
this.analyze.emit();
|
|
6246
|
+
}
|
|
6247
|
+
onViewFullLogs() {
|
|
6248
|
+
this.viewFullLogs.emit();
|
|
6249
|
+
}
|
|
6250
|
+
onSelfHealAction(event) {
|
|
6251
|
+
this.selfHealAction.emit(event);
|
|
6252
|
+
}
|
|
6160
6253
|
}
|
|
6161
6254
|
LoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6162
|
-
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", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, outputs: { onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"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 }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "expanded", "subSteps", "failureDetails", "reasoning", "confidence"] }], 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"] }] });
|
|
6255
|
+
LoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: LoopStepComponent, selector: "cqa-loop-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", loopType: "loopType", iterations: "iterations", selectedIterationId: "selectedIterationId", defaultIteration: "defaultIteration", nestedSteps: "nestedSteps", showViewAllIterations: "showViewAllIterations", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", selfHealAnalysis: "selfHealAnalysis" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction", onExpand: "onExpand", onViewAllIterations: "onViewAllIterations", onIterationChange: "onIterationChange" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"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 }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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 <!-- 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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
|
|
6163
6256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: LoopStepComponent, decorators: [{
|
|
6164
6257
|
type: Component,
|
|
6165
|
-
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 }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6258
|
+
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 }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span *ngFor=\"let badge of getLoopTypeBadges()\" \n class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD] cqa-text-[10px] cqa-leading-[15px]\">\n {{ badge }}\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[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 <!-- 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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6166
6259
|
}], propDecorators: { id: [{
|
|
6167
6260
|
type: Input
|
|
6261
|
+
}], testStepResultId: [{
|
|
6262
|
+
type: Input
|
|
6168
6263
|
}], stepNumber: [{
|
|
6169
6264
|
type: Input
|
|
6170
6265
|
}], title: [{
|
|
@@ -6195,6 +6290,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6195
6290
|
type: Input
|
|
6196
6291
|
}], confidence: [{
|
|
6197
6292
|
type: Input
|
|
6293
|
+
}], isUploadingBaseline: [{
|
|
6294
|
+
type: Input
|
|
6295
|
+
}], selfHealAnalysis: [{
|
|
6296
|
+
type: Input
|
|
6297
|
+
}], makeCurrentBaseline: [{
|
|
6298
|
+
type: Output
|
|
6299
|
+
}], uploadBaseline: [{
|
|
6300
|
+
type: Output
|
|
6301
|
+
}], analyze: [{
|
|
6302
|
+
type: Output
|
|
6303
|
+
}], viewFullLogs: [{
|
|
6304
|
+
type: Output
|
|
6305
|
+
}], selfHealAction: [{
|
|
6306
|
+
type: Output
|
|
6198
6307
|
}], onExpand: [{
|
|
6199
6308
|
type: Output
|
|
6200
6309
|
}], onViewAllIterations: [{
|
|
@@ -6207,12 +6316,19 @@ class ConditionStepComponent extends BaseStepComponent {
|
|
|
6207
6316
|
constructor() {
|
|
6208
6317
|
super(...arguments);
|
|
6209
6318
|
this.onBranchClickEvent = new EventEmitter();
|
|
6319
|
+
this.isUploadingBaseline = {};
|
|
6320
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
6321
|
+
this.uploadBaseline = new EventEmitter();
|
|
6322
|
+
this.analyze = new EventEmitter();
|
|
6323
|
+
this.viewFullLogs = new EventEmitter();
|
|
6324
|
+
this.selfHealAction = new EventEmitter();
|
|
6210
6325
|
this.showFailedStepDetails = false;
|
|
6211
6326
|
}
|
|
6212
6327
|
ngOnInit() {
|
|
6213
6328
|
// Build config from individual inputs
|
|
6214
6329
|
this.config = {
|
|
6215
6330
|
id: this.id,
|
|
6331
|
+
testStepResultId: this.testStepResultId,
|
|
6216
6332
|
stepNumber: this.stepNumber,
|
|
6217
6333
|
title: this.title,
|
|
6218
6334
|
status: this.status,
|
|
@@ -6247,14 +6363,31 @@ class ConditionStepComponent extends BaseStepComponent {
|
|
|
6247
6363
|
const executedBranch = this.getExecutedBranch();
|
|
6248
6364
|
return executedBranch?.subSteps || [];
|
|
6249
6365
|
}
|
|
6366
|
+
onMakeCurrentBaseline(event) {
|
|
6367
|
+
this.makeCurrentBaseline.emit(event);
|
|
6368
|
+
}
|
|
6369
|
+
onUploadBaseline(event) {
|
|
6370
|
+
this.uploadBaseline.emit(event);
|
|
6371
|
+
}
|
|
6372
|
+
onAnalyze() {
|
|
6373
|
+
this.analyze.emit();
|
|
6374
|
+
}
|
|
6375
|
+
onViewFullLogs() {
|
|
6376
|
+
this.viewFullLogs.emit();
|
|
6377
|
+
}
|
|
6378
|
+
onSelfHealAction(event) {
|
|
6379
|
+
this.selfHealAction.emit(event);
|
|
6380
|
+
}
|
|
6250
6381
|
}
|
|
6251
6382
|
ConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6252
|
-
ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, outputs: { onBranchClickEvent: "onBranchClickEvent" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"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=\"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 <!-- Condition Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: {{ config.conditionText }}\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\" (click)=\"onBranchClick(branch)\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div><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 {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. {{ 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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "expanded", "subSteps", "failureDetails", "reasoning", "confidence"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6383
|
+
ConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionStepComponent, selector: "cqa-condition-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", conditionText: "conditionText", branches: "branches", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", selfHealAnalysis: "selfHealAnalysis", isUploadingBaseline: "isUploadingBaseline" }, outputs: { onBranchClickEvent: "onBranchClickEvent", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"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=\"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 <!-- Condition Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: {{ config.conditionText }}\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\" (click)=\"onBranchClick(branch)\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div><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 {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. {{ 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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\n </div>\n\n <!-- 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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
6253
6384
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionStepComponent, decorators: [{
|
|
6254
6385
|
type: Component,
|
|
6255
|
-
args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"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=\"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 <!-- Condition Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: {{ config.conditionText }}\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\" (click)=\"onBranchClick(branch)\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div><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 {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. {{ 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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6386
|
+
args: [{ selector: 'cqa-condition-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <div class=\"cqa-p-2\">\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pb-1.5 cqa-cursor-pointer\"\n (click)=\"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=\"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 <!-- Condition Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#FFEDD5\"/><path d=\"M6 5V9\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 11C6.55228 11 7 10.5523 7 10C7 9.44772 6.55228 9 6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11Z\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10 7C10 7.79565 9.68393 8.55871 9.12132 9.12132C8.55871 9.68393 7.79565 10 7 10\" stroke=\"#FD9A00\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. Condition: {{ config.conditionText }}\n </span>\n \n <!-- Condition Badge -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#EA580C] cqa-bg-[#FFEDD5] cqa-text-[10px] cqa-leading-[15px]\">\n CONDITION\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n <!-- Branch Buttons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#737373]\">\n <div\n *ngFor=\"let branch of config.branches\"\n class=\"cqa-px-2 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5\" (click)=\"onBranchClick(branch)\"\n [ngClass]=\"branch.executed \n ? 'cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF]' \n : 'cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB]'\">\n <div *ngIf=\"branch.executed\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>{{ branch.type.toUpperCase() }} ({{ branch.label }})</span>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\">\n\n <!-- Executed Branch Sub-steps -->\n <div *ngFor=\"let branch of config.branches\">\n <div *ngIf=\"branch.executed && branch.subSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pb-1 cqa-ml-9\" style=\"border-bottom: '1px solid #F3F4F6'\">\n <div\n *ngFor=\"let subStep of branch.subSteps\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n \n <!-- Sub-step Status Icon -->\n <div><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 {{ config.stepNumber }}.{{ getSubStepIndex(branch.subSteps, subStep) }}. {{ 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 </div>\n\n <!-- Unexecuted Branch Message -->\n <div *ngIf=\"getUnexecutedBranches().length > 0 && getUnexecutedBranches().length < 2\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} branch not executed\n </p>\n </div>\n\n <div *ngIf=\"getUnexecutedBranches().length > 1\" class=\"cqa-ml-9\">\n <p class=\"cqa-px-3 cqa-py-[10px] cqa-text-[12px] cqa-leading-4 cqa-text-[#737373] cqa-italic\">\n {{ getUnexecutedBranches()?.[0]?.type?.toUpperCase() }} and {{ getUnexecutedBranches()?.[1]?.type?.toUpperCase() }} branches not executed\n </p>\n </div>\n\n <!-- 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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [testStepResultId]=\"testStepResultId\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6256
6387
|
}], propDecorators: { id: [{
|
|
6257
6388
|
type: Input
|
|
6389
|
+
}], testStepResultId: [{
|
|
6390
|
+
type: Input
|
|
6258
6391
|
}], stepNumber: [{
|
|
6259
6392
|
type: Input
|
|
6260
6393
|
}], title: [{
|
|
@@ -6277,15 +6410,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6277
6410
|
type: Input
|
|
6278
6411
|
}], confidence: [{
|
|
6279
6412
|
type: Input
|
|
6413
|
+
}], selfHealAnalysis: [{
|
|
6414
|
+
type: Input
|
|
6280
6415
|
}], onBranchClickEvent: [{
|
|
6281
6416
|
type: Output
|
|
6417
|
+
}], isUploadingBaseline: [{
|
|
6418
|
+
type: Input
|
|
6419
|
+
}], makeCurrentBaseline: [{
|
|
6420
|
+
type: Output
|
|
6421
|
+
}], uploadBaseline: [{
|
|
6422
|
+
type: Output
|
|
6423
|
+
}], analyze: [{
|
|
6424
|
+
type: Output
|
|
6425
|
+
}], viewFullLogs: [{
|
|
6426
|
+
type: Output
|
|
6427
|
+
}], selfHealAction: [{
|
|
6428
|
+
type: Output
|
|
6282
6429
|
}] } });
|
|
6283
6430
|
|
|
6284
6431
|
class FailedStepComponent extends BaseStepComponent {
|
|
6432
|
+
constructor() {
|
|
6433
|
+
super(...arguments);
|
|
6434
|
+
this.isUploadingBaseline = {};
|
|
6435
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
6436
|
+
this.uploadBaseline = new EventEmitter();
|
|
6437
|
+
this.analyze = new EventEmitter();
|
|
6438
|
+
this.viewFullLogs = new EventEmitter();
|
|
6439
|
+
}
|
|
6285
6440
|
ngOnInit() {
|
|
6286
6441
|
// Build config from individual inputs
|
|
6287
6442
|
this.config = {
|
|
6288
6443
|
id: this.id,
|
|
6444
|
+
testStepResultId: this.testStepResultId,
|
|
6289
6445
|
stepNumber: this.stepNumber,
|
|
6290
6446
|
title: this.title,
|
|
6291
6447
|
status: this.status,
|
|
@@ -6298,26 +6454,32 @@ class FailedStepComponent extends BaseStepComponent {
|
|
|
6298
6454
|
};
|
|
6299
6455
|
super.ngOnInit();
|
|
6300
6456
|
}
|
|
6301
|
-
|
|
6457
|
+
onMakeCurrentBaseline(event) {
|
|
6302
6458
|
console.log('Make current baseline clicked');
|
|
6459
|
+
this.makeCurrentBaseline.emit(event);
|
|
6303
6460
|
}
|
|
6304
|
-
onUploadBaseline() {
|
|
6461
|
+
onUploadBaseline(event) {
|
|
6305
6462
|
console.log('Upload baseline clicked');
|
|
6463
|
+
this.uploadBaseline.emit(event);
|
|
6306
6464
|
}
|
|
6307
6465
|
onAnalyze() {
|
|
6308
6466
|
console.log('Analyze clicked');
|
|
6467
|
+
this.analyze.emit();
|
|
6309
6468
|
}
|
|
6310
6469
|
onViewFullLogs() {
|
|
6311
6470
|
console.log('View full logs clicked');
|
|
6471
|
+
this.viewFullLogs.emit();
|
|
6312
6472
|
}
|
|
6313
6473
|
}
|
|
6314
6474
|
FailedStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6315
|
-
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 }}. <span [innerHTML]=\"config.title\"></span>\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"] }] });
|
|
6475
|
+
FailedStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepComponent, selector: "cqa-failed-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", subSteps: "subSteps", failureDetails: "failureDetails", isUploadingBaseline: "isUploadingBaseline" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, 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 }}. <span [innerHTML]=\"config.title\"></span>\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 [testStepResultId]=\"testStepResultId\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n [testStepResultId]=\"testStepResultId\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\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", "isUploadingBaseline", "testStepResultId"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6316
6476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepComponent, decorators: [{
|
|
6317
6477
|
type: Component,
|
|
6318
|
-
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 }}. <span [innerHTML]=\"config.title\"></span>\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: [] }]
|
|
6478
|
+
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 }}. <span [innerHTML]=\"config.title\"></span>\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 [testStepResultId]=\"testStepResultId\"\n [screenshots]=\"config.failureDetails.screenshots\"\n [logs]=\"config.failureDetails.logs\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n [testStepResultId]=\"testStepResultId\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\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: [] }]
|
|
6319
6479
|
}], propDecorators: { id: [{
|
|
6320
6480
|
type: Input
|
|
6481
|
+
}], testStepResultId: [{
|
|
6482
|
+
type: Input
|
|
6321
6483
|
}], stepNumber: [{
|
|
6322
6484
|
type: Input
|
|
6323
6485
|
}], title: [{
|
|
@@ -6334,18 +6496,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6334
6496
|
type: Input
|
|
6335
6497
|
}], failureDetails: [{
|
|
6336
6498
|
type: Input
|
|
6499
|
+
}], isUploadingBaseline: [{
|
|
6500
|
+
type: Input
|
|
6501
|
+
}], makeCurrentBaseline: [{
|
|
6502
|
+
type: Output
|
|
6503
|
+
}], uploadBaseline: [{
|
|
6504
|
+
type: Output
|
|
6505
|
+
}], analyze: [{
|
|
6506
|
+
type: Output
|
|
6507
|
+
}], viewFullLogs: [{
|
|
6508
|
+
type: Output
|
|
6337
6509
|
}] } });
|
|
6338
6510
|
|
|
6339
6511
|
class AIAgentStepComponent extends BaseStepComponent {
|
|
6340
6512
|
constructor() {
|
|
6341
6513
|
super(...arguments);
|
|
6514
|
+
this.isUploadingBaseline = {};
|
|
6342
6515
|
this.showFailedStepDetails = false;
|
|
6516
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
6517
|
+
this.uploadBaseline = new EventEmitter();
|
|
6518
|
+
this.analyze = new EventEmitter();
|
|
6519
|
+
this.viewFullLogs = new EventEmitter();
|
|
6520
|
+
this.selfHealAction = new EventEmitter();
|
|
6343
6521
|
this.selectedTab = 'action-trace';
|
|
6344
6522
|
}
|
|
6345
6523
|
ngOnInit() {
|
|
6346
6524
|
// Build config from individual inputs
|
|
6347
6525
|
this.config = {
|
|
6348
6526
|
id: this.id,
|
|
6527
|
+
testStepResultId: this.testStepResultId,
|
|
6349
6528
|
stepNumber: this.stepNumber,
|
|
6350
6529
|
title: this.title,
|
|
6351
6530
|
status: this.status,
|
|
@@ -6358,6 +6537,7 @@ class AIAgentStepComponent extends BaseStepComponent {
|
|
|
6358
6537
|
selectedTab: this.selectedTabInput,
|
|
6359
6538
|
timingBreakdown: this.timingBreakdown,
|
|
6360
6539
|
expanded: this.expanded,
|
|
6540
|
+
selfHealAnalysis: this.selfHealAnalysis,
|
|
6361
6541
|
};
|
|
6362
6542
|
super.ngOnInit();
|
|
6363
6543
|
this.selectedTab = this.config.selectedTab || 'action-trace';
|
|
@@ -6393,14 +6573,31 @@ class AIAgentStepComponent extends BaseStepComponent {
|
|
|
6393
6573
|
duration: action.duration,
|
|
6394
6574
|
}));
|
|
6395
6575
|
}
|
|
6576
|
+
onMakeCurrentBaseline(event) {
|
|
6577
|
+
this.makeCurrentBaseline.emit(event);
|
|
6578
|
+
}
|
|
6579
|
+
onUploadBaseline(event) {
|
|
6580
|
+
this.uploadBaseline.emit(event);
|
|
6581
|
+
}
|
|
6582
|
+
onAnalyze() {
|
|
6583
|
+
this.analyze.emit();
|
|
6584
|
+
}
|
|
6585
|
+
onViewFullLogs() {
|
|
6586
|
+
this.viewFullLogs.emit();
|
|
6587
|
+
}
|
|
6588
|
+
onSelfHealAction(event) {
|
|
6589
|
+
this.selfHealAction.emit(event);
|
|
6590
|
+
}
|
|
6396
6591
|
}
|
|
6397
6592
|
AIAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6398
|
-
AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, 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><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 <!-- Lightbulb Icon and Step Number -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n AI Agent\n </span>\n </div>\n\n <!-- Action Count -->\n <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n </div>\n <button class=\"cqa-p-1.5\" (click)=\"copyPrompt()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div>\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config.actions.length }} actions</b> \n from previous runs\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div\n *ngFor=\"let action of config.actions; let i = index\"\n class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\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=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n </div>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "expanded", "subSteps", "failureDetails", "reasoning", "confidence"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6593
|
+
AIAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AIAgentStepComponent, selector: "cqa-ai-agent-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", prompt: "prompt", optimizedRun: "optimizedRun", actionCount: "actionCount", actions: "actions", selectedTabInput: "selectedTabInput", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", selfHealAnalysis: "selfHealAnalysis" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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><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 <!-- Lightbulb Icon and Step Number -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n AI Agent\n </span>\n </div>\n\n <!-- Action Count -->\n <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n </div>\n <button class=\"cqa-p-1.5\" (click)=\"copyPrompt()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div>\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config.actions.length }} actions</b> \n from previous runs\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div\n *ngFor=\"let action of config.actions; let i = index\"\n class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\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=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n </div>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\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=\"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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
6399
6594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AIAgentStepComponent, decorators: [{
|
|
6400
6595
|
type: Component,
|
|
6401
|
-
args: [{ selector: 'cqa-ai-agent-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><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 <!-- Lightbulb Icon and Step Number -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n AI Agent\n </span>\n </div>\n\n <!-- Action Count -->\n <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n </div>\n <button class=\"cqa-p-1.5\" (click)=\"copyPrompt()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div>\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config.actions.length }} actions</b> \n from previous runs\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div\n *ngFor=\"let action of config.actions; let i = index\"\n class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\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=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n </div>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\n </div>\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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6596
|
+
args: [{ selector: 'cqa-ai-agent-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><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 <!-- Lightbulb Icon and Step Number -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M8.8315 10.5H11.168M10 3.5V4M13.182 4.818L12.8285 5.1715M14.5 8H14M6 8H5.5M7.1715 5.1715L6.818 4.818M8.232 9.768C7.88243 9.41834 7.6444 8.97288 7.54799 8.48795C7.45158 8.00301 7.50113 7.50038 7.69036 7.04361C7.8796 6.58683 8.20003 6.19642 8.61114 5.92175C9.02225 5.64707 9.50557 5.50047 10 5.50047C10.4944 5.50047 10.9777 5.64707 11.3889 5.92175C11.8 6.19642 12.1204 6.58683 12.3096 7.04361C12.4989 7.50038 12.5484 8.00301 12.452 8.48795C12.3556 8.97288 12.1176 9.41834 11.768 9.768L11.494 10.0415C11.3374 10.1982 11.2131 10.3842 11.1283 10.5889C11.0436 10.7936 11 11.0129 11 11.2345V11.5C11 11.7652 10.8946 12.0196 10.7071 12.2071C10.5196 12.3946 10.2652 12.5 10 12.5C9.73478 12.5 9.48043 12.3946 9.29289 12.2071C9.10536 12.0196 9 11.7652 9 11.5V11.2345C9 10.787 8.822 10.3575 8.506 10.0415L8.232 9.768Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n \n <!-- Loop Type Badges -->\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n AI Agent\n </span>\n </div>\n\n <!-- Action Count -->\n <span *ngIf=\"config.actionCount\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#E17100] cqa-bg-[#FEF3C6] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.actionCount }} actions\n </span>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- Prompt Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #FEE685\">\n <div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33333 6.66675H5.34M8 6.66675H8.00667M10.6667 6.66675H10.6733M6 10.6667H3.33333C2.97971 10.6667 2.64057 10.5263 2.39052 10.2762C2.14048 10.0262 2 9.68704 2 9.33341V4.00008C2 3.64646 2.14048 3.30732 2.39052 3.05727C2.64057 2.80722 2.97971 2.66675 3.33333 2.66675H12.6667C13.0203 2.66675 13.3594 2.80722 13.6095 3.05727C13.8595 3.30732 14 3.64646 14 4.00008V9.33341C14 9.68704 13.8595 10.0262 13.6095 10.2762C13.3594 10.5263 13.0203 10.6667 12.6667 10.6667H9.33333L6 14.0001V10.6667Z\" stroke=\"#E17100\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#BB4D00] \">PROMPT</span>\n <span *ngIf=\"config.optimizedRun\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-primary cqa-bg-[#EBECFD]\">\n Optimized Run\n </span>\n </div>\n <p class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\" [innerHTML]=\"config.prompt\"></p>\n </div>\n <button class=\"cqa-p-1.5\" (click)=\"copyPrompt()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"cqa-flex cqa-items-center cqa-flex-wrap cqa-my-1.5\" style=\"border-bottom: 1px solid #E4E4E4\">\n <button\n (click)=\"selectTab('action-trace')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'action-trace'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'action-trace' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Action Trace\n <span *ngIf=\"config.actions.length > 0\" class=\"cqa-bg-[#F5F5F5] cqa-text-current cqa-text-[10px] cqa-leading-[13.3px] cqa-font-medium cqa-rounded-full cqa-w-[16px] cqa-h-[16px] cqa-min-w-[16px] cqa-flex cqa-items-center cqa-justify-center\">\n {{ config.actions.length }}\n </span>\n </button>\n <button\n (click)=\"selectTab('planner-timeline')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'planner-timeline'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'planner-timeline' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n Planner Timeline\n </button>\n <button\n (click)=\"selectTab('ai-reasoning')\"\n [ngClass]=\"{'!cqa-text-[#BB4D00]': selectedTab === 'ai-reasoning'}\"\n [ngStyle]=\"{'border-bottom': selectedTab === 'ai-reasoning' ? '2px solid #FE9A00' : '2px solid transparent'}\"\n class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[12px] cqa-leading-4 cqa-font-medium cqa-text-[#636363] cqa-transition-colors\">\n AI Reasoning\n </button>\n </div>\n\n <!-- Tab Content -->\n <!-- Action Trace Tab -->\n <div *ngIf=\"selectedTab === 'action-trace'\">\n <div class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-mb-1.5 cqa-p-2 cqa-bg-[#EFF6FF]\" style=\"border: 1px solid #BEDBFF\">\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.66667 4.66675H14M14 4.66675V10.0001M14 4.66675L8.66667 10.0001L6 7.33341L2 11.3334\" stroke=\"#155DFC\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-font-medium cqa-text-[#1447E6] cqa-text-[10px] cqa-leading-[15px]\">\n <b>{{ config.actions.length }} actions</b> \n from previous runs\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div\n *ngFor=\"let action of config.actions; let i = index\"\n class=\"cqa-rounded-md cqa-flex cqa-items-center cqa-gap-2 cqa-px-2 cqa-py-1 cqa-bg-[#F7FAFC]\" style=\"border: 1px solid #BEDBFF\">\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=\"8\" fill=\"#DBEAFE\"/><path d=\"M5.08337 8.41675L6.75004 10.0834L10.9167 5.91675\" stroke=\"#155DFC\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <!-- <mat-icon\n class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px] cqa-text-yellow-500\">\n {{ getActionIcon(action.type) }}\n </mat-icon> -->\n <div><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"4\" fill=\"#FEF3C6\"/><path d=\"M10.5 9V5.5L6 11H9.5V14.5L14 9H10.5Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span class=\"cqa-flex-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-bold cqa-text-gray-[#0B0B0B]\">{{ action.description }}</span>\n <span *ngIf=\"action.confidence\" class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#00A63E]\">\n {{ action.confidence }}%\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n {{ formatDuration(action.duration) }}\n </span>\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.5 2.5L8 6L4.5 9.5\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n </div>\n </div>\n </div>\n\n <!-- Planner Timeline Tab -->\n <div *ngIf=\"selectedTab === 'planner-timeline'\" class=\"cqa-text-sm cqa-text-gray-600\">\n Planner timeline content would go here\n </div>\n\n <!-- AI Reasoning Tab -->\n <div *ngIf=\"selectedTab === 'ai-reasoning'\" class=\"cqa-text-sm cqa-text-gray-600\">\n AI reasoning content would go here\n </div>\n\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=\"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\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6402
6597
|
}], propDecorators: { id: [{
|
|
6403
6598
|
type: Input
|
|
6599
|
+
}], testStepResultId: [{
|
|
6600
|
+
type: Input
|
|
6404
6601
|
}], stepNumber: [{
|
|
6405
6602
|
type: Input
|
|
6406
6603
|
}], title: [{
|
|
@@ -6429,17 +6626,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6429
6626
|
type: Input
|
|
6430
6627
|
}], confidence: [{
|
|
6431
6628
|
type: Input
|
|
6629
|
+
}], isUploadingBaseline: [{
|
|
6630
|
+
type: Input
|
|
6631
|
+
}], selfHealAnalysis: [{
|
|
6632
|
+
type: Input
|
|
6633
|
+
}], makeCurrentBaseline: [{
|
|
6634
|
+
type: Output
|
|
6635
|
+
}], uploadBaseline: [{
|
|
6636
|
+
type: Output
|
|
6637
|
+
}], analyze: [{
|
|
6638
|
+
type: Output
|
|
6639
|
+
}], viewFullLogs: [{
|
|
6640
|
+
type: Output
|
|
6641
|
+
}], selfHealAction: [{
|
|
6642
|
+
type: Output
|
|
6432
6643
|
}] } });
|
|
6433
6644
|
|
|
6434
6645
|
class ApiStepComponent extends BaseStepComponent {
|
|
6435
6646
|
constructor() {
|
|
6436
6647
|
super(...arguments);
|
|
6648
|
+
this.isUploadingBaseline = {};
|
|
6649
|
+
this.makeCurrentBaseline = new EventEmitter();
|
|
6650
|
+
this.uploadBaseline = new EventEmitter();
|
|
6651
|
+
this.analyze = new EventEmitter();
|
|
6652
|
+
this.viewFullLogs = new EventEmitter();
|
|
6653
|
+
this.selfHealAction = new EventEmitter();
|
|
6437
6654
|
this.showFailedStepDetails = false;
|
|
6438
6655
|
}
|
|
6439
6656
|
ngOnInit() {
|
|
6440
6657
|
// Build config from individual inputs
|
|
6441
6658
|
this.config = {
|
|
6442
6659
|
id: this.id,
|
|
6660
|
+
testStepResultId: this.testStepResultId,
|
|
6443
6661
|
stepNumber: this.stepNumber,
|
|
6444
6662
|
title: this.title,
|
|
6445
6663
|
status: this.status,
|
|
@@ -6517,14 +6735,31 @@ class ApiStepComponent extends BaseStepComponent {
|
|
|
6517
6735
|
getSubStepsForFailedStep() {
|
|
6518
6736
|
return this.initialActions || [];
|
|
6519
6737
|
}
|
|
6738
|
+
onMakeCurrentBaseline(event) {
|
|
6739
|
+
this.makeCurrentBaseline.emit(event);
|
|
6740
|
+
}
|
|
6741
|
+
onUploadBaseline(event) {
|
|
6742
|
+
this.uploadBaseline.emit(event);
|
|
6743
|
+
}
|
|
6744
|
+
onAnalyze() {
|
|
6745
|
+
this.analyze.emit();
|
|
6746
|
+
}
|
|
6747
|
+
onViewFullLogs() {
|
|
6748
|
+
this.viewFullLogs.emit();
|
|
6749
|
+
}
|
|
6750
|
+
onSelfHealAction(event) {
|
|
6751
|
+
this.selfHealAction.emit(event);
|
|
6752
|
+
}
|
|
6520
6753
|
}
|
|
6521
6754
|
ApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6522
|
-
ApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiStepComponent, selector: "cqa-api-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", method: "method", endpoint: "endpoint", statusCode: "statusCode", responseTime: "responseTime", requestBody: "requestBody", responseBody: "responseBody", requestHeaders: "requestHeaders", responseHeaders: "responseHeaders", assertions: "assertions", initialActions: "initialActions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence" }, 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><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 <!-- API Icon -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n API\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\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 <!-- Initial Actions -->\n <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n <div\n *ngFor=\"let action of config.initialActions\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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 <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n </div>\n </div>\n\n <!-- Request Summary Card -->\n <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n \n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Request Summary</span>\n <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy\n </button>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.statusCode }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ config.responseTime }}ms</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Request/Response Headers -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n <!-- Request Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n <button (click)=\"copyRequestHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n </div>\n\n <!-- Response Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n <button (click)=\"copyResponseHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n </div>\n </div>\n\n <!-- Request/Response Bodies -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n <!-- Request Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n <button (click)=\"copyRequestBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n View full request\n </a>\n </div>\n\n <!-- Response Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n <button (click)=\"copyResponseBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n </div>\n </div>\n\n <!-- Assertions -->\n <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getPassedAssertions() }} passed\n </span>\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getFailedAssertions() }} failed\n </span>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let assertion of config.assertions\"\n class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n [ngStyle]=\"{\n 'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n 'border': assertion.status === 'passed'\n ? '1px solid #A7F3D0'\n : '1px solid #FFC9C9'\n }\"\n >\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n <div>\n <!-- Passed -->\n <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-container>\n \n <!-- Failed -->\n <ng-template #failedIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-template>\n </div>\n <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n [ngClass]=\"{\n 'cqa-text-[#9F0712]': assertion.status !== 'passed',\n 'cqa-text-[#016630]': assertion.status === 'passed'\n }\"\n >\n {{ assertion.description }}\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <div>\n <span>Expected:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n {{ assertion.expected }}\n </span>\n </div>\n <div>\n <span>Actual:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n {{ assertion.actual }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "expanded", "subSteps", "failureDetails", "reasoning", "confidence"] }], 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"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6755
|
+
ApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiStepComponent, selector: "cqa-api-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", method: "method", endpoint: "endpoint", statusCode: "statusCode", responseTime: "responseTime", requestBody: "requestBody", responseBody: "responseBody", requestHeaders: "requestHeaders", responseHeaders: "responseHeaders", assertions: "assertions", initialActions: "initialActions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", isUploadingBaseline: "isUploadingBaseline", selfHealAnalysis: "selfHealAnalysis" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, 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><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 <!-- API Icon -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n API\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\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 <!-- Initial Actions -->\n <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n <div\n *ngFor=\"let action of config.initialActions\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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 <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n </div>\n </div>\n\n <!-- Request Summary Card -->\n <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n \n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Request Summary</span>\n <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy\n </button>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.statusCode }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ config.responseTime }}ms</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Request/Response Headers -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\" *ngIf=\"config?.requestHeaders || config?.responseHeaders\">\n <!-- Request Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n <button (click)=\"copyRequestHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n </div>\n\n <!-- Response Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n <button (click)=\"copyResponseHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n </div>\n </div>\n\n <!-- Request/Response Bodies -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\" *ngIf=\"config?.requestBody || config?.responseBody\">\n <!-- Request Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n <button (click)=\"copyRequestBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n View full request\n </a>\n </div>\n\n <!-- Response Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n <button (click)=\"copyResponseBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n </div>\n </div>\n\n <!-- Assertions -->\n <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getPassedAssertions() }} passed\n </span>\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getFailedAssertions() }} failed\n </span>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let assertion of config.assertions\"\n class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n [ngStyle]=\"{\n 'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n 'border': assertion.status === 'passed'\n ? '1px solid #A7F3D0'\n : '1px solid #FFC9C9'\n }\"\n >\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n <div>\n <!-- Passed -->\n <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-container>\n \n <!-- Failed -->\n <ng-template #failedIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-template>\n </div>\n <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n [ngClass]=\"{\n 'cqa-text-[#9F0712]': assertion.status !== 'passed',\n 'cqa-text-[#016630]': assertion.status === 'passed'\n }\"\n >\n {{ assertion.description }}\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <div>\n <span>Expected:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n {{ assertion.expected }}\n </span>\n </div>\n <div>\n <span>Actual:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n {{ assertion.actual }}\n </span>\n </div>\n </div>\n </div>\n </div>\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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", components: [{ type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["originalLocator", "healedLocator", "confidence", "healMethod"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
6523
6756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiStepComponent, decorators: [{
|
|
6524
6757
|
type: Component,
|
|
6525
|
-
args: [{ selector: 'cqa-api-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><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 <!-- API Icon -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n API\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\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 <!-- Initial Actions -->\n <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n <div\n *ngFor=\"let action of config.initialActions\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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 <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n </div>\n </div>\n\n <!-- Request Summary Card -->\n <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n \n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Request Summary</span>\n <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy\n </button>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.statusCode }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ config.responseTime }}ms</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Request/Response Headers -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n <!-- Request Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n <button (click)=\"copyRequestHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n </div>\n\n <!-- Response Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n <button (click)=\"copyResponseHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n </div>\n </div>\n\n <!-- Request/Response Bodies -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\">\n <!-- Request Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n <button (click)=\"copyRequestBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n View full request\n </a>\n </div>\n\n <!-- Response Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n <button (click)=\"copyResponseBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n </div>\n </div>\n\n <!-- Assertions -->\n <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getPassedAssertions() }} passed\n </span>\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getFailedAssertions() }} failed\n </span>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let assertion of config.assertions\"\n class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n [ngStyle]=\"{\n 'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n 'border': assertion.status === 'passed'\n ? '1px solid #A7F3D0'\n : '1px solid #FFC9C9'\n }\"\n >\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n <div>\n <!-- Passed -->\n <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-container>\n \n <!-- Failed -->\n <ng-template #failedIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-template>\n </div>\n <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n [ngClass]=\"{\n 'cqa-text-[#9F0712]': assertion.status !== 'passed',\n 'cqa-text-[#016630]': assertion.status === 'passed'\n }\"\n >\n {{ assertion.description }}\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <div>\n <span>Expected:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n {{ assertion.expected }}\n </span>\n </div>\n <div>\n <span>Actual:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n {{ assertion.actual }}\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6758
|
+
args: [{ selector: 'cqa-api-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><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 <!-- API Icon -->\n <div><svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#EDE9FE\"/><path d=\"M8 6.5L9.5 8L8 9.5M10.5 9.5H12M6.5 12H13.5C13.7652 12 14.0196 11.8946 14.2071 11.7071C14.3946 11.5196 14.5 11.2652 14.5 11V5C14.5 4.73478 14.3946 4.48043 14.2071 4.29289C14.0196 4.10536 13.7652 4 13.5 4H6.5C6.23478 4 5.98043 4.10536 5.79289 4.29289C5.60536 4.48043 5.5 4.73478 5.5 5V11C5.5 11.2652 5.60536 11.5196 5.79289 11.7071C5.98043 11.8946 6.23478 12 6.5 12Z\" stroke=\"#7F22FE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#7008E7] cqa-bg-[#EDE9FE] cqa-text-[10px] cqa-leading-[15px]\">\n API\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\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 <!-- Initial Actions -->\n <div *ngIf=\"config.initialActions && config.initialActions.length > 0\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-ml-9\">\n <div\n *ngFor=\"let action of config.initialActions\"\n class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\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 <span class=\"cqa-flex-1 cqa-text-[11px] cqa-leading-[13px] cqa-text-[#364153]\">{{ action.description }}</span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">{{ formatDuration(action.duration) }}</span>\n </div>\n </div>\n\n <!-- Request Summary Card -->\n <div class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4\" style=\"border-top: 1px solid #E4E4E4;\">\n \n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Request Summary</span>\n <button class=\"cqa-flex cqa-items-center cqa-gap-1 p-0\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Copy\n </button>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#008236] cqa-bg-[#DCFCE7] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.method }}\n </span>\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">{{ config.endpoint }}</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span [ngClass]=\"getStatusBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.5 3.5L3.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.5 3.5L10.5 10.5\" stroke=\"#E7000B\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.statusCode }}\n </span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.99999 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00008C12.8333 3.77842 10.2217 1.16675 6.99999 1.16675C3.77833 1.16675 1.16666 3.77842 1.16666 7.00008C1.16666 10.2217 3.77833 12.8334 6.99999 12.8334Z\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span>{{ config.responseTime }}ms</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Request/Response Headers -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\" *ngIf=\"config?.requestHeaders || config?.responseHeaders\">\n <!-- Request Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Headers</span>\n <button (click)=\"copyRequestHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestHeaders\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestHeaders) }}</pre>\n </div>\n\n <!-- Response Headers -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Headers</span>\n <button (click)=\"copyResponseHeaders()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseHeaders\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseHeaders) }}</pre>\n </div>\n </div>\n\n <!-- Request/Response Bodies -->\n <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-mt-4\" *ngIf=\"config?.requestBody || config?.responseBody\">\n <!-- Request Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Request Body</span>\n <button (click)=\"copyRequestBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.requestBody\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-text-[#0B0B0B] cqa-bg-[#F8F8F8] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.requestBody) }}</pre>\n <a *ngIf=\"config.requestBody\" href=\"#\" class=\"cqa-text-[12px] cqa-leading-[15px] cqa-no-underline cqa-text-primary cqa-font-medium cqa-flex cqa-items-center cqa-gap-1\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n View full request\n </a>\n </div>\n\n <!-- Response Body -->\n <div class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Response Body</span>\n <button (click)=\"copyResponseBody()\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 4H5C4.44772 4 4 4.44772 4 5V10C4 10.5523 4.44772 11 5 11H10C10.5523 11 11 10.5523 11 10V5C11 4.44772 10.5523 4 10 4Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2 8C1.45 8 1 7.55 1 7V2C1 1.45 1.45 1 2 1H7C7.55 1 8 1.45 8 2\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <pre *ngIf=\"config.responseBody\" [ngClass]=\"{'cqa-bg-[#FEF2F2] cqa-text-[#C10007]': config.statusCode >= 400}\" class=\"cqa-h-full cqa-text-[11px] cqa-leading-[13px] cqa-p-2 cqa-m-0 cqa-rounded cqa-overflow-auto cqa-max-h-[114px]\">{{ formatJson(config.responseBody) }}</pre>\n </div>\n </div>\n\n <!-- Assertions -->\n <div *ngIf=\"config.assertions && config.assertions.length > 0\" class=\"cqa-bg-[#FCFCFC] cqa-rounded-lg cqa-p-3 cqa-flex cqa-flex-col\" style=\"border: 1px solid #EDE9FE\">\n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-mb-3\">\n <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">Assertions</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#00A63E]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3L4.5 8.5L2 6\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getPassedAssertions() }} passed\n </span>\n <span class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#E7000B]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 3L3 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 3L9 9\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ getFailedAssertions() }} failed\n </span>\n </div>\n </div>\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div\n *ngFor=\"let assertion of config.assertions\"\n class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363] cqa-px-3 cqa-py-1 cqa-rounded-md\"\n [ngStyle]=\"{\n 'background-color': assertion.status === 'passed' ? '#ECFDF3' : '#FEF2F2',\n 'border': assertion.status === 'passed'\n ? '1px solid #A7F3D0'\n : '1px solid #FFC9C9'\n }\"\n >\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-2\">\n <div>\n <!-- Passed -->\n <ng-container *ngIf=\"assertion.status === 'passed'; else failedIcon\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#DCFCE7\"/><path d=\"M14 7L8.5 12.5L6 10\" stroke=\"#00A63E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-container>\n \n <!-- Failed -->\n <ng-template #failedIcon>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"10\" fill=\"#FFE2E2\"/><path d=\"M13 7L7 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 7L13 13\" stroke=\"#E7000B\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </ng-template>\n </div>\n <div class=\"cqa-text-[10px] cqa-leading-[13px]\" \n [ngClass]=\"{\n 'cqa-text-[#9F0712]': assertion.status !== 'passed',\n 'cqa-text-[#016630]': assertion.status === 'passed'\n }\"\n >\n {{ assertion.description }}\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n <div>\n <span>Expected:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-[#008236]' : 'cqa-text-[#0B0B0B]'\">\n {{ assertion.expected }}\n </span>\n </div>\n <div>\n <span>Actual:</span>\n <span [ngClass]=\"assertion.status === 'passed' ? 'cqa-text-green-600' : 'cqa-text-[#E7000B]'\">\n {{ assertion.actual }}\n </span>\n </div>\n </div>\n </div>\n </div>\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=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n </div>\n\n <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n <div *ngIf=\"isExpanded && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-view-more-failed-step-button\n [timingBreakdown]=\"timingBreakdown\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n </cqa-view-more-failed-step-button>\n </div>\n\n <!-- Updated Failed Step Component - shown when button is clicked -->\n <div *ngIf=\"showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n <cqa-updated-failed-step\n [testStepResultId]=\"testStepResultId\"\n [timingBreakdown]=\"timingBreakdown\"\n [expanded]=\"true\"\n [subSteps]=\"getSubStepsForFailedStep()\"\n [failureDetails]=\"failureDetails\"\n [reasoning]=\"reasoning\"\n [confidence]=\"confidence\"\n [isUploadingBaseline]=\"isUploadingBaseline\"\n (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n (uploadBaseline)=\"onUploadBaseline($event)\"\n (analyze)=\"onAnalyze()\"\n (viewFullLogs)=\"onViewFullLogs()\">\n </cqa-updated-failed-step>\n </div>\n</div>\n", styles: [] }]
|
|
6526
6759
|
}], propDecorators: { id: [{
|
|
6527
6760
|
type: Input
|
|
6761
|
+
}], testStepResultId: [{
|
|
6762
|
+
type: Input
|
|
6528
6763
|
}], stepNumber: [{
|
|
6529
6764
|
type: Input
|
|
6530
6765
|
}], title: [{
|
|
@@ -6563,6 +6798,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
6563
6798
|
type: Input
|
|
6564
6799
|
}], confidence: [{
|
|
6565
6800
|
type: Input
|
|
6801
|
+
}], isUploadingBaseline: [{
|
|
6802
|
+
type: Input
|
|
6803
|
+
}], selfHealAnalysis: [{
|
|
6804
|
+
type: Input
|
|
6805
|
+
}], makeCurrentBaseline: [{
|
|
6806
|
+
type: Output
|
|
6807
|
+
}], uploadBaseline: [{
|
|
6808
|
+
type: Output
|
|
6809
|
+
}], analyze: [{
|
|
6810
|
+
type: Output
|
|
6811
|
+
}], viewFullLogs: [{
|
|
6812
|
+
type: Output
|
|
6813
|
+
}], selfHealAction: [{
|
|
6814
|
+
type: Output
|
|
6566
6815
|
}] } });
|
|
6567
6816
|
|
|
6568
6817
|
class FileDownloadStepComponent extends BaseStepComponent {
|
|
@@ -6570,6 +6819,7 @@ class FileDownloadStepComponent extends BaseStepComponent {
|
|
|
6570
6819
|
// Build config from individual inputs
|
|
6571
6820
|
this.config = {
|
|
6572
6821
|
id: this.id,
|
|
6822
|
+
testStepResultId: this.testStepResultId,
|
|
6573
6823
|
stepNumber: this.stepNumber,
|
|
6574
6824
|
title: this.title,
|
|
6575
6825
|
status: this.status,
|
|
@@ -6616,12 +6866,14 @@ class FileDownloadStepComponent extends BaseStepComponent {
|
|
|
6616
6866
|
}
|
|
6617
6867
|
}
|
|
6618
6868
|
FileDownloadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
6619
|
-
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div><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 <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n (click)=\"onDownload()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6869
|
+
FileDownloadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FileDownloadStepComponent, selector: "cqa-file-download-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", fileName: "fileName", fileType: "fileType", fileSize: "fileSize", filePath: "filePath", downloaded: "downloaded" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, ngImport: i0, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div><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 <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n (click)=\"onDownload()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6620
6870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FileDownloadStepComponent, decorators: [{
|
|
6621
6871
|
type: Component,
|
|
6622
6872
|
args: [{ selector: 'cqa-file-download-step', host: { class: 'cqa-ui-root' }, template: "<div>\n <!-- Header -->\n <div\n class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n (click)=\"toggle()\">\n \n <!-- Status Icon -->\n <div><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 <!-- Download Icon -->\n <div><svg width=\"20\" height=\"13\" viewBox=\"0 0 20 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"13\" rx=\"4\" fill=\"#E6F4FF\"/><path d=\"M5.5 8.75V9.3125C5.5 9.76005 5.67779 10.1893 5.99426 10.5057C6.31072 10.8222 6.73995 11 7.1875 11H12.8125C13.2601 11 13.6893 10.8222 14.0057 10.5057C14.3222 10.1893 14.5 9.76005 14.5 9.3125V8.75M12.25 6.5L10 8.75M10 8.75L7.75 6.5M10 8.75V2\" stroke=\"#0A86E6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n <!-- Step Number and Title -->\n <div class=\"cqa-flex-1 cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-font-bold cqa-text-[#334155] cqa-text-[11px] cqa-leading-[13px]\">\n {{ config.stepNumber }}. <span [innerHTML]=\"config.title\"></span>\n </span>\n <span class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#0A86E6] cqa-bg-[#E6F4FF] cqa-text-[10px] cqa-leading-[15px]\">\n File Download\n </span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n <span class=\"cqa-text-[9px] cqa-leading-[11px] cqa-text-[#9CA3AF]\">\n {{ formatDuration(config.duration) }}\n </span>\n <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </div>\n </div>\n\n <!-- Expanded Content -->\n <div *ngIf=\"isExpanded\" class=\"cqa-bg-[#FFFEF9] cqa-mt-1.5 cqa-ml-9 cqa-mr-6 cqa-p-4 cqa-flex cqa-flex-col cqa-gap-1.5\" style=\"border-top: 1px solid #E4E4E4;\">\n <!-- File Details Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #6DBFFF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M16.5 5.66675H9.00004C8.55801 5.66675 8.13409 5.84234 7.82153 6.1549C7.50897 6.46746 7.33337 6.89139 7.33337 7.33341V20.6667C7.33337 21.1088 7.50897 21.5327 7.82153 21.8453C8.13409 22.1578 8.55801 22.3334 9.00004 22.3334H19C19.4421 22.3334 19.866 22.1578 20.1786 21.8453C20.4911 21.5327 20.6667 21.1088 20.6667 20.6667V9.83341L16.5 5.66675Z\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M15.6666 5.66675V9.00008C15.6666 9.44211 15.8422 9.86603 16.1548 10.1786C16.4673 10.4912 16.8913 10.6667 17.3333 10.6667H20.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.3333 11.5H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 14.8333H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M17.3333 18.1667H10.6666\" stroke=\"#6DBFFF\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">{{ config.fileName }}</span>\n <span [ngClass]=\"getFileTypeBadgeClass()\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-px-1 cqa-py-[2px] cqa-rounded cqa-font-medium cqa-text-[#E7000B] cqa-bg-[#FFE2E2] cqa-text-[10px] cqa-leading-[15px]\">\n {{ config.fileType }}\n </span>\n </div>\n <div *ngIf=\"config.fileSize\" class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.5 1H3C2.73478 1 2.48043 1.10536 2.29289 1.29289C2.10536 1.48043 2 1.73478 2 2V10C2 10.2652 2.10536 10.5196 2.29289 10.7071C2.48043 10.8946 2.73478 11 3 11H9C9.26522 11 9.51957 10.8946 9.70711 10.7071C9.89464 10.5196 10 10.2652 10 10V3.5L7.5 1Z\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1V3C7 3.26522 7.10536 3.51957 7.29289 3.70711C7.48043 3.89464 7.73478 4 8 4H10\" stroke=\"#636363\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n {{ config.fileSize }}\n </div>\n </div>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-[#E6F4FF] cqa-text-[#6DBFFF] cqa-px-[10px] cqa-py-[2px] cqa-rounded-full cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00001 9.16658C7.3012 9.16658 9.16668 7.30111 9.16668 4.99992C9.16668 2.69873 7.3012 0.833252 5.00001 0.833252C2.69882 0.833252 0.833344 2.69873 0.833344 4.99992C0.833344 7.30111 2.69882 9.16658 5.00001 9.16658Z\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.75 5.00008L4.58333 5.83341L6.25 4.16675\" stroke=\"#6DBFFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n Downloaded\n </button>\n </div>\n </div>\n\n <!-- Download Attachment Card -->\n <div class=\"cqa-flex cqa-justify-between cqa-items-start cqa-bg-white cqa-rounded-lg cqa-px-3 cqa-py-1\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-w-full\">\n <div><svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"28\" height=\"28\" rx=\"5\" fill=\"#E6F4FF\"/><path d=\"M20 16V18.6667C20 19.0203 19.8595 19.3594 19.6095 19.6095C19.3594 19.8595 19.0203 20 18.6667 20H9.33333C8.97971 20 8.64057 19.8595 8.39052 19.6095C8.14048 19.3594 8 19.0203 8 18.6667V16\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.6666 12.6667L14 16.0001L17.3333 12.6667\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 16V8\" stroke=\"#0B95FF\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#0B0B0B\">Download Attachment</span>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[8px] cqa-leading-[12px] cqa-text-[#636363]\">\n Access the downloaded file\n </div>\n </div>\n <button\n *ngIf=\"!config.downloaded\"\n (click)=\"onDownload()\"\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n <button\n *ngIf=\"config.downloaded\"\n disabled\n class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-bg-transparent cqa-text-black cqa-px-[10px] cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\" style=\"border: 1px solid #212122\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM8.5 5.5L7.795 4.795L6.5 6.085V2H5.5V6.085L4.205 4.795L3.5 5.5L6 8L8.5 5.5Z\" fill=\"black\"/></svg>\n Download\n </button>\n </div>\n </div>\n\n <!-- File Path Cards -->\n <div *ngIf=\"config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0B0B0B]\">\n <span>{{ config.filePath }}</span>\n </div>\n <button class=\"cqa-px-1.5 xqa-py-[3px]\" (click)=\"copyFilePath()\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n\n <div *ngIf=\"!config.filePath\" class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\" style=\"border: 1px solid #9DD5FF\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.3334 13.3333C13.687 13.3333 14.0261 13.1929 14.2762 12.9428C14.5262 12.6928 14.6667 12.3536 14.6667 12V5.33333C14.6667 4.97971 14.5262 4.64057 14.2762 4.39052C14.0261 4.14048 13.687 4 13.3334 4H8.06671C7.84372 4.00219 7.62374 3.94841 7.42691 3.84359C7.23008 3.73877 7.06268 3.58625 6.94004 3.4L6.40004 2.6C6.27863 2.41565 6.11336 2.26432 5.91904 2.1596C5.72472 2.05488 5.50745 2.00004 5.28671 2H2.66671C2.31309 2 1.97395 2.14048 1.7239 2.39052C1.47385 2.64057 1.33337 2.97971 1.33337 3.33333V12C1.33337 12.3536 1.47385 12.6928 1.7239 12.9428C1.97395 13.1929 2.31309 13.3333 2.66671 13.3333H13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">File Path</div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"cqa-flex-1 cqa-bg-[#F5F5F5] cqa-px-3 cqa-py-1 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#636363]\">\n <span>Path not available</span>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Timing Breakdown -->\n <div *ngIf=\"config.timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-1.5 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n <span>Timing breakdown</span>\n </div>\n <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n <div>\n App <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.app) }}</span>\n </div>\n <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n <div>\n Tool <span class=\"cqa-text-gray-700\">{{ formatDuration(config.timingBreakdown.tool) }}</span>\n </div>\n </span>\n </div>\n</div>\n", styles: [] }]
|
|
6623
6873
|
}], propDecorators: { id: [{
|
|
6624
6874
|
type: Input
|
|
6875
|
+
}], testStepResultId: [{
|
|
6876
|
+
type: Input
|
|
6625
6877
|
}], stepNumber: [{
|
|
6626
6878
|
type: Input
|
|
6627
6879
|
}], title: [{
|