@cqa-lib/cqa-ui 1.1.21 → 1.1.22

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