@cqa-lib/cqa-ui 1.1.512 → 1.1.514

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

@@ -1192,6 +1192,15 @@ class DynamicTableComponent {
         this.computedData = [];
         this.computedGridTemplate = '';
         this.computedColumnWidths = [];
+        /**
+         * Hard floor on the `<table>` width = sum of every visible column's minimum (fixed
+         * widths + dynamic columns' `minWidth`). With `table-layout: fixed; width: 100%;` set
+         * by consumers, `<col>` widths become advisory once the container is narrower than
+         * the column-width sum — the browser silently shrinks them. Pinning `min-width` on
+         * the table itself prevents that compaction; the consumer's `overflow-x: auto`
+         * wrapper then scrolls horizontally instead of squishing columns to zero width.
+         */
+        this.computedTableMinWidth = 0;
         // Cache for sanitized HTML to avoid redundant innerHTML renders
         this.htmlCache = new Map();
         this._sortDirection = null;
@@ -1444,13 +1453,32 @@ class DynamicTableComponent {
         const fixedPx = cols.reduce((sum, c) => sum + (c.fixedPx || 0), 0);
         const dynamicCols = cols.filter(c => !c.fixedPx);
         const totalWeight = dynamicCols.reduce((sum, c) => sum + (c.weight || 1), 0) || 1;
+        // Floor on the table itself = every column's minimum width contribution. Fixed
+        // columns contribute `fixedPx`; dynamic columns contribute `minWidth` (or 0 when
+        // unset). The template binds this via `[style.min-width.px]` on the <table> so
+        // narrow containers force horizontal scroll instead of squishing columns to 0.
+        this.computedTableMinWidth = cols.reduce((sum, c) => sum + (c.fixedPx && c.fixedPx > 0 ? c.fixedPx : (c.minWidth || 0)), 0);
         this.computedColumnWidths = cols.map(c => {
             if (c.fixedPx && c.fixedPx > 0) {
-                return `${c.fixedPx}px`;
+                // Fixed-width columns still respect minWidth in the (rare) case the consumer
+                // configured both — `max(fixed, min)` picks whichever is larger.
+                return c.minWidth && c.minWidth > c.fixedPx
+                    ? `max(${c.fixedPx}px, ${c.minWidth}px)`
+                    : `${c.fixedPx}px`;
             }
             const share = (c.weight || 1) / totalWeight;
-            return `calc((100% - ${fixedPx}px) * ${share.toFixed(4)})`;
+            const dynamicWidth = `calc((100% - ${fixedPx}px) * ${share.toFixed(4)})`;
+            // Dynamic-share columns can collapse to ~0 when the table is narrower than
+            // (sum of fixed widths) + the share they'd compute to. Using CSS `max()` floors
+            // the column at `minWidth` so it grows naturally as the table widens but never
+            // shrinks below the configured pixel minimum. With `table-layout: fixed`, the
+            // <col> width is authoritative — without max() here the cell-level `min-width`
+            // we set on <th>/<td> is ignored and columns visually disappear at narrow widths.
+            return c.minWidth && c.minWidth > 0
+                ? `max(${c.minWidth}px, ${dynamicWidth})`
+                : dynamicWidth;
         });
+        console.log('computedColumnWidths', this.computedColumnWidths);
         if (this.gridTemplateColumns) {
             this.computedGridTemplate = this.gridTemplateColumns;
         }
@@ -1598,10 +1626,10 @@ class DynamicTableComponent {
     }
 }
 DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$2.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", rowSelectable: "rowSelectable", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { sortChange: "sortChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    [disabled]=\"!isRowSelectable(row)\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [style.opacity]=\"!isRowSelectable(row) ? '0.45' : null\"\n                    [style.cursor]=\"!isRowSelectable(row) ? 'not-allowed' : null\"\n                    [style.pointer-events]=\"!isRowSelectable(row) ? 'none' : null\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n                    <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n                      <ng-container \n                        cqaCellContainer \n                        #cellContainer=\"cqaCellContainer\"\n                        [componentConfig]=\"renderedValue\"\n                        [row]=\"row\"\n                        [column]=\"col\"\n                        [rowIndex]=\"rowIndex\"\n                        [colId]=\"col.fieldId\">\n                      </ng-container>\n                    </ng-container>\n                    <ng-template #nonComponentCell>\n                      <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n                        <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\">{{ renderedValue }}</span>\n                      </ng-template>\n                    </ng-template>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", components: [{ type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: ["label", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", rowSelectable: "rowSelectable", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { sortChange: "sortChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\"\n           [class.is-loading]=\"true\"\n           [style.min-width.px]=\"computedTableMinWidth || null\"\n           *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [style.min-width.px]=\"col.minWidth\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\"\n              [style.min-width.px]=\"col.minWidth\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    [disabled]=\"!isRowSelectable(row)\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [style.opacity]=\"!isRowSelectable(row) ? '0.45' : null\"\n                    [style.cursor]=\"!isRowSelectable(row) ? 'not-allowed' : null\"\n                    [style.pointer-events]=\"!isRowSelectable(row) ? 'none' : null\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n                    <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n                      <ng-container \n                        cqaCellContainer \n                        #cellContainer=\"cqaCellContainer\"\n                        [componentConfig]=\"renderedValue\"\n                        [row]=\"row\"\n                        [column]=\"col\"\n                        [rowIndex]=\"rowIndex\"\n                        [colId]=\"col.fieldId\">\n                      </ng-container>\n                    </ng-container>\n                    <ng-template #nonComponentCell>\n                      <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n                        <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\">{{ renderedValue }}</span>\n                      </ng-template>\n                    </ng-template>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", components: [{ type: FullTableLoaderComponent, selector: "cqa-full-table-loader", inputs: ["label"] }, { type: TableDataLoaderComponent, selector: "cqa-table-data-loader", inputs: ["label", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    [disabled]=\"!isRowSelectable(row)\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [style.opacity]=\"!isRowSelectable(row) ? '0.45' : null\"\n                    [style.cursor]=\"!isRowSelectable(row) ? 'not-allowed' : null\"\n                    [style.pointer-events]=\"!isRowSelectable(row) ? 'none' : null\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n                    <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n                      <ng-container \n                        cqaCellContainer \n                        #cellContainer=\"cqaCellContainer\"\n                        [componentConfig]=\"renderedValue\"\n                        [row]=\"row\"\n                        [column]=\"col\"\n                        [rowIndex]=\"rowIndex\"\n                        [colId]=\"col.fieldId\">\n                      </ng-container>\n                    </ng-container>\n                    <ng-template #nonComponentCell>\n                      <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n                        <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\">{{ renderedValue }}</span>\n                      </ng-template>\n                    </ng-template>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\"\n           [class.is-loading]=\"true\"\n           [style.min-width.px]=\"computedTableMinWidth || null\"\n           *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [style.min-width.px]=\"col.minWidth\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\"\n              [style.min-width.px]=\"col.minWidth\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    [disabled]=\"!isRowSelectable(row)\"\n                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\n                    [style.opacity]=\"!isRowSelectable(row) ? '0.45' : null\"\n                    [style.cursor]=\"!isRowSelectable(row) ? 'not-allowed' : null\"\n                    [style.pointer-events]=\"!isRowSelectable(row) ? 'none' : null\"\n                    [attr.for]=\"'row-checkbox-' + rowIndex\">\n                  </label>\n                </div>\n              </ng-container>\n              <ng-template #regularCell>\n                <ng-container *ngIf=\"getCellTemplate(col.fieldId) as cellTpl; else defaultCell\">\n                  <ng-container\n                    *ngTemplateOutlet=\"cellTpl; context: {$implicit: row, row: row, value: getCellValue(row, col.fieldValue)}\"></ng-container>\n                </ng-container>\n                <ng-template #defaultCell>\n                  <ng-container *ngIf=\"getRenderedValue(row, col) as renderedValue\">\n                    <ng-container *ngIf=\"isComponent(renderedValue); else nonComponentCell\">\n                      <ng-container \n                        cqaCellContainer \n                        #cellContainer=\"cqaCellContainer\"\n                        [componentConfig]=\"renderedValue\"\n                        [row]=\"row\"\n                        [column]=\"col\"\n                        [rowIndex]=\"rowIndex\"\n                        [colId]=\"col.fieldId\">\n                      </ng-container>\n                    </ng-container>\n                    <ng-template #nonComponentCell>\n                      <ng-container *ngIf=\"isHtmlString(renderedValue); else textCell\">\n                        <div class=\"cqa-text-xs cqa-leading-[17px]\" [innerHTML]=\"getSanitizedHtml(renderedValue)\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\" [ngClass]=\"[\n                        col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                      ]\">{{ renderedValue }}</span>\n                      </ng-template>\n                    </ng-template>\n                  </ng-container>\n                </ng-template>\n              </ng-template>\n            </td>\n          </ng-container>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -19286,19 +19314,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 class ViewCompareButtonComponent {
     constructor() {
+        this.label = 'View Compare';
+        this.isFailureAction = false;
         this.clicked = new EventEmitter();
     }
 }
 ViewCompareButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewCompareButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ViewCompareButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ViewCompareButtonComponent, selector: "cqa-view-compare-button", outputs: { clicked: "clicked" }, ngImport: i0, template: `
+ViewCompareButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ViewCompareButtonComponent, selector: "cqa-view-compare-button", inputs: { label: "label", isFailureAction: "isFailureAction" }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
     <button
       type="button"
-      class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-3 cqa-py-1.5 cqa-text-xs cqa-font-medium cqa-rounded-[6px] cqa-border cqa-border-[#155DFC] cqa-text-[#155DFC] cqa-bg-white"
+      class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[92px] cqa-px-3 cqa-py-1.5 cqa-text-xs cqa-font-medium cqa-rounded-[6px] cqa-border"
+      [ngClass]="isFailureAction ? 'cqa-border-[#F7C9CD] cqa-text-[#FB2C36] cqa-bg-[#FDE8EA]' : 'cqa-border-[#D1D5DB] cqa-text-[#636363] cqa-bg-[#F9FAFB]'"
       (click)="clicked.emit()"
     >
-      View Compare
+      {{ label }}
     </button>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ViewCompareButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -19306,15 +19337,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     template: `
     <button
       type="button"
-      class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-3 cqa-py-1.5 cqa-text-xs cqa-font-medium cqa-rounded-[6px] cqa-border cqa-border-[#155DFC] cqa-text-[#155DFC] cqa-bg-white"
+      class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[92px] cqa-px-3 cqa-py-1.5 cqa-text-xs cqa-font-medium cqa-rounded-[6px] cqa-border"
+      [ngClass]="isFailureAction ? 'cqa-border-[#F7C9CD] cqa-text-[#FB2C36] cqa-bg-[#FDE8EA]' : 'cqa-border-[#D1D5DB] cqa-text-[#636363] cqa-bg-[#F9FAFB]'"
       (click)="clicked.emit()"
     >
-      View Compare
+      {{ label }}
     </button>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { clicked: [{
+        }], propDecorators: { label: [{
+                type: Input
+            }], isFailureAction: [{
+                type: Input
+            }], clicked: [{
                 type: Output
             }] } });
 
@@ -19589,6 +19625,14 @@ class CompareRunsComponent {
     setupTableColumns() {
         if (this.compareMode === 'testPlan') {
             this.tableColumns = [
+                {
+                    fieldId: 'rowIndex',
+                    fieldName: '',
+                    fieldValue: '_compareRowOrdinal',
+                    isShow: true,
+                    fixedPx: 44,
+                    align: 'center'
+                },
                 {
                     fieldId: 'testCase',
                     fieldName: 'Test Cases',
@@ -19636,9 +19680,7 @@ class CompareRunsComponent {
                     isShow: true,
                     weight: 1.1,
                     align: 'center',
-                    render: (row) => `
-            <span class="cqa-text-xs cqa-text-[#636363]">${row.priorityName || 'Unassigned'}</span>
-          `
+                    render: (row) => this.renderPriorityChip(row.priorityName)
                 },
                 {
                     fieldId: 'actions',
@@ -19648,6 +19690,10 @@ class CompareRunsComponent {
                     align: 'center',
                     render: (row) => ({
                         component: ViewCompareButtonComponent,
+                        inputs: {
+                            label: this.getActionLabel(row),
+                            isFailureAction: this.isFailureAction(row)
+                        },
                         outputs: {
                             clicked: () => this.onViewCompare(row)
                         }
@@ -19657,6 +19703,14 @@ class CompareRunsComponent {
             return;
         }
         this.tableColumns = [
+            {
+                fieldId: 'rowIndex',
+                fieldName: '',
+                fieldValue: '_compareRowOrdinal',
+                isShow: true,
+                fixedPx: 44,
+                align: 'center'
+            },
             {
                 fieldId: 'step',
                 fieldName: 'Step',
@@ -19664,9 +19718,12 @@ class CompareRunsComponent {
                 isShow: true,
                 weight: 3,
                 render: (row) => {
+                    const inner = row.stepTitle != null && String(row.stepTitle).trim() !== ''
+                        ? row.stepTitle
+                        : '<span class="cqa-text-xs cqa-text-[#9CA3AF]">—</span>';
                     return `
-            <div class="cqa-flex cqa-items-center cqa-gap-2">
-              <span class="cqa-text-xs cqa-text-[#0B0B0B]">${row.stepTitle}</span>
+            <div class="cqa-flex cqa-items-center cqa-gap-2" style="min-width:0;">
+              <span class="cqa-text-xs cqa-text-[#0B0B0B]">${inner}</span>
             </div>
           `;
                 }
@@ -19807,45 +19864,67 @@ class CompareRunsComponent {
             'TIMING_CHANGED': 'Timing Changed',
             'FIXED': 'Fixed',
             'REGRESSION': 'Regression',
-            'ADDED': 'Added',
-            'NEW STEP': 'New Step',
+            'ADDED': 'New',
+            'NEW STEP': 'New',
             'REMOVED': 'Removed',
             'DELETED STEP': 'Deleted Step'
         };
         const changeColors = {
-            'UNCHANGED': '#6B7280',
-            'NO CHANGE': '#6B7280',
-            'STATUS_CHANGED': '#3B82F6',
-            'TIMING_CHANGED': '#3B82F6',
-            'FIXED': '#3B82F6',
-            'REGRESSION': '#3B82F6',
-            'ADDED': '#10B981',
-            'NEW STEP': '#10B981',
-            'REMOVED': '#EF4444',
-            'DELETED STEP': '#EF4444'
-        };
-        const changeBgColors = {
-            'UNCHANGED': '#F3F4F6',
-            'NO CHANGE': '#F3F4F6',
-            'STATUS_CHANGED': '#DBEAFE',
-            'TIMING_CHANGED': '#DBEAFE',
-            'FIXED': '#DBEAFE',
-            'REGRESSION': '#DBEAFE',
-            'ADDED': '#D1FAE5',
-            'NEW STEP': '#D1FAE5',
-            'REMOVED': '#FEE2E2',
-            'DELETED STEP': '#FEE2E2'
+            'UNCHANGED': { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' },
+            'NO CHANGE': { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' },
+            'TIMING_CHANGED': { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' },
+            'FIXED': { text: '#00A63E', bg: '#DDF5E8', dot: '#00C950' },
+            'REGRESSION': { text: '#FB2C36', bg: '#FDE8EA', dot: '#FB2C36' },
+            'STATUS_CHANGED': { text: '#FB2C36', bg: '#FDE8EA', dot: '#FB2C36' },
+            'ADDED': { text: '#155DFC', bg: '#DBEAFE', dot: '#0A84FF' },
+            'NEW STEP': { text: '#155DFC', bg: '#DBEAFE', dot: '#0A84FF' },
+            'REMOVED': { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' },
+            'DELETED STEP': { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' }
         };
         const label = changeLabels[normalizedChange] || change;
-        const color = changeColors[normalizedChange] || '#6B7280';
-        const bgColor = changeBgColors[normalizedChange] || '#F3F4F6';
+        const token = changeColors[normalizedChange] || { text: '#6B7280', bg: '#F3F4F6', dot: '#9CA3AF' };
         return `
-      <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-semibold cqa-w-max" 
-            style="background-color: ${bgColor}; color: ${color};">
+      <span class="cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-3 cqa-py-1 cqa-rounded-full cqa-text-xs cqa-font-medium cqa-leading-none cqa-w-max" 
+            style="background-color: ${token.bg}; color: ${token.text};">
+        <span style="width: 10px; height: 10px; border-radius: 50%; background-color: ${token.dot}; display: inline-block;"></span>
         ${label}
       </span>
     `;
     }
+    renderPriorityChip(priority) {
+        const raw = (priority || '').toString().trim();
+        const normalized = raw.toUpperCase();
+        const priorityTokens = {
+            CRITICAL: { label: 'Critical', text: '#FB2C36', bg: '#FDE8EA' },
+            HIGH: { label: 'High', text: '#FB2C36', bg: '#FDE8EA' },
+            MEDIUM: { label: 'Medium', text: '#D97706', bg: '#FEF3C7' },
+            NORMAL: { label: 'Normal', text: '#EA580C', bg: '#FDEFE3' },
+            LOW: { label: 'Low', text: '#A16207', bg: '#F5EEDC' }
+        };
+        const token = priorityTokens[normalized];
+        if (!token) {
+            const fallback = raw || 'Unassigned';
+            return `
+        <span class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-3 cqa-py-1 cqa-rounded-full cqa-text-xs cqa-font-medium cqa-leading-none cqa-w-max"
+              style="background-color: #F3F4F6; color: #6B7280;">
+          ${fallback}
+        </span>
+      `;
+        }
+        return `
+      <span class="cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-3 cqa-py-1 cqa-rounded-full cqa-text-xs cqa-font-medium cqa-leading-none cqa-w-max"
+            style="background-color: ${token.bg}; color: ${token.text};">
+        ${token.label}
+      </span>
+    `;
+    }
+    isFailureAction(row) {
+        const runBStatus = (row?.runBStatus || '').toString().toUpperCase().trim();
+        return runBStatus === 'FAILURE';
+    }
+    getActionLabel(row) {
+        return this.isFailureAction(row) ? 'View Failure' : 'View Compare';
+    }
     getRunColumnHeader(run) {
         const selectedRun = run === 'A' ? this.selectedRunA : this.selectedRunB;
         if (selectedRun && selectedRun.id != null) {
@@ -19946,10 +20025,77 @@ class CompareRunsComponent {
         if (!this.comparisonData)
             return;
         this.comparisonSummary = this.comparisonData.summary;
-        this.stepComparisons = this.comparisonData.stepsComparison;
+        const steps = this.comparisonData.stepsComparison || [];
+        this.stepComparisons = steps.map((row, i) => ({ ...row, _compareRowOrdinal: i + 1 }));
+        this.testPlanCardSummary = this.computeTestPlanCardSummary(this.stepComparisons);
         this.pageIndex = 0;
         this.cdr.markForCheck();
     }
+    /**
+     * Builds summary card counts for test-plan compare: pass/fail from Run B vs total;
+     * change buckets from `change` (REGRESSION, FIXED, NEW STEP, etc.).
+     */
+    computeTestPlanCardSummary(steps) {
+        const totalCases = steps.length;
+        let passed = 0;
+        let regressions = 0;
+        let fixed = 0;
+        let newSteps = 0;
+        let removed = 0;
+        let noChange = 0;
+        for (const row of steps) {
+            const b = (row.runBStatus || '').toUpperCase().trim();
+            if (b === 'SUCCESS') {
+                passed++;
+            }
+            const changeUpper = (row.change || '').toString().toUpperCase().trim();
+            if (changeUpper === 'REGRESSION') {
+                regressions++;
+            }
+            else if (changeUpper === 'FIXED') {
+                fixed++;
+            }
+            else if (changeUpper === 'NEW STEP' || changeUpper === 'ADDED') {
+                newSteps++;
+            }
+            else if (changeUpper === 'DELETED STEP' || changeUpper === 'REMOVED') {
+                removed++;
+            }
+            else if (changeUpper === 'NO CHANGE' ||
+                changeUpper === 'UNCHANGED' ||
+                changeUpper === 'TIMING_CHANGED' ||
+                changeUpper === 'TIMING CHANGED') {
+                noChange++;
+            }
+            else if (changeUpper === 'STATUS_CHANGED') {
+                const ra = (row.runAStatus || '').toUpperCase().trim();
+                const rb = (row.runBStatus || '').toUpperCase().trim();
+                if (ra === 'SUCCESS' && rb === 'FAILURE') {
+                    regressions++;
+                }
+                else if (ra === 'FAILURE' && rb === 'SUCCESS') {
+                    fixed++;
+                }
+                else {
+                    regressions++;
+                }
+            }
+            else {
+                noChange++;
+            }
+        }
+        const failed = Math.max(0, totalCases - passed);
+        return {
+            totalCases,
+            passed,
+            failed,
+            regressions,
+            fixed,
+            newSteps,
+            removed,
+            noChange
+        };
+    }
     onPageChange(event) {
         this.pageIndex = event.pageIndex;
         this.pageSize = event.pageSize;
@@ -20094,10 +20240,10 @@ class CompareRunsComponent {
     }
 }
 CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1$1.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", compareMode: "compareMode", initialRunAId: "initialRunAId", initialRunBId: "initialRunBId", autoCompareOnInit: "autoCompareOnInit", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns", pageSizeMenuDirection: "pageSizeMenuDirection", hideRunSelectorsAndCompareButton: "hideRunSelectorsAndCompareButton", isExportingTestPlanCompare: "isExportingTestPlanCompare" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns", viewCompare: "viewCompare", testCaseClick: "testCaseClick", exportTestPlanCompare: "exportTestPlanCompare" }, 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 *ngIf=\"!hideRunSelectorsAndCompareButton\" 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 || 'NA' }}</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 || 'NA' }}</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 *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"compareMode === 'testPlan'\"\n              variant=\"outlined\"\n              [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n              [loading]=\"isExportingTestPlanCompare\"\n              [disabled]=\"!canCompare\"\n              (clicked)=\"onExportTestPlanCompare()\"\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        [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "sortChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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", compareMode: "compareMode", initialRunAId: "initialRunAId", initialRunBId: "initialRunBId", autoCompareOnInit: "autoCompareOnInit", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns", pageSizeMenuDirection: "pageSizeMenuDirection", hideRunSelectorsAndCompareButton: "hideRunSelectorsAndCompareButton", isExportingTestPlanCompare: "isExportingTestPlanCompare" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns", viewCompare: "viewCompare", testCaseClick: "testCaseClick", exportTestPlanCompare: "exportTestPlanCompare" }, 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 *ngIf=\"!hideRunSelectorsAndCompareButton\" 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 || 'NA' }}</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 || 'NA' }}</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 *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"compareMode === 'testPlan'\"\n              variant=\"outlined\"\n              [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n              [loading]=\"isExportingTestPlanCompare\"\n              [disabled]=\"!canCompare\"\n              (clicked)=\"onExportTestPlanCompare()\"\n            ></cqa-button>\n          </div>\n    </div>\n\n    <div\n      *ngIf=\"showComparison && compareMode === 'testPlan' && testPlanCardSummary && stepComparisons && stepComparisons.length > 0\"\n      class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6\"\n      style=\"flex-shrink: 0;\"\n    >\n      <div\n        class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-justify-between sm:cqa-justify-start cqa-gap-2 sm:cqa-gap-3\"\n      >\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[92px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#A5B4FC] cqa-bg-[#EEF2FF] cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#1E293B]\">{{ testPlanCardSummary.totalCases }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#64748B]\">Total Cases</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.passed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Passed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.failed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Failed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.regressions }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Regressions</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.fixed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Fixed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#155DFC]\">{{ testPlanCardSummary.newSteps }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">New</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.removed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Removed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.noChange }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">No Change</span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"showComparison && compareMode !== 'testPlan' && 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    >\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      </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        [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "showExportButton", "isExporting", "filterConfig", "filterModel", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "rowSelectable", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "pageSizeMenuDirection", "serverSidePagination", "totalElements", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "sortChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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 *ngIf=\"!hideRunSelectorsAndCompareButton\" 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 || 'NA' }}</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 || 'NA' }}</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 *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"compareMode === 'testPlan'\"\n              variant=\"outlined\"\n              [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n              [loading]=\"isExportingTestPlanCompare\"\n              [disabled]=\"!canCompare\"\n              (clicked)=\"onExportTestPlanCompare()\"\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        [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\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: [] }]
+            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 *ngIf=\"!hideRunSelectorsAndCompareButton\" 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 || 'NA' }}</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 || 'NA' }}</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 *ngIf=\"!hideRunSelectorsAndCompareButton\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-justify-center cqa-gap-3\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n            <cqa-button\n              *ngIf=\"compareMode === 'testPlan'\"\n              variant=\"outlined\"\n              [text]=\"isExportingTestPlanCompare ? 'Exporting\u2026' : 'Export'\"\n              [loading]=\"isExportingTestPlanCompare\"\n              [disabled]=\"!canCompare\"\n              (clicked)=\"onExportTestPlanCompare()\"\n            ></cqa-button>\n          </div>\n    </div>\n\n    <div\n      *ngIf=\"showComparison && compareMode === 'testPlan' && testPlanCardSummary && stepComparisons && stepComparisons.length > 0\"\n      class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6\"\n      style=\"flex-shrink: 0;\"\n    >\n      <div\n        class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-items-stretch cqa-justify-between sm:cqa-justify-start cqa-gap-2 sm:cqa-gap-3\"\n      >\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[92px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#A5B4FC] cqa-bg-[#EEF2FF] cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#1E293B]\">{{ testPlanCardSummary.totalCases }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#64748B]\">Total Cases</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.passed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Passed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.failed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Failed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#FB2C36]\">{{ testPlanCardSummary.regressions }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Regressions</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#00A63E]\">{{ testPlanCardSummary.fixed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Fixed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#155DFC]\">{{ testPlanCardSummary.newSteps }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">New</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.removed }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">Removed</span>\n        </div>\n        <div\n          class=\"cqa-flex cqa-min-w-0 cqa-flex-[1_1_72px] sm:cqa-flex-none sm:cqa-w-[88px] cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-1 cqa-rounded-xl cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-bg-white cqa-py-3 cqa-px-2\"\n        >\n          <span class=\"cqa-text-xl cqa-font-bold cqa-leading-none cqa-text-[#6B7280]\">{{ testPlanCardSummary.noChange }}</span>\n          <span class=\"cqa-text-center cqa-text-[10px] cqa-font-semibold cqa-leading-tight cqa-text-[#6B7280]\">No Change</span>\n        </div>\n      </div>\n    </div>\n\n    <div\n      *ngIf=\"showComparison && compareMode !== 'testPlan' && 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    >\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      </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        [pageSizeMenuDirection]=\"pageSizeMenuDirection\"\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: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
                 type: Input
             }], comparisonData: [{