npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.176 → 1.1.178 - Mend

@cqa-lib/cqa-ui 1.1.176 → 1.1.178

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 (42) hide show

package/esm2020/lib/compare-runs/compare-runs.component.mjs CHANGED Viewed

@@ -526,7 +526,7 @@ export class CompareRunsComponent {
     }
 }
 CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: i2.DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: i3.ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]