@cqa-lib/cqa-ui 1.1.236 → 1.1.238

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

@@ -4696,10 +4696,10 @@ class AddPrerequisiteCasesSectionComponent {
     }
 }
 AddPrerequisiteCasesSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", options: "options", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", hideAddPrerequisite: "hideAddPrerequisite", updateDisabled: "updateDisabled", isUpdating: "isUpdating", enableServerSearch: "enableServerSearch", hasMoreOptions: "hasMoreOptions", isLoadingOptions: "isLoadingOptions", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", searchOptions: "searchOptions", loadMoreOptions: "loadMoreOptions", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\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\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host ::ng-deep .update-spinner-white circle{stroke:#fff!important}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i6.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", options: "options", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", hideAddPrerequisite: "hideAddPrerequisite", updateDisabled: "updateDisabled", isUpdating: "isUpdating", enableServerSearch: "enableServerSearch", hasMoreOptions: "hasMoreOptions", isLoadingOptions: "isLoadingOptions", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", searchOptions: "searchOptions", loadMoreOptions: "loadMoreOptions", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\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\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i6.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-add-prerequisite-cases-section', styles: [":host ::ng-deep .update-spinner-white circle{stroke:#fff!important}\n"], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\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\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'cqa-add-prerequisite-cases-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\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\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { expanded: [{
                 type: Input
             }], form: [{
@@ -5934,6 +5934,8 @@ class TableTemplateComponent {
         this.serverSidePagination = false;
         this.totalElements = 0;
         this.pageChange = new EventEmitter();
+        // Selected items (full objects) for maintaining selection across pagination (server-side)
+        this.selectedItems = [];
         // Internal state for column visibility
         this._columnVisibility = {};
         this._cachedVisibilityColumns = [];
@@ -5983,6 +5985,9 @@ class TableTemplateComponent {
             this.updateComputedColumns();
             this.updateVisibilityColumns();
         }
+        if (changes['selectedItems'] || changes['data']) {
+            this.restoreSelectionState();
+        }
     }
     initializeComponent() {
         if (this.isEmptyState) {
@@ -5995,12 +6000,54 @@ class TableTemplateComponent {
             this.filteredRows = [...this.data];
             this.pagedRows = [...this.filteredRows];
             this.initializeColumnVisibility();
+            this.restoreSelectionState();
             return;
         }
         this.filteredRows = [...this.data];
         this.applyPagination();
         this.initializeColumnVisibility();
         this.updateComputedColumns();
+        this.restoreSelectionState();
+    }
+    /**
+     * Get selected IDs from selectedItems (objects)
+     */
+    getSelectedIds() {
+        if (this.selectedItems && this.selectedItems.length > 0) {
+            return new Set(this.selectedItems.map(item => Number(item.id)).filter(id => !isNaN(id)));
+        }
+        return new Set();
+    }
+    restoreSelectionState() {
+        const selectedIdsSet = this.getSelectedIds();
+        if (selectedIdsSet.size === 0) {
+            // If no selected IDs, clear all selection states
+            if (this.pagedRows) {
+                this.pagedRows.forEach(row => {
+                    if (row) {
+                        row.isSelected = false;
+                    }
+                });
+            }
+            return;
+        }
+        // Restore selection state based on selectedItems
+        if (this.pagedRows) {
+            this.pagedRows.forEach(row => {
+                if (row && row.id !== undefined) {
+                    row.isSelected = selectedIdsSet.has(Number(row.id));
+                }
+            });
+        }
+        // Also update filteredRows for consistency
+        if (this.filteredRows) {
+            this.filteredRows.forEach(row => {
+                if (row && row.id !== undefined) {
+                    row.isSelected = selectedIdsSet.has(Number(row.id));
+                }
+            });
+        }
+        this.cdr.markForCheck();
     }
     initializeColumnVisibility() {
         // Cache visibility columns to avoid creating new arrays on every change detection
@@ -6013,10 +6060,35 @@ class TableTemplateComponent {
         }
     }
     get anyRowSelected() {
-        return !!(this.pagedRows && this.pagedRows.some(r => !!r.isSelected));
+        // Check if there are any selected items (either on current page or across all pages via selectedItems)
+        const hasSelectedOnPage = !!(this.pagedRows && this.pagedRows.some(r => !!r.isSelected));
+        const selectedIdsSet = this.getSelectedIds();
+        const hasSelectedAcrossPages = selectedIdsSet.size > 0;
+        return hasSelectedOnPage || hasSelectedAcrossPages;
     }
     get currentSelectedItems() {
-        return (this.pagedRows || []).filter(r => !!r.isSelected);
+        // If selectedItems (full objects) are provided, use them directly
+        // This ensures all selected items are returned, including those from other pages
+        if (this.selectedItems && this.selectedItems.length > 0) {
+            return this.selectedItems;
+        }
+        // Fallback: For client-side pagination or when selectedItems is not provided,
+        // filter pagedRows to get selected items from current page only
+        if (!this.pagedRows || this.pagedRows.length === 0) {
+            return [];
+        }
+        const selectedIdsSet = this.getSelectedIds();
+        // Filter rows that are selected
+        return this.pagedRows
+            .filter(r => {
+            if (!r || r.id === undefined)
+                return false;
+            const rowId = Number(r.id);
+            // Include if either:
+            // 1. The row has isSelected = true (current page selection)
+            // 2. The row's ID is in selectedItems (selected on other pages or restored selection)
+            return !!r.isSelected || selectedIdsSet.has(rowId);
+        });
     }
     actionClick(data) {
         console.log('action toolbar', data);
@@ -6251,10 +6323,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", showExportButton: "showExportButton", isExporting: "isExporting", 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", onExportClick: "onExportClick", 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        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\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: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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", showExportButton: "showExportButton", isExporting: "isExporting", 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", selectedItems: "selectedItems" }, outputs: { onSearchChange: "onSearchChange", onExportClick: "onExportClick", 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        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\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]=\"selectedItems && selectedItems.length > 0 ? 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: ExportCodeModalComponent, selector: "cqa-export-code-modal", inputs: ["isOpen", "cases", "disabled"], outputs: ["closeModal", "export"] }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\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: [] }]
+            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        <cqa-button\n        *ngIf=\"showExportButton\"\n        variant=\"grey-solid\"\n        icon=\"open_in_new\"\n        [text]=\"isExporting ? 'Exporting...' : 'Export'\"\n        [disabled]=\"isExporting\"\n        (clicked)=\"exportCodeClick()\"\n      >\n        <span>{{ isExporting ? 'Exporting...' : 'Export' }}</span>\n      </cqa-button>\n      \n      <!-- Export Code Modal -->\n      <cqa-export-code-modal\n        *ngIf=\"showExportButton\"\n        [isOpen]=\"isExportModalOpen\"\n        [cases]=\"selectedCasesForExport\"\n        [disabled]=\"false\"\n        (closeModal)=\"closeExportModal()\"\n        (export)=\"onExportModalExport($event)\">\n      </cqa-export-code-modal>\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]=\"selectedItems && selectedItems.length > 0 ? 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: [{
@@ -6339,6 +6411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], onJsonPathCopiedHandler: [{
                 type: Input
+            }], selectedItems: [{
+                type: Input
             }], onReload: [{
                 type: Output
             }], onAutoRefreshClick: [{
@@ -16846,7 +16920,7 @@ class CompareRunsComponent {
     }
 }
 CompareRunsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", isLoadingRuns: "isLoadingRuns", hasMoreRuns: "hasMoreRuns", isComparingRuns: "isComparingRuns", 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", "addCustomValue"] }, { 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", "showExportButton", "isExporting", "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", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CompareRunsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CompareRunsComponent, selector: "cqa-compare-runs", inputs: { runs: "runs", comparisonData: "comparisonData", 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", "addCustomValue"] }, { 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", "showExportButton", "isExporting", "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", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CompareRunsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-compare-runs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-ui-root\" style=\"display: flex; flex-direction: column; width: 100%; height: 100%;\">\n  <div class=\"cqa-flex cqa-flex-col\">\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-3 sm:cqa-gap-4 cqa-py-3 sm:cqa-py-4 cqa-px-4 sm:cqa-px-6\" style=\"border-bottom: 1px solid #E4E4E4\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-mb-1\">\n          <span class=\"cqa-text-[11px] cqa-text-[#6B7280]\">Status legend:</span>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n            <!-- Passed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M7.99998 14.6663C11.6819 14.6663 14.6666 11.6816 14.6666 7.99967C14.6666 4.31778 11.6819 1.33301 7.99998 1.33301C4.31808 1.33301 1.33331 4.31778 1.33331 7.99967C1.33331 11.6816 4.31808 14.6663 7.99998 14.6663Z\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8.00033L7.33333 9.33366L10 6.66699\" stroke=\"#0B9D68\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#0B9D68] cqa-font-medium\">Passed</span>\n            </span>\n            <!-- Failed -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M10 6L6 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 6L10 10\" stroke=\"#FB2C36\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#FB2C36] cqa-font-medium\">Failed</span>\n            </span>\n            <!-- Aborted -->\n            <span class=\"cqa-inline-flex cqa-items-center cqa-gap-1\">\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\">\n                <path d=\"M8.00004 14.6673C11.6819 14.6673 14.6667 11.6825 14.6667 8.00065C14.6667 4.31875 11.6819 1.33398 8.00004 1.33398C4.31814 1.33398 1.33337 4.31875 1.33337 8.00065C1.33337 11.6825 4.31814 14.6673 8.00004 14.6673Z\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6 8H10\" stroke=\"#F59E0B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n              <span class=\"cqa-text-[11px] cqa-text-[#F59E0B] cqa-font-medium\">Aborted</span>\n            </span>\n          </div>\n        </div>\n\n        <div 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: [] }]
@@ -17038,7 +17112,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", "showExportButton", "isExporting", "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", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.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", "showExportButton", "isExporting", "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", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.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: [] }]
@@ -17960,7 +18034,7 @@ class DbQueryExecutionItemComponent {
     }
 }
 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", 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", "showExportButton", "isExporting", "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", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+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", "showExportButton", "isExporting", "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", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "onApplyFilterClick", "onResetFilterClick", "onClearAll", "removeChip", "pageChange", "onReload", "onAutoRefreshClick"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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 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: [] }]
@@ -18625,7 +18699,7 @@ class DbVerificationStepComponent extends BaseStepComponent {
     }
 }
 DbVerificationStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DbVerificationStepComponent, deps: [{ token: i0.ChangeDetectorRef }], 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", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step", subSteps: "subSteps" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" (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    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\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      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || !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  <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n  <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n    <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n      <cqa-ai-logs-with-reasoning\n        *ngIf=\"$any(subStep).isAiAutoHealResult\"\n        [status]=\"subStep.status\"\n        [text]=\"$any(subStep).text || subStep?.value\"\n        [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n        [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n        [duration]=\"subStep.duration\">\n      </cqa-ai-logs-with-reasoning>\n\n      <div\n        *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\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        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n          {{ $any(subStep).description || $any(subStep).text }}\n          <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n        </span>\n\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: AiLogsWithReasoningComponent, selector: "cqa-ai-logs-with-reasoning", inputs: ["status", "text", "description", "reasoning", "duration"] }, { 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", "showExportButton", "isExporting", "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", "onExportClick", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.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", isDebug: "isDebug", debugPointSet: "debugPointSet", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", failureDetails: "failureDetails", reasoning: "reasoning", confidence: "confidence", stepDeleted: "stepDeleted", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", selfHealAnalysis: "selfHealAnalysis", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", onStepClickHandler: "onStepClickHandler", jumpToTimestampHandler: "jumpToTimestampHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", isLive: "isLive", step: "step", subSteps: "subSteps" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs", selfHealAction: "selfHealAction" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" (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    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\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      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || !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  <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n  <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n    <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n      <cqa-ai-logs-with-reasoning\n        *ngIf=\"$any(subStep).isAiAutoHealResult\"\n        [status]=\"subStep.status\"\n        [text]=\"$any(subStep).text || subStep?.value\"\n        [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n        [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n        [duration]=\"subStep.duration\">\n      </cqa-ai-logs-with-reasoning>\n\n      <div\n        *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\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        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n          {{ $any(subStep).description || $any(subStep).text }}\n          <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n        </span>\n\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: AiLogsWithReasoningComponent, selector: "cqa-ai-logs-with-reasoning", inputs: ["status", "text", "description", "reasoning", "duration"] }, { 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", "showExportButton", "isExporting", "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", "selectedItems"], outputs: ["onSearchChange", "onExportClick", "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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.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 cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" (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    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-rounded-full hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#C63535\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"#C63535\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\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      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\" \n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n        <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(duration) }}\n      </span>\n      <svg *ngIf=\"hasSubSteps || !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  <!-- Sub-steps (logs) - shown when expanded for both live and run result -->\n  <div *ngIf=\"isExpanded && hasSubSteps\" class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-pt-1 cqa-pl-9 cqa-pr-6 cqa-pb-2 cqa-bg-white\">\n    <ng-container *ngFor=\"let subStep of (isLive ? processedSubSteps : processedSubStepsForRunResult)\">\n      <cqa-ai-logs-with-reasoning\n        *ngIf=\"$any(subStep).isAiAutoHealResult\"\n        [status]=\"subStep.status\"\n        [text]=\"$any(subStep).text || subStep?.value\"\n        [description]=\"$any(subStep).description || subStep?.text || subStep?.value\"\n        [reasoning]=\"$any(subStep).reasoning || subStep?.reasoning\"\n        [duration]=\"subStep.duration\">\n      </cqa-ai-logs-with-reasoning>\n\n      <div\n        *ngIf=\"!$any(subStep).isAiAutoHealResult\"\n        class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-[5.5px] cqa-px-3\">\n        <div *ngIf=\"subStep?.status?.toLowerCase() === 'success' || subStep?.status?.toLowerCase() === 'passed'\">\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        <div *ngIf=\"subStep?.status?.toLowerCase() === 'failure' || subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <div *ngIf=\"subStep?.status?.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        <span class=\"cqa-flex-1 cqa-text-[13px] cqa-leading-[15px] cqa-text-[#364153]\" style=\"white-space: pre-line; word-break: break-word;\">\n          {{ $any(subStep).description || $any(subStep).text }}\n          <span *ngIf=\"isLive && $any(subStep).remainingSeconds != null\" class=\"cqa-text-[#F97316] cqa-font-medium cqa-ml-1\">({{ $any(subStep).remainingSeconds }}s remaining)</span>\n        </span>\n\n        <span class=\"cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-metadata-key\">\n          {{ formatDuration(subStep.duration) }}\n        </span>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content (db queries, assertions, etc.) - run result only -->\n  <div *ngIf=\"isExpanded && !isLive\" class=\"cqa-p-2 !cqa-pl-9 !cqa-pr-6 cqa-bg-white\" style=\"border-top: 1px solid #E4E4E4;\">\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: [] }]
@@ -26189,6 +26263,18 @@ class TemplateVariablesFormComponent {
         this.hasMoreScreenNames = false;
         /** True while parent is loading screen names (search or load more) */
         this.isLoadingScreenNames = false;
+        /** Test data profiles for parameter dropdown (from API) - raw TestData objects */
+        this.parameterOptions = []; // TestData[] - using any to avoid circular dependency
+        /** Whether more parameters are available for infinite scroll */
+        this.hasMoreParameters = false;
+        /** True while parent is loading parameters (search or load more) */
+        this.isLoadingParameters = false;
+        /** Environment options for environment parameter dropdown (from API) */
+        this.environmentOptions = [];
+        /** Whether more environments are available for infinite scroll */
+        this.hasMoreEnvironments = false;
+        /** True while parent is loading environments (search or load more) */
+        this.isLoadingEnvironments = false;
         this.variableValueChange = new EventEmitter();
         this.variableBooleanChange = new EventEmitter();
         this.metadataChange = new EventEmitter();
@@ -26199,16 +26285,28 @@ class TemplateVariablesFormComponent {
         this.searchScreenName = new EventEmitter(); // Emit when user searches screen names
         this.loadMoreScreenNames = new EventEmitter(); // Emit when user scrolls to load more screen names
         this.createScreenNameRequest = new EventEmitter(); // Emit when user requests to create a new screen name
+        this.searchParameters = new EventEmitter(); // Emit when user searches for parameters
+        this.loadMoreParameters = new EventEmitter(); // Emit when user scrolls to load more parameters
+        this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
+        this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
         this.cancelElementForm = new EventEmitter(); // Emit when element form is cancelled
         this.elementFormVisibilityChange = new EventEmitter(); // Emit when element form visibility changes
         // Cache for select configs to avoid recalculating on every change detection
         this.selectConfigCache = new Map();
         // Cache for data type select configs
         this.dataTypeSelectConfigCache = new Map();
-        // Store data types for test-data variables
-        this.variableDataTypes = new Map();
-        // Store raw values (without formatting) for test-data variables
-        this.variableRawValues = new Map();
+        // Cache for parameter select configs
+        this.parameterSelectConfigCache = new Map();
+        // Cache for environment select configs
+        this.environmentSelectConfigCache = new Map();
+        // Cache for environment parameter select configs
+        this.environmentParameterSelectConfigCache = new Map();
+        // Cache for test data profile select configs (first dropdown for parameters)
+        this.testDataProfileSelectConfigCache = new Map();
+        // Cache for data set select configs (second dropdown for parameters - shows data sets from selected profile)
+        this.dataSetSelectConfigCache = new Map();
+        // Cache for parameter select configs for a specific data set (third dropdown for parameters)
+        this.parameterForDataSetSelectConfigCache = new Map();
         // Cache for computed properties
         this.needsDataTypeDropdownCache = new Map();
         this.shouldShowDropdownCache = new Map();
@@ -26224,35 +26322,79 @@ class TemplateVariablesFormComponent {
     onCreateElement(payload) {
         console.log('onCreateElement', payload);
         this.createElement.emit(payload);
-        this.createElementVisible = false;
         this.elementFormVisibilityChange.emit(false);
         this.cdr.markForCheck();
     }
     onCancelElementForm() {
-        this.createElementVisible = false;
         this.elementFormVisibilityChange.emit(false);
         this.cancelElementForm.emit();
         this.cdr.markForCheck();
     }
-    onShowElementForm() {
-        this.createElementVisible = true;
-        this.elementFormVisibilityChange.emit(true);
-        this.cdr.markForCheck();
-    }
     ngOnChanges(changes) {
         if (changes['templateVariables'] || changes['variablesForm'] || changes['elementOptions'] ||
-            changes['hasMoreElements'] || changes['isLoadingElements']) {
+            changes['hasMoreElements'] || changes['isLoadingElements'] ||
+            changes['parameterOptions'] || changes['hasMoreParameters'] || changes['isLoadingParameters'] ||
+            changes['environmentOptions'] || changes['hasMoreEnvironments'] || changes['isLoadingEnvironments'] ||
+            changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex']) {
             // Clear all caches when inputs change
             this.selectConfigCache.clear();
             this.dataTypeSelectConfigCache.clear();
+            this.parameterSelectConfigCache.clear();
+            this.environmentSelectConfigCache.clear();
+            this.environmentParameterSelectConfigCache.clear();
+            this.testDataProfileSelectConfigCache.clear();
+            this.dataSetSelectConfigCache.clear();
+            this.parameterForDataSetSelectConfigCache.clear();
             this.needsDataTypeDropdownCache.clear();
             this.shouldShowDropdownCache.clear();
             // Initialize data types and raw values for test-data variables
-            if (changes['templateVariables'] && this.templateVariables) {
+            // Also re-initialize if default values or parameterOptions change (to set default selections)
+            if ((changes['templateVariables'] || changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex'] || changes['parameterOptions']) && this.templateVariables) {
                 this.initializeTestDataVariables();
             }
             // Pre-compute all configs to avoid calling methods in template
             this.precomputeConfigs();
+            // If environment options changed and we have selected environments, refresh parameter configs
+            if (changes['environmentOptions']) {
+                this.templateVariables.forEach((variable, index) => {
+                    if (this.isEnvironmentType(variable) && variable.selectedEnvironment) {
+                        // Clear and recompute environment parameter config
+                        this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
+                        this.getEnvironmentParameterSelectConfig(variable, index);
+                    }
+                });
+            }
+            // If parameter options changed and we have default values, try to initialize them
+            if (changes['parameterOptions'] && this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null && this.parameterOptions.length > 0) {
+                // Re-initialize to set default values now that parameterOptions are available
+                console.log('Re-initializing with default values after parameterOptions loaded');
+                this.initializeTestDataVariables();
+                // Force change detection after initialization
+                this.cdr.markForCheck();
+            }
+            // If parameter options changed and we have selected test data profiles, refresh configs
+            if (changes['parameterOptions'] || changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex']) {
+                // Clear test data profile select config cache since profiles list may have changed
+                this.testDataProfileSelectConfigCache.clear();
+                this.templateVariables.forEach((variable, index) => {
+                    if (this.isParameterType(variable)) {
+                        // Recompute test data profile config
+                        this.getTestDataProfileSelectConfig(variable, index);
+                        // If a profile is already selected, recompute data set config
+                        if (variable.selectedTestDataProfile) {
+                            this.getDataSetSelectConfig(variable, index);
+                            // If a data set is already selected, recompute parameter config
+                            if (variable.selectedDataSet) {
+                                // Clear and recompute parameter config for the selected data set
+                                // Use profile ID if available for cache key
+                                const profileIdentifier = variable.selectedTestDataProfileId ? String(variable.selectedTestDataProfileId) : variable.selectedTestDataProfile;
+                                this.parameterForDataSetSelectConfigCache.delete(`${variable.name}_paramForDataSet_${profileIdentifier}_${variable.selectedDataSet}`);
+                                this.getParameterSelectConfig(variable, index);
+                            }
+                        }
+                    }
+                });
+            }
             // Mark for check since we're using OnPush
             this.cdr.markForCheck();
         }
@@ -26261,8 +26403,9 @@ class TemplateVariablesFormComponent {
         this.templateVariables.forEach((variable, index) => {
             if (this.needsDataTypeDropdown(variable)) {
                 const { dataType, rawValue } = this.parseTestDataValue(variable.value || '');
-                this.variableDataTypes.set(variable.name, dataType);
-                this.variableRawValues.set(variable.name, rawValue);
+                // Set properties directly on the variable object
+                variable.dataType = dataType;
+                variable.rawValue = rawValue;
                 // Ensure form control exists for data type in the FormArray
                 const variableGroup = this.getVariableFormGroup(variable.name);
                 if (variableGroup) {
@@ -26272,6 +26415,162 @@ class TemplateVariablesFormComponent {
                     else {
                         variableGroup.get('dataType')?.setValue(dataType, { emitEvent: false });
                     }
+                    // For parameter type, parse the value to extract test data profile and parameter
+                    if (dataType === 'parameter') {
+                        // Check if default test data profile and data set are provided from test case
+                        // Only proceed if parameterOptions are loaded
+                        if (this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null && this.parameterOptions.length > 0) {
+                            // Find the test data profile by ID
+                            const defaultProfile = this.parameterOptions.find((testData) => testData.id === this.defaultTestDataProfileId);
+                            if (defaultProfile && defaultProfile.data && defaultProfile.data.length > this.defaultTestDataStartIndex) {
+                                const defaultDataSet = defaultProfile.data[this.defaultTestDataStartIndex];
+                                const profileName = defaultProfile.name || defaultProfile.testDataName;
+                                const dataSetName = defaultDataSet.name;
+                                // Set variable properties - this ensures hasSelectedTestDataProfile() and hasSelectedDataSet() return true
+                                variable.selectedTestDataProfile = profileName;
+                                variable.selectedTestDataProfileId = defaultProfile.id;
+                                variable.selectedDataSet = dataSetName;
+                                // Set form controls with the actual values so dropdowns display selected options
+                                if (!variableGroup.get('selectedTestDataProfile')) {
+                                    variableGroup.addControl('selectedTestDataProfile', new FormControl(profileName));
+                                }
+                                else {
+                                    variableGroup.get('selectedTestDataProfile')?.setValue(profileName, { emitEvent: false });
+                                }
+                                if (!variableGroup.get('selectedDataSet')) {
+                                    variableGroup.addControl('selectedDataSet', new FormControl(dataSetName));
+                                }
+                                else {
+                                    variableGroup.get('selectedDataSet')?.setValue(dataSetName, { emitEvent: false });
+                                }
+                                // Don't set parameter value yet - user will select it
+                                if (variableGroup.get('value')) {
+                                    variableGroup.get('value')?.setValue('', { emitEvent: false });
+                                }
+                                // Clear caches to force recomputation of configs with new values
+                                // Clear all cache entries for this variable to ensure fresh configs
+                                this.testDataProfileSelectConfigCache.delete(`${variable.name}_testDataProfile`);
+                                // Clear data set cache - need to clear all possible keys since we don't know the exact format
+                                const dataSetKeysToDelete = [];
+                                this.dataSetSelectConfigCache.forEach((value, key) => {
+                                    if (key.startsWith(`${variable.name}_dataSet`)) {
+                                        dataSetKeysToDelete.push(key);
+                                    }
+                                });
+                                dataSetKeysToDelete.forEach(key => this.dataSetSelectConfigCache.delete(key));
+                                // Clear parameter cache - need to clear all possible keys
+                                const paramKeysToDelete = [];
+                                this.parameterForDataSetSelectConfigCache.forEach((value, key) => {
+                                    if (key.startsWith(`${variable.name}_paramForDataSet`)) {
+                                        paramKeysToDelete.push(key);
+                                    }
+                                });
+                                paramKeysToDelete.forEach(key => this.parameterForDataSetSelectConfigCache.delete(key));
+                                console.log('Default test data initialized:', {
+                                    variableName: variable.name,
+                                    profileName,
+                                    profileId: defaultProfile.id,
+                                    dataSetName,
+                                    hasSelectedProfile: !!variable.selectedTestDataProfile,
+                                    hasSelectedDataSet: !!variable.selectedDataSet
+                                });
+                            }
+                            else {
+                                console.warn('Default test data profile not found or invalid:', {
+                                    defaultTestDataProfileId: this.defaultTestDataProfileId,
+                                    defaultTestDataStartIndex: this.defaultTestDataStartIndex,
+                                    parameterOptionsLength: this.parameterOptions.length,
+                                    foundProfile: !!defaultProfile
+                                });
+                            }
+                        }
+                        else {
+                            // No default values - use existing logic to find from parameter value
+                            const paramName = rawValue;
+                            if (paramName) {
+                                // Find the test data profile and data set that contains this parameter
+                                // Search through all test data profiles and their data sets
+                                let foundProfile = null;
+                                let foundDataSet = null;
+                                for (const testDataProfile of this.parameterOptions) {
+                                    if (testDataProfile.data && testDataProfile.data.length > 0) {
+                                        // Search through all data sets in this profile
+                                        for (const dataSet of testDataProfile.data) {
+                                            if (dataSet && dataSet.data && dataSet.data.hasOwnProperty(paramName)) {
+                                                foundProfile = testDataProfile;
+                                                foundDataSet = dataSet;
+                                                break;
+                                            }
+                                        }
+                                        if (foundProfile)
+                                            break;
+                                    }
+                                }
+                                if (foundProfile && foundDataSet) {
+                                    const profileName = foundProfile.name || foundProfile.testDataName;
+                                    const dataSetName = foundDataSet.name;
+                                    variable.selectedTestDataProfile = profileName;
+                                    variable.selectedTestDataProfileId = foundProfile.id;
+                                    variable.selectedDataSet = dataSetName;
+                                    // Set form controls
+                                    if (!variableGroup.get('selectedTestDataProfile')) {
+                                        variableGroup.addControl('selectedTestDataProfile', new FormControl(profileName));
+                                    }
+                                    else {
+                                        variableGroup.get('selectedTestDataProfile')?.setValue(profileName, { emitEvent: false });
+                                    }
+                                    if (!variableGroup.get('selectedDataSet')) {
+                                        variableGroup.addControl('selectedDataSet', new FormControl(dataSetName));
+                                    }
+                                    else {
+                                        variableGroup.get('selectedDataSet')?.setValue(dataSetName, { emitEvent: false });
+                                    }
+                                    // Set form control to param name (for dropdown display)
+                                    if (variableGroup.get('value')) {
+                                        variableGroup.get('value')?.setValue(paramName, { emitEvent: false });
+                                    }
+                                    // Ensure variable.value is formatted correctly as @|paramName|
+                                    variable.value = this.formatTestDataValue(paramName, 'parameter');
+                                }
+                                else {
+                                    // If parameter not found, format the raw value if it's a parameter type
+                                    if (variableGroup.get('value')) {
+                                        variableGroup.get('value')?.setValue(rawValue, { emitEvent: false });
+                                    }
+                                    // Ensure variable.value is formatted correctly
+                                    variable.value = this.formatTestDataValue(rawValue, dataType);
+                                }
+                            }
+                        }
+                    }
+                    // For environment type, parse the value to extract environment and parameter
+                    if (dataType === 'environment') {
+                        // Environment values are in format *|parameterName|
+                        // We need to find which environment this parameter belongs to
+                        const paramName = rawValue;
+                        if (paramName) {
+                            // Find the environment that contains this parameter
+                            const envOption = this.environmentOptions.find(env => env.name === paramName);
+                            if (envOption) {
+                                variable.selectedEnvironment = envOption.environment;
+                                // Extract and store environment ID
+                                const idMatch = envOption.id.match(/env-(\d+)-/);
+                                if (idMatch && idMatch[1]) {
+                                    variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
+                                }
+                                // Set form controls
+                                if (!variableGroup.get('selectedEnvironment')) {
+                                    variableGroup.addControl('selectedEnvironment', new FormControl(envOption.environment));
+                                }
+                                else {
+                                    variableGroup.get('selectedEnvironment')?.setValue(envOption.environment, { emitEvent: false });
+                                }
+                                if (variableGroup.get('value')) {
+                                    variableGroup.get('value')?.setValue(`*|${paramName}|`, { emitEvent: false });
+                                }
+                            }
+                        }
+                    }
                 }
             }
         });
@@ -26303,6 +26602,26 @@ class TemplateVariablesFormComponent {
             // Pre-compute data type select configs
             if (this.needsDataTypeDropdown(variable)) {
                 this.getDataTypeSelectConfig(variable, index);
+                // Pre-compute parameter and environment select configs if needed
+                const dataType = variable.dataType || 'plain-text';
+                if (dataType === 'parameter') {
+                    this.getTestDataProfileSelectConfig(variable, index);
+                    // Pre-compute data set config if test data profile is already selected
+                    if (variable.selectedTestDataProfile) {
+                        this.getDataSetSelectConfig(variable, index);
+                        // Pre-compute parameter config if data set is already selected
+                        if (variable.selectedDataSet) {
+                            this.getParameterSelectConfig(variable, index);
+                        }
+                    }
+                }
+                else if (dataType === 'environment') {
+                    this.getEnvironmentSelectConfig(variable, index);
+                    // Pre-compute environment parameter config if environment is already selected
+                    if (variable.selectedEnvironment) {
+                        this.getEnvironmentParameterSelectConfig(variable, index);
+                    }
+                }
             }
         });
     }
@@ -26416,8 +26735,8 @@ class TemplateVariablesFormComponent {
         // If this is a test-data variable, parse and update raw value and data type
         if (this.needsDataTypeDropdown(variable)) {
             const { dataType, rawValue } = this.parseTestDataValue(value || '');
-            this.variableDataTypes.set(variableName, dataType);
-            this.variableRawValues.set(variableName, rawValue);
+            variable.dataType = dataType;
+            variable.rawValue = rawValue;
             // Update data type form control in FormArray
             const variableGroup = this.getVariableFormGroup(variableName);
             if (variableGroup && variableGroup.get('dataType')) {
@@ -26468,7 +26787,7 @@ class TemplateVariablesFormComponent {
             return this.needsDataTypeDropdownCache.get(variable.name);
         }
         const dataKey = variable.dataKey?.toLowerCase() || '';
-        const result = dataKey === 'test-data' || dataKey === 'source_value' || dataKey === 'target_value';
+        const result = dataKey === 'test_data' || dataKey === 'source_value' || dataKey === 'target_value';
         this.needsDataTypeDropdownCache.set(variable.name, result);
         return result;
     }
@@ -26485,7 +26804,7 @@ class TemplateVariablesFormComponent {
         // Ensure form control exists in FormArray
         const variableGroup = this.getVariableFormGroup(variable.name);
         if (variableGroup && !variableGroup.get('dataType')) {
-            const currentDataType = this.variableDataTypes.get(variable.name) || 'plain-text';
+            const currentDataType = variable.dataType || 'plain-text';
             variableGroup.addControl('dataType', new FormControl(currentDataType));
         }
         const config = {
@@ -26502,12 +26821,10 @@ class TemplateVariablesFormComponent {
         return config;
     }
     getCurrentDataType(variable) {
-        // Simple getter - already cached in Map, no computation needed
-        return this.variableDataTypes.get(variable.name) || 'plain-text';
+        return variable.dataType || 'plain-text';
     }
     getRawValue(variable) {
-        // Simple getter - already cached in Map, no computation needed
-        return this.variableRawValues.get(variable.name) || '';
+        return variable.rawValue || '';
     }
     /**
      * Check if selector variable is available in templateVariables
@@ -26521,8 +26838,8 @@ class TemplateVariablesFormComponent {
     get parameterVariableAvailable() {
         return this.templateVariables.some(v => {
             const dataKey = v.dataKey?.toLowerCase() || '';
-            if (dataKey === 'test-data' || dataKey === 'source_value' || dataKey === 'target_value') {
-                const dataType = this.variableDataTypes.get(v.name) || 'plain-text';
+            if (dataKey === 'test_data' || dataKey === 'source_value' || dataKey === 'target_value') {
+                const dataType = v.dataType || 'plain-text';
                 return dataType === 'parameter';
             }
             return false;
@@ -26533,35 +26850,140 @@ class TemplateVariablesFormComponent {
      */
     get environmentVariableAvailable() {
         return this.templateVariables.some(v => {
-            const dataKey = v.name?.toLowerCase() || '';
-            if (dataKey === 'test-data' || dataKey === 'source_value' || dataKey === 'target_value') {
-                const dataType = this.variableDataTypes.get(v.name) || 'plain-text';
+            const dataKey = v.dataKey?.toLowerCase() || '';
+            if (dataKey === 'test_data' || dataKey === 'source_value' || dataKey === 'target_value') {
+                const dataType = v.dataType || 'plain-text';
                 return dataType === 'environment';
             }
             return false;
         });
     }
     onDataTypeChange(variableName, dataType) {
-        // Update stored data type
-        this.variableDataTypes.set(variableName, dataType);
+        // Find the variable
+        const variable = this.templateVariables.find(v => v.name === variableName);
+        if (!variable)
+            return;
+        // Update stored data type on the variable object
+        variable.dataType = dataType;
+        // Clear parameter and environment select config caches since data type changed
+        this.testDataProfileSelectConfigCache.delete(`${variableName}_testDataProfile`);
+        this.dataSetSelectConfigCache.delete(`${variableName}_dataSet`);
+        this.parameterForDataSetSelectConfigCache.delete(`${variableName}_paramForDataSet`);
+        this.environmentSelectConfigCache.delete(`${variableName}_environment`);
+        this.environmentParameterSelectConfigCache.delete(`${variableName}_envParam`);
+        // Clear selected test data profile and data set if switching away from parameter type
+        if (dataType !== 'parameter') {
+            variable.selectedTestDataProfile = undefined;
+            variable.selectedTestDataProfileId = undefined;
+            variable.selectedDataSet = undefined;
+        }
+        // Clear selected environment if switching away from environment type
+        if (dataType !== 'environment') {
+            variable.selectedEnvironment = undefined;
+            variable.selectedEnvironmentId = undefined;
+        }
         // Get current raw value
-        const rawValue = this.variableRawValues.get(variableName) || '';
+        const rawValue = variable.rawValue || '';
         // Format the value based on new data type
         const formattedValue = this.formatTestDataValue(rawValue, dataType);
-        // Update variable value
-        const variable = this.templateVariables.find(v => v.name === variableName);
-        if (variable) {
-            variable.value = formattedValue;
-        }
+        // Update variable value (always store formatted value in variable)
+        variable.value = formattedValue;
         // Update form control in FormArray
         const variableGroup = this.getVariableFormGroup(variableName);
-        if (variableGroup && variableGroup.get('value')) {
-            variableGroup.get('value')?.setValue(formattedValue, { emitEvent: false });
+        if (variableGroup) {
+            if (variableGroup.get('value')) {
+                // For parameter type, set form control to raw value so select can display it
+                if (dataType === 'parameter') {
+                    variableGroup.get('value')?.setValue(rawValue, { emitEvent: false });
+                }
+                else if (dataType === 'environment') {
+                    // For environment type, clear value and selectedEnvironment
+                    variableGroup.get('value')?.setValue('', { emitEvent: false });
+                    if (variableGroup.get('selectedEnvironment')) {
+                        variableGroup.get('selectedEnvironment')?.setValue('', { emitEvent: false });
+                    }
+                }
+                else {
+                    variableGroup.get('value')?.setValue(formattedValue, { emitEvent: false });
+                }
+            }
+            // Remove selectedEnvironment control if not environment type
+            if (dataType !== 'environment' && variableGroup.get('selectedEnvironment')) {
+                variableGroup.removeControl('selectedEnvironment');
+            }
+        }
+        // If switching to parameter type, check for default values and initialize them
+        if (dataType === 'parameter') {
+            const index = this.templateVariables.indexOf(variable);
+            // Check if default test data profile and data set are provided from test case
+            if (this.defaultTestDataProfileId && this.defaultTestDataStartIndex != null && this.parameterOptions.length > 0) {
+                // Find the test data profile by ID
+                const defaultProfile = this.parameterOptions.find((testData) => testData.id === this.defaultTestDataProfileId);
+                if (defaultProfile && defaultProfile.data && defaultProfile.data.length > this.defaultTestDataStartIndex) {
+                    const defaultDataSet = defaultProfile.data[this.defaultTestDataStartIndex];
+                    const profileName = defaultProfile.name || defaultProfile.testDataName;
+                    const dataSetName = defaultDataSet.name;
+                    // Set variable properties - this ensures hasSelectedTestDataProfile() and hasSelectedDataSet() return true
+                    variable.selectedTestDataProfile = profileName;
+                    variable.selectedTestDataProfileId = defaultProfile.id;
+                    variable.selectedDataSet = dataSetName;
+                    // Set form controls with the actual values so dropdowns display selected options
+                    if (variableGroup) {
+                        if (!variableGroup.get('selectedTestDataProfile')) {
+                            variableGroup.addControl('selectedTestDataProfile', new FormControl(profileName));
+                        }
+                        else {
+                            variableGroup.get('selectedTestDataProfile')?.setValue(profileName, { emitEvent: false });
+                        }
+                        if (!variableGroup.get('selectedDataSet')) {
+                            variableGroup.addControl('selectedDataSet', new FormControl(dataSetName));
+                        }
+                        else {
+                            variableGroup.get('selectedDataSet')?.setValue(dataSetName, { emitEvent: false });
+                        }
+                    }
+                    // Clear caches to force recomputation of configs with new values
+                    this.testDataProfileSelectConfigCache.delete(`${variableName}_testDataProfile`);
+                    const dataSetKeysToDelete = [];
+                    this.dataSetSelectConfigCache.forEach((value, key) => {
+                        if (key.startsWith(`${variableName}_dataSet`)) {
+                            dataSetKeysToDelete.push(key);
+                        }
+                    });
+                    dataSetKeysToDelete.forEach(key => this.dataSetSelectConfigCache.delete(key));
+                    const paramKeysToDelete = [];
+                    this.parameterForDataSetSelectConfigCache.forEach((value, key) => {
+                        if (key.startsWith(`${variableName}_paramForDataSet`)) {
+                            paramKeysToDelete.push(key);
+                        }
+                    });
+                    paramKeysToDelete.forEach(key => this.parameterForDataSetSelectConfigCache.delete(key));
+                }
+            }
+        }
+        // Pre-compute the new select config if needed
+        if (variable) {
+            const index = this.templateVariables.indexOf(variable);
+            if (dataType === 'parameter') {
+                // Pre-compute test data profile config
+                this.getTestDataProfileSelectConfig(variable, index);
+                // If a profile is already selected, pre-compute data set config
+                if (variable.selectedTestDataProfile) {
+                    this.getDataSetSelectConfig(variable, index);
+                    // If a data set is already selected, pre-compute parameter config
+                    if (variable.selectedDataSet) {
+                        this.getParameterSelectConfig(variable, index);
+                    }
+                }
+            }
+            else if (dataType === 'environment') {
+                this.getEnvironmentSelectConfig(variable, index);
+            }
         }
         // Mark for check since we're using OnPush
         this.cdr.markForCheck();
         console.log('onDataTypeChange', variableName, dataType, formattedValue);
-        // Emit the change event
+        // Emit the change event with formatted value
         this.variableValueChange.emit({ name: variableName, value: formattedValue });
     }
     onElementSearch(event) {
@@ -26571,17 +26993,18 @@ class TemplateVariablesFormComponent {
         this.searchElements.emit(event.query);
     }
     onTestDataValueChange(variableName, rawValue) {
-        // Update stored raw value
-        this.variableRawValues.set(variableName, rawValue);
+        // Find the variable
+        const variable = this.templateVariables.find(v => v.name === variableName);
+        if (!variable)
+            return;
+        // Update stored raw value on the variable object
+        variable.rawValue = rawValue;
         // Get current data type
-        const dataType = this.variableDataTypes.get(variableName) || 'plain-text';
+        const dataType = variable.dataType || 'plain-text';
         // Format the value based on data type
         const formattedValue = this.formatTestDataValue(rawValue, dataType);
         // Update variable value
-        const variable = this.templateVariables.find(v => v.name === variableName);
-        if (variable) {
-            variable.value = formattedValue;
-        }
+        variable.value = formattedValue;
         // Update form control in FormArray
         const variableGroup = this.getVariableFormGroup(variableName);
         if (variableGroup && variableGroup.get('value')) {
@@ -26592,12 +27015,639 @@ class TemplateVariablesFormComponent {
         // Emit the change event
         this.variableValueChange.emit({ name: variableName, value: formattedValue });
     }
+    /**
+     * Get unique test data profiles from parameter options (raw TestData objects)
+     */
+    getUniqueTestDataProfiles() {
+        const profileMap = new Map();
+        this.parameterOptions.forEach((testData) => {
+            // testData.name is the testDataName (profile name)
+            const profileName = testData.name || testData.testDataName;
+            if (profileName && !profileMap.has(profileName)) {
+                profileMap.set(profileName, {
+                    id: String(testData.id),
+                    name: profileName
+                });
+            }
+        });
+        const profiles = Array.from(profileMap.values());
+        return profiles;
+    }
+    /**
+     * Get data sets for a specific test data profile
+     * Returns all data sets from the profile's data array
+     */
+    getDataSetsForTestDataProfile(profileId) {
+        // Find the test data profile by id
+        const testDataProfile = this.parameterOptions.find((testData) => {
+            return testData.id === Number(profileId);
+        });
+        if (!testDataProfile || !testDataProfile.data || testDataProfile.data.length === 0) {
+            return [];
+        }
+        // Return all data sets from the profile
+        return testDataProfile.data.map((dataSet) => ({
+            id: dataSet.name,
+            name: dataSet.name
+        }));
+    }
+    /**
+     * Get parameters for a specific data set in a test data profile
+     * Extracts parameter names from the selected data set's data object
+     */
+    getParametersForDataSet(profileIdOrName, dataSetName) {
+        // Find the test data profile by id or name
+        const testDataProfile = this.parameterOptions.find((testData) => {
+            // Try to match by ID first (if profileIdOrName is a number)
+            const idMatch = !isNaN(Number(profileIdOrName)) && testData.id === Number(profileIdOrName);
+            // Otherwise try to match by name
+            const nameMatch = (testData.name || testData.testDataName) === profileIdOrName;
+            return idMatch || nameMatch;
+        });
+        if (!testDataProfile || !testDataProfile.data || testDataProfile.data.length === 0) {
+            return [];
+        }
+        // Find the specific data set by name
+        const dataSet = testDataProfile.data.find((ds) => ds.name === dataSetName);
+        if (!dataSet || !dataSet.data) {
+            return [];
+        }
+        // Get all parameter keys from the data set's data object
+        const parameterNames = Object.keys(dataSet.data);
+        return parameterNames.map(paramName => ({
+            id: paramName,
+            name: paramName,
+        }));
+    }
+    /**
+     * Get select config for test data profile dropdown (first dropdown for parameters)
+     */
+    getTestDataProfileSelectConfig(variable, index) {
+        const cacheKey = `${variable.name}_testDataProfile`;
+        // Get unique test data profiles
+        const profiles = this.getUniqueTestDataProfiles();
+        // Create options with profile name and ID (display name with ID)
+        const optionsArray = profiles.map(profile => {
+            // Find the test data profile to get the ID
+            const testDataProfile = this.parameterOptions.find((testData) => {
+                const name = testData.name || testData.testDataName;
+                return name === profile.name;
+            });
+            const profileId = testDataProfile?.id || profile.id;
+            return {
+                id: String(profileId),
+                value: profile.name,
+                name: `${profile.name}`,
+                label: `${profile.name}`
+            };
+        });
+        // Ensure form control exists for test data profile selection and update it
+        const variableGroup = this.getVariableFormGroup(variable.name);
+        if (variableGroup) {
+            if (!variableGroup.get('selectedTestDataProfile')) {
+                // Use profile ID if available, otherwise use profile name
+                const currentValue = variable.selectedTestDataProfileId
+                    ? String(variable.selectedTestDataProfileId)
+                    : (variable.selectedTestDataProfile || '');
+                variableGroup.addControl('selectedTestDataProfile', new FormControl(currentValue));
+            }
+            // Always update form control value if variable has a selected profile
+            // This ensures the value is set even if config was cached
+            // Use profile ID (which matches opt.id) instead of profile name (which matches opt.value)
+            if (variable.selectedTestDataProfileId != null) {
+                const profileIdString = String(variable.selectedTestDataProfileId);
+                // Verify the profile ID exists in options before setting
+                const profileExists = optionsArray.some(opt => opt.id === profileIdString);
+                if (profileExists) {
+                    const currentControlValue = variableGroup.get('selectedTestDataProfile')?.value;
+                    if (currentControlValue !== profileIdString) {
+                        variableGroup.get('selectedTestDataProfile')?.setValue(profileIdString, { emitEvent: false });
+                        console.log('Updated test data profile form control with ID:', {
+                            variableName: variable.name,
+                            profileId: profileIdString,
+                            profileName: variable.selectedTestDataProfile,
+                            optionsCount: optionsArray.length
+                        });
+                    }
+                }
+                else {
+                    console.warn('Selected test data profile ID not found in options:', {
+                        variableName: variable.name,
+                        profileId: profileIdString,
+                        profileName: variable.selectedTestDataProfile,
+                        availableOptionIds: optionsArray.map(opt => opt.id)
+                    });
+                }
+            }
+            else if (variable.selectedTestDataProfile) {
+                // Fallback: if we only have the profile name, find the matching option and use its ID
+                const matchingOption = optionsArray.find(opt => opt.value === variable.selectedTestDataProfile);
+                if (matchingOption) {
+                    const currentControlValue = variableGroup.get('selectedTestDataProfile')?.value;
+                    if (currentControlValue !== matchingOption.id) {
+                        variableGroup.get('selectedTestDataProfile')?.setValue(matchingOption.id, { emitEvent: false });
+                        // Also update the variable's profile ID for consistency
+                        variable.selectedTestDataProfileId = Number(matchingOption.id);
+                        console.log('Updated test data profile form control with ID from name:', {
+                            variableName: variable.name,
+                            profileId: matchingOption.id,
+                            profileName: variable.selectedTestDataProfile
+                        });
+                    }
+                }
+            }
+        }
+        // Check cache after ensuring form control is set
+        if (this.testDataProfileSelectConfigCache.has(cacheKey)) {
+            return this.testDataProfileSelectConfigCache.get(cacheKey);
+        }
+        // Check if default values are set - if so, disable the dropdown
+        const isDisabled = this.hasDefaultTestDataSelection();
+        const config = {
+            key: 'selectedTestDataProfile',
+            placeholder: 'Select Test Data Profile',
+            multiple: false,
+            searchable: false,
+            options: optionsArray,
+            hasMore: false,
+            isLoading: false,
+            disabled: isDisabled,
+            onChange: (value) => {
+                // Value is the profile ID (string) from the mat-option
+                // Find the test data profile by ID to get the name
+                const testDataProfile = this.parameterOptions.find((testData) => {
+                    return testData.id === Number(value);
+                });
+                // Store both ID and name
+                variable.selectedTestDataProfileId = testDataProfile?.id;
+                variable.selectedTestDataProfile = testDataProfile?.name || testDataProfile?.testDataName || '';
+                // Clear data set and parameter selection when profile changes
+                variable.selectedDataSet = undefined;
+                variable.rawValue = '';
+                variable.value = '';
+                // Update form controls
+                const varGroup = this.getVariableFormGroup(variable.name);
+                if (varGroup) {
+                    if (varGroup.get('selectedTestDataProfile')) {
+                        varGroup.get('selectedTestDataProfile')?.setValue(value, { emitEvent: false });
+                    }
+                    if (varGroup.get('selectedDataSet')) {
+                        varGroup.get('selectedDataSet')?.setValue('', { emitEvent: false });
+                    }
+                    if (varGroup.get('value')) {
+                        varGroup.get('value')?.setValue('', { emitEvent: false });
+                    }
+                }
+                // Clear caches for data set and parameter select configs since profile changed
+                // Clear all data set and parameter configs for this variable
+                const dataSetKeysToDelete = [];
+                this.dataSetSelectConfigCache.forEach((value, key) => {
+                    if (key.startsWith(`${variable.name}_dataSet`)) {
+                        dataSetKeysToDelete.push(key);
+                    }
+                });
+                dataSetKeysToDelete.forEach(key => this.dataSetSelectConfigCache.delete(key));
+                const paramKeysToDelete = [];
+                this.parameterForDataSetSelectConfigCache.forEach((value, key) => {
+                    if (key.startsWith(`${variable.name}_paramForDataSet`)) {
+                        paramKeysToDelete.push(key);
+                    }
+                });
+                paramKeysToDelete.forEach(key => this.parameterForDataSetSelectConfigCache.delete(key));
+                // Clear selected data set when profile changes
+                variable.selectedDataSet = undefined;
+                // Mark for check
+                this.cdr.markForCheck();
+            }
+        };
+        this.testDataProfileSelectConfigCache.set(cacheKey, config);
+        return config;
+    }
+    /**
+     * Get select config for data set dropdown (second dropdown for parameters - shows data sets from selected profile)
+     */
+    getDataSetSelectConfig(variable, index) {
+        // Get selected test data profile ID (preferred) or name (fallback)
+        const selectedProfileId = variable.selectedTestDataProfileId;
+        const selectedProfile = variable.selectedTestDataProfile;
+        if (!selectedProfileId && !selectedProfile) {
+            // Return empty config if no profile is selected
+            return {
+                key: 'selectedDataSet',
+                placeholder: 'Select Test Data Profile first',
+                multiple: false,
+                searchable: false,
+                options: []
+            };
+        }
+        // Use profile ID if available, otherwise find ID from profile name
+        let profileIdToUse;
+        if (selectedProfileId) {
+            profileIdToUse = String(selectedProfileId);
+        }
+        else {
+            // Find the profile ID from the profile name
+            const testDataProfile = this.parameterOptions.find((testData) => {
+                const name = testData.name || testData.testDataName;
+                return name === selectedProfile;
+            });
+            profileIdToUse = testDataProfile?.id ? String(testDataProfile.id) : '';
+        }
+        // Use profile ID for cache key if available, otherwise use profile name
+        const cacheKey = `${variable.name}_dataSet_${profileIdToUse || selectedProfile || ''}`;
+        if (this.dataSetSelectConfigCache.has(cacheKey)) {
+            return this.dataSetSelectConfigCache.get(cacheKey);
+        }
+        // Get data sets for the selected test data profile using ID
+        const dataSets = this.getDataSetsForTestDataProfile(profileIdToUse);
+        const optionsArray = dataSets.map(dataSet => ({
+            id: dataSet.name,
+            value: dataSet.name,
+            name: dataSet.name,
+            label: dataSet.name
+        }));
+        // Ensure form control exists for data set selection
+        const variableGroup = this.getVariableFormGroup(variable.name);
+        if (variableGroup) {
+            if (!variableGroup.get('selectedDataSet')) {
+                const currentDataSet = variable.selectedDataSet || '';
+                variableGroup.addControl('selectedDataSet', new FormControl(currentDataSet));
+            }
+            else {
+                // Update form control value if variable has a selected data set
+                if (variable.selectedDataSet) {
+                    variableGroup.get('selectedDataSet')?.setValue(variable.selectedDataSet, { emitEvent: false });
+                }
+            }
+        }
+        // Check if default values are set - if so, disable the dropdown
+        const isDisabled = this.hasDefaultTestDataSelection();
+        const config = {
+            key: 'selectedDataSet',
+            placeholder: 'Select Data Set',
+            multiple: false,
+            searchable: false,
+            options: optionsArray,
+            hasMore: false,
+            isLoading: false,
+            disabled: isDisabled,
+            onChange: (value) => {
+                // Store selected data set
+                variable.selectedDataSet = value;
+                // Clear parameter selection when data set changes
+                variable.rawValue = '';
+                variable.value = '';
+                // Update form controls
+                const varGroup = this.getVariableFormGroup(variable.name);
+                if (varGroup) {
+                    if (varGroup.get('selectedDataSet')) {
+                        varGroup.get('selectedDataSet')?.setValue(value, { emitEvent: false });
+                    }
+                    if (varGroup.get('value')) {
+                        varGroup.get('value')?.setValue('', { emitEvent: false });
+                    }
+                }
+                // Clear caches for parameter select config since data set changed
+                const paramKeysToDelete = [];
+                this.parameterForDataSetSelectConfigCache.forEach((configValue, key) => {
+                    if (key.startsWith(`${variable.name}_paramForDataSet_`)) {
+                        paramKeysToDelete.push(key);
+                    }
+                });
+                paramKeysToDelete.forEach(key => this.parameterForDataSetSelectConfigCache.delete(key));
+                // Mark for check
+                this.cdr.markForCheck();
+            }
+        };
+        this.dataSetSelectConfigCache.set(cacheKey, config);
+        return config;
+    }
+    /**
+     * Get select config for parameter dropdown (third dropdown for parameters - shows parameters from selected data set)
+     */
+    getParameterSelectConfig(variable, index) {
+        // Get selected test data profile ID (preferred) or name (fallback) and data set
+        const selectedProfileId = variable.selectedTestDataProfileId;
+        const selectedProfile = variable.selectedTestDataProfile;
+        const selectedDataSet = variable.selectedDataSet;
+        if ((!selectedProfileId && !selectedProfile) || !selectedDataSet) {
+            // Return empty config if profile or data set is not selected
+            return {
+                key: 'value',
+                placeholder: (selectedProfileId || selectedProfile) ? 'Select Data Set first' : 'Select Test Data Profile first',
+                multiple: false,
+                searchable: false,
+                options: []
+            };
+        }
+        // Use profile ID if available, otherwise use profile name
+        const profileIdentifier = selectedProfileId ? String(selectedProfileId) : (selectedProfile || '');
+        const cacheKey = `${variable.name}_paramForDataSet_${profileIdentifier}_${selectedDataSet}`;
+        if (this.parameterForDataSetSelectConfigCache.has(cacheKey)) {
+            return this.parameterForDataSetSelectConfigCache.get(cacheKey);
+        }
+        // Get parameters for the selected data set using profile ID or name
+        const parameters = this.getParametersForDataSet(profileIdentifier, selectedDataSet);
+        const optionsArray = parameters.map(param => ({
+            id: `@|${param.name}|`,
+            value: `@|${param.name}|`,
+            name: param.name,
+            label: param.name
+        }));
+        // Ensure form control exists and is initialized with the current value
+        const variableGroup = this.getVariableFormGroup(variable.name);
+        if (variableGroup && variableGroup.get('value')) {
+            // If we have a value, ensure form control matches the option id (formatted value)
+            const currentValue = variable.value || '';
+            // Check if value is already formatted (e.g., "@|email|")
+            const formattedValue = currentValue.startsWith('@|') && currentValue.endsWith('|')
+                ? currentValue
+                : (currentValue ? `@|${currentValue}|` : '');
+            // Set form control to formatted value (matches opt.id) so select displays correctly
+            if (formattedValue && parameters.some(p => `@|${p.name}|` === formattedValue)) {
+                variableGroup.get('value')?.setValue(formattedValue, { emitEvent: false });
+            }
+        }
+        const config = {
+            key: 'value',
+            placeholder: `Select ${variable.label}`,
+            multiple: false,
+            searchable: true,
+            serverSearch: false,
+            options: optionsArray,
+            hasMore: false,
+            isLoading: false,
+            onChange: (value) => {
+                // Value received is the formatted value (e.g., "@|email|") because mat-option uses opt.id
+                // Extract parameter name from formatted value
+                const formattedValue = value; // This is already formatted as @|paramName|
+                const paramName = formattedValue.startsWith('@|') && formattedValue.endsWith('|')
+                    ? formattedValue.slice(2, -1)
+                    : formattedValue;
+                // Update raw value (store parameter name without formatting)
+                variable.rawValue = paramName;
+                // Update variable value (store formatted value for template)
+                variable.value = formattedValue;
+                // Update form control in FormArray - use formatted value (matches opt.id) so select displays correctly
+                const varGroup = this.getVariableFormGroup(variable.name);
+                if (varGroup && varGroup.get('value')) {
+                    // Set to formatted value so the select can match and display the selected option
+                    varGroup.get('value')?.setValue(formattedValue, { emitEvent: false });
+                }
+                // Mark for check and emit
+                this.cdr.markForCheck();
+                // Emit formatted value for parent component (this is what gets used in the template)
+                this.variableValueChange.emit({ name: variable.name, value: formattedValue });
+            }
+        };
+        this.parameterForDataSetSelectConfigCache.set(cacheKey, config);
+        return config;
+    }
+    /**
+     * Get unique environments from environment options
+     */
+    getUniqueEnvironments() {
+        const envMap = new Map();
+        this.environmentOptions.forEach(env => {
+            if (!envMap.has(env.environment)) {
+                envMap.set(env.environment, {
+                    id: env.environment,
+                    name: env.environment
+                });
+            }
+        });
+        return Array.from(envMap.values());
+    }
+    /**
+     * Get parameters for a specific environment
+     */
+    getParametersForEnvironment(environmentName) {
+        return this.environmentOptions
+            .filter(env => env.environment === environmentName)
+            .map(env => ({
+            id: env.name,
+            name: env.name
+        }));
+    }
+    /**
+     * Get select config for environment dropdown (first dropdown - select environment)
+     */
+    getEnvironmentSelectConfig(variable, index) {
+        const cacheKey = `${variable.name}_environment`;
+        if (this.environmentSelectConfigCache.has(cacheKey)) {
+            return this.environmentSelectConfigCache.get(cacheKey);
+        }
+        // Get unique environments
+        const uniqueEnvironments = this.getUniqueEnvironments();
+        const optionsArray = uniqueEnvironments.map(env => ({
+            id: env.id,
+            value: env.name,
+            name: env.name,
+            label: env.name
+        }));
+        // Ensure form control exists for environment selection
+        const variableGroup = this.getVariableFormGroup(variable.name);
+        if (variableGroup && !variableGroup.get('selectedEnvironment')) {
+            const currentEnv = variable.selectedEnvironment || '';
+            variableGroup.addControl('selectedEnvironment', new FormControl(currentEnv));
+        }
+        const config = {
+            key: 'selectedEnvironment',
+            placeholder: `Select Environment`,
+            multiple: false,
+            searchable: true,
+            serverSearch: true,
+            options: optionsArray,
+            hasMore: this.hasMoreEnvironments,
+            isLoading: this.isLoadingEnvironments,
+            onChange: (value) => {
+                // Store selected environment name on the variable object
+                variable.selectedEnvironment = value;
+                // Extract and store environment ID from environmentOptions
+                // Find the first environment option with matching environment name to get the ID
+                const envOption = this.environmentOptions.find(env => env.environment === value);
+                if (envOption) {
+                    // Extract numeric ID from envOption.id (format: "env-74-test" -> 74)
+                    const idMatch = envOption.id.match(/env-(\d+)-/);
+                    if (idMatch && idMatch[1]) {
+                        variable.selectedEnvironmentId = parseInt(idMatch[1], 10);
+                    }
+                }
+                // Clear the parameter selection when environment changes
+                variable.rawValue = undefined;
+                variable.value = '';
+                // Clear environment parameter config cache to force refresh
+                this.environmentParameterSelectConfigCache.delete(`${variable.name}_envParam`);
+                // Update form control
+                const variableGroup = this.getVariableFormGroup(variable.name);
+                if (variableGroup) {
+                    if (variableGroup.get('value')) {
+                        variableGroup.get('value')?.setValue('', { emitEvent: false });
+                    }
+                    // Update selectedEnvironment control
+                    if (variableGroup.get('selectedEnvironment')) {
+                        variableGroup.get('selectedEnvironment')?.setValue(value, { emitEvent: false });
+                    }
+                }
+                // Pre-compute environment parameter config for the new environment
+                const index = this.templateVariables.findIndex(v => v.name === variable.name);
+                if (index !== -1) {
+                    this.getEnvironmentParameterSelectConfig(variable, index);
+                }
+                // Mark for check to update UI
+                this.cdr.markForCheck();
+            },
+            onLoadMore: () => {
+                this.loadMoreEnvironments.emit();
+            },
+            onSearch: (query) => {
+                this.searchEnvironments.emit(query);
+            }
+        };
+        this.environmentSelectConfigCache.set(cacheKey, config);
+        return config;
+    }
+    /**
+     * Get select config for environment parameter dropdown (second dropdown - select parameter from environment)
+     */
+    getEnvironmentParameterSelectConfig(variable, index) {
+        const cacheKey = `${variable.name}_envParam`;
+        if (this.environmentParameterSelectConfigCache.has(cacheKey)) {
+            return this.environmentParameterSelectConfigCache.get(cacheKey);
+        }
+        // Get selected environment
+        const selectedEnvironment = variable.selectedEnvironment;
+        if (!selectedEnvironment) {
+            // Return empty config if no environment is selected
+            return {
+                key: 'value',
+                placeholder: 'Select Environment first',
+                multiple: false,
+                searchable: false,
+                options: []
+            };
+        }
+        // Get parameters for the selected environment
+        const parameters = this.getParametersForEnvironment(selectedEnvironment);
+        const optionsArray = parameters.map(param => ({
+            id: `*|${param.name}|`,
+            value: `*|${param.name}|`,
+            name: param.name,
+            label: param.name
+        }));
+        const config = {
+            key: 'value',
+            placeholder: `Select Parameter`,
+            multiple: false,
+            searchable: false,
+            options: optionsArray,
+            onChange: (value) => {
+                // When parameter is selected, update raw value and format it
+                variable.rawValue = value;
+                const formattedValue = `${value}`;
+                // Update variable value (store formatted value)
+                variable.value = formattedValue;
+                // Environment ID is already stored on variable.selectedEnvironmentId
+                // (it was set when environment was selected)
+                // Update form control in FormArray - keep raw value so select displays correctly
+                const variableGroup = this.getVariableFormGroup(variable.name);
+                if (variableGroup && variableGroup.get('value')) {
+                    // Set to raw value so the select can match and display the selected option
+                    variableGroup.get('value')?.setValue(value, { emitEvent: false });
+                }
+                // Mark for check and emit
+                this.cdr.markForCheck();
+                // Emit formatted value for parent component
+                this.variableValueChange.emit({ name: variable.name, value: formattedValue });
+            }
+        };
+        this.environmentParameterSelectConfigCache.set(cacheKey, config);
+        return config;
+    }
+    /**
+     * Get selected environment for a variable
+     */
+    getSelectedEnvironment(variable) {
+        return variable.selectedEnvironment || '';
+    }
+    /**
+     * Check if environment is selected for a variable
+     */
+    hasSelectedEnvironment(variable) {
+        return !!variable.selectedEnvironment;
+    }
+    /**
+     * Get selected environment ID for a variable
+     */
+    getSelectedEnvironmentId(variable) {
+        return variable.selectedEnvironmentId || null;
+    }
+    /**
+     * Get all environment IDs for variables that use environment type
+     * Returns a map of variable name to environment ID
+     */
+    getEnvironmentIdsForVariables() {
+        const envIds = new Map();
+        this.templateVariables.forEach(variable => {
+            if (this.isEnvironmentType(variable) && variable.selectedEnvironmentId) {
+                envIds.set(variable.name, variable.selectedEnvironmentId);
+            }
+        });
+        return envIds;
+    }
+    /**
+     * Check if current data type is plain-text
+     */
+    isPlainTextType(variable) {
+        const dataType = variable.dataType || 'plain-text';
+        return dataType === 'plain-text';
+    }
+    /**
+     * Check if current data type is parameter
+     */
+    isParameterType(variable) {
+        const dataType = variable.dataType || 'plain-text';
+        return dataType === 'parameter';
+    }
+    /**
+     * Check if test data profile is selected for a variable
+     */
+    hasSelectedTestDataProfile(variable) {
+        return !!variable.selectedTestDataProfile;
+    }
+    /**
+     * Check if data set is selected for a variable
+     */
+    hasSelectedDataSet(variable) {
+        return !!variable.selectedDataSet;
+    }
+    /**
+     * Check if default test data profile and data set are set (from test case)
+     * If true, profile and data set dropdowns should be disabled
+     */
+    hasDefaultTestDataSelection() {
+        return !!(this.defaultTestDataProfileId != null && this.defaultTestDataStartIndex != null);
+    }
+    /**
+     * Check if current data type is environment
+     */
+    isEnvironmentType(variable) {
+        const dataType = variable.dataType || 'plain-text';
+        return dataType === 'environment';
+    }
+    /**
+     * Check if current data type is runtime
+     */
+    isRuntimeType(variable) {
+        const dataType = variable.dataType || 'plain-text';
+        return dataType === 'runtime';
+    }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap\" *ngIf=\"!createElementVisible\">\n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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 [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" 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=\"shouldShowDropdown(variable); 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]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\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 }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\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]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\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-template>\n    </ng-container>\n  </ng-container>\n\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)=\"metadataChange.emit($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)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>\n<div class=\"cqa-flex cqa-justify-end cqa-pt-2\" *ngIf=\"!createElementVisible\">\n  <cqa-button \n    *ngIf=\"selectorVariableAvailable\"\n    variant=\"text\" \n    size=\"sm\"\n    text=\"Create Element\"\n    (clicked)=\"onShowElementForm()\">\n  </cqa-button>\n  <!-- <cqa-button \n    *ngIf=\"parameterVariableAvailable\"\n    variant=\"filled\" \n    text=\"Create Parameter\"\n    (clicked)=\"onCreateParameter()\">\n  </cqa-button>\n  <cqa-button \n    *ngIf=\"environmentVariableAvailable\"\n    variant=\"filled\" \n    text=\"Create Environment\"\n    (clicked)=\"onCreateEnvironment()\">\n  </cqa-button> -->\n</div>", components: [{ type: i5$1.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", "addCustomValue"] }, { 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: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" *ngIf=\"!createElementVisible\">\n  \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)=\"metadataChange.emit($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)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" 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=\"shouldShowDropdown(variable); 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 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\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 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" 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              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" 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              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\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 Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" 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                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" 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 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" 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  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\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 capitalize-first\">\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-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ 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: i5$1.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", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap\" *ngIf=\"!createElementVisible\">\n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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 [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" 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=\"shouldShowDropdown(variable); 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]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\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 }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\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]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\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-template>\n    </ng-container>\n  </ng-container>\n\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)=\"metadataChange.emit($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)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>\n<div class=\"cqa-flex cqa-justify-end cqa-pt-2\" *ngIf=\"!createElementVisible\">\n  <cqa-button \n    *ngIf=\"selectorVariableAvailable\"\n    variant=\"text\" \n    size=\"sm\"\n    text=\"Create Element\"\n    (clicked)=\"onShowElementForm()\">\n  </cqa-button>\n  <!-- <cqa-button \n    *ngIf=\"parameterVariableAvailable\"\n    variant=\"filled\" \n    text=\"Create Parameter\"\n    (clicked)=\"onCreateParameter()\">\n  </cqa-button>\n  <cqa-button \n    *ngIf=\"environmentVariableAvailable\"\n    variant=\"filled\" \n    text=\"Create Environment\"\n    (clicked)=\"onCreateEnvironment()\">\n  </cqa-button> -->\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" *ngIf=\"!createElementVisible\">\n  \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)=\"metadataChange.emit($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)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\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 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" 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=\"shouldShowDropdown(variable); 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 capitalize-first\">\n            {{ variable.label }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\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 capitalize-first\">\n              {{ variable.label }} Type\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" 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              Environment Name\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" 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              Environment Value\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\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 Profile\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable)\" 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                Data Set\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" 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 capitalize-first\">\n                {{ variable.label }}\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" 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  capitalize-first\">\n              {{ variable.label }} \n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\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 capitalize-first\">\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-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -26618,6 +27668,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], parameterOptions: [{
+                type: Input
+            }], hasMoreParameters: [{
+                type: Input
+            }], isLoadingParameters: [{
+                type: Input
+            }], environmentOptions: [{
+                type: Input
+            }], hasMoreEnvironments: [{
+                type: Input
+            }], isLoadingEnvironments: [{
+                type: Input
+            }], defaultTestDataProfileId: [{
+                type: Input
+            }], defaultTestDataStartIndex: [{
+                type: Input
             }], variableValueChange: [{
                 type: Output
             }], variableBooleanChange: [{
@@ -26638,10 +27704,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], createScreenNameRequest: [{
                 type: Output
+            }], searchParameters: [{
+                type: Output
+            }], loadMoreParameters: [{
+                type: Output
+            }], searchEnvironments: [{
+                type: Output
+            }], loadMoreEnvironments: [{
+                type: Output
             }], cancelElementForm: [{
                 type: Output
             }], elementFormVisibilityChange: [{
                 type: Output
+            }], createElementVisible: [{
+                type: Input
             }] } });
 
 class StepBuilderActionComponent {
@@ -26664,6 +27740,18 @@ class StepBuilderActionComponent {
         this.hasMoreScreenNames = false;
         /** True while parent is loading screen names (search or load more) */
         this.isLoadingScreenNames = false;
+        /** Parameter options for test data parameter dropdown (from API) */
+        this.parameterOptions = []; // TestData[] - raw test data profiles
+        /** Whether more parameters are available for infinite scroll */
+        this.hasMoreParameters = false;
+        /** True while parent is loading parameters (search or load more) */
+        this.isLoadingParameters = false;
+        /** Environment options for environment parameter dropdown (from API) */
+        this.environmentOptions = [];
+        /** Whether more environments are available for infinite scroll */
+        this.hasMoreEnvironments = false;
+        /** True while parent is loading environments (search or load more) */
+        this.isLoadingEnvironments = false;
         this.templateChanged = new EventEmitter();
         this.loadMoreElements = new EventEmitter(); // Emit when load more is requested
         this.searchElements = new EventEmitter(); // Emit when user searches for elements
@@ -26671,10 +27759,16 @@ class StepBuilderActionComponent {
         this.searchScreenName = new EventEmitter(); // Emit when user searches screen names
         this.loadMoreScreenNames = new EventEmitter(); // Emit when user scrolls to load more screen names
         this.createScreenNameRequest = new EventEmitter(); // Emit when user requests to create a new screen name
+        this.searchParameters = new EventEmitter(); // Emit when user searches for parameters
+        this.loadMoreParameters = new EventEmitter(); // Emit when user scrolls to load more parameters
+        this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
+        this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
         this.cancelled = new EventEmitter();
+        this.redirectToParameter = new EventEmitter();
+        this.redirectToEnvironment = new EventEmitter();
         this.filteredTemplates = [];
         this.searchValue = '';
         this.selectedTemplate = null;
@@ -26683,8 +27777,7 @@ class StepBuilderActionComponent {
         this.advancedExpanded = false;
         this.templateVariables = [];
         this.updatedHtmlGrammar = ''; // Updated HTML grammar with variable values
-        // Track element form visibility
-        this.isElementFormVisible = false;
+        this.createElementVisible = false;
         // Cache for select configs to avoid recalculating on every change detection
         this.selectConfigCache = new Map();
         this.formValidCache = false;
@@ -26696,7 +27789,10 @@ class StepBuilderActionComponent {
      * Handle element form visibility change
      */
     onElementFormVisibilityChange(visible) {
-        this.isElementFormVisible = visible;
+        this.createElementVisible = visible;
+    }
+    onShowElementForm() {
+        this.createElementVisible = true;
     }
     ngOnInit() {
         this.filteredTemplates = [...this.templates];
@@ -26817,7 +27913,7 @@ class StepBuilderActionComponent {
             });
             // Add dataType control for test-data variables if needed
             const label = variable.label?.toLowerCase() || '';
-            if (label === 'test-data' || label === 'source-value' || label === 'target-value' ||
+            if (label === 'test_data' || label === 'source-value' || label === 'target-value' ||
                 label === 'source_value' || label === 'target_value') {
                 // Parse the value to determine data type
                 const valueStr = String(defaultValue || '');
@@ -26894,7 +27990,7 @@ class StepBuilderActionComponent {
         });
         // Add dataType control for test-data variables if needed
         const label = variable.label?.toLowerCase() || '';
-        if (label === 'test-data' || label === 'source-value' || label === 'target-value' ||
+        if (label === 'test_data' || label === 'source-value' || label === 'target-value' ||
             label === 'source_value' || label === 'target_value') {
             const valueStr = String(defaultValue || '');
             let dataType = 'plain-text';
@@ -27011,14 +28107,18 @@ class StepBuilderActionComponent {
         if (!this.isFormValid()) {
             return;
         }
+        // Get environment IDs from template variables (if any environment type variables are selected)
+        const environmentIds = this.templateVariablesForm?.getEnvironmentIdsForVariables() || new Map();
         const stepData = {
             template: this.selectedTemplate,
             metadata: this.metadata,
             description: this.description,
-            templateVariables: this.templateVariables
+            templateVariables: this.templateVariables,
+            environmentIds: environmentIds // Map of variable name to environment ID
         };
         console.log("stepData", stepData);
         console.log("variablesForm", this.variablesForm.value);
+        console.log("environmentIds", environmentIds);
         this.createStep.emit(stepData);
     }
     toggleAdvanced() {
@@ -27097,12 +28197,44 @@ class StepBuilderActionComponent {
             this.updatedHtmlGrammar = updatedHtml;
         }
     }
+    /**
+     * Check if selector variable is available in templateVariables
+     */
+    get selectorVariableAvailable() {
+        return this.templateVariables.some(v => v.dataKey === 'element' || v.dataKey === 'label');
+    }
+    /**
+     * Check if parameter variable is available (testData with parameter type)
+     */
+    get parameterVariableAvailable() {
+        return this.templateVariables.some(v => {
+            const dataKey = v.dataKey?.toLowerCase() || '';
+            if (dataKey === 'test_data' || dataKey === 'source_value' || dataKey === 'target_value') {
+                // const dataType = this.variableDataTypes.get(v.name) || 'plain-text';
+                return true;
+            }
+            return false;
+        });
+    }
+    /**
+     * Check if environment variable is available (testData with environment type)
+     */
+    get environmentVariableAvailable() {
+        return this.templateVariables.some(v => {
+            const dataKey = v.dataKey?.toLowerCase() || '';
+            if (dataKey === 'test_data' || dataKey === 'source_value' || dataKey === 'target_value') {
+                // const dataType = this.variableDataTypes.get(v.name) || 'plain-text';
+                return true;
+            }
+            return false;
+        });
+    }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", createStep: "createStep", cancelled: "cancelled" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", 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': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\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; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\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          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!isElementFormVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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        [disabled]=\"!isFormValid()\"\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: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "cancelElementForm", "elementFormVisibilityChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \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; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\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          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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        [disabled]=\"!isFormValid()\"\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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\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; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\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          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!isElementFormVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \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; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\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-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"text\" \n          size=\"sm\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\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 cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (createElement)=\"createElement.emit($event)\"\n            (searchScreenName)=\"searchScreenName.emit($event)\"\n            (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n            (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n            (searchParameters)=\"searchParameters.emit($event)\"\n            (loadMoreParameters)=\"loadMoreParameters.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\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          </div>\n        </div> -->\n        <div>\n          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\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        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -27125,6 +28257,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], parameterOptions: [{
+                type: Input
+            }], hasMoreParameters: [{
+                type: Input
+            }], isLoadingParameters: [{
+                type: Input
+            }], environmentOptions: [{
+                type: Input
+            }], hasMoreEnvironments: [{
+                type: Input
+            }], isLoadingEnvironments: [{
+                type: Input
+            }], defaultTestDataProfileId: [{
+                type: Input
+            }], defaultTestDataStartIndex: [{
+                type: Input
             }], templateChanged: [{
                 type: Output
             }], loadMoreElements: [{
@@ -27139,10 +28287,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], createScreenNameRequest: [{
                 type: Output
+            }], searchParameters: [{
+                type: Output
+            }], loadMoreParameters: [{
+                type: Output
+            }], searchEnvironments: [{
+                type: Output
+            }], loadMoreEnvironments: [{
+                type: Output
             }], createStep: [{
                 type: Output
             }], cancelled: [{
                 type: Output
+            }], redirectToParameter: [{
+                type: Output
+            }], redirectToEnvironment: [{
+                type: Output
+            }], templateVariablesForm: [{
+                type: ViewChild,
+                args: [TemplateVariablesFormComponent, { static: false }]
             }] } });
 
 class StepBuilderLoopComponent {
@@ -27183,6 +28346,14 @@ class StepBuilderLoopComponent {
         this.screenNameOptions = [];
         this.hasMoreScreenNames = false;
         this.isLoadingScreenNames = false;
+        // Parameter fetching properties
+        this.parameterOptions = []; // TestData[] - raw test data profiles
+        this.hasMoreParameters = false;
+        this.isLoadingParameters = false;
+        // Environment fetching properties
+        this.environmentOptions = [];
+        this.hasMoreEnvironments = false;
+        this.isLoadingEnvironments = false;
         this.loadMoreElements = new EventEmitter();
         this.searchElements = new EventEmitter();
         this.createElement = new EventEmitter();
@@ -27190,6 +28361,12 @@ class StepBuilderLoopComponent {
         this.loadMoreScreenNames = new EventEmitter();
         this.createScreenNameRequest = new EventEmitter();
         this.cancelElementForm = new EventEmitter();
+        this.searchParameters = new EventEmitter();
+        this.loadMoreParameters = new EventEmitter();
+        this.searchEnvironments = new EventEmitter();
+        this.loadMoreEnvironments = new EventEmitter();
+        this.redirectToParameter = new EventEmitter();
+        this.redirectToEnvironment = new EventEmitter();
         this.selectedWhileTemplate = null;
         this.selectedLoopType = 'for';
         // Internal state for managing loop indices
@@ -27533,10 +28710,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm" }, 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 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      [disabled]=\"!isFormValid()\"\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", "addCustomValue"] }, { 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "createStep", "cancelled"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 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      [disabled]=\"!isFormValid()\"\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", "addCustomValue"] }, { 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "searchPlaceholder", "setTemplateVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-loop', 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 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      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-loop', 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 Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (createElement)=\"createElement.emit($event)\"\n      (searchScreenName)=\"searchScreenName.emit($event)\"\n      (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n      (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n      (searchParameters)=\"searchParameters.emit($event)\"\n      (loadMoreParameters)=\"loadMoreParameters.emit()\"\n      (searchEnvironments)=\"searchEnvironments.emit($event)\"\n      (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 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      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return []; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{
@@ -27577,6 +28754,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], parameterOptions: [{
+                type: Input
+            }], hasMoreParameters: [{
+                type: Input
+            }], isLoadingParameters: [{
+                type: Input
+            }], environmentOptions: [{
+                type: Input
+            }], hasMoreEnvironments: [{
+                type: Input
+            }], isLoadingEnvironments: [{
+                type: Input
+            }], defaultTestDataProfileId: [{
+                type: Input
+            }], defaultTestDataStartIndex: [{
+                type: Input
             }], loadMoreElements: [{
                 type: Output
             }], searchElements: [{
@@ -27591,6 +28784,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], cancelElementForm: [{
                 type: Output
+            }], searchParameters: [{
+                type: Output
+            }], loadMoreParameters: [{
+                type: Output
+            }], searchEnvironments: [{
+                type: Output
+            }], loadMoreEnvironments: [{
+                type: Output
+            }], redirectToParameter: [{
+                type: Output
+            }], redirectToEnvironment: [{
+                type: Output
             }] } });
 
 class StepBuilderConditionComponent {
@@ -27619,6 +28824,14 @@ class StepBuilderConditionComponent {
         this.hasMoreScreenNames = false;
         /** True while parent is loading screen names (search or load more) */
         this.isLoadingScreenNames = false;
+        /** Parameter fetching properties */
+        this.parameterOptions = []; // TestData[] - raw test data profiles
+        this.hasMoreParameters = false;
+        this.isLoadingParameters = false;
+        /** Environment fetching properties */
+        this.environmentOptions = [];
+        this.hasMoreEnvironments = false;
+        this.isLoadingEnvironments = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -27629,6 +28842,12 @@ class StepBuilderConditionComponent {
         this.searchScreenName = new EventEmitter(); // Emit when user searches screen names
         this.loadMoreScreenNames = new EventEmitter(); // Emit when user scrolls to load more screen names
         this.createScreenNameRequest = new EventEmitter(); // Emit when user requests to create a new screen name
+        this.searchParameters = new EventEmitter(); // Emit when user searches for parameters
+        this.loadMoreParameters = new EventEmitter(); // Emit when user scrolls to load more parameters
+        this.searchEnvironments = new EventEmitter(); // Emit when user searches for environments
+        this.loadMoreEnvironments = new EventEmitter(); // Emit when user scrolls to load more environments
+        this.redirectToParameter = new EventEmitter();
+        this.redirectToEnvironment = new EventEmitter();
         this.includeElse = false;
         // Cache for value configs to avoid recreating on every change detection
         this.valueConfigCache = null;
@@ -28114,10 +29333,10 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], 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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest" }, 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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getConditionUpdatedHtmlGrammar(i) || getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n              </cqa-template-variables-form>\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      [disabled]=\"!conditionForm.valid\"\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", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, 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      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\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      [disabled]=\"!conditionForm.valid\"\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", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i5$1.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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' }, changeDetection: ChangeDetectionStrategy.OnPush, 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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getConditionUpdatedHtmlGrammar(i) || getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n              </cqa-template-variables-form>\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      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, 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      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\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; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\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                {{ getConditionLabel(i) }}\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)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\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-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (createElement)=\"createElement.emit($event)\"\n                (searchScreenName)=\"searchScreenName.emit($event)\"\n                (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n                (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\"\n                (searchParameters)=\"searchParameters.emit($event)\"\n                (loadMoreParameters)=\"loadMoreParameters.emit()\"\n                (searchEnvironments)=\"searchEnvironments.emit($event)\"\n                (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\">\n              </cqa-template-variables-form>\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      [disabled]=\"!conditionForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
                 type: Input
             }], conditionTemplates: [{
@@ -28136,6 +29355,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingScreenNames: [{
                 type: Input
+            }], parameterOptions: [{
+                type: Input
+            }], hasMoreParameters: [{
+                type: Input
+            }], isLoadingParameters: [{
+                type: Input
+            }], environmentOptions: [{
+                type: Input
+            }], hasMoreEnvironments: [{
+                type: Input
+            }], isLoadingEnvironments: [{
+                type: Input
+            }], defaultTestDataProfileId: [{
+                type: Input
+            }], defaultTestDataStartIndex: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -28152,6 +29387,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], createScreenNameRequest: [{
                 type: Output
+            }], searchParameters: [{
+                type: Output
+            }], loadMoreParameters: [{
+                type: Output
+            }], searchEnvironments: [{
+                type: Output
+            }], loadMoreEnvironments: [{
+                type: Output
+            }], redirectToParameter: [{
+                type: Output
+            }], redirectToEnvironment: [{
+                type: Output
             }] } });
 
 class StepBuilderDatabaseComponent {