@cqa-lib/cqa-ui 1.1.175 → 1.1.177

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, NgModule, Injector } from '@angular/core';
+import { EventEmitter, Component, Input, Output, HostListener, ViewChildren, ViewChild, ChangeDetectionStrategy, Directive, TemplateRef, ContentChildren, ContentChild, ElementRef, forwardRef, Injectable, InjectionToken, ChangeDetectorRef, SimpleChange, ViewContainerRef, Inject, Optional, Injector, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i3$1 from '@angular/material/menu';
@@ -20,6 +20,7 @@ import * as i3$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
+import * as i3$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$5 from '@angular/material/progress-spinner';
@@ -29,9 +30,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i1$7 from '@angular/cdk/overlay';
-import { OverlayContainer, OverlayModule, OverlayConfig } from '@angular/cdk/overlay';
+import { OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
-import { TemplatePortal, CdkPortalOutlet, PortalModule, ComponentPortal } from '@angular/cdk/portal';
+import { TemplatePortal, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i1$6 from 'ngx-typed-js';
 import { NgxTypedJsModule } from 'ngx-typed-js';
 import { __awaiter } from 'tslib';
@@ -39,10 +40,10 @@ import * as i1$1 from '@angular/platform-browser';
 import * as jquery from 'jquery';
 import * as momentImport from 'moment';
 import 'daterangepicker';
+import { filter } from 'rxjs/operators';
+import { Subject, BehaviorSubject } from 'rxjs';
 import * as i7 from 'ngx-drag-drop';
 import { DndModule } from 'ngx-drag-drop';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { filter } from 'rxjs/operators';
 
 class ButtonComponent {
     constructor() {
@@ -1213,6 +1214,34 @@ class DynamicTableComponent {
     trackByIndex(index) {
         return index;
     }
+    copyCellJsonPath(path, event, source = 'dbQueryResponse') {
+        if (!path)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        navigator.clipboard.writeText(path).then(() => {
+            // Call the handler if provided
+            if (this.onJsonPathCopiedHandler) {
+                try {
+                    this.onJsonPathCopiedHandler({ path, source });
+                }
+                catch (handlerError) {
+                    console.error('Error in onJsonPathCopiedHandler:', handlerError);
+                }
+            }
+        }).catch(err => {
+            console.error('Failed to copy jsonPath:', err);
+            // Still call the handler even on failure (similar to api-step pattern)
+            if (this.onJsonPathCopiedHandler) {
+                try {
+                    this.onJsonPathCopiedHandler({ path, source });
+                }
+                catch (handlerError) {
+                    console.error('Error in onJsonPathCopiedHandler:', handlerError);
+                }
+            }
+        });
+    }
     // Compute grid-template-columns string from column config
     updateGridTemplate() {
         const cols = this.visibleColumns;
@@ -1364,10 +1393,10 @@ class DynamicTableComponent {
     }
 }
 DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i1$1.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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicTableComponent, selector: "app-dynamic-table", inputs: { data: "data", columns: "columns", emptyState: "emptyState", gridTemplateColumns: "gridTemplateColumns", screenWidth: "screenWidth", enableSelectAll: "enableSelectAll", enableLocalSort: "enableLocalSort", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { sortChange: "sortChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "emptyTableTpl", first: true, predicate: ["emptyTableTpl"], descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: DynamicCellTemplateDirective }, { propertyName: "headerTemplates", predicate: DynamicHeaderTemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    (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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\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: [] }]
+            args: [{ selector: "app-dynamic-table", host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-relative\" [class.cqa-max-h-[100px]]=\"showTableLoading\">\n    <cqa-full-table-loader *ngIf=\"showTableLoading\"></cqa-full-table-loader>\n    <cqa-table-data-loader *ngIf=\"showTableDataLoading\"></cqa-table-data-loader>\n    <table class=\"table-inner cqa-w-full cqa-border cqa-border-solid cqa-border-gray-200\" [class.is-loading]=\"true\" *ngIf=\"!showTableLoading\">\n      <colgroup>\n        <ng-container *ngFor=\"let width of computedColumnWidths; trackBy: trackByIndex\">\n          <col [style.width]=\"width\" />\n        </ng-container>\n      </colgroup>\n\n      <thead *ngIf=\"data?.length\">\n        <tr class=\"table-header cqa-items-center\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <th\n              class=\"header-cell cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-bg-[#eff0f7]\"\n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left'\n              ]\">\n              <!-- Built-in select-all for checkbox column when enabled and no custom header template -->\n              <ng-container\n                *ngIf=\"col.fieldId === 'checkbox' && enableSelectAll && !getHeaderTemplate(col.fieldId); else headerTplOrDefault\">\n                <div class=\"custom-checkbox\">\n                  <input type=\"checkbox\" id=\"checkbox\" aria-label=\"Select all rows\" [checked]=\"allSelected\"\n                  [indeterminate]=\"someSelected\" (change)=\"onSelectAllChange($event)\" class=\"hidden-checkbox\" />\n                  <label for=\"checkbox\" class=\"custom-checkbox-label\"></label>\n                </div>\n              </ng-container>\n              <ng-template #headerTplOrDefault>\n                <ng-container *ngIf=\"getHeaderTemplate(col.fieldId) as headerTpl; else defaultHeader\">\n                  <ng-container *ngTemplateOutlet=\"headerTpl\"></ng-container>\n                </ng-container>\n                <ng-template #defaultHeader>\n                  <ng-container *ngIf=\"col.sortable; else plainHeader\">\n                    <button type=\"button\" class=\"header-text cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-0\"\n                      (click)=\"toggleSort(col)\" [attr.aria-label]=\"'Sort by ' + (col.fieldName || col.fieldId)\">\n                      <span class=\"cqa-text-[12.3px] cqa-leading-[17.5px] cqa-text-[#0A0A0A] cqa-font-medium\">{{\n                        col.fieldName }}</span>\n                      <span *ngIf=\"isSortedAsc(col.fieldId)\">\u25B2</span>\n                      <span *ngIf=\"isSortedDesc(col.fieldId)\">\u25BC</span>\n                    </button>\n                  </ng-container>\n                  <ng-template #plainHeader>\n                    <span class=\"header-text\">{{ col.fieldName }}</span>\n                  </ng-template>\n                </ng-template>\n              </ng-template>\n            </th>\n          </ng-container>\n        </tr>\n      </thead>\n\n      <tbody class=\"table-body cqa-w-full\">\n        <tr class=\"table-row cqa-bg-surface-default hover:cqa-bg-surface-hover\" *ngFor=\"let row of computedData; let rowIndex = index; trackBy: trackByIndex\"\n          [class.selected]=\"row?.isSelected\">\n          <ng-container *ngFor=\"let col of visibleColumns; trackBy: trackByIndex\">\n            <td class=\"cell cqa-px-[10.5px] cqa-py-[11px]\" \n              [ngClass]=\"[\n                col.fieldId + '-cell',\n                col.align === 'center' ? 'cqa-text-center' : col.align === 'right' ? 'cqa-text-right' : 'cqa-text-left',\n                cellJsonPathGetter && col.fieldId !== 'checkbox' && col.fieldId !== 'actions' ? 'cqa-cursor-pointer' : ''\n              ]\"\n              (dblclick)=\"cellJsonPathGetter && col?.fieldId !== 'checkbox' && col?.fieldId !== 'actions' && copyCellJsonPath(cellJsonPathGetter(rowIndex, col?.fieldId, row), $event, 'dbQueryResponse')\">\n              <!-- Built-in checkbox cell when no custom template is provided -->\n              <ng-container *ngIf=\"col.fieldId === 'checkbox' && !getCellTemplate(col.fieldId); else regularCell\">\n                <div class=\"custom-checkbox\" [ngClass]=\"[\n                  col.align === 'center' ? 'cqa-flex cqa-justify-center' : col.align === 'right' ? 'cqa-flex cqa-justify-end' : ''\n                ]\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"hidden-checkbox\"\n                    [attr.id]=\"'row-checkbox-' + rowIndex\"\n                    aria-label=\"Select row\"\n                    [checked]=\"row?.isSelected\"\n                    (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$1.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -1388,6 +1417,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], sortChange: [{
                 type: Output
+            }], cellJsonPathGetter: [{
+                type: Input
+            }], onJsonPathCopiedHandler: [{
+                type: Input
             }], cellTemplates: [{
                 type: ContentChildren,
                 args: [DynamicCellTemplateDirective]
@@ -2225,10 +2258,10 @@ class DynamicSelectFieldComponent {
     }
 }
 DynamicSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <span class=\"cqa-min-w-0\" *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <span class=\"cqa-min-w-0\" *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <span *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n              <span *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DynamicSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: { form: "form", config: "config" }, outputs: { selectionChange: "selectionChange", selectClick: "selectClick", searchChange: "searchChange", loadMore: "loadMore" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "selectRef", first: true, predicate: ["selectRef"], descendants: true }, { propertyName: "hostEl", first: true, predicate: ["host"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>", components: [{ type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DynamicSelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <span class=\"cqa-min-w-0\" *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <span class=\"cqa-min-w-0\" *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <span *ngIf=\"hasHighlighting\" [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n              <span *ngIf=\"!hasHighlighting\">{{ opt.name ?? opt.label ?? opt.value }}</span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
+            args: [{ selector: 'cqa-dynamic-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <ng-container [formGroup]=\"form\">\n    <label *ngIf=\"config.label\"\n      class=\"form-label cqa-text-[#374151] cqa-text-[14px] cqa-font-medium cqa-block cqa-leading-[1.4] cqa-mb-2\">{{\n      config.label }}</label>\n    <mat-form-field #host class=\"mat-select-custom cqa-w-full\" appearance=\"fill\">\n      <mat-select #selectRef=\"matSelect\" [placeholder]=\"displayPlaceholder\" [disabled]=\"isDisabled\" [multiple]=\"isMultiple\"\n        disableOptionCentering [panelClass]=\"panelClass\" [formControlName]=\"config.key\"\n        (openedChange)=\"onSelectOpenedChange($event, selectRef)\" (selectionChange)=\"onSelectionChange($event, selectRef)\">\n\n        <mat-option *ngIf=\"config.searchable\" class=\"ts-select-search\" disabled>\n          <input class=\"ts-select-search-input cqa-text-black-100\" type=\"text\" [value]=\"searchTextByKey[config.key] || ''\"\n            (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\"\n            (keydown)=\"$event.stopPropagation()\" (input)=\"onSearch(config.key, $any($event.target).value)\"\n            placeholder=\"Search...\" />\n        </mat-option>\n        \n        <mat-option [ngClass]=\"{'checkmark': config.optionStyle === 'checkmark','checkbox': config.optionStyle !== 'checkmark','mat-selected': allSelected}\" [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngIf=\"isMultiple && config.showSelectAll\" [value]=\"SELECT_ALL_VALUE\">\n          <ng-container *ngIf=\"useCheckboxStyle; else selectAllDefaultTpl\">\n            <span class=\"cqa-flex cqa-items-center\">\n              <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                [ngStyle]=\"allSelected ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                <svg *ngIf=\"allSelected\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"cqa-min-w-0\">{{ config.selectAllLabel || 'All' }}</span>\n            </span>\n          </ng-container>\n          <ng-template #selectAllDefaultTpl>\n            {{ config.selectAllLabel || 'All' }}\n          </ng-template>\n        </mat-option>\n\n        <mat-option [class]=\"config.optionStyle == 'checkmark' ? 'checkmark' : 'checkbox'\" *ngFor=\"let opt of filteredOptions(config)\" [value]=\"opt.id ?? opt.value\">\n          <ng-container *ngIf=\"config.isCompareRuns\">   \n            <ng-container *ngIf=\"useCheckboxStyle; else compareRunsDefaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span class=\"cqa-flex cqa-items-center\">\n                  <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                    [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                    <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n                  </span>\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"hasHighlighting\"\n                    [style.color]=\"opt.statusColor || null\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                  <ng-container *ngIf=\"!hasHighlighting\">\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else checkboxDefaultLabel\">\n                      <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                      <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                    </span>\n                    <ng-template #checkboxDefaultLabel>\n                      <span\n                        class=\"cqa-min-w-0 cqa-compare-runs\"\n                        [style.color]=\"opt.statusColor || null\">\n                        {{ opt.name ?? opt.label ?? opt.value }}\n                      </span>\n                    </ng-template>\n                  </ng-container>\n                </span>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #compareRunsDefaultOptionTpl>\n              <span class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-compare-runs-item\">\n                <span\n                  class=\"cqa-min-w-0 cqa-compare-runs\"\n                  *ngIf=\"hasHighlighting\"\n                  [style.color]=\"opt.statusColor || null\"\n                  [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\"></span>\n                <ng-container *ngIf=\"!hasHighlighting\">\n                  <span\n                    class=\"cqa-min-w-0 cqa-compare-runs\"\n                    *ngIf=\"opt.runNumberLabel && opt.runDateLabel; else defaultLabel\">\n                    <span [style.color]=\"opt.statusColor || null\">{{ opt.runNumberLabel }}</span>\n                    <span class=\"cqa-text-[#6B7280]\"> {{ opt.runDateLabel }}&nbsp;</span>\n                  </span>\n                  <ng-template #defaultLabel>\n                    <span\n                      class=\"cqa-min-w-0 cqa-compare-runs\"\n                      [style.color]=\"opt.statusColor || null\">\n                      {{ opt.name ?? opt.label ?? opt.value }}\n                    </span>\n                  </ng-template>\n                </ng-container>\n                <span\n                  *ngIf=\"opt.durationFormatted\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-start cqa-gap-1 cqa-text-[12px] cqa-text-[#6B7280] cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-max-w-[80px]\" \n                  [ngClass]=\"{\n                    'cqa-min-w-[82px]': opt?.hasHourRun,\n                    'cqa-min-w-[66px]': !opt?.hasHourRun && opt?.hasMinuteRun,\n                    'cqa-min-w-[40px]': !opt?.hasHourRun && !opt?.hasMinuteRun\n                  }\">\n                  <svg class=\"cqa-min-w-[12px] cqa-max-w-[12px]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"#9CA3AF\" stroke-width=\"1\"/>\n                    <path d=\"M6 3.5V6L7.5 7\" stroke=\"#4B5563\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                  <span>{{ opt.durationFormatted }}</span>\n                </span>\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-container *ngIf=\"!config.isCompareRuns\">\n            <ng-container *ngIf=\"useCheckboxStyle; else defaultOptionTpl\">\n              <span class=\"cqa-flex cqa-items-center\">\n                <span class=\"cqa-w-4 cqa-h-4 cqa-flex-shrink-0 cqa-rounded-[4px] cqa-border cqa-border-[#D1D5DB] cqa-mr-2 cqa-flex cqa-items-center cqa-justify-center cqa-border-solid\"\n                  [ngStyle]=\"isOptionSelected(opt) ? {'background-color':'#4F46E5','border-color':'#4F46E5'} : {}\">\n                  <svg *ngIf=\"isOptionSelected(opt)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M10 3L4.5 8.5L2 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </span>\n                <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"config?.displayLabelAsInnerHtml\"\n                      [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n                </span>\n                <!-- Otherwise use normal/highlighted text rendering -->\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                      [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n                </span>\n                <span class=\"cqa-min-w-0\"\n                      *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                  {{ opt.name ?? opt.label ?? opt.value }}\n                </span>\n              </span>\n            </ng-container>\n            <ng-template #defaultOptionTpl>\n              <!-- When displayLabelAsInnerHtml is true, render label as raw HTML -->\n              <span *ngIf=\"config?.displayLabelAsInnerHtml\"\n                    [innerHTML]=\"opt.label ?? opt.name ?? opt.value\">\n              </span>\n              <!-- Otherwise use normal/highlighted text rendering -->\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && hasHighlighting\"\n                    [innerHTML]=\"highlightText(opt.name ?? opt.label ?? opt.value)\">\n              </span>\n              <span *ngIf=\"!config?.displayLabelAsInnerHtml && !hasHighlighting\">\n                {{ opt.name ?? opt.label ?? opt.value }}\n              </span>\n            </ng-template>\n          </ng-container>\n        </mat-option>\n        \n        <!-- No results state (only when not loading and no options) -->\n        <mat-option disabled *ngIf=\"!(config?.options?.length || 0) && !(config?.isLoading || loadingMore)\">\n          No results\n        </mat-option>\n        <!-- Infinite scroll sentinel (serverSearch or explicit hasMore) -->\n        <mat-option disabled class=\"load-more-sentinel\" *ngIf=\"config?.hasMore\">\n          <span *ngIf=\"loadingMore || config?.isLoading\">Loading...</span>\n          <span *ngIf=\"!loadingMore && !config?.isLoading\">Scroll to load more\u2026</span>\n        </mat-option>\n      </mat-select>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Inline spinner shown when loading more (infinite scroll) or when config.isLoading is true -->\n        <svg *ngIf=\"loadingMore || config?.isLoading\" width=\"16\" height=\"16\" viewBox=\"0 0 50 50\" aria-label=\"loading\"\n             xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#E5E7EB\" stroke-width=\"6\" fill=\"none\"/>\n          <path d=\"M45 25a20 20 0 0 0-20-20\" stroke=\"#4F46E5\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n                              dur=\"0.8s\" repeatCount=\"indefinite\"/>\n          </path>\n        </svg>\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M4 6L8 10L12 6\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </div>\n    </mat-form-field>\n  </ng-container>\n</div>" }]
         }], propDecorators: { form: [{
                 type: Input
             }], config: [{
@@ -5213,7 +5246,6 @@ class TableTemplateComponent {
         this.serverSidePagination = false;
         this.totalElements = 0;
         this.pageChange = new EventEmitter();
-        // Backward-compatibility flag; if provided, dynamic table will use it when specific flags are undefined
         // Internal state for column visibility
         this._columnVisibility = {};
         this._cachedVisibilityColumns = [];
@@ -5503,10 +5535,10 @@ class TableTemplateComponent {
     }
 }
 TableTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableTemplateComponent, selector: "cqa-table-template", inputs: { searchPlaceholder: "searchPlaceholder", searchValue: "searchValue", showClear: "showClear", showSearchBar: "showSearchBar", filterConfig: "filterConfig", showFilterPanel: "showFilterPanel", showFilterButton: "showFilterButton", otherButtons: "otherButtons", otherDropDownButtons: "otherDropDownButtons", otherSelectDropDownButtons: "otherSelectDropDownButtons", otherButtonLabel: "otherButtonLabel", otherButtonVariant: "otherButtonVariant", showOtherButton: "showOtherButton", showActionButton: "showActionButton", showSettingsButton: "showSettingsButton", showAutoRefreshButton: "showAutoRefreshButton", data: "data", isEmptyState: "isEmptyState", emptyStateConfig: "emptyStateConfig", actions: "actions", chips: "chips", filterApplied: "filterApplied", columns: "columns", selectedAutoRefreshInterval: "selectedAutoRefreshInterval", pageIndex: "pageIndex", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions", serverSidePagination: "serverSidePagination", totalElements: "totalElements", isTableLoading: "isTableLoading", isTableDataLoading: "isTableDataLoading", cellJsonPathGetter: "cellJsonPathGetter", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, outputs: { onSearchChange: "onSearchChange", onApplyFilterClick: "onApplyFilterClick", onResetFilterClick: "onResetFilterClick", onClearAll: "onClearAll", removeChip: "removeChip", pageChange: "pageChange", onReload: "onReload", onAutoRefreshClick: "onAutoRefreshClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: ColumnVisibilityComponent, selector: "cqa-column-visibility", inputs: ["isStepGroup", "columns", "columnVisibility", "selectedAutoRefreshInterval"], outputs: ["columnVisibilityChange", "autoRefreshChange"] }, { type: SelectedFiltersComponent, selector: "cqa-selected-filters", inputs: ["filterApplied", "chips", "defaultChips", "defaultChipClass"], outputs: ["removeChip", "clearAll", "onClearAll"] }, { type: DynamicFilterComponent, selector: "cqa-dynamic-filter", inputs: ["config", "model", "showFilterPanel", "buttonLayout"], outputs: ["filtersApplied", "filtersChanged", "resetAction", "onApplyFilterClick", "onResetFilterClick"] }, { type: DynamicTableComponent, selector: "app-dynamic-table", inputs: ["data", "columns", "emptyState", "gridTemplateColumns", "screenWidth", "enableSelectAll", "enableLocalSort", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["sortChange"] }, { type: EmptyStateComponent, selector: "cqa-empty-state", inputs: ["preset", "imageUrl", "title", "description", "actions"], outputs: ["actionClick"] }, { type: PaginationComponent, selector: "cqa-pagination", inputs: ["totalElements", "totalPages", "pageIndex", "pageSize", "pageItemCount", "pageSizeOptions"], outputs: ["pageIndexChange", "pageSizeChange", "paginate"] }, { type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: ["selectedItems", "actions", "showSelectAll", "allSelected", "showDismiss"], outputs: ["actionClick", "selectAllChange", "dismiss"] }], 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-table-template', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\">\n  <div class=\"cqa-w-full cqa-flex cqa-flex-col cqa-relative\">\n    <div [class]=\"!showSearchBar ? 'cqa-justify-end' : 'cqa-justify-between'\" class=\"cqa-w-full cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-mb-3\">\n      <cqa-search-bar\n        *ngIf=\"showSearchBar\"\n        [placeholder]=\"searchPlaceholder\"\n        [value]=\"searchValue\"\n        [showClear]=\"showClear\"\n        (valueChange)=\"valueChange($event)\"\n        (search)=\"search($event)\"\n        (cleared)=\"cleared()\"\n      ></cqa-search-bar>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-wrap\">\n         <ng-container *ngFor=\"let dropdownTemplate of otherDropDownButtons; trackBy: trackByDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"dropdownTemplate\"></ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let selectDropdownTemplate of otherSelectDropDownButtons; trackBy: trackBySelectDropdownTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"selectDropdownTemplate\"></ng-container>\n        </ng-container>\n        \n        <cqa-button\n          *ngIf=\"showFilterButton\"\n          variant=\"grey-solid\"\n          icon=\"add\"\n          [text]=\"'Filter'\"\n          (clicked)=\"toggleFilter()\"\n        >\n          <span>Filter</span>\n        </cqa-button>\n        <cqa-column-visibility\n          *ngIf=\"showSettingsButton\"\n          [columns]=\"visibilityColumns\"\n          [columnVisibility]=\"columnVisibility\"\n          [selectedAutoRefreshInterval]=\"selectedAutoRefreshInterval\"\n          (columnVisibilityChange)=\"onColumnVisibilityChange($event)\"\n          (autoRefreshChange)=\"onAutoRefreshChange($event)\"\n        ></cqa-column-visibility>\n        <cqa-button\n          *ngIf=\"showAutoRefreshButton\"\n          variant=\"grey-solid\"\n          icon=\"refresh\"\n          (clicked)=\"handleRefreshClick()\"\n          [tooltip]=\"'Refresh'\"\n          tooltipPosition=\"below\"\n        ></cqa-button>\n        <ng-container *ngFor=\"let buttonTemplate of otherButtons; trackBy: trackByTemplateRef\">\n          <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <cqa-selected-filters \n      [filterApplied]=\"filterApplied\"\n      [chips]=\"chips\"\n      (removeChip)=\"onRemoveChip($event)\"\n      (clearAll)=\"onClearAllChips()\"\n      (onClearAll)=\"onClearAll.emit()\"\n    >\n    </cqa-selected-filters>\n\n    <cqa-dynamic-filter\n      *ngIf=\"showFilterPanel\"\n      [config]=\"filterConfig\"\n      [showFilterPanel]=\"showFilterPanel\"\n      (filtersChanged)=\"onFiltersChanged($event)\"\n      (filtersApplied)=\"onFiltersApplied($event)\"\n      (onApplyFilterClick)=\"onApplyFilterClick.emit($event)\"\n      (onResetFilterClick)=\"handleResetFilterClick()\"\n    >\n    </cqa-dynamic-filter>\n\n    <div class=\"cqa-rounded-[7px] cqa-overflow-hidden cqa-border-t cqa-border-l cqa-border-r cqa-border-grey-200 cqa-relative cqa-overflow-x-auto\">\n      <ng-container *ngIf=\"(isTableLoading || isTableDataLoading) || (!isEmptyState && pagedRows && pagedRows.length > 0); else storyEmptyTpl\">\n        <app-dynamic-table\n          [columns]=\"computedColumns\"\n          [data]=\"pagedRows\"\n          [isTableLoading]=\"isTableLoading\"\n          [isTableDataLoading]=\"isTableDataLoading\"\n          [cellJsonPathGetter]=\"cellJsonPathGetter\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n          <ng-template #emptyTableTpl>\n            <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-8\">\n              <img src=\"/assets/illustrations/empty-state.svg\" alt=\"No data\" class=\"cqa-w-32 cqa-h-32 cqa-mb-4\" />\n              <h3 class=\"cqa-text-lg cqa-font-semibold cqa-mb-2\">No test cases</h3>\n              <p class=\"cqa-text-sm cqa-text-neutral-500 cqa-mb-4\">Try adjusting filters or create a new test case.</p>\n              <cqa-button variant=\"filled\" (clicked)=\"toggleFilter()\">Show Filters</cqa-button>\n            </div>\n          </ng-template>\n        </app-dynamic-table>\n      </ng-container>\n\n      <ng-template #storyEmptyTpl>\n        <div class=\"cqa-p-6 cqa-flex cqa-flex-col cqa-items-center cqa-justify-center\">\n          <cqa-empty-state\n            *ngIf=\"isEmptyState\"\n            [title]=\"emptyStateConfig.title\"\n            [description]=\"emptyStateConfig.description\"\n            [imageUrl]=\"emptyStateConfig.imageUrl\"\n            [actions]=\"emptyStateConfig.actions\"\n            (actionClick)=\"onEmptyAction($event)\"\n          >\n          </cqa-empty-state>\n        </div>\n      </ng-template>\n\n    </div>\n\n    <cqa-pagination\n      [totalElements]=\"serverSidePagination ? totalElements : filteredRows.length\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\"\n      [pageItemCount]=\"pagedRows.length\"\n      (paginate)=\"onPaginate($event)\"\n      (pageSizeChange)=\"onPageSizeChange($event)\"\n    >\n    </cqa-pagination>\n\n    <div *ngIf=\"anyRowSelected\" class=\"cqa-absolute cqa-bottom-[18.75px] cqa-left-[50%] cqa-translate-x-[-50%] cqa-w-full lg:cqa-max-w-[68%] cqa-sm:max-w-[75%] cqa-max-w-[90%] cqa-z-[1]\" >\n      <cqa-table-action-toolbar\n        [selectedItems]=\"currentSelectedItems\"\n        [actions]=\"actions\"\n        (actionClick)=\"actionClick($event)\"\n      ></cqa-table-action-toolbar>\n    </div>\n    \n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { searchPlaceholder: [{
                 type: Input
             }], searchValue: [{
@@ -5581,6 +5613,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isTableDataLoading: [{
                 type: Input
+            }], cellJsonPathGetter: [{
+                type: Input
+            }], onJsonPathCopiedHandler: [{
+                type: Input
             }], onReload: [{
                 type: Output
             }], onAutoRefreshClick: [{
@@ -5641,7 +5677,8 @@ class TailwindOverlayContainer extends OverlayContainer {
                 pane.classList.contains('cqa-dialog-backdrop') ||
                 pane.classList.contains('ctc-select-panel') ||
                 pane.classList.contains('ctc-date-range-panel') ||
-                pane.classList.contains('visual-difference-dialog');
+                pane.classList.contains('visual-difference-dialog') ||
+                pane.classList.contains('cqa-custom-edit-step-panel');
             // Also check for library components inside the pane
             // These classes may be on child elements rather than the pane itself
             const hasLibraryDialogInside = pane.querySelector('.cqa-dialog-panel') !== null;
@@ -5649,9 +5686,11 @@ class TailwindOverlayContainer extends OverlayContainer {
             const hasLibraryDatePickerInside = pane.querySelector('.ctc-date-range-panel') !== null;
             const hasVisualDifferenceDialogInside = pane.querySelector('.visual-difference-dialog') !== null ||
                 pane.querySelector('.cqa-visual-difference-modal') !== null;
+            const hasCustomEditStepInside = pane.querySelector('.cqa-custom-edit-step-panel') !== null ||
+                pane.querySelector('cqa-custom-edit-step') !== null;
             const isLibraryOverlay = paneHasLibraryClass || hasLibraryDialogInside ||
                 hasLibrarySelectInside || hasLibraryDatePickerInside ||
-                hasVisualDifferenceDialogInside;
+                hasVisualDifferenceDialogInside || hasCustomEditStepInside;
             if (isLibraryOverlay) {
                 // This is a library overlay - add the class
                 pane.classList.add('cqa-ui-root');
@@ -12505,7 +12544,7 @@ class CompareRunsComponent {
     }
 }
 CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i2$2.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: 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", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", hasComparedRuns: "hasComparedRuns" }, outputs: { searchRuns: "searchRuns", loadMoreRuns: "loadMoreRuns", compareRuns: "compareRuns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", components: [{ type: 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", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4 md:cqa-gap-16 cqa-relative\">\n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run A (Base)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runASelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n      \n            <div class=\"cqa-hidden md:cqa-flex cqa-items-center cqa-justify-center\" style=\"position: absolute; left: 50%; transform: translateX(-50%); top: 30px;\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path d=\"M4.16669 10H15.8334\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M10 4.16699L15.8333 10.0003L10 15.8337\" stroke=\"#636363\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    </svg>\n            </div>\n      \n            <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n              <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#636363]\">Run B (Compare)</span>\n              <cqa-dynamic-select \n                [form]=\"form\" \n                [config]=\"runBSelectConfig\"\n                (searchChange)=\"onSearchChange($event)\"\n                (loadMore)=\"onLoadMore($event)\">\n              </cqa-dynamic-select>\n            </div>\n          </div>\n      \n          <ng-container *ngIf=\"selectedRunA || selectedRunB\">\n            <div class=\"cqa-grid cqa-grid-cols-1 md:cqa-grid-cols-2 cqa-gap-4\">\n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunA ? runAStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunA ? runAStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunA}\">\n                <ng-container *ngIf=\"selectedRunA\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunA.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runAStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runAStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunA.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunA.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunA.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunA?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunA.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n        \n              <div class=\"cqa-bg-white cqa-rounded-lg cqa-p-3\"\n                  [style.background-color]=\"selectedRunB ? runBStatusBgColor : null\"\n                  [style.border-color]=\"selectedRunB ? runBStatusBorderColor : null\"\n                  [ngClass]=\"{'cqa-border cqa-border-solid': selectedRunB}\">\n                <ng-container *ngIf=\"selectedRunB\">\n                  <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-mb-2\">\n                    <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n                      <span class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B]\">Run #{{ selectedRunB.id }}</span>\n                    </div>\n                    <span class=\"cqa-inline-flex cqa-items-center cqa-justify-center cqa-px-2 cqa-py-0.5 cqa-rounded-full cqa-text-[10px] cqa-font-medium\"\n                          [style.background-color]=\"runBStatusColor\"\n                          [style.color]=\"'#FFFFFF'\">\n                      {{ runBStatusLabel }}\n                    </span>\n                  </div>\n                  <div class=\"cqa-grid cqa-grid-cols-2 cqa-gap-3\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Time: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatTime(selectedRunB.startTime) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Duration: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ formatDurationString(selectedRunB.duration) }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">Env: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.environment || '\u2014' }}</span>\n                    </div>\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-1\" *ngIf=\"selectedRunB.device\">\n                      <span class=\"cqa-text-xs cqa-text-[#636363]\">{{ selectedRunB?.platform === 'desktop' ? 'Browser' : 'Device' }}: </span>\n                      <span class=\"cqa-text-xs cqa-text-[#0B0B0B] cqa-font-medium\">{{ selectedRunB.device }}</span>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n\n          <div class=\"cqa-w-full cqa-flex cqa-justify-center\">\n            <cqa-button \n              variant=\"filled\" \n              [disabled]=\"!canCompare\"\n              (click)=\"onCompareClick()\">\n              {{ isComparingRuns ? 'Comparing...' : 'Compare Runs' }}\n            </cqa-button>\n          </div>\n    </div>\n\n    <div *ngIf=\"showComparison && comparisonSummary && stepComparisons && stepComparisons.length > 0\" \n         class=\"cqa-bg-white cqa-py-3 sm:cqa-py-4 cqa-px-3 sm:cqa-px-6 cqa-flex cqa-items-center cqa-gap-3 sm:cqa-gap-4\"\n         style=\"flex-shrink: 0;\">\n         <p class=\"cqa-text-[12px] cqa-text-[#636363]\">Summary:</p>\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-3\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 5.25H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.91669 8.75H11.0834\" stroke=\"#636363\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#0B0B0B]\">{{ comparisonSummary.unchanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Unchanged</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg fill=\"#000000\" viewBox=\"0 0 24 24\" id=\"update-alt-2\" data-name=\"Flat Color\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon flat-color\">\n              <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n              <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n              <g id=\"SVGRepo_iconCarrier\">\n                <path id=\"primary\" d=\"M21.71,10.29a1,1,0,0,0-1.42,0L19,11.59V7a3,3,0,0,0-3-3H6A1,1,0,0,0,6,6H16a1,1,0,0,1,1,1v4.59l-1.29-1.3a1,1,0,0,0-1.42,1.42l3,3a1,1,0,0,0,1.42,0l3-3A1,1,0,0,0,21.71,10.29Z\" fill=\"#155DFC\"></path>\n                <path id=\"secondary\" d=\"M18,18H8a1,1,0,0,1-1-1V12.41l1.29,1.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-3-3a1,1,0,0,0-1.42,0l-3,3a1,1,0,0,0,1.42,1.42L5,12.41V17a3,3,0,0,0,3,3H18a1,1,0,0,0,0-2Z\" fill=\"#155DFC\"></path>\n              </g>\n            </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#155DFC]\">{{ comparisonSummary.statusChanged }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Status Changed</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M7 2.91699V11.0837\" stroke=\"#00C950\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#00A63E]\">{{ comparisonSummary.added }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Added</span>\n        </div>\n\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n          <mat-icon class=\"cqa-flex-shrink-0 cqa-w-[14px] cqa-h-[14px] cqa-text-sm\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n              <path d=\"M2.91669 7H11.0834\" stroke=\"#FB2C36\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n          </mat-icon>\n          <span class=\"cqa-text-sm cqa-font-semibold leading-normal cqa-text-[#FB2C36]\">{{ comparisonSummary.removed }}</span>\n          <span class=\"cqa-text-[10px] cqa-font-semibold cqa-text-[#6B7280]\">Removed</span>\n        </div>\n\n        <!-- Timing Changed summary removed -->\n      </div>\n    </div>\n\n    <div class=\"cqa-bg-white cqa-rounded-lg\" style=\"overflow-y: auto; max-height: calc(90dvh - 468px); scrollbar-width: thin;\">\n      <cqa-table-template style=\"height: 100%; display: block;\"\n        [columns]=\"tableColumns\"\n        [data]=\"stepComparisons\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isComparingRuns\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n    </div>\n\n  </div>\n</div>\n\n", styles: [] }]
@@ -12697,7 +12736,7 @@ class IterationsLoopComponent {
     }
 }
 IterationsLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, 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-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\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 *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+IterationsLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: IterationsLoopComponent, selector: "cqa-iterations-loop", inputs: { iterations: "iterations", summary: "summary", isTableDataLoading: "isTableDataLoading" }, 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-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\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 *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: IterationsLoopComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-iterations-loop', template: "<div class=\"cqa-ui-root\" style=\"display: block; width: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-bg-white\">\n      <cqa-table-template\n        [columns]=\"tableColumns\"\n        [data]=\"iterations\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [pageSizeOptions]=\"pageSizeOptions\"\n        [isEmptyState]=\"isEmptyState\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [isTableDataLoading]=\"isTableDataLoading\"\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 *ngIf=\"!isEmptyState\" class=\"cqa-p-[17px] cqa-mt-6 cqa-bg-[#FBFCFF] cqa-rounded-[5px]\" style=\"border: 1px solid #E5E5E5;\">\n      <h4 class=\"cqa-text-[16px] cqa-text-[#111827] cqa-mb-3\">Summary</h4>\n      <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Total Iterations</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#0B0B0B]\">{{ computedSummary.totalIterations }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Passed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#00C950]\">{{ computedSummary.passed }}</span>\n        </div>\n        <div class=\"cqa-flex cqa-flex-col\">\n          <span class=\"cqa-text-sm cqa-text-[#4A5565] cqa-mb-1\">Failed</span>\n          <span class=\"cqa-text-[22px] cqa-leading-[28px] cqa-font-semibold cqa-text-[#FB2C36]\">{{ computedSummary.failed }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
@@ -13365,6 +13404,12 @@ class DbQueryExecutionItemComponent {
         this.cdr = cdr;
         this.isExpanded = false;
         this.responseTableColumns = [];
+        // Tooltip states for collapsed view
+        this.showQueryCopiedCollapsed = false;
+        this.showResponseCopiedCollapsed = false;
+        // Tooltip states for expanded view
+        this.showQueryCopiedExpanded = false;
+        this.showResponseCopiedExpanded = false;
         this.emptyStateConfig = {
             title: 'No Data',
             description: 'No data returned from this query.',
@@ -13385,16 +13430,64 @@ class DbQueryExecutionItemComponent {
         this.cdr.markForCheck();
         this.cdr.detectChanges();
     }
-    copyQuery() {
+    copyQueryCollapsed() {
         var _a;
         if ((_a = this.queryResult) === null || _a === void 0 ? void 0 : _a.query) {
             navigator.clipboard.writeText(this.queryResult.query).then(() => {
+                this.showQueryCopiedCollapsed = true;
+                // Clear any existing timeout
+                if (this.queryCopiedCollapsedTimeout) {
+                    clearTimeout(this.queryCopiedCollapsedTimeout);
+                }
+                // Hide tooltip after 2 seconds
+                this.queryCopiedCollapsedTimeout = setTimeout(() => {
+                    this.showQueryCopiedCollapsed = false;
+                }, 2000);
             });
         }
     }
-    copyResponse() {
+    copyQueryExpanded() {
+        var _a;
+        if ((_a = this.queryResult) === null || _a === void 0 ? void 0 : _a.query) {
+            navigator.clipboard.writeText(this.queryResult.query).then(() => {
+                this.showQueryCopiedExpanded = true;
+                // Clear any existing timeout
+                if (this.queryCopiedExpandedTimeout) {
+                    clearTimeout(this.queryCopiedExpandedTimeout);
+                }
+                // Hide tooltip after 2 seconds
+                this.queryCopiedExpandedTimeout = setTimeout(() => {
+                    this.showQueryCopiedExpanded = false;
+                }, 2000);
+            });
+        }
+    }
+    copyResponseCollapsed() {
         const response = JSON.stringify(this.queryResult.data, null, 2);
         navigator.clipboard.writeText(response).then(() => {
+            this.showResponseCopiedCollapsed = true;
+            // Clear any existing timeout
+            if (this.responseCopiedCollapsedTimeout) {
+                clearTimeout(this.responseCopiedCollapsedTimeout);
+            }
+            // Hide tooltip after 2 seconds
+            this.responseCopiedCollapsedTimeout = setTimeout(() => {
+                this.showResponseCopiedCollapsed = false;
+            }, 2000);
+        });
+    }
+    copyResponseExpanded() {
+        const response = JSON.stringify(this.queryResult.data, null, 2);
+        navigator.clipboard.writeText(response).then(() => {
+            this.showResponseCopiedExpanded = true;
+            // Clear any existing timeout
+            if (this.responseCopiedExpandedTimeout) {
+                clearTimeout(this.responseCopiedExpandedTimeout);
+            }
+            // Hide tooltip after 2 seconds
+            this.responseCopiedExpandedTimeout = setTimeout(() => {
+                this.showResponseCopiedExpanded = false;
+            }, 2000);
         });
     }
     formatDuration(seconds) {
@@ -13464,12 +13557,21 @@ class DbQueryExecutionItemComponent {
         this.pageIndex = event.pageIndex;
         this.pageSize = event.pageSize;
     }
+    get cellJsonPathGetter() {
+        const baseName = this.variableName || this.queryKey || 'data';
+        const pageIdx = this.pageIndex;
+        const pageSz = this.pageSize;
+        return (rowIndex, colId) => {
+            const actualIndex = pageIdx * pageSz + rowIndex;
+            return `${baseName}[${actualIndex}].${colId}`;
+        };
+    }
 }
 DbQueryExecutionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158]\">Query {{ queryNumber }}</span>\n      \n      <!-- Status Badge -->\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'passed'\"\n        label=\"Passed\"\n        backgroundColor=\"#DCFCE7\"\n        textColor=\"#22C55E\"\n        inlineStyles=\"border-radius: 50px;\"\n        icon=\"check_circle\"\n        size=\"small\">\n      </cqa-badge>\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'failed'\"\n        label=\"Failed\"\n        backgroundColor=\"#FEE2E2\"\n        textColor=\"#DC2626\"\n        icon=\"error\"\n        inlineStyles=\"border-radius: 50px;\"\n        size=\"small\">\n      </cqa-badge>\n      \n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E]\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n        {{ formatDuration(queryResult?.duration) }}\n        <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n        <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n      </span>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button\n        (click)=\"copyQuery(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n      </button>\n      <button\n        (click)=\"copyResponse(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n      </button>\n      \n      <!-- Chevron Icon -->\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        class=\"cqa-transition-transform cqa-ml-2\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQuery()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponse()\"\n          class=\"cqa-cursor-pointer cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\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      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DbQueryExecutionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: { queryNumber: "queryNumber", queryKey: "queryKey", queryResult: "queryResult", status: "status", variableName: "variableName", onJsonPathCopiedHandler: "onJsonPathCopiedHandler" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap  cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n        <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n        \n        <!-- Status Badge -->\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'passed'\"\n          label=\"Passed\"\n          backgroundColor=\"#DCFCE7\"\n          textColor=\"#22C55E\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          icon=\"check_circle\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'failed'\"\n          label=\"Failed\"\n          backgroundColor=\"#FEE2E2\"\n          textColor=\"#DC2626\"\n          icon=\"error\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          size=\"small\">\n        </cqa-badge>\n        \n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n          {{ formatDuration(queryResult?.duration) }}\n          <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n          <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <button\n        (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showQueryCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      <button\n        (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showResponseCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7  cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n        matTooltipPosition=\"above\"\n        class=\"cqa-transition-transform cqa-min-w-max\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQueryExpanded()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showQueryCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponseExpanded()\"\n          class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showResponseCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        [cellJsonPathGetter]=\"cellJsonPathGetter\"\n        [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbQueryExecutionItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-db-query-execution-item', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n      <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158]\">Query {{ queryNumber }}</span>\n      \n      <!-- Status Badge -->\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'passed'\"\n        label=\"Passed\"\n        backgroundColor=\"#DCFCE7\"\n        textColor=\"#22C55E\"\n        inlineStyles=\"border-radius: 50px;\"\n        icon=\"check_circle\"\n        size=\"small\">\n      </cqa-badge>\n      <cqa-badge class=\"cqa-mb-0.5\"\n        *ngIf=\"status === 'failed'\"\n        label=\"Failed\"\n        backgroundColor=\"#FEE2E2\"\n        textColor=\"#DC2626\"\n        icon=\"error\"\n        inlineStyles=\"border-radius: 50px;\"\n        size=\"small\">\n      </cqa-badge>\n      \n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E]\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n        {{ formatDuration(queryResult?.duration) }}\n        <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n        <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n      </span>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <button\n        (click)=\"copyQuery(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n      </button>\n      <button\n        (click)=\"copyResponse(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n      </button>\n      \n      <!-- Chevron Icon -->\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        class=\"cqa-transition-transform cqa-ml-2\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQuery()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponse()\"\n          class=\"cqa-cursor-pointer cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\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      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-db-query-execution-item', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-border !cqa-border-b-2 cqa-border-solid cqa-rounded-lg cqa-overflow-hidden\" [ngClass]=\"{'cqa-bg-[#F8FAFC] cqa-border-[#E2E8F0]': status === 'passed', 'cqa-bg-[#FEF2F2] cqa-border-[#FFC9C9]': status === 'failed'}\">\n  <!-- Header (Collapsed View) -->\n  <div \n    class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-4 cqa-py-2 cqa-cursor-pointer cqa-flex-wrap\"\n    (click)=\"toggle()\"\n    role=\"button\">\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-flex-wrap  cqa-gap-2 cqa-w-[calc(100%-15px)]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n        <span class=\"cqa-font-semibold cqa-text-[10px] cqa-text-[#314158] cqa-min-w-max\">Query {{ queryNumber }}</span>\n        \n        <!-- Status Badge -->\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'passed'\"\n          label=\"Passed\"\n          backgroundColor=\"#DCFCE7\"\n          textColor=\"#22C55E\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          icon=\"check_circle\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge class=\"cqa-mb-0.5\"\n          *ngIf=\"status === 'failed'\"\n          label=\"Failed\"\n          backgroundColor=\"#FEE2E2\"\n          textColor=\"#DC2626\"\n          icon=\"error\"\n          inlineStyles=\"border-radius: 50px; margin-top: 2px;\"\n          size=\"small\">\n        </cqa-badge>\n        \n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#62748E] cqa-min-w-max\" *ngIf=\"queryResult?.duration || queryResult?.data?.length > 0\">\n          {{ formatDuration(queryResult?.duration) }}\n          <span *ngIf=\"queryResult?.data?.length > 0 && queryResult?.duration\"> \u2022 </span>\n          <span *ngIf=\"queryResult?.data?.length > 0\">{{ queryResult?.data?.length || 0 }} rows</span>\n        </span>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <button\n        (click)=\"copyQueryCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Query\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showQueryCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      <button\n        (click)=\"copyResponseCollapsed(); $event.stopPropagation()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-1 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-bg-transparent cqa-cursor-pointer cqa-relative\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        Copy Response\n        \n        <!-- Copied Tooltip -->\n        <div \n          *ngIf=\"showResponseCopiedCollapsed\" \n          class=\"cqa-absolute cqa-top-0 cqa-left-7  cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n          style=\"animation: fadeInOut 0.2s ease-in-out;\">\n          Copied!\n        </div>\n      </button>\n      </div>\n    </div>\n    \n    <div class=\"cqa-flex cqa-items-center cqa-min-w-max\">\n      <svg \n        [class.cqa-rotate-180]=\"isExpanded\" \n        [matTooltip]=\"isExpanded ? 'Collapse' : 'Expand to view the query and response.'\"\n        matTooltipPosition=\"above\"\n        class=\"cqa-transition-transform cqa-min-w-max\" \n        width=\"14\" \n        height=\"14\" \n        viewBox=\"0 0 14 14\" \n        fill=\"none\" \n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded === true\" class=\"cqa-bg-white cqa-border-t cqa-border-b-0 cqa-border-l-0 cqa-border-r-0 cqa-border-solid\" [ngClass]=\"{'cqa-border-[#E2E8F0]': status === 'passed', 'cqa-border-[#FFC9C9]': status === 'failed'}\">\n    <!-- Query Section -->\n    <div class=\"cqa-px-4 cqa-py-3\">\n      <div class=\"cqa-text-[12px] cqa-leading-[16px] cqa-font-semibold cqa-text-[#314158] cqa-mb-2\">Query</div>\n      <div class=\"cqa-relative cqa-bg-[#0F172B] cqa-rounded-[10px] cqa-p-3 cqa-overflow-hidden\">\n        <button\n          (click)=\"copyQueryExpanded()\"\n          class=\"cqa-absolute cqa-top-2 cqa-right-2 cqa-p-1.5 cqa-cursor-pointer hover:cqa-bg-[#334155] cqa-rounded\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#94A3B8\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showQueryCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n        <pre class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#F1F5F9] cqa-font-mono cqa-whitespace-pre-wrap cqa-overflow-x-auto cqa-m-0\"><code>{{ queryResult?.query }}</code></pre>\n      </div>\n      <div *ngIf=\"variableName\" class=\"cqa-mt-4 cqa-text-[10px] cqa-leading-[15px] cqa-text-[#45556C]\">\n        Stored as variable: <span class=\"cqa-font-medium cqa-bg-[#F1F5F9] cqa-px-1 cqa-rounded-[4px] cqa-text-[#45556C]\">{{ variableName }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mt-4\" *ngIf=\"queryResult?.data\">\n        <div class=\"cqa-text-[12px] cqa-text-[#314158]\">Response</div>\n        <button\n          (click)=\"copyResponseExpanded()\"\n          class=\"cqa-cursor-pointer cqa-rounded cqa-relative\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n          \n          <!-- Copied Tooltip -->\n          <div \n            *ngIf=\"showResponseCopiedExpanded\" \n            class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n            style=\"animation: fadeInOut 0.2s ease-in-out;\">\n            Copied!\n          </div>\n        </button>\n      </div>\n      \n      <cqa-table-template\n        *ngIf=\"!isEmptyResponse && queryResult?.data\"\n        [columns]=\"responseTableColumns\"\n        [data]=\"queryResult?.data || []\"\n        [pageIndex]=\"pageIndex\"\n        [pageSize]=\"pageSize\"\n        [isEmptyState]=\"isEmptyResponse\"\n        [emptyStateConfig]=\"emptyStateConfig\"\n        [showSearchBar]=\"false\"\n        [showFilterButton]=\"false\"\n        [showSettingsButton]=\"false\"\n        [showAutoRefreshButton]=\"false\"\n        [showOtherButton]=\"false\"\n        [showFilterPanel]=\"false\"\n        [serverSidePagination]=\"false\"\n        [cellJsonPathGetter]=\"cellJsonPathGetter\"\n        [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n        (pageChange)=\"onPageChange($event)\">\n      </cqa-table-template>\n      \n      <div *ngIf=\"isEmptyResponse\" class=\"cqa-text-[10px] cqa-text-[#45556C] cqa-py-4 cqa-text-center\">\n        No data returned from this query.\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { queryNumber: [{
                 type: Input
             }], queryKey: [{
@@ -13480,6 +13582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], variableName: [{
                 type: Input
+            }], onJsonPathCopiedHandler: [{
+                type: Input
             }] } });
 
 class DbVerificationStepComponent extends BaseStepComponent {
@@ -13489,6 +13593,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
         this.isMakingCurrentBaseline = {};
         this.isLive = false;
         this.showFailedStepDetails = false;
+        this.showEnvironmentCopied = false;
         this.makeCurrentBaseline = new EventEmitter();
         this.uploadBaseline = new EventEmitter();
         this.analyze = new EventEmitter();
@@ -13736,6 +13841,15 @@ class DbVerificationStepComponent extends BaseStepComponent {
         var _a;
         if ((_a = this.dbConfig) === null || _a === void 0 ? void 0 : _a.name) {
             navigator.clipboard.writeText(this.dbConfig.name).then(() => {
+                this.showEnvironmentCopied = true;
+                // Clear any existing timeout
+                if (this.environmentCopiedTimeout) {
+                    clearTimeout(this.environmentCopiedTimeout);
+                }
+                // Hide tooltip after 2 seconds
+                this.environmentCopiedTimeout = setTimeout(() => {
+                    this.showEnvironmentCopied = false;
+                }, 2000);
             });
         }
     }
@@ -13821,10 +13935,10 @@ class DbVerificationStepComponent extends BaseStepComponent {
     }
 }
 DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", isLive: "isLive", step: "step" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\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    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DbVerificationStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DbVerificationStepComponent, selector: "cqa-db-verification-step", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", dbTestResult: "dbTestResult", dbConfig: "dbConfig", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              \n              <!-- Copied Tooltip -->\n              <div \n                *ngIf=\"showEnvironmentCopied\" \n                class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n                style=\"animation: fadeInOut 0.2s ease-in-out;\">\n                Copied!\n              </div>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\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    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: DbQueryExecutionItemComponent, selector: "cqa-db-query-execution-item", inputs: ["queryNumber", "queryKey", "queryResult", "status", "variableName", "onJsonPathCopiedHandler"] }, { type: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { type: TableTemplateComponent, selector: "cqa-table-template", inputs: ["searchPlaceholder", "searchValue", "showClear", "showSearchBar", "filterConfig", "showFilterPanel", "showFilterButton", "otherButtons", "otherDropDownButtons", "otherSelectDropDownButtons", "otherButtonLabel", "otherButtonVariant", "showOtherButton", "showActionButton", "showSettingsButton", "showAutoRefreshButton", "data", "isEmptyState", "emptyStateConfig", "actions", "chips", "filterApplied", "columns", "selectedAutoRefreshInterval", "pageIndex", "pageSize", "pageSizeOptions", "serverSidePagination", "totalElements", "isTableLoading", "isTableDataLoading", "cellJsonPathGetter", "onJsonPathCopiedHandler"], outputs: ["onSearchChange", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }, { type: SelfHealAnalysisComponent, selector: "cqa-self-heal-analysis", inputs: ["id", "originalLocator", "healedLocator", "confidence", "healMethod", "isLoadingAccept", "isLoadingModifyAccept"], outputs: ["action"] }, { type: ViewMoreFailedStepButtonComponent, selector: "cqa-view-more-failed-step-button", inputs: ["timingBreakdown", "subSteps", "failureDetails", "isExpanded"], outputs: ["viewMoreClick"] }, { type: UpdatedFailedStepComponent, selector: "cqa-updated-failed-step", inputs: ["timingBreakdown", "testStepResultId", "expanded", "subSteps", "failureDetails", "reasoning", "confidence", "isUploadingBaseline", "isMakingCurrentBaseline", "isLive"], outputs: ["makeCurrentBaseline", "uploadBaseline", "analyze", "viewFullLogs"] }], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-db-verification-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\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    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-db-verification-step', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-font-inter\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggleHeader($event)\"\n    style=\"border-bottom: 1px solid #F3F4F6\">\n    \n    <!-- Status Icon -->\n    <!-- Success -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'success'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Failure -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'failure' || getStatus().toLowerCase() === 'failed'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 4.5L4.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 4.5L7.5 7.5\" stroke=\"#DC2626\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Pending -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'pending'\">\n      <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n    <!-- Running - Show spinner -->\n    <div *ngIf=\"getStatus().toLowerCase() === 'running'\">\n      <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n        <path d=\"M6 1A5 5 0 0 1 11 6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center\" *ngIf=\"getStatus().toLowerCase() === 'skipped'\">\n      <span class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n    </div>\n\n    <div><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n      <rect width=\"20\" height=\"16\" rx=\"4\" fill=\"#F0F0F1\"/>\n      <path d=\"M13.5 3.5H6.5C5.95 3.5 5.5 3.95 5.5 4.5V11.5C5.5 12.05 5.95 12.5 6.5 12.5H13.5C14.05 12.5 14.5 12.05 14.5 11.5V4.5C14.5 3.95 14.05 3.5 13.5 3.5ZM13.5 4.5V6H6.5V4.5H13.5ZM13.5 7V9H6.5V7H13.5ZM6.5 11.5V10H13.5V11.5H6.5Z\" fill=\"#212122\"/>\n      </svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ stepNumber }}. <span [innerHTML]=\"title\"></span></span>\n      <span class=\"cqa-ml-1 cqa-px-1.5 cqa-py-0.5 cqa-rounded-full cqa-font-medium cqa-text-[#212122] cqa-bg-[#F0F0F1] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max\">\n        Database\n      </span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <span *ngIf=\"selfHealAnalysis\" class=\"cqa-px-1.5 cqa-rounded-full cqa-font-medium cqa-text-[#097E53] cqa-bg-[#CFF2E5] cqa-text-[10px] cqa-leading-[15px] cqa-min-w-max cqa-flex cqa-items-center cqa-gap-[6px]\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\" viewBox=\"0 0 9 9\" fill=\"none\">\n          <path d=\"M4.50941 0C4.56489 0.0227384 4.58859 0.0782652 4.61131 0.129846C4.62269 0.1599 4.63314 0.190117 4.64329 0.220575C4.64726 0.232247 4.65123 0.243918 4.65532 0.255943C4.70806 0.413005 4.75504 0.571748 4.80229 0.73038C4.81297 0.76619 4.82369 0.801987 4.83442 0.837783C4.88905 1.02004 4.94327 1.2024 4.99719 1.38484C5.00476 1.41047 5.01234 1.43609 5.01992 1.46171C5.04128 1.53395 5.06262 1.60619 5.08383 1.67847C5.12867 1.8312 5.17473 1.98347 5.22378 2.13501C5.22807 2.14827 5.23236 2.16152 5.23677 2.17518C5.3642 2.565 5.54482 2.91437 5.8409 3.21196C5.84823 3.2197 5.85556 3.22744 5.86312 3.23541C5.9895 3.36437 6.15169 3.46771 6.3138 3.55111C6.32206 3.55542 6.33031 3.55974 6.33882 3.56419C6.81587 3.80925 7.38951 3.91704 7.90619 4.0605C8.1326 4.1234 8.3583 4.18829 8.58317 4.25603C8.59897 4.26079 8.61478 4.26554 8.63058 4.27028C8.67784 4.28445 8.725 4.29887 8.77211 4.31347C8.7831 4.31679 8.79408 4.32011 8.80539 4.32353C8.87029 4.34406 8.93239 4.36829 8.98566 4.41027C9.00191 4.44418 9.00191 4.44418 8.99748 4.4781C8.94564 4.52736 8.8942 4.55046 8.82578 4.573C8.816 4.57632 8.80622 4.57965 8.79614 4.58308C8.68061 4.62183 8.56351 4.65575 8.44626 4.68935C8.4222 4.6963 8.39814 4.70326 8.37408 4.71021C8.22571 4.75301 8.07708 4.7949 7.92829 4.83632C7.73232 4.89088 7.53663 4.94634 7.34113 5.00243C7.3091 5.01162 7.27706 5.02078 7.24501 5.02991C7.07671 5.07786 6.90923 5.12753 6.74314 5.18208C6.72937 5.18659 6.71559 5.1911 6.70139 5.19574C6.14511 5.38082 5.7211 5.72609 5.45571 6.23099C5.31263 6.51475 5.22823 6.82161 5.14214 7.12447C5.11884 7.20619 5.09409 7.28745 5.06905 7.36869C5.0494 7.43261 5.0302 7.49663 5.01149 7.56081C5.00926 7.56844 5.00703 7.57608 5.00473 7.58395C4.99394 7.62094 4.98319 7.65793 4.97252 7.69495C4.94519 7.78879 4.91578 7.88187 4.88555 7.97489C4.83191 8.14021 4.7831 8.30674 4.73459 8.4735C4.66144 8.72457 4.66144 8.72457 4.61997 8.84527C4.61721 8.85337 4.61446 8.86147 4.61163 8.86982C4.59649 8.91278 4.58092 8.95233 4.55226 8.9887C4.50867 8.99788 4.50867 8.99788 4.46951 9C4.42473 8.93759 4.39508 8.87711 4.37133 8.80508C4.36787 8.79487 4.36441 8.78466 4.36085 8.77415C4.31684 8.64248 4.27751 8.50946 4.23817 8.37646C4.22916 8.34604 4.22011 8.31564 4.21105 8.28524C4.1436 8.05863 4.07725 7.83174 4.01101 7.60481C3.73507 6.48224 3.73507 6.48224 3.039 5.57466C3.02784 5.56596 3.01669 5.55726 3.00519 5.5483C2.54913 5.19902 1.94834 5.06969 1.39815 4.91813C1.26207 4.88062 1.12605 4.84293 0.990032 4.80523C0.978138 4.80193 0.978138 4.80193 0.966003 4.79857C0.769811 4.74417 0.573674 4.68963 0.378224 4.63283C0.369956 4.63045 0.361688 4.62806 0.353169 4.62561C0.0528989 4.53883 0.0528989 4.53883 0.000646537 4.4781C-0.000831261 4.45054 -0.000831261 4.45054 0.0124689 4.42157C0.0670835 4.3704 0.120077 4.34848 0.19216 4.32619C0.202597 4.32284 0.213034 4.31948 0.223787 4.31603C0.255753 4.30582 0.287788 4.29584 0.319851 4.28592C0.329001 4.28305 0.338151 4.28017 0.347578 4.27722C0.412285 4.25693 0.477225 4.2374 0.542259 4.21809C0.55824 4.21332 0.55824 4.21332 0.574544 4.20846C0.852269 4.12587 1.13181 4.049 1.41126 3.97196C1.6195 3.91455 1.82738 3.85618 2.0346 3.79548C2.04413 3.79271 2.05365 3.78993 2.06346 3.78707C2.5435 3.64696 3.01278 3.44816 3.32274 3.0537C3.32738 3.04785 3.33202 3.042 3.3368 3.03597C3.68197 2.59815 3.81658 2.06572 3.96695 1.54621C4.01643 1.37534 4.06649 1.20464 4.11673 1.03399C4.13064 0.986733 4.14453 0.939471 4.15836 0.892194C4.21394 0.702289 4.27035 0.512642 4.33 0.323864C4.33558 0.306186 4.34114 0.288501 4.34666 0.270807C4.43017 0.00398761 4.43017 0.00398761 4.50941 0Z\" fill=\"#0DBD7D\"/>\n          <path d=\"M7.23597 0.554859C7.29024 0.613599 7.30109 0.682631 7.31799 0.757638C7.37436 0.993269 7.43929 1.20993 7.66467 1.34681C7.80371 1.42035 7.96944 1.45381 8.1235 1.48541C8.18854 1.49902 8.24348 1.51709 8.29924 1.55321C8.31181 1.57229 8.31181 1.57229 8.31107 1.60549C8.29814 1.64588 8.28678 1.6589 8.25269 1.68533C8.21543 1.69726 8.21543 1.69726 8.17068 1.70653C8.15375 1.71025 8.13683 1.714 8.11992 1.71779C8.11086 1.7198 8.10181 1.72181 8.09247 1.72388C7.81696 1.78482 7.81696 1.78482 7.57882 1.92273C7.57108 1.92869 7.56333 1.93466 7.55536 1.9408C7.38516 2.08431 7.34916 2.32303 7.29793 2.52301C7.29499 2.53399 7.29206 2.54497 7.28903 2.55629C7.28649 2.56601 7.28395 2.57573 7.28133 2.58575C7.27028 2.61544 7.25881 2.63479 7.23597 2.65754C7.17234 2.66527 7.17234 2.66527 7.14139 2.65754C7.09216 2.62106 7.08114 2.5795 7.06828 2.52365C7.06613 2.51501 7.06398 2.50636 7.06176 2.49745C7.05489 2.46983 7.04824 2.44217 7.04164 2.41449C6.98979 2.19897 6.93126 1.98751 6.72451 1.86118C6.56293 1.77501 6.36646 1.73426 6.18587 1.70136C6.13637 1.69151 6.10802 1.67911 6.07738 1.64012C6.07073 1.60055 6.07073 1.60055 6.07738 1.56098C6.12447 1.51437 6.17402 1.50299 6.23772 1.48891C6.25778 1.48416 6.27784 1.47938 6.29789 1.47456C6.30825 1.47209 6.31861 1.46962 6.32929 1.46707C6.38212 1.45407 6.43443 1.43949 6.48673 1.42462C6.49623 1.42198 6.50573 1.41935 6.51552 1.41663C6.62182 1.38624 6.71356 1.34737 6.79854 1.27836C6.80647 1.27213 6.81439 1.26589 6.82255 1.25946C6.9548 1.14565 6.99974 0.974674 7.04053 0.815134C7.04364 0.803022 7.04675 0.79091 7.04995 0.778432C7.05614 0.754101 7.06222 0.729743 7.06817 0.705359C7.07243 0.688394 7.07243 0.688394 7.07678 0.671086C7.07927 0.660951 7.08175 0.650816 7.08431 0.640373C7.09521 0.608108 7.10952 0.582772 7.12957 0.554859C7.1681 0.536435 7.19515 0.544764 7.23597 0.554859Z\" fill=\"#075F3F\"/>\n          <path d=\"M1.79545 6.2471C1.80951 6.24719 1.80951 6.24719 1.82386 6.24729C1.92477 6.25022 1.99304 6.28115 2.06736 6.34601C2.15384 6.43533 2.19377 6.53611 2.1915 6.6565C2.18178 6.75412 2.12158 6.83935 2.04773 6.90533C1.96081 6.97242 1.87313 6.99459 1.76206 6.99149C1.66841 6.98107 1.5803 6.93852 1.51393 6.87451C1.43138 6.76681 1.40725 6.66803 1.41935 6.53537C1.44433 6.43092 1.51637 6.34613 1.6085 6.28666C1.67251 6.25564 1.72399 6.24652 1.79545 6.2471Z\" fill=\"#0DBD7D\"/>\n          </svg>\n        Self-healed\n      </span>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"!isLive\" [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\">\n    <!-- Summary Bar -->\n    <div class=\"cqa-mb-1.5 cqa-p-3 cqa-bg-[#FCFCFC] cqa-rounded-[6px] cqa-flex cqa-flex-col cqa-gap-2\" style=\"border: 1px solid #E5E7EB;\" *ngIf=\"getStatus() || duration || cachedQueryResults?.length > 0 || dbTestResult?.assertionResults?.length > 0 || getTotalRowsReturned() > 0 || getFailureMessage()\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n        <!-- Status Badge -->\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'failure' || getStatus()?.toLowerCase() === 'failed'\"\n          label=\"FAIL\"\n          backgroundColor=\"#DC2626\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"getStatus()?.toLowerCase() === 'success'\"\n          label=\"PASS\"\n          backgroundColor=\"#22C55E\"\n          textColor=\"#FFFFFF\"\n          size=\"small\">\n        </cqa-badge>\n\n        <div class=\"cqa-h-[19px] cqa-w-[1px] cqa-bg-[#E5E7EB]\"></div>\n        \n        <!-- Summary Stats -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-4 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#6B7280]\">\n          <span *ngIf=\"duration\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Total Time: <span class=\"cqa-text-[#4B5563]\">{{ formatDuration(duration) }}</span></span>\n          <span *ngIf=\"cachedQueryResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Queries: <span class=\"cqa-text-[#4B5563]\">{{ cachedQueryResults?.length || 0 }}</span></span>\n          <span *ngIf=\"dbTestResult?.assertionResults?.length > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Assertions: <span class=\"cqa-text-[#4B5563]\">{{ dbTestResult?.assertionResults?.length || 0 }}</span></span>\n          <span *ngIf=\"getTotalRowsReturned() > 0\" class=\"cqa-font-medium cqa-text-[10px] cqa-text-[#111827]\">Rows Returned: <span class=\"cqa-text-[#4B5563]\">{{ getTotalRowsReturned() }}</span></span>\n        </div>\n      </div>\n\n      <!-- Failure Banner -->\n      <div \n        *ngIf=\"getFailureMessage()\"\n        class=\"cqa-flex cqa-px-2 cqa-py-1 cqa-bg-[#FEF2F2] cqa-rounded-[4px]\" style=\"border: 1px solid #FEE2E2;\">\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#B91C1C]\">\n          {{ getFailureMessage() }}\n        </span>\n      </div>\n    </div>\n\n    <!-- Database Environment Section -->\n    <div *ngIf=\"dbConfig\" class=\"cqa-mb-1.5\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Database environment</div>\n      <div class=\"cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-px-4 cqa-py-2 cqa-relative cqa-flex cqa-flex-wrap cqa-gap-3\">\n        <!-- Environment -->\n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Environment</div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-4\">\n            <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.name }}</span>\n            <span (click)=\"copyEnvironment()\" class=\"cqa-cursor-pointer cqa-relative\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.33332 10.6667H3.99999C3.64637 10.6667 3.30723 10.5263 3.05718 10.2762C2.80713 10.0262 2.66666 9.68704 2.66666 9.33341V4.00008C2.66666 3.64646 2.80713 3.30732 3.05718 3.05727C3.30723 2.80722 3.64637 2.66675 3.99999 2.66675H9.33332C9.68695 2.66675 10.0261 2.80722 10.2761 3.05727C10.5262 3.30732 10.6667 3.64646 10.6667 4.00008V5.33341M6.66666 13.3334H12C12.3536 13.3334 12.6928 13.1929 12.9428 12.9429C13.1928 12.6928 13.3333 12.3537 13.3333 12.0001V6.66675C13.3333 6.31313 13.1928 5.97399 12.9428 5.72394C12.6928 5.47389 12.3536 5.33341 12 5.33341H6.66666C6.31303 5.33341 5.9739 5.47389 5.72385 5.72394C5.4738 5.97399 5.33332 6.31313 5.33332 6.66675V12.0001C5.33332 12.3537 5.4738 12.6928 5.72385 12.9429C5.9739 13.1929 6.31303 13.3334 6.66666 13.3334Z\" stroke=\"#636363\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n              \n              <!-- Copied Tooltip -->\n              <div \n                *ngIf=\"showEnvironmentCopied\" \n                class=\"cqa-absolute cqa-right-0 cqa-top-full cqa-mt-1 cqa-px-2 cqa-py-1 cqa-bg-[#0B0B0B] cqa-text-white cqa-text-[10px] cqa-rounded cqa-whitespace-nowrap cqa-z-50 cqa-shadow-lg\"\n                style=\"animation: fadeInOut 0.2s ease-in-out;\">\n                Copied!\n              </div>\n            </span>\n          </div>\n        </div>\n        \n        <div class=\"\">\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#45556C] cqa-mb-1\">Type</div>\n          <div class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#0F172B]\">{{ dbConfig.dbType }}</div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"cqa-mb-1.5\" *ngIf=\"cachedQueryResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Query Execution</div>\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-px-4 cqa-py-2 cqa-bg-white cqa-rounded-[10px]\" style=\"border: 1px solid #E2E8F0;\">\n        <cqa-db-query-execution-item\n          *ngFor=\"let queryItem of cachedQueryResults; let i = index; trackBy: trackByQueryKey\"\n          [queryNumber]=\"i + 1\"\n          [queryKey]=\"queryItem.key\"\n          [queryResult]=\"queryItem.result\"\n          [status]=\"getQueryStatus(queryItem.key)\"\n          [variableName]=\"queryItem.key\"\n          [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\">\n        </cqa-db-query-execution-item>\n      </div>\n    </div>\n\n    <!-- Verification Section -->\n    <div *ngIf=\"dbTestResult?.assertionResults && dbTestResult?.assertionResults?.length > 0\">\n      <div class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#0B0B0B] cqa-mb-2\">Verification</div>      \n      <!-- Verification Table -->\n      <div class=\"cqa-bg-white cqa-rounded-[10px] cqa-px-4 cqa-py-2 cqa-overflow-hidden\" style=\"border: 1px solid #E2E8F0;\">\n        <!-- Segment Control for Filters -->\n        <cqa-segment-control\n          [segments]=\"filterSegments\"\n          [value]=\"verificationFilter\"\n          (valueChange)=\"onFilterChange($event)\">\n        </cqa-segment-control>\n        <cqa-table-template\n          [columns]=\"verificationTableColumns\"\n          [data]=\"getTableData()\"\n          [pageIndex]=\"pageIndex\"\n          [pageSize]=\"pageSize\"\n          [isEmptyState]=\"isEmptyTable\"\n          [emptyStateConfig]=\"emptyStateConfig\"\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    </div>\n\n    <!-- Self Heal Analysis -->\n    <cqa-self-heal-analysis \n      *ngIf=\"selfHealAnalysis\" \n      [id]=\"step?.testStepId\"\n      [originalLocator]=\"selfHealAnalysis.originalLocator\"\n      [healedLocator]=\"selfHealAnalysis.healedLocator\"\n      [confidence]=\"selfHealAnalysis.confidence\"\n      [healMethod]=\"selfHealAnalysis.healMethod\"\n      [isLoadingAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingAccept?.[step?.testStepId] : false\"\n      [isLoadingModifyAccept]=\"getSelfHealLoadingStatesHandler ? getSelfHealLoadingStatesHandler().isLoadingModifyAccept?.[step?.testStepId] : false\"\n      (action)=\"onSelfHealAction($event)\">\n    </cqa-self-heal-analysis>\n\n    <!-- Timing Breakdown -->\n    <div *ngIf=\"timingBreakdown\" class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-5 cqa-pt-4 cqa-px-4 cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <div><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n        <span>Timing breakdown</span>\n      </div>\n      <span class=\"cqa-text-dialog-muted cqa-flex cqa-items-center cqa-gap-3\">\n        <div>\n          App <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.app) }}</span>\n        </div>\n        <div><svg width=\"1\" height=\"11\" viewBox=\"0 0 1 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M-3.8147e-06 10.32V-7.15256e-07H0.959996V10.32H-3.8147e-06Z\" fill=\"#E5E7EB\"/></svg></div>\n        <div>\n          Tool <span class=\"cqa-text-[#374151]\">{{ formatDuration(timingBreakdown.tool) }}</span>\n        </div>\n      </span>\n    </div>\n\n    <!-- View More Failed Step Button - shown when expanded and failure details exist -->\n    <div *ngIf=\"showViewMoreButton\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-view-more-failed-step-button\n        [timingBreakdown]=\"timingBreakdown\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [isExpanded]=\"showFailedStepDetails\"\n        (viewMoreClick)=\"onViewMoreFailedStepClick($event)\">\n      </cqa-view-more-failed-step-button>\n    </div>\n\n    <!-- Updated Failed Step Component - shown when button is clicked -->\n    <div *ngIf=\"showViewMoreButton && showFailedStepDetails && failureDetails\" class=\"cqa-mt-2 cqa-px-4\">\n      <cqa-updated-failed-step\n        [testStepResultId]=\"testStepResultId\"\n        [timingBreakdown]=\"timingBreakdown\"\n        [expanded]=\"true\"\n        [subSteps]=\"getSubStepsForFailedStep()\"\n        [failureDetails]=\"failureDetails\"\n        [reasoning]=\"reasoning\"\n        [confidence]=\"confidence\"\n        [isUploadingBaseline]=\"isUploadingBaseline\"\n        [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n        [isLive]=\"isLive\"\n        (makeCurrentBaseline)=\"onMakeCurrentBaseline($event)\"\n        (uploadBaseline)=\"onUploadBaseline($event)\"\n        (analyze)=\"onAnalyze()\"\n        (viewFullLogs)=\"onViewFullLogs()\">\n      </cqa-updated-failed-step>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{
@@ -13863,6 +13977,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], onStepClickHandler: [{
                 type: Input
+            }], onJsonPathCopiedHandler: [{
+                type: Input
             }], isLive: [{
                 type: Input
             }], step: [{
@@ -13894,8 +14010,195 @@ const STEP_ROW_ACTIONS_STYLES = `
 }
 `;
 
+/** Sentinel returned from afterClosed() when user clicked "Edit in depth". */
+const CUSTOM_EDIT_STEP_EDIT_IN_DEPTH = Symbol('CustomEditStepEditInDepth');
+const CUSTOM_EDIT_STEP_DATA = new InjectionToken('CUSTOM_EDIT_STEP_DATA');
+
+class CustomEditStepRef {
+    constructor(overlayRef) {
+        this.overlayRef = overlayRef;
+        this.closed$ = new Subject();
+        this.isClosed = false;
+        this.overlayRef.detachments().subscribe(() => {
+            this.finishClose(undefined);
+        });
+    }
+    close(result) {
+        if (this.isClosed) {
+            return;
+        }
+        this.finishClose(result);
+        this.overlayRef.dispose();
+    }
+    afterClosed() {
+        return this.closed$.asObservable();
+    }
+    finishClose(result) {
+        if (this.isClosed) {
+            return;
+        }
+        this.isClosed = true;
+        this.closed$.next(result);
+        this.closed$.complete();
+    }
+}
+const CUSTOM_EDIT_STEP_REF = new InjectionToken('CUSTOM_EDIT_STEP_REF');
+
+class CustomEditStepComponent {
+    constructor(ref, data) {
+        var _a, _b;
+        this.ref = ref;
+        this.apply = new EventEmitter();
+        this.cancel = new EventEmitter();
+        this.editInDepth = new EventEmitter();
+        /** Local value while editing (for two-way binding in textarea) */
+        this.value = '';
+        this.helpUrl = '';
+        /** Tooltip shown when hovering over the "Need help ?" icon and text */
+        this.helpTooltipText = 'Not sure what to do? Click to go to our detailed step creation documentation';
+        /** Whether the help tooltip is visible (custom tooltip for use inside overlay) */
+        this.showHelpTooltip = false;
+        if (data) {
+            this.value = (_a = data.description) !== null && _a !== void 0 ? _a : '';
+            this.helpUrl = (_b = data.helpUrl) !== null && _b !== void 0 ? _b : '';
+        }
+    }
+    onApply() {
+        this.apply.emit(this.value);
+        this.ref.close(this.value);
+    }
+    onCancel() {
+        this.cancel.emit();
+        this.ref.close(undefined);
+    }
+    onClose() {
+        this.onCancel();
+    }
+    onEditInDepth(event) {
+        event.preventDefault();
+        this.editInDepth.emit();
+        this.ref.close(CUSTOM_EDIT_STEP_EDIT_IN_DEPTH);
+    }
+    onHelp(event) {
+        if (this.helpUrl) {
+            event.preventDefault();
+            window.open(this.helpUrl, '_blank');
+        }
+    }
+}
+CustomEditStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepComponent, deps: [{ token: CUSTOM_EDIT_STEP_REF }, { token: CUSTOM_EDIT_STEP_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CustomEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CustomEditStepComponent, selector: "cqa-custom-edit-step", outputs: { apply: "apply", cancel: "cancel", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Step Description\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100]\"\n          style=\"top: -24px; left: -125px;\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap\"\n            style=\"width: 306px; min-height: 20px; border-radius: 6px; opacity: 1; padding: 4px 8px; background-color: #0A0A0A; line-height: 20px; font-size: 8px;\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <button type=\"button\" (click)=\"onClose()\"\n        class=\"cqa-p-1 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Close\" aria-label=\"Close\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Content: textarea + helper -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <cqa-custom-textarea\n      [(value)]=\"value\"\n      placeholder=\"Enter description\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      resize=\"vertical\"\n      size=\"md\">\n    </cqa-custom-textarea>\n    <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n      Provide a clear description of the step's purpose\n    </p>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a href=\"#\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-custom-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"cqa-bg-white cqa-rounded-[12px] cqa-shadow-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-w-[500px] cqa-flex cqa-flex-col cqa-gap-[12px] cqa-p-2 cqa-box-border\">\n  <!-- Header: title left; Need help? + close icon right -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-px-4\">\n    <h2 class=\"cqa-text-[16px] cqa-leading-[24px] cqa-font-bold cqa-text-[#111827] cqa-m-0 cqa-font-[600]\">\n      Step Description\n    </h2>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n      <!-- Need help? with custom tooltip (works inside overlay) -->\n      <div class=\"cqa-relative cqa-inline-flex\"\n        (mouseenter)=\"showHelpTooltip = true\" (mouseleave)=\"showHelpTooltip = false\">\n        <a *ngIf=\"helpUrl\" href=\"#\" (click)=\"onHelp($event)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline hover:cqa-underline cqa-cursor-pointer\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </a>\n        <span *ngIf=\"!helpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default\">\n          <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n            <g clip-path=\"url(#help-icon-clip-nolink)\">\n              <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </g>\n            <defs>\n              <clipPath id=\"help-icon-clip-nolink\">\n                <rect width=\"17\" height=\"16\" fill=\"white\"/>\n              </clipPath>\n            </defs>\n          </svg>\n          Need help ?\n        </span>\n        <!-- Custom tooltip (exact spec: 306\u00D720 content, 6px radius, #0A0A0A, no arrow) -->\n        <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100]\"\n          style=\"top: -24px; left: -125px;\"\n          role=\"tooltip\">\n          <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap\"\n            style=\"width: 306px; min-height: 20px; border-radius: 6px; opacity: 1; padding: 4px 8px; background-color: #0A0A0A; line-height: 20px; font-size: 8px;\">\n            {{ helpTooltipText }}\n          </div>\n        </div>\n      </div>\n      <button type=\"button\" (click)=\"onClose()\"\n        class=\"cqa-p-1 cqa-rounded cqa-text-[#6B7280] hover:cqa-bg-[#F3F4F6] cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Close\" aria-label=\"Close\">\n        <mat-icon class=\"!cqa-w-5 !cqa-h-5 !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Line below header (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Content: textarea + helper -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n    <cqa-custom-textarea\n      [(value)]=\"value\"\n      placeholder=\"Enter description\"\n      [fullWidth]=\"true\"\n      [rows]=\"4\"\n      resize=\"vertical\"\n      size=\"md\">\n    </cqa-custom-textarea>\n    <p class=\"cqa-text-[12px] cqa-leading-[18px] cqa-text-[#0A0A0A] cqa-m-0\">\n      Provide a clear description of the step's purpose\n    </p>\n  </div>\n\n  <!-- Line below content (full width of modal, no side margin) -->\n  <div class=\"cqa--mx-2 cqa-w-[calc(100%+1rem)] cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full cqa-bg-[#E5E7EB]\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Footer: Cancel, Apply (full width in one row) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n    <div class=\"cqa-flex cqa-items-stretch cqa-gap-2 cqa-w-full\">\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [text]=\"'Cancel'\" [fullWidth]=\"true\" (clicked)=\"onCancel()\"\n          [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"></cqa-button>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [text]=\"'Apply'\" [fullWidth]=\"true\" (clicked)=\"onApply()\"\n          [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"></cqa-button>\n      </div>\n    </div>\n    <a href=\"#\" (click)=\"onEditInDepth($event)\"\n      class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1.5 cqa-no-underline hover:cqa-no-underline cqa-self-center\">\n      <mat-icon class=\"!cqa-w-4 !cqa-h-4 !cqa-text-[16px]\">open_in_new</mat-icon>\n      Edit in depth (open detailed right panel)\n    </a>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: CustomEditStepRef, decorators: [{
+                        type: Inject,
+                        args: [CUSTOM_EDIT_STEP_REF]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [CUSTOM_EDIT_STEP_DATA]
+                    }] }];
+    }, propDecorators: { apply: [{
+                type: Output
+            }], cancel: [{
+                type: Output
+            }], editInDepth: [{
+                type: Output
+            }] } });
+
+class CustomEditStepService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+        /** Currently open Step Description overlay ref; only one panel is allowed at a time. */
+        this.currentRef = null;
+    }
+    /**
+     * Opens the Step Description modal positioned just below the given origin element.
+     * If a panel is already open, returns the existing ref and does not open a duplicate.
+     * @param origin Element (e.g. description span or edit icon) to position below
+     * @param data Initial description and optional help URL
+     * @returns Ref with afterClosed() and close(); afterClosed emits the new description on Apply, undefined on Cancel, or EDIT_IN_DEPTH symbol when user clicks "Edit in depth"
+     */
+    open(origin, data) {
+        if (this.currentRef) {
+            return this.currentRef;
+        }
+        const originEl = origin.nativeElement;
+        const gap = 8;
+        const modalWidth = 500;
+        const margin = 8;
+        originEl.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+        const positionStrategy = this.overlay.position().global();
+        const overlayRef = this.overlay.create(new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            panelClass: ['cqa-custom-edit-step-panel', 'cqa-ui-root'],
+            width: 'min(560px, 90vw)',
+        }));
+        const updatePosition = () => {
+            const rect = originEl.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            let top = rect.bottom + gap;
+            let left = rect.left;
+            if (left + modalWidth > viewportWidth - margin) {
+                left = viewportWidth - modalWidth - margin;
+            }
+            if (left < margin) {
+                left = margin;
+            }
+            if (top < margin) {
+                top = margin;
+            }
+            positionStrategy.top(`${top}px`).left(`${left}px`);
+            overlayRef.updatePosition();
+        };
+        const editStepRef = new CustomEditStepRef(overlayRef);
+        const injector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: CUSTOM_EDIT_STEP_REF, useValue: editStepRef },
+                { provide: CUSTOM_EDIT_STEP_DATA, useValue: data },
+            ],
+        });
+        updatePosition();
+        const portal = new ComponentPortal(CustomEditStepComponent, undefined, injector);
+        overlayRef.attach(portal);
+        requestAnimationFrame(() => updatePosition());
+        const scrollListener = () => updatePosition();
+        window.addEventListener('scroll', scrollListener, true);
+        window.addEventListener('resize', scrollListener);
+        this.currentRef = editStepRef;
+        editStepRef.afterClosed().subscribe(() => {
+            this.currentRef = null;
+            window.removeEventListener('scroll', scrollListener, true);
+            window.removeEventListener('resize', scrollListener);
+        });
+        overlayRef.backdropClick().subscribe(() => editStepRef.close(undefined));
+        overlayRef
+            .keydownEvents()
+            .pipe(filter((e) => e.key === 'Escape' || e.key === 'Esc'))
+            .subscribe(() => editStepRef.close(undefined));
+        return editStepRef;
+    }
+}
+CustomEditStepService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, deps: [{ token: i1$7.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomEditStepService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CustomEditStepService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$7.Overlay }, { type: i0.Injector }]; } });
+
 class TestCaseNormalStepComponent {
-    constructor() {
+    constructor(customEditStep) {
+        this.customEditStep = customEditStep;
         this.parameters = [];
         this.selected = false;
         this.disabled = false;
@@ -14034,6 +14337,15 @@ class TestCaseNormalStepComponent {
                 return '';
         }
     }
+    /** Current description for custom event type (first parameter value). */
+    getCustomDescription() {
+        var _a, _b, _c;
+        if (this.eventType !== 'custom' || !((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length)) {
+            return '';
+        }
+        const first = this.parameters[0];
+        return (_c = (_b = first === null || first === void 0 ? void 0 : first.value) !== null && _b !== void 0 ? _b : first === null || first === void 0 ? void 0 : first.displayValue) !== null && _c !== void 0 ? _c : '';
+    }
     /**
      * Get the URL parameter for navigate steps (old UI style - show only URL)
      * Returns the first parameter with name 'url' or 'URL', or the first parameter if none found
@@ -14047,6 +14359,36 @@ class TestCaseNormalStepComponent {
         // If not found, return the first parameter (likely the URL)
         return urlParam || this.parameters[0] || null;
     }
+    /** Opens Step Description modal below the given trigger; used when eventType === 'custom'. */
+    openStepDescriptionModal(origin) {
+        if (this.eventType !== 'custom') {
+            return;
+        }
+        const el = origin instanceof MouseEvent
+            ? origin.currentTarget
+            : origin instanceof ElementRef
+                ? origin.nativeElement
+                : origin;
+        const originRef = new ElementRef(el);
+        const ref = this.customEditStep.open(originRef, {
+            description: this.getCustomDescription(),
+        });
+        ref.afterClosed().subscribe((result) => {
+            var _a;
+            if (result === CUSTOM_EDIT_STEP_EDIT_IN_DEPTH) {
+                this.moreOptions.emit();
+                return;
+            }
+            if (typeof result === 'string' && ((_a = this.parameters) === null || _a === void 0 ? void 0 : _a.length)) {
+                const first = this.parameters[0];
+                if (first) {
+                    first.value = result;
+                    first.displayValue = result;
+                    this.parameterChange.emit({ parameter: first, value: result });
+                }
+            }
+        });
+    }
     onEventTypeSelect(eventType) {
         this.eventType = eventType;
         this.eventTypeDropdownOpen = false;
@@ -14057,6 +14399,11 @@ class TestCaseNormalStepComponent {
         this.parameterChange.emit({ parameter, value });
     }
     onEdit() {
+        var _a;
+        if (this.eventType === 'custom' && ((_a = this.descriptionTrigger) === null || _a === void 0 ? void 0 : _a.nativeElement)) {
+            this.openStepDescriptionModal(new ElementRef(this.descriptionTrigger.nativeElement));
+            return;
+        }
         this.edit.emit();
     }
     onLink() {
@@ -14087,14 +14434,20 @@ class TestCaseNormalStepComponent {
         }
     }
 }
-TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: Show only URL parameter as plain text (old UI style) -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\"\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description -->\n      <span *ngIf=\"eventType === 'custom'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [{ token: CustomEditStepService }], target: i0.ɵɵFactoryTarget.Component });
+TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: Show only URL parameter as plain text (old UI style) -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\"\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], directives: [{ type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: Show only URL parameter as plain text (old UI style) -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\"\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description -->\n      <span *ngIf=\"eventType === 'custom'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>" }]
-        }], propDecorators: { dropdownContainer: [{
+            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\" [style.border-color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-px-2.5 cqa-py-1 cqa-rounded-lg cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"#432DD7\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"#7008E7\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"#8200DB\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"#8200DB\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"#1447E6\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.0833 1.75L11.0833 5.83333L2.91667 5.83333\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M7.58333 1.75L11.0833 5.25L7.58333 8.75\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.91667 8.75L2.91667 12.25\" stroke=\"#1447E6\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"#364153\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n\n      <!-- Label -->\n      <span class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          T\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"#1447E6\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9.5 1.5L9.5 5L2 5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M6.5 1.5L9.5 4.5L6.5 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M2 7.5L2 10.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- Action Description -->\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span>\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n    <!-- Navigate: Show only URL parameter as plain text (old UI style) -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\"\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <!-- AI Agent View Details Link -->\n  <a *ngIf=\"eventType === 'ai-agent'\" href=\"#\" (click)=\"onMoreOptions(); $event.preventDefault()\" class=\"cqa-ml-auto cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n  <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover, same as API step) -->\n  <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-px-[7px]\">\n    <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </button>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CustomEditStepService }]; }, propDecorators: { dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdownContainer', { static: false }]
+            }], descriptionTrigger: [{
+                type: ViewChild,
+                args: ['descriptionTrigger', { static: false }]
+            }], editTrigger: [{
+                type: ViewChild,
+                args: ['editTrigger', { static: false }]
             }], config: [{
                 type: Input
             }], stepNumber: [{
@@ -16468,7 +16821,11 @@ class StepBuilderActionComponent {
         });
         // Add form controls for each variable
         this.templateVariables.forEach(variable => {
-            this.variablesForm.addControl(variable.name, new FormControl(variable.value || ''));
+            // Handle boolean variables - use boolean value, others use string
+            const defaultValue = variable.type === 'boolean'
+                ? (variable.value === true || variable.value === 'true' || variable.value === 1)
+                : (variable.value || '');
+            this.variablesForm.addControl(variable.name, new FormControl(defaultValue));
         });
     }
     getSelectConfig(variable) {
@@ -16501,6 +16858,22 @@ class StepBuilderActionComponent {
             (_a = this.variablesForm.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
         }
     }
+    onVariableBooleanChange(variableName, value) {
+        var _a;
+        // Update the variable in templateVariables array
+        const variable = this.templateVariables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        if (this.variablesForm.get(variableName)) {
+            (_a = this.variablesForm.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
+        }
+        else {
+            // Create form control if it doesn't exist
+            this.variablesForm.addControl(variableName, new FormControl(value));
+        }
+    }
     onBack() {
         this.selectedTemplate = null;
         this.metadata = '';
@@ -16542,10 +16915,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", preventSelectTemplate: "preventSelectTemplate" }, outputs: { templateChanged: "templateChanged", createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean, non-custom_code variables -->\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4 cqa-py-2': showHeader}\">\n  <!-- Header -->\n  <h2 *ngIf=\"showHeader\" class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-1\">\n    Create an action step\n  </h2>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates\"\n          class=\"cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n      <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap\">\n          <!-- Elements -->\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean, non-custom_code variables -->\n            <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n              <ng-container *ngIf=\"(variable.name === 'type'||variable.name === 'scrollTo'); else defaultInput\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <ng-template #defaultInput>\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label>\n                  <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                    (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n\n\n\n\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Elements\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- Test Data -->\n          <!-- <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Test Data\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div> -->\n\n          <!-- </div>\n        <div class=\"cqa-flex cqa-gap-6\"> -->\n          <!-- Metadata -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Metadata\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n              (valueChange)=\"metadata = $event\">\n            </cqa-custom-input>\n          </div>\n\n          <!-- Description -->\n          <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Description\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n              (valueChange)=\"description = $event\">\n            </cqa-custom-input>\n          </div>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n        <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n          <button type=\"button\"\n            class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n            (click)=\"toggleAdvanced()\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n              expand_more\n            </mat-icon>\n          </button>\n          <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n            <!-- Advanced fields can be added here -->\n          </div>\n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -16929,6 +17302,526 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+class StepBuilderConditionComponent {
+    constructor(fb) {
+        this.fb = fb;
+        /** Options for operator dropdown */
+        this.operatorOptions = [
+            { id: 'equals', value: 'equals', name: 'equals', label: 'equals' },
+            { id: 'not_equals', value: 'not_equals', name: 'not equals', label: 'not equals' },
+            { id: 'contains', value: 'contains', name: 'contains', label: 'contains' },
+            { id: 'not_contains', value: 'not_contains', name: 'not contains', label: 'not contains' },
+            { id: 'greater_than', value: 'greater_than', name: 'greater than', label: 'greater than' },
+            { id: 'less_than', value: 'less_than', name: 'less than', label: 'less than' }
+        ];
+        /** List of action templates to display in value dropdown */
+        this.conditionTemplates = [];
+        /** Function to handle variable processing or custom logic. Can be passed from parent component. */
+        this.setConditionTemplateVariables = () => { return []; };
+        /** Emit when step is created */
+        this.createStep = new EventEmitter();
+        /** Emit when cancelled */
+        this.cancelled = new EventEmitter();
+        this.includeElse = false;
+        // Cache for value configs to avoid recreating on every change detection
+        this.valueConfigCache = null;
+        // Track selected templates and their variables for each condition row
+        this.selectedTemplates = new Map();
+        this.conditionTemplateVariables = new Map();
+        this.conditionVariablesForms = new Map();
+        this.conditionForm = this.fb.group({
+            conditions: this.fb.array([]),
+            includeElse: [false]
+        });
+    }
+    ngOnInit() {
+        // Add initial condition row
+        this.addCondition("CONDITION_IF");
+        // Initialize value config cache
+        this.updateValueConfigCache();
+    }
+    ngOnChanges(changes) {
+        // Regenerate value config cache when conditionTemplates changes
+        if (changes['conditionTemplates'] && !changes['conditionTemplates'].firstChange) {
+            this.updateValueConfigCache();
+        }
+    }
+    get conditionsFormArray() {
+        return this.conditionForm.get('conditions');
+    }
+    addCondition(conditionType) {
+        const conditionGroup = this.fb.group({
+            field: [conditionType, Validators.required],
+            operator: ['equals', Validators.required],
+            value: [null, Validators.required],
+            description: [''],
+            metadata: [''],
+        });
+        const index = this.conditionsFormArray.length;
+        this.conditionsFormArray.push(conditionGroup);
+        // Initialize variables form for this condition
+        this.conditionVariablesForms.set(index, this.fb.group({}));
+    }
+    removeCondition(index) {
+        if (this.conditionsFormArray.length > 1) {
+            this.conditionsFormArray.removeAt(index);
+            // Clean up associated data
+            this.selectedTemplates.delete(index);
+            this.conditionTemplateVariables.delete(index);
+            this.conditionVariablesForms.delete(index);
+            // Reindex remaining conditions
+            this.reindexConditionData(index);
+        }
+    }
+    reindexConditionData(removedIndex) {
+        // Create new maps with reindexed data
+        const newSelectedTemplates = new Map();
+        const newTemplateVariables = new Map();
+        const newVariablesForms = new Map();
+        this.selectedTemplates.forEach((template, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newSelectedTemplates.set(oldIndex, template);
+            }
+            else if (oldIndex > removedIndex) {
+                newSelectedTemplates.set(oldIndex - 1, template);
+            }
+        });
+        this.conditionTemplateVariables.forEach((variables, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newTemplateVariables.set(oldIndex, variables);
+            }
+            else if (oldIndex > removedIndex) {
+                newTemplateVariables.set(oldIndex - 1, variables);
+            }
+        });
+        this.conditionVariablesForms.forEach((form, oldIndex) => {
+            if (oldIndex < removedIndex) {
+                newVariablesForms.set(oldIndex, form);
+            }
+            else if (oldIndex > removedIndex) {
+                newVariablesForms.set(oldIndex - 1, form);
+            }
+        });
+        this.selectedTemplates = newSelectedTemplates;
+        this.conditionTemplateVariables = newTemplateVariables;
+        this.conditionVariablesForms = newVariablesForms;
+    }
+    getOperatorConfig(index) {
+        return {
+            key: 'operator',
+            placeholder: 'Select operator',
+            multiple: false,
+            searchable: false,
+            options: this.operatorOptions
+        };
+    }
+    updateValueConfigCache() {
+        // Convert ActionTemplate[] to SelectOption[]
+        const templateOptions = (this.conditionTemplates || []).map(template => {
+            var _a, _b;
+            return ({
+                id: ((_a = template.id) === null || _a === void 0 ? void 0 : _a.toString()) || template.displayName || '',
+                value: ((_b = template.id) === null || _b === void 0 ? void 0 : _b.toString()) || template.displayName || '',
+                name: template.htmlGrammar || template.naturalText || '',
+                label: template.htmlGrammar || template.naturalText || ''
+            });
+        });
+        this.valueConfigCache = {
+            key: 'value',
+            placeholder: 'Select Template',
+            multiple: false,
+            searchable: true,
+            displayLabelAsInnerHtml: true,
+            options: templateOptions
+        };
+    }
+    getValueConfig(index) {
+        // Return cached config to avoid recreating options on every change detection
+        if (!this.valueConfigCache) {
+            this.updateValueConfigCache();
+        }
+        // Create a new config object with the onChange handler for this specific index
+        // This ensures each condition row has its own handler while sharing the base config
+        return Object.assign(Object.assign({}, this.valueConfigCache), { onChange: (value) => {
+                this.onTemplateValueChange(index, value);
+            } });
+    }
+    onTemplateValueChange(index, templateId) {
+        // Find the selected template
+        const selectedTemplate = this.conditionTemplates.find(t => { var _a; return (((_a = t.id) === null || _a === void 0 ? void 0 : _a.toString()) === templateId) || (t.displayName === templateId); });
+        if (selectedTemplate && this.setConditionTemplateVariables) {
+            // Store selected template
+            this.selectedTemplates.set(index, selectedTemplate);
+            // Get template variables using the provided function
+            const variables = this.setConditionTemplateVariables(selectedTemplate);
+            this.conditionTemplateVariables.set(index, variables);
+            // Build form for template variables
+            this.buildConditionVariablesForm(index, variables);
+        }
+        else {
+            // Clear template and variables if no template selected
+            this.selectedTemplates.delete(index);
+            this.conditionTemplateVariables.delete(index);
+            const form = this.conditionVariablesForms.get(index);
+            if (form) {
+                Object.keys(form.controls).forEach(key => {
+                    form.removeControl(key);
+                });
+            }
+        }
+    }
+    buildConditionVariablesForm(index, variables) {
+        let form = this.conditionVariablesForms.get(index);
+        if (!form) {
+            form = this.fb.group({});
+            this.conditionVariablesForms.set(index, form);
+        }
+        // Ensure form is not undefined
+        if (!form) {
+            return;
+        }
+        // Clear existing form controls
+        Object.keys(form.controls).forEach(key => {
+            form.removeControl(key);
+        });
+        // Add form controls for each variable
+        variables.forEach(variable => {
+            // Handle boolean variables - use boolean value, others use string
+            const defaultValue = variable.type === 'boolean'
+                ? (variable.value === true || variable.value === 'true' || variable.value === 1)
+                : (variable.value || '');
+            form.addControl(variable.name, new FormControl(defaultValue));
+        });
+    }
+    getConditionTemplateVariables(index) {
+        return this.conditionTemplateVariables.get(index) || [];
+    }
+    getConditionVariablesForm(index) {
+        let form = this.conditionVariablesForms.get(index);
+        if (!form) {
+            form = this.fb.group({});
+            this.conditionVariablesForms.set(index, form);
+        }
+        return form;
+    }
+    getSelectedTemplate(index) {
+        return this.selectedTemplates.get(index) || null;
+    }
+    getSelectConfigForVariable(index, variable) {
+        const options = (variable.options || []).map((opt) => ({
+            id: opt,
+            value: opt,
+            name: opt,
+            label: opt
+        }));
+        return {
+            key: variable.name,
+            placeholder: `Select ${variable.label}`,
+            multiple: false,
+            searchable: false,
+            options: options,
+            onChange: (value) => {
+                this.onConditionVariableValueChange(index, variable.name, value);
+            }
+        };
+    }
+    onConditionVariableValueChange(conditionIndex, variableName, value) {
+        var _a;
+        // Update the variable in templateVariables array
+        const variables = this.conditionTemplateVariables.get(conditionIndex) || [];
+        const variable = variables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        const form = this.conditionVariablesForms.get(conditionIndex);
+        if (form && form.get(variableName)) {
+            (_a = form.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
+        }
+    }
+    onConditionVariableInputChange(conditionIndex, variableName, value) {
+        var _a;
+        // Update the variable in templateVariables array
+        const variables = this.conditionTemplateVariables.get(conditionIndex) || [];
+        const variable = variables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        const form = this.conditionVariablesForms.get(conditionIndex);
+        if (form && form.get(variableName)) {
+            (_a = form.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
+        }
+    }
+    onConditionVariableBooleanChange(conditionIndex, variableName, value) {
+        var _a;
+        // Update the variable in templateVariables array
+        const variables = this.conditionTemplateVariables.get(conditionIndex) || [];
+        const variable = variables.find(v => v.name === variableName);
+        if (variable) {
+            variable.value = value;
+        }
+        // Also update form control
+        const form = this.conditionVariablesForms.get(conditionIndex);
+        if (form) {
+            if (form.get(variableName)) {
+                (_a = form.get(variableName)) === null || _a === void 0 ? void 0 : _a.setValue(value);
+            }
+            else {
+                // Create form control if it doesn't exist
+                form.addControl(variableName, new FormControl(value));
+            }
+        }
+    }
+    getConditionFormGroup(index) {
+        return this.conditionsFormArray.at(index);
+    }
+    onIncludeElseChange(checked) {
+        this.includeElse = checked;
+        this.conditionForm.patchValue({ includeElse: checked });
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onCreateStep() {
+        if (this.conditionForm.valid) {
+            const formValue = this.conditionForm.value;
+            const stepData = {
+                conditions: formValue.conditions.map((cond, index) => {
+                    // Find the ActionTemplate object from the stored ID/value
+                    const templateId = cond.value;
+                    const selectedTemplate = this.conditionTemplates.find(t => { var _a; return (((_a = t.id) === null || _a === void 0 ? void 0 : _a.toString()) === templateId) || (t.displayName === templateId); }) || this.selectedTemplates.get(index);
+                    // Get template variables for this condition
+                    const templateVariables = this.conditionTemplateVariables.get(index) || [];
+                    return {
+                        field: cond.field,
+                        operator: cond.operator,
+                        value: selectedTemplate || null,
+                        templateVariables: templateVariables,
+                        description: cond.description || '',
+                        metadata: cond.metadata || ''
+                    };
+                }),
+                includeElse: formValue.includeElse || false
+            };
+            console.log('stepData', stepData);
+            this.createStep.emit(stepData);
+        }
+    }
+}
+StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\n                  <!-- Boolean variables with mat-slide-toggle -->\n                  <ng-container *ngIf=\"variable.type === 'boolean'\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, variable.name, $event.checked)\"\n                        color=\"primary\">\n                      </mat-slide-toggle>\n                    </div>\n                  </ng-container>\n                  \n                  <!-- Non-boolean, non-custom_code variables -->\n                  <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", 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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900 cqa-mb-3\">\n        Condition Builder\n      </h3>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index\">\n          <div\n            *ngIf=\"getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' || getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF'\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{getConditionFormGroup(i).get('field')?.value === 'CONDITION_IF' ? 'IF' :\n                getConditionFormGroup(i).get('field')?.value === 'CONDITION_ELSE_IF' ? 'ELSE IF' : 'ELSE'}}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\">\n              <!-- Template Grammar Display -->\n              <!-- <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n              </div> -->\n\n              \n              <!-- Description and Metadata Inputs -->\n              <div class=\"cqa-flex cqa-flex cqa-gap-x-4 cqa-mb-4\" style=\"flex-wrap: wrap;\">\n                <!-- Description -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Description\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter description'\"\n                    [value]=\"getConditionFormGroup(i).get('description')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n\n                <!-- Metadata -->\n                <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    Metadata\n                  </label>\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter metadata'\"\n                    [value]=\"getConditionFormGroup(i).get('metadata')?.value\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </div>\n\n              <!-- Template Variables Form Fields -->\n              <div class=\"cqa-flex cqa-flex-col cqa-gap-4\"  style=\"flex-wrap: wrap;\">\n                <ng-container *ngFor=\"let variable of getConditionTemplateVariables(i)\">\n                  <!-- Boolean variables with mat-slide-toggle -->\n                  <ng-container *ngIf=\"variable.type === 'boolean'\">\n                    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n                      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                        {{ variable.label }}\n                      </label>\n                      <mat-slide-toggle\n                        [checked]=\"getConditionVariablesForm(i).get(variable.name)?.value || variable.value || false\"\n                        (change)=\"onConditionVariableBooleanChange(i, variable.name, $event.checked)\"\n                        color=\"primary\">\n                      </mat-slide-toggle>\n                    </div>\n                  </ng-container>\n                  \n                  <!-- Non-boolean, non-custom_code variables -->\n                  <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n                    <!-- Dropdown for select variables -->\n                    <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-dynamic-select [form]=\"getConditionVariablesForm(i)\"\n                          [config]=\"getSelectConfigForVariable(i, variable)\">\n                        </cqa-dynamic-select>\n                      </div>\n                    </ng-container>\n                    <!-- Text Input for other variables -->\n                    <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                      <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                        <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                          {{ variable.label }}\n                        </label>\n                        <cqa-custom-input\n                          [placeholder]=\"'Text Input'\"\n                          [value]=\"variable.value\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onConditionVariableInputChange(i, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </div>\n                    </ng-container>\n                  </ng-container>\n                </ng-container>\n              </div>\n\n            </div>\n          </div>\n        </ng-container>\n      </div>\n\n      <!-- Add Condition Button -->\n      <div class=\"cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-rounded-lg cqa-p-1 cqa-mt-3\">\n        <cqa-button\n          variant=\"text\"\n          icon=\"add\"\n          iconPosition=\"start\"\n          [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n          [text]=\"'Add Condition'\"\n          (clicked)=\"addCondition('CONDITION_ELSE_IF')\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Include ELSE Branch Section -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-6 cqa-p-3 cqa-bg-gray-50 cqa-rounded-lg\">\n      <div class=\"cqa-flex cqa-flex-col\">\n        <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-gray-900 cqa-mb-1\">\n          Include ELSE branch\n        </h3>\n        <p class=\"cqa-text-[12px] cqa-text-gray-600\">\n          Execute alternative steps when condition is not met.\n        </p>\n      </div>\n      <mat-slide-toggle [checked]=\"includeElse\" (change)=\"onIncludeElseChange($event.checked)\" color=\"primary\">\n      </mat-slide-toggle>\n    </div>\n  </div>\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { operatorOptions: [{
+                type: Input
+            }], conditionTemplates: [{
+                type: Input
+            }], setConditionTemplateVariables: [{
+                type: Input
+            }], createStep: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }] } });
+
+class StepBuilderDatabaseComponent {
+    constructor(fb) {
+        this.fb = fb;
+        /** Options for DB environment dropdown */
+        this.dbEnvironmentOptions = [];
+        /** Initial queries list */
+        this.queries = [];
+        /** Query results data */
+        this.queryResults = [];
+        /** Loading state */
+        this.isLoading = false;
+        /** Emit when step is created */
+        this.createStep = new EventEmitter();
+        /** Emit when cancelled */
+        this.cancelled = new EventEmitter();
+        /** Emit when query is run */
+        this.runQuery = new EventEmitter();
+        /** Emit when query is added */
+        this.addQuery = new EventEmitter();
+        /** Emit when query is deleted */
+        this.deleteQuery = new EventEmitter();
+        this.selectedTab = 'output';
+        this.selectedQueryIndex = 0;
+        this.databaseForm = this.fb.group({
+            dbEnvironment: ['', Validators.required],
+            queries: this.fb.array([])
+        });
+    }
+    ngOnInit() {
+        // Initialize with default query if none provided
+        if (this.queries.length === 0) {
+            this.addNewQuery();
+        }
+        else {
+            this.queries.forEach((query, index) => {
+                this.addQueryToForm(query);
+                if (index === 0) {
+                    this.selectedQueryIndex = 0;
+                }
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['queries'] && !changes['queries'].firstChange) {
+            // Rebuild form array when queries change
+            const queriesArray = this.databaseForm.get('queries');
+            while (queriesArray.length !== 0) {
+                queriesArray.removeAt(0);
+            }
+            this.queries.forEach(query => {
+                this.addQueryToForm(query);
+            });
+        }
+    }
+    get queriesFormArray() {
+        return this.databaseForm.get('queries');
+    }
+    addNewQuery() {
+        const newQuery = {
+            id: `query_${Date.now()}`,
+            query: '',
+            variable: '',
+            status: 'pending'
+        };
+        this.queries.push(newQuery);
+        this.addQueryToForm(newQuery);
+        this.selectedQueryIndex = this.queries.length - 1;
+        this.addQuery.emit();
+    }
+    addQueryToForm(query) {
+        const queryGroup = this.fb.group({
+            id: [query.id],
+            query: [query.query, Validators.required],
+            variable: [query.variable, Validators.required]
+        });
+        this.queriesFormArray.push(queryGroup);
+    }
+    deleteQueryById(queryId) {
+        const index = this.queries.findIndex(q => q.id === queryId);
+        if (index !== -1) {
+            this.queries.splice(index, 1);
+            this.queriesFormArray.removeAt(index);
+            if (this.selectedQueryIndex >= this.queries.length) {
+                this.selectedQueryIndex = Math.max(0, this.queries.length - 1);
+            }
+            this.deleteQuery.emit(queryId);
+        }
+    }
+    getDbEnvironmentConfig() {
+        return {
+            key: 'dbEnvironment',
+            placeholder: 'Select DB environment',
+            multiple: false,
+            searchable: false,
+            options: this.dbEnvironmentOptions
+        };
+    }
+    getCurrentQuery() {
+        if (this.queries.length > 0 && this.selectedQueryIndex >= 0 && this.selectedQueryIndex < this.queries.length) {
+            return this.queries[this.selectedQueryIndex];
+        }
+        return null;
+    }
+    getCurrentQueryFormGroup() {
+        if (this.queriesFormArray && this.selectedQueryIndex >= 0 && this.selectedQueryIndex < this.queriesFormArray.length) {
+            return this.queriesFormArray.at(this.selectedQueryIndex);
+        }
+        return null;
+    }
+    onRunQuery() {
+        var _a, _b, _c;
+        const dbEnvironment = (_a = this.databaseForm.get('dbEnvironment')) === null || _a === void 0 ? void 0 : _a.value;
+        const currentQuery = this.getCurrentQuery();
+        const queryFormGroup = this.getCurrentQueryFormGroup();
+        if (currentQuery && queryFormGroup && dbEnvironment) {
+            const query = ((_b = queryFormGroup.get('query')) === null || _b === void 0 ? void 0 : _b.value) || '';
+            const variable = ((_c = queryFormGroup.get('variable')) === null || _c === void 0 ? void 0 : _c.value) || '';
+            // Update the query object
+            currentQuery.query = query;
+            currentQuery.variable = variable;
+            this.runQuery.emit({
+                query,
+                variable,
+                dbEnvironment
+            });
+        }
+    }
+    onSelectQuery(index) {
+        this.selectedQueryIndex = index;
+    }
+    onTabChange(tab) {
+        this.selectedTab = tab;
+    }
+    onCopyResults() {
+        // Copy query results to clipboard
+        if (this.queryResults && this.queryResults.length > 0) {
+            const text = JSON.stringify(this.queryResults, null, 2);
+            navigator.clipboard.writeText(text).then(() => {
+                // Could emit an event or show a toast notification
+            });
+        }
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    onCreateStep() {
+        if (this.databaseForm.valid) {
+            const formValue = this.databaseForm.value;
+            const stepData = {
+                dbEnvironment: formValue.dbEnvironment,
+                queries: this.queries.map((query, index) => {
+                    var _a, _b;
+                    const queryFormGroup = this.queriesFormArray.at(index);
+                    return {
+                        id: query.id,
+                        query: ((_a = queryFormGroup.get('query')) === null || _a === void 0 ? void 0 : _a.value) || '',
+                        variable: ((_b = queryFormGroup.get('variable')) === null || _b === void 0 ? void 0 : _b.value) || '',
+                        status: query.status
+                    };
+                })
+            };
+            this.createStep.emit(stepData);
+        }
+    }
+    getTableColumns() {
+        if (!this.queryResults || this.queryResults.length === 0) {
+            return [];
+        }
+        return Object.keys(this.queryResults[0]);
+    }
+}
+StepBuilderDatabaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, deps: [{ token: i2$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", addQuery: "addQuery", deleteQuery: "deleteQuery" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Database Test Step\n  </h2>\n\n  <!-- DB Environment Section -->\n  <div class=\"cqa-flex cqa-items-start cqa-gap-4 cqa-mb-6\">\n    <div class=\"cqa-flex-1\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block\">\n        DB Environment <span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"databaseForm\"\n        [config]=\"getDbEnvironmentConfig()\">\n      </cqa-dynamic-select>\n      <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n        Uses Database environments from Environments.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-items-end cqa-mb-1\">\n      <cqa-button\n        variant=\"filled\"\n        text=\"Run Query\"\n        [customClass]=\"'cqa-whitespace-nowrap'\"\n        (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-4 cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div class=\"cqa-w-64 cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n      <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n        <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Queries</h3>\n      </div>\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n             class=\"cqa-flex cqa-items-center cqa-justify-between cqa-p-2 cqa-rounded cqa-cursor-pointer cqa-mb-1\"\n             [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n             [class.cqa-border]=\"selectedQueryIndex === i\"\n             [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n             (click)=\"onSelectQuery(i)\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge\n            *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n      <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n        <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query & Store Response</h3>\n      </div>\n      \n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-flex cqa-flex-col cqa-gap-4\">\n        <!-- SQL Query Textarea -->\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <cqa-custom-textarea\n            [placeholder]=\"'Enter your SQL query here...'\"\n            [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\"\n            [fullWidth]=\"true\"\n            [rows]=\"8\"\n            (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n          </cqa-custom-textarea>\n        </div>\n\n        <!-- Variable Input -->\n        <div class=\"cqa-flex cqa-gap-4\">\n          <div class=\"cqa-flex-1\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block\">\n              Variable\n            </label>\n            <cqa-custom-input\n              [placeholder]=\"'Variable name'\"\n              [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n            </cqa-custom-input>\n            <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n              Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n            </p>\n          </div>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button\n            variant=\"outlined\"\n            text=\"Add Query\"\n            icon=\"add\"\n            (clicked)=\"addNewQuery()\">\n          </cqa-button>\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors cqa-border cqa-border-gray-300\"\n            (click)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n            [disabled]=\"queries.length <= 1\"\n            [attr.aria-label]=\"'Delete query'\">\n            <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n          </button>\n          <cqa-button\n            variant=\"filled\"\n            text=\"Run\"\n            icon=\"play_arrow\"\n            (clicked)=\"onRunQuery()\"\n            [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Results Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tabs -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'output'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'output'\"\n        (click)=\"onTabChange('output')\">\n        Output\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'verification'\"\n        (click)=\"onTabChange('verification')\">\n        Verification\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-p-4\">\n      <!-- Output Tab -->\n      <div *ngIf=\"selectedTab === 'output'\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n          <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n          <cqa-button\n            variant=\"text\"\n            text=\"Copy\"\n            icon=\"content_copy\"\n            [customClass]=\"'cqa-text-blue-600'\"\n            (clicked)=\"onCopyResults()\">\n          </cqa-button>\n        </div>\n        \n        <!-- Results Table -->\n        <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n          <table class=\"cqa-w-full cqa-border-collapse\">\n            <thead>\n              <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                <th *ngFor=\"let key of getTableColumns()\" \n                    class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                  {{ key }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let row of queryResults\" \n                  class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                <td *ngFor=\"let key of getTableColumns()\" \n                    class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                  {{ row[key] }}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        \n        <div *ngIf=\"!queryResults || queryResults.length === 0\" \n             class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n          No results yet. Run a query to see results.\n        </div>\n      </div>\n\n      <!-- Verification Tab -->\n      <div *ngIf=\"selectedTab === 'verification'\">\n        <p class=\"cqa-text-sm cqa-text-gray-600\">Verification settings will be available here.</p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-step-builder-database', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Database Test Step\n  </h2>\n\n  <!-- DB Environment Section -->\n  <div class=\"cqa-flex cqa-items-start cqa-gap-4 cqa-mb-6\">\n    <div class=\"cqa-flex-1\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block\">\n        DB Environment <span class=\"cqa-text-red-500\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"databaseForm\"\n        [config]=\"getDbEnvironmentConfig()\">\n      </cqa-dynamic-select>\n      <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n        Uses Database environments from Environments.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-items-end cqa-mb-1\">\n      <cqa-button\n        variant=\"filled\"\n        text=\"Run Query\"\n        [customClass]=\"'cqa-whitespace-nowrap'\"\n        (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\">\n      </cqa-button>\n    </div>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-4 cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div class=\"cqa-w-64 cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n      <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n        <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Queries</h3>\n      </div>\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n             class=\"cqa-flex cqa-items-center cqa-justify-between cqa-p-2 cqa-rounded cqa-cursor-pointer cqa-mb-1\"\n             [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n             [class.cqa-border]=\"selectedQueryIndex === i\"\n             [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n             (click)=\"onSelectQuery(i)\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge\n            *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n      <div class=\"cqa-p-3 cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n        <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query & Store Response</h3>\n      </div>\n      \n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-flex cqa-flex-col cqa-gap-4\">\n        <!-- SQL Query Textarea -->\n        <div class=\"cqa-flex-1 cqa-flex cqa-flex-col\">\n          <cqa-custom-textarea\n            [placeholder]=\"'Enter your SQL query here...'\"\n            [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\"\n            [fullWidth]=\"true\"\n            [rows]=\"8\"\n            (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n          </cqa-custom-textarea>\n        </div>\n\n        <!-- Variable Input -->\n        <div class=\"cqa-flex cqa-gap-4\">\n          <div class=\"cqa-flex-1\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block\">\n              Variable\n            </label>\n            <cqa-custom-input\n              [placeholder]=\"'Variable name'\"\n              [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n            </cqa-custom-input>\n            <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n              Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n            </p>\n          </div>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button\n            variant=\"outlined\"\n            text=\"Add Query\"\n            icon=\"add\"\n            (clicked)=\"addNewQuery()\">\n          </cqa-button>\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-10 cqa-h-10 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors cqa-border cqa-border-gray-300\"\n            (click)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n            [disabled]=\"queries.length <= 1\"\n            [attr.aria-label]=\"'Delete query'\">\n            <mat-icon class=\"cqa-text-lg\">delete</mat-icon>\n          </button>\n          <cqa-button\n            variant=\"filled\"\n            text=\"Run\"\n            icon=\"play_arrow\"\n            (clicked)=\"onRunQuery()\"\n            [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\">\n          </cqa-button>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Results Section -->\n  <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden cqa-mb-6\">\n    <!-- Tabs -->\n    <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'output'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'output'\"\n        (click)=\"onTabChange('output')\">\n        Output\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n        [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n        [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n        [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n        [class.cqa-border-transparent]=\"selectedTab !== 'verification'\"\n        (click)=\"onTabChange('verification')\">\n        Verification\n      </button>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"cqa-p-4\">\n      <!-- Output Tab -->\n      <div *ngIf=\"selectedTab === 'output'\">\n        <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n          <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n          <cqa-button\n            variant=\"text\"\n            text=\"Copy\"\n            icon=\"content_copy\"\n            [customClass]=\"'cqa-text-blue-600'\"\n            (clicked)=\"onCopyResults()\">\n          </cqa-button>\n        </div>\n        \n        <!-- Results Table -->\n        <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n          <table class=\"cqa-w-full cqa-border-collapse\">\n            <thead>\n              <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                <th *ngFor=\"let key of getTableColumns()\" \n                    class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                  {{ key }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let row of queryResults\" \n                  class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                <td *ngFor=\"let key of getTableColumns()\" \n                    class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                  {{ row[key] }}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n        \n        <div *ngIf=\"!queryResults || queryResults.length === 0\" \n             class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n          No results yet. Run a query to see results.\n        </div>\n      </div>\n\n      <!-- Verification Tab -->\n      <div *ngIf=\"selectedTab === 'verification'\">\n        <p class=\"cqa-text-sm cqa-text-gray-600\">Verification settings will be available here.</p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+        }], ctorParameters: function () { return [{ type: i2$2.FormBuilder }]; }, propDecorators: { dbEnvironmentOptions: [{
+                type: Input
+            }], queries: [{
+                type: Input
+            }], queryResults: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], createStep: [{
+                type: Output
+            }], cancelled: [{
+                type: Output
+            }], runQuery: [{
+                type: Output
+            }], addQuery: [{
+                type: Output
+            }], deleteQuery: [{
+                type: Output
+            }] } });
+
 class UiKitModule {
     constructor(iconRegistry) {
         iconRegistry.registerFontClassAlias('material-symbols-outlined', 'material-symbols-outlined');
@@ -17021,9 +17914,12 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         TestCaseVerifyUrlStepComponent,
         TestCaseRestoreSessionStepComponent,
         TestCaseCustomCodeStepComponent,
+        CustomEditStepComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
-        StepBuilderLoopComponent], imports: [CommonModule,
+        StepBuilderLoopComponent,
+        StepBuilderConditionComponent,
+        StepBuilderDatabaseComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         MatIconModule,
@@ -17127,9 +18023,12 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         TestCaseVerifyUrlStepComponent,
         TestCaseRestoreSessionStepComponent,
         TestCaseCustomCodeStepComponent,
+        CustomEditStepComponent,
         LiveConversationComponent,
         StepBuilderActionComponent,
-        StepBuilderLoopComponent] });
+        StepBuilderLoopComponent,
+        StepBuilderConditionComponent,
+        StepBuilderDatabaseComponent] });
 UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: UiKitModule, providers: [
         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
         {
@@ -17282,9 +18181,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         TestCaseVerifyUrlStepComponent,
                         TestCaseRestoreSessionStepComponent,
                         TestCaseCustomCodeStepComponent,
+                        CustomEditStepComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
+                        StepBuilderConditionComponent,
+                        StepBuilderDatabaseComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -17394,9 +18296,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         TestCaseVerifyUrlStepComponent,
                         TestCaseRestoreSessionStepComponent,
                         TestCaseCustomCodeStepComponent,
+                        CustomEditStepComponent,
                         LiveConversationComponent,
                         StepBuilderActionComponent,
                         StepBuilderLoopComponent,
+                        StepBuilderConditionComponent,
+                        StepBuilderDatabaseComponent,
                     ],
                     providers: [
                         { provide: OverlayContainer, useClass: TailwindOverlayContainer },
@@ -17577,5 +18482,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderLoopComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
+export { AIActionStepComponent, AIAgentStepComponent, ActionMenuButtonComponent, AiDebugAlertComponent, AiReasoningComponent, ApiStepComponent, BadgeComponent, BasicStepComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, ChartCardComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, DEFAULT_METADATA_COLOR, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, IterationsLoopComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, RESULT_COLORS, RunHistoryCardComponent, STATUS_COLORS, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderConditionComponent, StepBuilderDatabaseComponent, StepBuilderLoopComponent, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map