@cqa-lib/cqa-ui 1.1.5 → 1.1.7

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

@@ -1312,10 +1312,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", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, 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 }], 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-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"col.fieldId + '-cell'\">\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\"\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]\" [ngClass]=\"col.fieldId + '-cell'\">\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\">\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                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\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)\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ 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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }] });
+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", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, 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 }], 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              ]\">\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                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DynamicCellContainerDirective, selector: "[cqaCellContainer]", inputs: ["componentConfig", "row", "column", "rowIndex", "colId"], exportAs: ["cqaCellContainer"] }] });
 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' }, 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-left cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"col.fieldId + '-cell'\">\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\"\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]\" [ngClass]=\"col.fieldId + '-cell'\">\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\">\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                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\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)\"></div>\n                      </ng-container>\n                      <ng-template #textCell>\n                        <span class=\"cqa-text-xs cqa-text-[#374151]\">{{ 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' }, 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              ]\">\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                    (change)=\"onRowSelectChange($event, row)\" />\n                  <label\n                    class=\"custom-checkbox-label\"\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: [{
@@ -4286,7 +4286,10 @@ class BadgeComponent {
             'cqa-font-normal'
         ];
         // Add size-specific classes
-        if (this.size === 'small') {
+        if (this.size === 'extra-small') {
+            baseClasses.push('cqa-text-[8px]', 'cqa-leading-[12px]', 'cqa-py-[2px]', 'cqa-px-[4px]', 'cqa-rounded-[4px]');
+        }
+        else if (this.size === 'small') {
             baseClasses.push('cqa-text-xs', 'cqa-leading-[17px]', 'cqa-py-[2px]', 'cqa-px-2');
         }
         else {
@@ -4339,9 +4342,14 @@ class BadgeComponent {
             'cqa-inline-flex',
             'cqa-items-center',
             'cqa-justify-center',
-            'cqa-flex-shrink-0',
-            'cqa-mr-1.5'
+            'cqa-flex-shrink-0'
         ];
+        if (this.size === 'extra-small') {
+            baseClasses.push('cqa-mr-1');
+        }
+        else {
+            baseClasses.push('cqa-mr-1.5');
+        }
         // No circular background for any variant - just return base classes
         return baseClasses.join(' ');
     }
@@ -4372,7 +4380,13 @@ class BadgeComponent {
         return baseClasses.join(' ');
     }
     get iconStyles() {
-        const iconSize = this.size === 'small' ? '12px' : '14px';
+        let iconSize = '14px';
+        if (this.size === 'extra-small') {
+            iconSize = '10px';
+        }
+        else if (this.size === 'small') {
+            iconSize = '12px';
+        }
         const styles = {
             'font-size': iconSize,
             'width': iconSize,
@@ -5830,7 +5844,8 @@ class RunHistoryCardComponent {
             'background-color': '#ecedfe',
             'padding': this.isSmall ? '2px 6px' : '2px 8px',
             'border-radius': this.isSmall ? '5px' : '4px',
-            'font-size': this.isSmall ? '8px' : '10px'
+            'font-size': this.isSmall ? '8px' : '10px',
+            'line-height': this.isSmall ? '12px' : '15px'
         };
     }
     get cardPadding() {
@@ -5841,10 +5856,10 @@ class RunHistoryCardComponent {
     }
 }
 RunHistoryCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage", size: "size", durationTooltip: "durationTooltip" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n      padding: cardPadding,\n      border: '1px solid #E4E4E4',\n      'border-left-color': statusColor,\n      'border-left-width': borderLeftWidth\n    }\">\n\n    <!-- Header: Run ID and Status Badge -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n        'cqa-mb-[10px]': isSmall,\n        'cqa-mb-2': !isSmall\n      }\">\n      <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n        <span [ngStyle]=\"statusIconContainerStyles\">\n          <mat-icon [ngStyle]=\"statusIconStyles\">\n            {{ statusIcon }}\n          </mat-icon>\n        </span>\n        <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n            'cqa-text-xs': isSmall,\n            'cqa-text-sm': !isSmall\n          }\">\n          #{{ id }}\n        </span>\n      </div>\n\n      <!-- Status Badge -->\n      <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n        [ngClass]=\"{\n          'cqa-py-[2px] cqa-text-[10px]': isSmall,\n          'cqa-py-1 cqa-text-xs': !isSmall\n        }\" [ngStyle]=\"statusBadgeStyles\">\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Type and Timestamp -->\n    <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n          'cqa-gap-1': isSmall,\n          'cqa-gap-[6px]': !isSmall,\n          'cqa-mb-2': isSmall,\n          'cqa-mb-[6px]': !isSmall\n        }\">\n      <mat-icon [ngClass]=\"{\n        'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n        'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n        {{ typeIcon }}\n      </mat-icon>\n      <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n        {{ typeLabel }}\n      </span>\n    </div>\n\n    <!-- Timestamp -->\n    <div class=\"cqa-font-normal cqa-text-[#0B0B0B]\" [ngClass]=\"{\n        'cqa-text-sm': !isSmall,\n        'cqa-text-[11px]': isSmall,\n        'cqa-mb-2': isSmall,\n        'cqa-mb-[6px]': !isSmall\n      }\">\n      {{ timestamp }}\n    </div>\n\n    <!-- Duration and Run Label -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n        'cqa-gap-1': isSmall,\n        'cqa-gap-[6px]': !isSmall\n      }\" [title]=\"durationTooltip\">\n        <mat-icon [ngClass]=\"{\n          'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n          'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n          schedule\n        </mat-icon>\n        <span [ngClass]=\"{\n          'cqa-text-[8px]': isSmall,\n          'cqa-text-[10px]': !isSmall\n        }\">\n          {{ duration }}\n        </span>\n      </div>\n\n      <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n        [ngStyle]=\"runLabelStyles\"\n        [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n        {{ runLabel }}\n      </span>\n    </div>\n\n    <!-- Error Message (only for failed status and normal size) -->\n    <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n      style=\"border-top: 1px solid #E4E4E4;\">\n      <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+RunHistoryCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: RunHistoryCardComponent, selector: "cqa-run-history-card", inputs: { id: "id", status: "status", type: "type", timestamp: "timestamp", duration: "duration", runLabel: "runLabel", errorMessage: "errorMessage", size: "size", durationTooltip: "durationTooltip" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n      padding: cardPadding,\n      border: '1px solid #E4E4E4',\n      'border-left-color': statusColor,\n      'border-left-width': borderLeftWidth\n    }\">\n\n    <!-- Header: Run ID and Status Badge -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n        'cqa-mb-[10px]': isSmall,\n        'cqa-mb-2': !isSmall\n      }\">\n      <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n        <span [ngStyle]=\"statusIconContainerStyles\">\n          <mat-icon [ngStyle]=\"statusIconStyles\">\n            {{ statusIcon }}\n          </mat-icon>\n        </span>\n        <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n            'cqa-text-xs': isSmall,\n            'cqa-text-sm': !isSmall\n          }\">\n          #{{ id }}\n        </span>\n      </div>\n\n      <!-- Status Badge -->\n      <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n        [ngClass]=\"{\n          'cqa-py-[2px] cqa-text-[10px]': isSmall,\n          'cqa-py-1 cqa-text-xs': !isSmall\n        }\" [ngStyle]=\"statusBadgeStyles\">\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Type and Timestamp -->\n    <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n          'cqa-gap-1': isSmall,\n          'cqa-gap-[6px]': !isSmall,\n          'cqa-mb-2': isSmall,\n          'cqa-mb-[6px]': !isSmall\n        }\">\n      <mat-icon [ngClass]=\"{\n        'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n        'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n        {{ typeIcon }}\n      </mat-icon>\n      <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n        {{ typeLabel }}\n      </span>\n    </div>\n\n    <!-- Timestamp -->\n    <div class=\"cqa-font-normal cqa-text-[#0B0B0B] cqa-leading-normal\" [ngClass]=\"{\n        'cqa-text-sm': !isSmall,\n        'cqa-text-[11px]': isSmall,\n        'cqa-mb-2': isSmall,\n        'cqa-mb-[6px]': !isSmall\n      }\">\n      {{ timestamp }}\n    </div>\n\n    <!-- Duration and Run Label -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n        'cqa-gap-1': isSmall,\n        'cqa-gap-[6px]': !isSmall\n      }\" [title]=\"durationTooltip\">\n        <mat-icon [ngClass]=\"{\n          'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n          'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n          schedule\n        </mat-icon>\n        <span [ngClass]=\"{\n          'cqa-text-[8px]': isSmall,\n          'cqa-text-[10px]': !isSmall\n        }\">\n          {{ duration }}\n        </span>\n      </div>\n\n      <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n        [ngStyle]=\"runLabelStyles\"\n        [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n        {{ runLabel }}\n      </span>\n    </div>\n\n    <!-- Error Message (only for failed status and normal size) -->\n    <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n      style=\"border-top: 1px solid #E4E4E4;\">\n      <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: RunHistoryCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n      padding: cardPadding,\n      border: '1px solid #E4E4E4',\n      'border-left-color': statusColor,\n      'border-left-width': borderLeftWidth\n    }\">\n\n    <!-- Header: Run ID and Status Badge -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n        'cqa-mb-[10px]': isSmall,\n        'cqa-mb-2': !isSmall\n      }\">\n      <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n        <span [ngStyle]=\"statusIconContainerStyles\">\n          <mat-icon [ngStyle]=\"statusIconStyles\">\n            {{ statusIcon }}\n          </mat-icon>\n        </span>\n        <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n            'cqa-text-xs': isSmall,\n            'cqa-text-sm': !isSmall\n          }\">\n          #{{ id }}\n        </span>\n      </div>\n\n      <!-- Status Badge -->\n      <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n        [ngClass]=\"{\n          'cqa-py-[2px] cqa-text-[10px]': isSmall,\n          'cqa-py-1 cqa-text-xs': !isSmall\n        }\" [ngStyle]=\"statusBadgeStyles\">\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Type and Timestamp -->\n    <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n          'cqa-gap-1': isSmall,\n          'cqa-gap-[6px]': !isSmall,\n          'cqa-mb-2': isSmall,\n          'cqa-mb-[6px]': !isSmall\n        }\">\n      <mat-icon [ngClass]=\"{\n        'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n        'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n        {{ typeIcon }}\n      </mat-icon>\n      <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n        {{ typeLabel }}\n      </span>\n    </div>\n\n    <!-- Timestamp -->\n    <div class=\"cqa-font-normal cqa-text-[#0B0B0B]\" [ngClass]=\"{\n        'cqa-text-sm': !isSmall,\n        'cqa-text-[11px]': isSmall,\n        'cqa-mb-2': isSmall,\n        'cqa-mb-[6px]': !isSmall\n      }\">\n      {{ timestamp }}\n    </div>\n\n    <!-- Duration and Run Label -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n        'cqa-gap-1': isSmall,\n        'cqa-gap-[6px]': !isSmall\n      }\" [title]=\"durationTooltip\">\n        <mat-icon [ngClass]=\"{\n          'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n          'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n          schedule\n        </mat-icon>\n        <span [ngClass]=\"{\n          'cqa-text-[8px]': isSmall,\n          'cqa-text-[10px]': !isSmall\n        }\">\n          {{ duration }}\n        </span>\n      </div>\n\n      <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n        [ngStyle]=\"runLabelStyles\"\n        [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n        {{ runLabel }}\n      </span>\n    </div>\n\n    <!-- Error Message (only for failed status and normal size) -->\n    <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n      style=\"border-top: 1px solid #E4E4E4;\">\n      <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-run-history-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%; height: 100%; min-width: 180px;\">\n  <div class=\"cqa-bg-white cqa-rounded-lg cqa-shadow-sm cqa-flex cqa-flex-col\" [ngStyle]=\"{\n      padding: cardPadding,\n      border: '1px solid #E4E4E4',\n      'border-left-color': statusColor,\n      'border-left-width': borderLeftWidth\n    }\">\n\n    <!-- Header: Run ID and Status Badge -->\n    <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-2 cqa-flex-wrap\" [ngClass]=\"{\n        'cqa-mb-[10px]': isSmall,\n        'cqa-mb-2': !isSmall\n      }\">\n      <div class=\"cqa-flex cqa-items-center\" [ngClass]=\"{ 'cqa-gap-[6px]': isSmall, 'cqa-gap-2': !isSmall }\">\n        <span [ngStyle]=\"statusIconContainerStyles\">\n          <mat-icon [ngStyle]=\"statusIconStyles\">\n            {{ statusIcon }}\n          </mat-icon>\n        </span>\n        <span class=\"cqa-font-semibold cqa-text-[#3f43ee]\" [ngClass]=\"{\n            'cqa-text-xs': isSmall,\n            'cqa-text-sm': !isSmall\n          }\">\n          #{{ id }}\n        </span>\n      </div>\n\n      <!-- Status Badge -->\n      <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-rounded-md cqa-font-medium cqa-text-white cqa-px-2\"\n        [ngClass]=\"{\n          'cqa-py-[2px] cqa-text-[10px]': isSmall,\n          'cqa-py-1 cqa-text-xs': !isSmall\n        }\" [ngStyle]=\"statusBadgeStyles\">\n        {{ statusLabel }}\n      </span>\n    </div>\n\n    <!-- Type and Timestamp -->\n    <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n          'cqa-gap-1': isSmall,\n          'cqa-gap-[6px]': !isSmall,\n          'cqa-mb-2': isSmall,\n          'cqa-mb-[6px]': !isSmall\n        }\">\n      <mat-icon [ngClass]=\"{\n        'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n        'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\">\n        {{ typeIcon }}\n      </mat-icon>\n      <span [ngClass]=\"{ 'cqa-text-[10px]': isSmall, 'cqa-text-xs': !isSmall }\">\n        {{ typeLabel }}\n      </span>\n    </div>\n\n    <!-- Timestamp -->\n    <div class=\"cqa-font-normal cqa-text-[#0B0B0B] cqa-leading-normal\" [ngClass]=\"{\n        'cqa-text-sm': !isSmall,\n        'cqa-text-[11px]': isSmall,\n        'cqa-mb-2': isSmall,\n        'cqa-mb-[6px]': !isSmall\n      }\">\n      {{ timestamp }}\n    </div>\n\n    <!-- Duration and Run Label -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2\">\n      <div class=\"cqa-flex cqa-items-center cqa-text-[#636363]\" [ngClass]=\"{\n        'cqa-gap-1': isSmall,\n        'cqa-gap-[6px]': !isSmall\n      }\" [title]=\"durationTooltip\">\n        <mat-icon [ngClass]=\"{\n          'cqa-text-[12px] cqa-w-3 cqa-h-3': isSmall,\n          'cqa-text-[14px] cqa-w-[14px] cqa-h-[14px]': !isSmall }\" style=\"flex-shrink: 0;\">\n          schedule\n        </mat-icon>\n        <span [ngClass]=\"{\n          'cqa-text-[8px]': isSmall,\n          'cqa-text-[10px]': !isSmall\n        }\">\n          {{ duration }}\n        </span>\n      </div>\n\n      <span *ngIf=\"runLabel\" class=\"cqa-text-[#3F43EE] cqa-rounded-md cqa-whitespace-nowrap\"\n        [ngStyle]=\"runLabelStyles\"\n        [ngClass]=\"{ 'cqa-font-medium': !isSmall }\">\n        {{ runLabel }}\n      </span>\n    </div>\n\n    <!-- Error Message (only for failed status and normal size) -->\n    <div *ngIf=\"errorMessage && status === 'failed' && !isSmall\" class=\"cqa-mt-2 cqa-pt-2\"\n      style=\"border-top: 1px solid #E4E4E4;\">\n      <p class=\"cqa-text-[10px] cqa-text-[#E7000B]\">\n        {{ errorMessage }}\n      </p>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], status: [{
@@ -6122,7 +6137,8 @@ class CompareRunsComponent {
             testDataSetName: data.testDataSetName,
             device,
             browser,
-            platform
+            platform,
+            environment: data.environment
         };
     }
     setupTableColumns() {
@@ -6389,10 +6405,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", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 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-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div *ngIf=\"selectedRunA\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runAStatusBgColor\"\n                  [style.border-color]=\"runAStatusBorderColor\">\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]\">Dataset: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                  </div>\n                </div>\n              </div>\n        \n              <div *ngIf=\"selectedRunB\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runBStatusBgColor\"\n                  [style.border-color]=\"runBStatusBorderColor\">\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]\">Dataset: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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        <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 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-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 *ngIf=\"selectedRunA\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runAStatusBgColor\"\n                  [style.border-color]=\"runAStatusBorderColor\">\n                <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                  <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                    <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                  </div>\n                  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                        [style.background-color]=\"runAStatusColor\"\n                        [style.color]=\"'#FFFFFF'\">\n                    {{ runAStatusLabel }}\n                  </span>\n                </div>\n                <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                  </div>\n                </div>\n              </div>\n        \n              <div *ngIf=\"selectedRunB\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runBStatusBgColor\"\n                  [style.border-color]=\"runBStatusBorderColor\">\n                <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                  <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                    <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                  </div>\n                  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                        [style.background-color]=\"runBStatusColor\"\n                        [style.color]=\"'#FFFFFF'\">\n                    {{ runBStatusLabel }}\n                  </span>\n                </div>\n                <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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        <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "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", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-compare-runs', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 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-px-3 sm:cqa-px-4 cqa-py-4 sm:cqa-py-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div *ngIf=\"selectedRunA\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runAStatusBgColor\"\n                  [style.border-color]=\"runAStatusBorderColor\">\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]\">Dataset: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.testDataSetName }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                  </div>\n                </div>\n              </div>\n        \n              <div *ngIf=\"selectedRunB\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runBStatusBgColor\"\n                  [style.border-color]=\"runBStatusBorderColor\">\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]\">Dataset: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.testDataSetName }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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        <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-compare-runs', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 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-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 *ngIf=\"selectedRunA\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runAStatusBgColor\"\n                  [style.border-color]=\"runAStatusBorderColor\">\n                <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                  <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                    <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                  </div>\n                  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                        [style.background-color]=\"runAStatusColor\"\n                        [style.color]=\"'#FFFFFF'\">\n                    {{ runAStatusLabel }}\n                  </span>\n                </div>\n                <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                  </div>\n                </div>\n              </div>\n        \n              <div *ngIf=\"selectedRunB\" \n                  class=\"cqa-bg-white cqa-rounded-lg cqa-p-3 cqa-border cqa-border-solid\"\n                  [style.background-color]=\"runBStatusBgColor\"\n                  [style.border-color]=\"runBStatusBorderColor\">\n                <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                  <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                    <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                  </div>\n                  <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                        [style.background-color]=\"runBStatusColor\"\n                        [style.color]=\"'#FFFFFF'\">\n                    {{ runBStatusLabel }}\n                  </span>\n                </div>\n                <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                  </div>\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                    <span class=\"cqa-text-xs cqa-text-[#636363]\">Device: </span>\n                    <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-pt-3 cqa-pb-0 sm:cqa-pb-1 sm:cqa-pt-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\">\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 xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M12.6759 10.5003L8.00919 2.33363C7.90743 2.15408 7.75987 2.00474 7.58156 1.90083C7.40325 1.79693 7.20056 1.74219 6.99419 1.74219C6.78781 1.74219 6.58513 1.79693 6.40681 1.90083C6.2285 2.00474 6.08094 2.15408 5.97919 2.33363L1.31252 10.5003C1.20967 10.6784 1.15574 10.8806 1.15619 11.0863C1.15665 11.2919 1.21147 11.4939 1.31511 11.6715C1.41875 11.8492 1.56752 11.9963 1.74634 12.0979C1.92516 12.1996 2.12767 12.2521 2.33335 12.2503H11.6667C11.8714 12.2501 12.0724 12.196 12.2496 12.0935C12.4268 11.9911 12.5739 11.8438 12.6762 11.6664C12.7784 11.4891 12.8322 11.288 12.8322 11.0833C12.8321 10.8786 12.7782 10.6776 12.6759 10.5003Z\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 5.25V7.58333\" stroke=\"#FD9A00\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 9.91699H7.00583\" stroke=\"#FD9A00\" 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-[#E17100]\">{{ 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        <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=\"M7.00002 12.8337C10.2217 12.8337 12.8334 10.222 12.8334 7.00033C12.8334 3.77866 10.2217 1.16699 7.00002 1.16699C3.77836 1.16699 1.16669 3.77866 1.16669 7.00033C1.16669 10.222 3.77836 12.8337 7.00002 12.8337Z\" stroke=\"#2B7FFF\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#2B7FFF\" 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-[#155DFC]\">{{ comparisonSummary.timing }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Timing Changed</span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg cqa-overflow-hidden\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { runs: [{
                 type: Input
             }], comparisonData: [{
@@ -6581,12 +6597,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 
 class FailedStepCardComponent {
-    constructor() {
-        this.jumpToStep = new EventEmitter();
-        this.openInVideo = new EventEmitter();
-        this.showExpectedMore = false;
-        this.showActualMore = false;
-    }
     get headerTitle() {
         if (this.failedStepData?.stepTitle) {
             return `Failed at Step ${this.failedStepData.failed_step_index}: ${this.failedStepData.stepTitle}`;
@@ -6614,26 +6624,6 @@ class FailedStepCardComponent {
     get hasSuggestions() {
         return !!this.failedStepData?.suggestions && this.failedStepData.suggestions.trim().length > 0;
     }
-    toggleExpectedMore() {
-        this.showExpectedMore = !this.showExpectedMore;
-    }
-    toggleActualMore() {
-        this.showActualMore = !this.showActualMore;
-    }
-    onJumpToStep() {
-        this.jumpToStep.emit(this.failedStepData);
-    }
-    onOpenInVideo() {
-        this.openInVideo.emit(this.failedStepData);
-    }
-    shouldShowViewMore(text, maxLength = 100) {
-        return !!(text && text.length > maxLength);
-    }
-    getTruncatedText(text, maxLength = 100) {
-        if (!text)
-            return '';
-        return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
-    }
     getFormattedSuggestions() {
         if (!this.suggestions)
             return [];
@@ -6641,15 +6631,145 @@ class FailedStepCardComponent {
     }
 }
 FailedStepCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FailedStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepCardComponent, selector: "cqa-failed-step-card", inputs: { failedStepData: "failedStepData" }, outputs: { jumpToStep: "jumpToStep", openInVideo: "openInVideo" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n    <div>\n      <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n        <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n      </div>\n    </div>\n\n    <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n      <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed\">\n            <ng-container *ngIf=\"!showExpectedMore && shouldShowViewMore(expectedResult)\">\n              {{ getTruncatedText(expectedResult) }}\n            </ng-container>\n            <ng-container *ngIf=\"showExpectedMore || !shouldShowViewMore(expectedResult)\">\n              {{ expectedResult }}\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"shouldShowViewMore(expectedResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n          <cqa-button\n            variant=\"text\"\n            btnSize=\"sm\"\n            icon=\"chevron_right\"\n            iconPosition=\"end\"\n            [text]=\"showExpectedMore ? 'View Less' : 'View More'\"\n            [inlineStyles]=\"showExpectedMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n            (clicked)=\"toggleExpectedMore()\">\n          </cqa-button>\n        </div>\n      </div>\n\n      <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-font-medium\">\n            <ng-container *ngIf=\"!showActualMore && shouldShowViewMore(actualResult)\">\n              {{ getTruncatedText(actualResult) }}\n            </ng-container>\n            <ng-container *ngIf=\"showActualMore || !shouldShowViewMore(actualResult)\">\n              {{ actualResult }}\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"shouldShowViewMore(actualResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n          <cqa-button\n            variant=\"text\"\n            btnSize=\"sm\"\n            icon=\"chevron_right\"\n            iconPosition=\"end\"\n            [text]=\"showActualMore ? 'View Less' : 'View More'\"\n            [inlineStyles]=\"showActualMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n            (clicked)=\"toggleActualMore()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-border-t cqa-border-[#E4E4E4] cqa-flex cqa-flex-wrap cqa-items-center cqa-justify-end cqa-gap-2\">\n      <cqa-button\n        variant=\"outlined\"\n        icon=\"play_arrow\"\n        iconLibrary=\"mat\"\n        [text]=\"'Jump to step'\"\n        btnSize=\"lg\"\n        (clicked)=\"onJumpToStep()\">\n      </cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        icon=\"videocam\"\n        iconLibrary=\"mat\"\n        [text]=\"'Open In Video'\"\n        btnSize=\"lg\"\n        (clicked)=\"onOpenInVideo()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FailedStepCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FailedStepCardComponent, selector: "cqa-failed-step-card", inputs: { failedStepData: "failedStepData" }, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n    <div>\n      <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n        <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n      </div>\n    </div>\n\n    <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n      <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col cqa-h-[114px]\" style=\"border-right: 1px solid #E5E7EB\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed cqa-h-[91px] cqa-max-h-[91px] cqa-overflow-y-auto cqa-font-medium\">\n            {{ expectedResult }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-h-[91px] cqa-max-h-[91px] cqa-overflow-y-auto cqa-font-medium\">\n            {{ actualResult }}\n          </div>\n        </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FailedStepCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-failed-step-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n    <div>\n      <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n        <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n      </div>\n    </div>\n\n    <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n      <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col\" style=\"border-right: 1px solid #E5E7EB\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed\">\n            <ng-container *ngIf=\"!showExpectedMore && shouldShowViewMore(expectedResult)\">\n              {{ getTruncatedText(expectedResult) }}\n            </ng-container>\n            <ng-container *ngIf=\"showExpectedMore || !shouldShowViewMore(expectedResult)\">\n              {{ expectedResult }}\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"shouldShowViewMore(expectedResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n          <cqa-button\n            variant=\"text\"\n            btnSize=\"sm\"\n            icon=\"chevron_right\"\n            iconPosition=\"end\"\n            [text]=\"showExpectedMore ? 'View Less' : 'View More'\"\n            [inlineStyles]=\"showExpectedMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n            (clicked)=\"toggleExpectedMore()\">\n          </cqa-button>\n        </div>\n      </div>\n\n      <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-font-medium\">\n            <ng-container *ngIf=\"!showActualMore && shouldShowViewMore(actualResult)\">\n              {{ getTruncatedText(actualResult) }}\n            </ng-container>\n            <ng-container *ngIf=\"showActualMore || !shouldShowViewMore(actualResult)\">\n              {{ actualResult }}\n            </ng-container>\n          </div>\n        </div>\n        <div *ngIf=\"shouldShowViewMore(actualResult)\" class=\"cqa-ml-auto cqa-mt-auto cqa-pt-1\">\n          <cqa-button\n            variant=\"text\"\n            btnSize=\"sm\"\n            icon=\"chevron_right\"\n            iconPosition=\"end\"\n            [text]=\"showActualMore ? 'View Less' : 'View More'\"\n            [inlineStyles]=\"showActualMore ? 'transition: transform 0.2s ease;' : 'transition: transform 0.2s ease;'\"\n            (clicked)=\"toggleActualMore()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-border-t cqa-border-[#E4E4E4] cqa-flex cqa-flex-wrap cqa-items-center cqa-justify-end cqa-gap-2\">\n      <cqa-button\n        variant=\"outlined\"\n        icon=\"play_arrow\"\n        iconLibrary=\"mat\"\n        [text]=\"'Jump to step'\"\n        btnSize=\"lg\"\n        (clicked)=\"onJumpToStep()\">\n      </cqa-button>\n      <cqa-button\n        variant=\"outlined\"\n        icon=\"videocam\"\n        iconLibrary=\"mat\"\n        [text]=\"'Open In Video'\"\n        btnSize=\"lg\"\n        (clicked)=\"onOpenInVideo()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-failed-step-card', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-bg-[#FEF2F2] cqa-p-[17px] cqa-rounded-lg cqa-overflow-hidden cqa-flex cqa-flex-col cqa-gap-3\" style=\"border: 1px solid #FECACA;\">\n    <div>\n      <h3 class=\"cqa-text-sm cqa-leading-[18px] cqa-text-[#111827] cqa-mb-1\">{{ headerTitle }}</h3>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3 cqa-text-xs\">\n        <span class=\"cqa-text-[12px] cqa-text-[#B91C1C]\">Error: {{ errorText }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Video timestamp: {{ videoTimestamp }}</span>\n        <span class=\"cqa-text-[#636363]\">\u2022</span>\n        <span class=\"cqa-text-[#636363]\">Duration: {{ durationText }}</span>\n      </div>\n    </div>\n\n    <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-0 cqa-rounded-[4px] cqa-overflow-hidden\" style=\"border: 1px solid #E5E7EB\">\n      <div class=\"cqa-bg-white cqa-px-2 cqa-py-1 md:cqa-border-r cqa-flex cqa-flex-col cqa-h-[114px]\" style=\"border-right: 1px solid #E5E7EB\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">EXPECTED</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#0B0B0B] cqa-leading-relaxed cqa-h-[91px] cqa-max-h-[91px] cqa-overflow-y-auto cqa-font-medium\">\n            {{ expectedResult }}\n          </div>\n        </div>\n      </div>\n\n      <div class=\"cqa-bg-[#FFF9F9] cqa-px-2 cqa-py-1 cqa-flex cqa-flex-col\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#9CA3AF] cqa-uppercase cqa-tracking-wide\">ACTUAL</span>\n          <div class=\"cqa-text-[10px] cqa-text-[#C10007] cqa-leading-relaxed cqa-h-[91px] cqa-max-h-[91px] cqa-overflow-y-auto cqa-font-medium\">\n            {{ actualResult }}\n          </div>\n        </div>\n        </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], propDecorators: { failedStepData: [{
                 type: Input
-            }], jumpToStep: [{
+            }] } });
+
+class CustomInputComponent {
+    constructor() {
+        this.label = '';
+        this.type = 'text';
+        this.placeholder = '';
+        this.value = '';
+        this.disabled = false;
+        this.errors = [];
+        this.required = false;
+        this.ariaLabel = '';
+        this.size = 'md';
+        this.fullWidth = false;
+        this.showCharCount = false;
+        this.valueChange = new EventEmitter();
+        this.blurred = new EventEmitter();
+        this.focused = new EventEmitter();
+        this.enterPressed = new EventEmitter();
+        this.inputValue = '';
+        this.isFocused = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && changes['value'].currentValue !== undefined) {
+            let newValue = changes['value'].currentValue ?? '';
+            if (this.maxLength && newValue.length > this.maxLength) {
+                newValue = newValue.substring(0, this.maxLength);
+            }
+            if (newValue !== this.inputValue) {
+                this.inputValue = newValue;
+            }
+        }
+    }
+    get hasError() {
+        return this.errors && this.errors.length > 0;
+    }
+    get inputSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'cqa-px-3 cqa-py-2 cqa-text-xs';
+            case 'md':
+                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
+            case 'lg':
+                return 'cqa-px-5 cqa-py-3 cqa-text-base';
+            default:
+                return 'cqa-px-4 cqa-py-2.5 cqa-text-sm';
+        }
+    }
+    get labelSizeClasses() {
+        switch (this.size) {
+            case 'sm':
+                return 'cqa-text-xs cqa-mb-1';
+            case 'md':
+                return 'cqa-text-sm cqa-mb-1.5';
+            case 'lg':
+                return 'cqa-text-base cqa-mb-2';
+            default:
+                return 'cqa-text-sm cqa-mb-1.5';
+        }
+    }
+    onInput(event) {
+        const target = event.target;
+        let nextValue = target?.value ?? '';
+        if (this.showCharCount && this.maxLength && nextValue.length > this.maxLength) {
+            nextValue = nextValue.substring(0, this.maxLength);
+            if (target) {
+                target.value = nextValue;
+            }
+        }
+        this.inputValue = nextValue;
+        this.valueChange.emit(this.inputValue);
+    }
+    onFocus(event) {
+        this.isFocused = true;
+        this.focused.emit(event);
+    }
+    onBlur(event) {
+        this.isFocused = false;
+        this.blurred.emit(event);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.enterPressed.emit(this.inputValue.trim());
+        }
+    }
+    get inputStyles() {
+        return this.inputInlineStyle || '';
+    }
+    get labelStyles() {
+        return this.labelInlineStyle || '';
+    }
+}
+CustomInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CustomInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomInputComponent, selector: "cqa-custom-input", inputs: { label: "label", type: "type", placeholder: "placeholder", value: "value", disabled: "disabled", errors: "errors", required: "required", ariaLabel: "ariaLabel", size: "size", fullWidth: "fullWidth", maxLength: "maxLength", showCharCount: "showCharCount", inputInlineStyle: "inputInlineStyle", labelInlineStyle: "labelInlineStyle" }, outputs: { valueChange: "valueChange", blurred: "blurred", focused: "focused", enterPressed: "enterPressed" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [ngClass]=\"inputSizeClasses\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-custom-input', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\" [style.display]=\"'block'\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n    <label \n      *ngIf=\"label\"\n      class=\"cqa-font-medium cqa-text-[#374151]\"\n      [ngClass]=\"labelSizeClasses\"\n      [style]=\"labelStyles\">\n      {{ label }}\n      <span *ngIf=\"required\" class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n    </label>\n\n    <div class=\"cqa-relative\" [style.width]=\"fullWidth ? '100%' : 'auto'\">\n      <input\n        [type]=\"type\"\n        class=\"cqa-w-full !cqa-border !cqa-border-solid !cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-leading-normal cqa-tracking-normal cqa-text-[#0A0A0A] placeholder:cqa-text-[#9CA3AF] cqa-transition-all cqa-duration-200 cqa-outline-none\"\n        [ngClass]=\"{\n          'cqa-border-[#D1D5DB] focus:cqa-border-[#3B82F6] focus:cqa-ring-1 focus:cqa-ring-[#3B82F6]': !hasError,\n          'cqa-border-[#EF4444] focus:cqa-border-[#EF4444] focus:cqa-ring-1 focus:cqa-ring-[#EF4444]': hasError,\n          'cqa-bg-[#F9FAFB] cqa-cursor-not-allowed cqa-text-[#9CA3AF]': disabled,\n          'cqa-outline-none': true\n        }\"\n        [ngClass]=\"inputSizeClasses\"\n        [style]=\"inputStyles\"\n        [placeholder]=\"placeholder\"\n        [value]=\"inputValue\"\n        (input)=\"onInput($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n        (keydown)=\"onKeyDown($event)\"\n        [disabled]=\"disabled\"\n        [attr.aria-label]=\"ariaLabel || label\"\n        [attr.aria-invalid]=\"hasError\"\n        [attr.aria-required]=\"required\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"showCharCount && maxLength\" class=\"cqa-flex cqa-justify-end cqa-mt-1\">\n      <span class=\"cqa-text-xs cqa-text-[#6B7280]\">\n        {{ inputValue.length }}/{{ maxLength }}\n      </span>\n    </div>\n\n    <div *ngIf=\"hasError\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-mt-1.5\">\n      <div *ngFor=\"let error of errors\" class=\"cqa-flex cqa-items-start cqa-gap-1.5\">\n        <svg \n          xmlns=\"http://www.w3.org/2000/svg\" \n          width=\"14\" \n          height=\"14\" \n          viewBox=\"0 0 14 14\" \n          fill=\"none\"\n          class=\"cqa-flex-shrink-0 cqa-mt-0.5\">\n          <path d=\"M7 1.75C4.1 1.75 1.75 4.1 1.75 7C1.75 9.9 4.1 12.25 7 12.25C9.9 12.25 12.25 9.9 12.25 7C12.25 4.1 9.9 1.75 7 1.75ZM7 9.625C6.65625 9.625 6.375 9.34375 6.375 9V7C6.375 6.65625 6.65625 6.375 7 6.375C7.34375 6.375 7.625 6.65625 7.625 7V9C7.625 9.34375 7.34375 9.625 7 9.625ZM7.625 5.25H6.375V4H7.625V5.25Z\" fill=\"#EF4444\"/>\n        </svg>\n        <span class=\"cqa-text-xs cqa-text-[#EF4444] cqa-font-medium cqa-leading-[18px]\">\n          {{ error }}\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], fullWidth: [{
+                type: Input
+            }], maxLength: [{
+                type: Input
+            }], showCharCount: [{
+                type: Input
+            }], inputInlineStyle: [{
+                type: Input
+            }], labelInlineStyle: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], blurred: [{
+                type: Output
+            }], focused: [{
                 type: Output
-            }], openInVideo: [{
+            }], enterPressed: [{
                 type: Output
             }] } });
 
@@ -6702,7 +6822,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ConfigurationCardComponent,
         CompareRunsComponent,
         IterationsLoopComponent,
-        FailedStepCardComponent], imports: [CommonModule,
+        FailedStepCardComponent,
+        CustomInputComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatIconModule,
@@ -6760,7 +6881,8 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ConfigurationCardComponent,
         CompareRunsComponent,
         IterationsLoopComponent,
-        FailedStepCardComponent] });
+        FailedStepCardComponent,
+        CustomInputComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer }
     ], imports: [[
@@ -6829,7 +6951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ConfigurationCardComponent,
                         CompareRunsComponent,
                         IterationsLoopComponent,
-                        FailedStepCardComponent
+                        FailedStepCardComponent,
+                        CustomInputComponent
                     ],
                     imports: [
                         CommonModule,
@@ -6893,7 +7016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         ConfigurationCardComponent,
                         CompareRunsComponent,
                         IterationsLoopComponent,
-                        FailedStepCardComponent
+                        FailedStepCardComponent,
+                        CustomInputComponent
                     ],
                     providers: [
                         { provide: OverlayContainer, useClass: TailwindOverlayContainer }
@@ -7035,5 +7159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedStepCardComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, ViewImageModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
+export { ActionMenuButtonComponent, AiDebugAlertComponent, BadgeComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DialogComponent, DialogRef, DialogService, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, FailedStepCardComponent, FailedTestCasesCardComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SimulatorComponent, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestDistributionCardComponent, UiKitModule, ViewImageModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map