npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.277 → 1.1.279 - Mend

@cqa-lib/cqa-ui 1.1.277 → 1.1.279

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

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

@@ -21,7 +21,7 @@ import * as i3$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4$2 from '@angular/material/slide-toggle';
+import * as i3$4 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i3$3 from '@angular/material/progress-spinner';
@@ -30,7 +30,7 @@ import * as i5 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
-import * as i9$1 from '@angular/material/table';
+import * as i9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import * as i15 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
@@ -46,7 +46,7 @@ import * as i1$2 from '@angular/platform-browser';
 import * as jquery from 'jquery';
 import * as momentImport from 'moment';
 import 'daterangepicker';
-import * as i9 from 'ngx-drag-drop';
+import * as i6 from 'ngx-drag-drop';
 import { DndModule } from 'ngx-drag-drop';
 import { filter } from 'rxjs/operators';
 import { Subject, BehaviorSubject } from 'rxjs';
@@ -5232,7 +5232,7 @@ 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", 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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i9.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', 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: [] }]
@@ -14914,7 +14914,7 @@ class ReviewRecordedStepsModalComponent {
     }
 }
 ReviewRecordedStepsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ReviewRecordedStepsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ReviewRecordedStepsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ReviewRecordedStepsModalComponent, selector: "cqa-review-recorded-steps-modal", inputs: { isOpen: "isOpen", title: "title", steps: "steps", saveOption: "saveOption", saveButtonDisabled: "saveButtonDisabled" }, outputs: { closeModal: "closeModal", discard: "discard", save: "save", saveOptionChange: "saveOptionChange", stepLabelChange: "stepLabelChange", removeStep: "removeStep", reorderSteps: "reorderSteps" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"cqa-review-recorded-steps-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"review-recorded-steps-title\"\n  aria-describedby=\"review-recorded-steps-content\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-[#FBFCFF] cqa-border cqa-border-[#E5E5E5] cqa-w-full cqa-max-w-[499px] cqa-max-h-[90vh] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-shadow-[0_4px_6px_-1px_#00000040,0_2px_4px_-2px_#00000040]\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-4 cqa-pb-4\" style=\"border-bottom: 1px solid #E5E7EB\">\n      <h2\n        id=\"review-recorded-steps-title\"\n        class=\"cqa-text-[16px] cqa-font-semibold cqa-leading-7 cqa-text-gray-800 cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"review-recorded-steps-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-5\">\n\n      <!-- Alert: Recording Finished -->\n      <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#EFF6FF] cqa-border cqa-border-[#DBEAFE] cqa-rounded-lg\">\n        <mat-icon fontSet=\"material-symbols-outlined\" class=\"cqa-flex-shrink-0 cqa-w-6 cqa-h-5 cqa-text-[#1E40AF] cqa-text-xl\" aria-hidden=\"true\">videocam</mat-icon>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n          <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#1E40AF]\">Recording Finished</span>\n          <p class=\"cqa-text-xs cqa-font-normal cqa-text-[#1E40AF] cqa-m-0\">\n            Review the steps captured below before adding them to your test. You can rename, delete, or reorder them.\n          </p>\n        </div>\n      </div>\n\n      <!-- Recorded steps list -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0\" aria-labelledby=\"recorded-steps-heading\">\n        <h3 id=\"recorded-steps-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0 cqa-sr-only\">Recorded steps</h3>\n        <div\n          class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[240px] cqa-overflow-y-auto cqa-min-h-0\"\n          [dndDropzone]=\"['recorded-step']\"\n          dndEffectAllowed=\"move\"\n          dndDragoverClass=\"cqa-opacity-70\"\n          (dndDrop)=\"onDndDrop($event)\">\n          <div dndPlaceholderRef class=\"cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-[#E5E7EB] cqa-p-2 cqa-min-h-[44px] cqa-bg-[#F3F4F6]\"></div>\n          <div\n            *ngFor=\"let step of steps; let i = index; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-lg cqa-p-2 cqa-bg-[#F9FAFB] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\"\n            [dndDraggable]=\"step\"\n            [dndDisableIf]=\"steps.length <= 1\"\n            dndEffectAllowed=\"move\"\n            dndType=\"recorded-step\">\n            <span dndHandle class=\"cqa-flex-shrink-0 cqa-text-[#9CA3AF] cqa-cursor-grab cqa-p-1 active:cqa-cursor-grabbing\" aria-hidden=\"true\" title=\"Drag to reorder\">\n              <mat-icon class=\"cqa-w-5 cqa-h-5 cqa-text-[20px] cqa-block cqa-leading-none\">drag_indicator</mat-icon>\n            </span>\n            <span class=\"cqa-flex-shrink-0 cqa-text-[12px] cqa-text-[#9CA3AF]\">{{ i + 1 }}</span>\n            <span class=\"cqa-flex-1 cqa-min-w-0 cqa-text-sm cqa-font-normal cqa-text-gray-800 cqa-truncate\">{{ step.label || 'Step' }}</span>\n            <!-- <cqa-custom-input\n              [value]=\"step.label\"\n              [placeholder]=\"'Step name'\"\n              [fullWidth]=\"true\"\n              size=\"md\"\n              (valueChange)=\"onStepLabelChange(step.id, $event)\">\n            </cqa-custom-input>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step'\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step.id, $event)\">\n            </cqa-button> -->\n          </div>\n        </div>\n      </section>\n\n      <!-- Save option -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-lg cqa-p-4\" aria-labelledby=\"save-option-heading\">\n        <h3 id=\"save-option-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0\">Save option</h3>\n        <mat-radio-group\n          [value]=\"saveOption\"\n          (change)=\"onSaveOptionChange($any($event).value)\"\n          class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"run_only\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save for this run only</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be reverted after this debug session</span>\n          </label>\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"test_case\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save to test case</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be permanently saved</span>\n          </label>\n        </mat-radio-group>\n      </section>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-border-t cqa-border-gray-200 cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-w-full\">\n      <cqa-button\n        type=\"button\"\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        [text]=\"'Discard'\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-white cqa-border cqa-border-[#414146] cqa-text-[#414146] cqa-rounded-lg hover:cqa-bg-gray-50\"\n        (clicked)=\"onDiscard()\">\n      </cqa-button>\n      <cqa-button\n        type=\"button\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"'Save'\"\n        [disabled]=\"saveButtonDisabled\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-[#4F46E5] cqa-border-[#4F46E5] cqa-text-white cqa-rounded-lg\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ 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: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i9.DndHandleDirective, selector: "[dndHandle]" }, { type: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }] });
+ReviewRecordedStepsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ReviewRecordedStepsModalComponent, selector: "cqa-review-recorded-steps-modal", inputs: { isOpen: "isOpen", title: "title", steps: "steps", saveOption: "saveOption", saveButtonDisabled: "saveButtonDisabled" }, outputs: { closeModal: "closeModal", discard: "discard", save: "save", saveOptionChange: "saveOptionChange", stepLabelChange: "stepLabelChange", removeStep: "removeStep", reorderSteps: "reorderSteps" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"cqa-review-recorded-steps-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"review-recorded-steps-title\"\n  aria-describedby=\"review-recorded-steps-content\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-[#FBFCFF] cqa-border cqa-border-[#E5E5E5] cqa-w-full cqa-max-w-[499px] cqa-max-h-[90vh] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-shadow-[0_4px_6px_-1px_#00000040,0_2px_4px_-2px_#00000040]\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-4 cqa-pb-4\" style=\"border-bottom: 1px solid #E5E7EB\">\n      <h2\n        id=\"review-recorded-steps-title\"\n        class=\"cqa-text-[16px] cqa-font-semibold cqa-leading-7 cqa-text-gray-800 cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"review-recorded-steps-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-5\">\n\n      <!-- Alert: Recording Finished -->\n      <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#EFF6FF] cqa-border cqa-border-[#DBEAFE] cqa-rounded-lg\">\n        <mat-icon fontSet=\"material-symbols-outlined\" class=\"cqa-flex-shrink-0 cqa-w-6 cqa-h-5 cqa-text-[#1E40AF] cqa-text-xl\" aria-hidden=\"true\">videocam</mat-icon>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n          <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#1E40AF]\">Recording Finished</span>\n          <p class=\"cqa-text-xs cqa-font-normal cqa-text-[#1E40AF] cqa-m-0\">\n            Review the steps captured below before adding them to your test. You can rename, delete, or reorder them.\n          </p>\n        </div>\n      </div>\n\n      <!-- Recorded steps list -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0\" aria-labelledby=\"recorded-steps-heading\">\n        <h3 id=\"recorded-steps-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0 cqa-sr-only\">Recorded steps</h3>\n        <div\n          class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[240px] cqa-overflow-y-auto cqa-min-h-0\"\n          [dndDropzone]=\"['recorded-step']\"\n          dndEffectAllowed=\"move\"\n          dndDragoverClass=\"cqa-opacity-70\"\n          (dndDrop)=\"onDndDrop($event)\">\n          <div dndPlaceholderRef class=\"cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-[#E5E7EB] cqa-p-2 cqa-min-h-[44px] cqa-bg-[#F3F4F6]\"></div>\n          <div\n            *ngFor=\"let step of steps; let i = index; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-lg cqa-p-2 cqa-bg-[#F9FAFB] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\"\n            [dndDraggable]=\"step\"\n            [dndDisableIf]=\"steps.length <= 1\"\n            dndEffectAllowed=\"move\"\n            dndType=\"recorded-step\">\n            <span dndHandle class=\"cqa-flex-shrink-0 cqa-text-[#9CA3AF] cqa-cursor-grab cqa-p-1 active:cqa-cursor-grabbing\" aria-hidden=\"true\" title=\"Drag to reorder\">\n              <mat-icon class=\"cqa-w-5 cqa-h-5 cqa-text-[20px] cqa-block cqa-leading-none\">drag_indicator</mat-icon>\n            </span>\n            <span class=\"cqa-flex-shrink-0 cqa-text-[12px] cqa-text-[#9CA3AF]\">{{ i + 1 }}</span>\n            <span class=\"cqa-flex-1 cqa-min-w-0 cqa-text-sm cqa-font-normal cqa-text-gray-800 cqa-truncate\">{{ step.label || 'Step' }}</span>\n            <!-- <cqa-custom-input\n              [value]=\"step.label\"\n              [placeholder]=\"'Step name'\"\n              [fullWidth]=\"true\"\n              size=\"md\"\n              (valueChange)=\"onStepLabelChange(step.id, $event)\">\n            </cqa-custom-input>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step'\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step.id, $event)\">\n            </cqa-button> -->\n          </div>\n        </div>\n      </section>\n\n      <!-- Save option -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-lg cqa-p-4\" aria-labelledby=\"save-option-heading\">\n        <h3 id=\"save-option-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0\">Save option</h3>\n        <mat-radio-group\n          [value]=\"saveOption\"\n          (change)=\"onSaveOptionChange($any($event).value)\"\n          class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"run_only\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save for this run only</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be reverted after this debug session</span>\n          </label>\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"test_case\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save to test case</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be permanently saved</span>\n          </label>\n        </mat-radio-group>\n      </section>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-border-t cqa-border-gray-200 cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-w-full\">\n      <cqa-button\n        type=\"button\"\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        [text]=\"'Discard'\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-white cqa-border cqa-border-[#414146] cqa-text-[#414146] cqa-rounded-lg hover:cqa-bg-gray-50\"\n        (clicked)=\"onDiscard()\">\n      </cqa-button>\n      <cqa-button\n        type=\"button\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"'Save'\"\n        [disabled]=\"saveButtonDisabled\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-[#4F46E5] cqa-border-[#4F46E5] cqa-text-white cqa-rounded-lg\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", components: [{ 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: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ReviewRecordedStepsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-review-recorded-steps-modal', host: { class: 'cqa-ui-root' }, template: "<div\n  *ngIf=\"isOpen\"\n  class=\"cqa-review-recorded-steps-backdrop cqa-fixed cqa-inset-0 cqa-bg-black cqa-bg-opacity-50 cqa-z-50 cqa-flex cqa-items-center cqa-justify-center cqa-p-4\"\n  (click)=\"onBackdropClick($event)\"\n  role=\"dialog\"\n  aria-modal=\"true\"\n  aria-labelledby=\"review-recorded-steps-title\"\n  aria-describedby=\"review-recorded-steps-content\">\n  <div\n    class=\"cqa-rounded-xl cqa-bg-[#FBFCFF] cqa-border cqa-border-[#E5E5E5] cqa-w-full cqa-max-w-[499px] cqa-max-h-[90vh] cqa-overflow-hidden cqa-flex cqa-flex-col cqa-shadow-[0_4px_6px_-1px_#00000040,0_2px_4px_-2px_#00000040]\"\n    (click)=\"$event.stopPropagation()\">\n\n    <!-- Header -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-px-6 cqa-pt-4 cqa-pb-4\" style=\"border-bottom: 1px solid #E5E7EB\">\n      <h2\n        id=\"review-recorded-steps-title\"\n        class=\"cqa-text-[16px] cqa-font-semibold cqa-leading-7 cqa-text-gray-800 cqa-m-0\">\n        {{ title }}\n      </h2>\n      <cqa-button\n        type=\"button\"\n        variant=\"text\"\n        btnSize=\"md\"\n        icon=\"close\"\n        iconColor=\"#4A5565\"\n        [tooltip]=\"'Close'\"\n        tooltipPosition=\"below\"\n        customClass=\"!cqa-min-w-0 cqa-p-1\"\n        (clicked)=\"onClose()\">\n      </cqa-button>\n    </div>\n\n    <!-- Content -->\n    <div id=\"review-recorded-steps-content\" class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-6 cqa-py-4 cqa-flex cqa-flex-col cqa-gap-5\">\n\n      <!-- Alert: Recording Finished -->\n      <div class=\"cqa-flex cqa-items-start cqa-gap-3 cqa-px-4 cqa-py-3 cqa-bg-[#EFF6FF] cqa-border cqa-border-[#DBEAFE] cqa-rounded-lg\">\n        <mat-icon fontSet=\"material-symbols-outlined\" class=\"cqa-flex-shrink-0 cqa-w-6 cqa-h-5 cqa-text-[#1E40AF] cqa-text-xl\" aria-hidden=\"true\">videocam</mat-icon>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-min-w-0\">\n          <span class=\"cqa-text-sm cqa-font-semibold cqa-text-[#1E40AF]\">Recording Finished</span>\n          <p class=\"cqa-text-xs cqa-font-normal cqa-text-[#1E40AF] cqa-m-0\">\n            Review the steps captured below before adding them to your test. You can rename, delete, or reorder them.\n          </p>\n        </div>\n      </div>\n\n      <!-- Recorded steps list -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-min-h-0\" aria-labelledby=\"recorded-steps-heading\">\n        <h3 id=\"recorded-steps-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0 cqa-sr-only\">Recorded steps</h3>\n        <div\n          class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-max-h-[240px] cqa-overflow-y-auto cqa-min-h-0\"\n          [dndDropzone]=\"['recorded-step']\"\n          dndEffectAllowed=\"move\"\n          dndDragoverClass=\"cqa-opacity-70\"\n          (dndDrop)=\"onDndDrop($event)\">\n          <div dndPlaceholderRef class=\"cqa-rounded-lg cqa-border cqa-border-dashed cqa-border-[#E5E7EB] cqa-p-2 cqa-min-h-[44px] cqa-bg-[#F3F4F6]\"></div>\n          <div\n            *ngFor=\"let step of steps; let i = index; trackBy: trackByStepId\"\n            class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-rounded-lg cqa-p-2 cqa-bg-[#F9FAFB] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\"\n            [dndDraggable]=\"step\"\n            [dndDisableIf]=\"steps.length <= 1\"\n            dndEffectAllowed=\"move\"\n            dndType=\"recorded-step\">\n            <span dndHandle class=\"cqa-flex-shrink-0 cqa-text-[#9CA3AF] cqa-cursor-grab cqa-p-1 active:cqa-cursor-grabbing\" aria-hidden=\"true\" title=\"Drag to reorder\">\n              <mat-icon class=\"cqa-w-5 cqa-h-5 cqa-text-[20px] cqa-block cqa-leading-none\">drag_indicator</mat-icon>\n            </span>\n            <span class=\"cqa-flex-shrink-0 cqa-text-[12px] cqa-text-[#9CA3AF]\">{{ i + 1 }}</span>\n            <span class=\"cqa-flex-1 cqa-min-w-0 cqa-text-sm cqa-font-normal cqa-text-gray-800 cqa-truncate\">{{ step.label || 'Step' }}</span>\n            <!-- <cqa-custom-input\n              [value]=\"step.label\"\n              [placeholder]=\"'Step name'\"\n              [fullWidth]=\"true\"\n              size=\"md\"\n              (valueChange)=\"onStepLabelChange(step.id, $event)\">\n            </cqa-custom-input>\n            <cqa-button\n              type=\"button\"\n              variant=\"text\"\n              btnSize=\"md\"\n              icon=\"delete_outline\"\n              iconColor=\"#99999E\"\n              [tooltip]=\"'Remove step'\"\n              tooltipPosition=\"below\"\n              customClass=\"cqa-shrink-0\"\n              (clicked)=\"onRemoveStep(step.id, $event)\">\n            </cqa-button> -->\n          </div>\n        </div>\n      </section>\n\n      <!-- Save option -->\n      <section class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-rounded-lg cqa-p-4\" aria-labelledby=\"save-option-heading\">\n        <h3 id=\"save-option-heading\" class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900 cqa-m-0\">Save option</h3>\n        <mat-radio-group\n          [value]=\"saveOption\"\n          (change)=\"onSaveOptionChange($any($event).value)\"\n          class=\"cqa-flex cqa-flex-col cqa-gap-4\">\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"run_only\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save for this run only</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be reverted after this debug session</span>\n          </label>\n          <label class=\"cqa-flex cqa-flex-col cqa-gap-1 cqa-cursor-pointer\">\n            <span class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <mat-radio-button value=\"test_case\" color=\"primary\"></mat-radio-button>\n              <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Save to test case</span>\n            </span>\n            <span class=\"cqa-text-sm cqa-font-normal cqa-text-gray-500 cqa-pl-6\">Changes will be permanently saved</span>\n          </label>\n        </mat-radio-group>\n      </section>\n    </div>\n\n    <!-- Footer -->\n    <div class=\"cqa-px-6 cqa-pb-6 cqa-border-t cqa-border-gray-200 cqa-grid cqa-grid-cols-2 cqa-gap-3 cqa-w-full\">\n      <cqa-button\n        type=\"button\"\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        [text]=\"'Discard'\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-white cqa-border cqa-border-[#414146] cqa-text-[#414146] cqa-rounded-lg hover:cqa-bg-gray-50\"\n        (clicked)=\"onDiscard()\">\n      </cqa-button>\n      <cqa-button\n        type=\"button\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"'Save'\"\n        [disabled]=\"saveButtonDisabled\"\n        [fullWidth]=\"true\"\n        customClass=\"cqa-w-full cqa-bg-[#4F46E5] cqa-border-[#4F46E5] cqa-text-white cqa-rounded-lg\"\n        (clicked)=\"onSave()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n", styles: [] }]
@@ -22768,6 +22768,18 @@ class TestCaseLoopStepComponent {
         }
         return withWhile;
     }
+    /** Event key-value pairs for display (e.g. selector, element) - same as condition step getBranchEventDetailsForDisplay */
+    getLoopEventDetailsForDisplay() {
+        const event = this.config?.event;
+        if (!event || typeof event !== 'object')
+            return [];
+        return Object.entries(event)
+            .filter(([key]) => key !== 'customEvent')
+            .map(([key, value]) => ({
+            key,
+            value: value != null ? String(value) : ''
+        }));
+    }
     onToggleExpanded() {
         this.expanded = !this.expanded;
         this.toggleExpanded.emit({ config: this.config, expanded: this.expanded });
@@ -23105,13 +23117,13 @@ class TestCaseLoopStepComponent {
 /** Default max for Loop Start / End when no profile selected (options 1..10) */
 TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
 TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables (shown when template is selected, same as condition-step) -->\n          <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of templateVariables\">\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n                  <mat-slide-toggle\n                    [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select\n                      [form]=\"templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [placeholder]=\"'Enter ' + variable.label\"\n                      [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      [fullWidth]=\"true\"\n                      (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display (same styling as condition step, HTML badges via innerHTML) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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: 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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display (same styling as condition step, HTML badges via innerHTML) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [
                         STEP_ROW_ACTIONS_STYLES,
                         LOOP_STEP_EMPTY_STYLES,
-                    ], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables (shown when template is selected, same as condition-step) -->\n          <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of templateVariables\">\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">{{ variable.label }}</label>\n                  <mat-slide-toggle\n                    [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select\n                      [form]=\"templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [placeholder]=\"'Enter ' + variable.label\"\n                      [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      [fullWidth]=\"true\"\n                      (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display (same styling as condition step, HTML badges via innerHTML) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display (same styling as condition step, HTML badges via innerHTML) -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n      <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n        </span>\n      </ng-container>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n      <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- Empty loop: show plus icon on hover when expanded and no steps -->\n    <div *ngIf=\"nestedSteps.length === 0\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -23210,14 +23222,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 const CONDITION_BRANCH_EMPTY_STYLES = `
-  /* Empty IF / ELSE IF / ELSE: show plus icon on branch row hover (same as loop step) */
+  /* Empty IF / ELSE IF / ELSE: always show plus icon when no steps (visible without hover) */
   .condition-branch-empty {
-    opacity: 0;
+    opacity: 1;
     transition: opacity 0.1s ease;
   }
-  .condition-branch-row:hover .condition-branch-empty {
-    opacity: 1; /* Show plus icon on branch row hover */
-  }
   /* Show edit/delete icons when hovering over branch row header (IF TRUE, ELSE IF, ELSE) */
   .condition-branch-row:hover .step-actions {
     opacity: 1;
@@ -23748,6 +23757,18 @@ class TestCaseConditionStepComponent {
             value: value != null ? String(value) : ''
         }));
     }
+    /** Event key-value pairs for a branch (e.g. selector, element) - for IF uses config.event, for ELSE IF/ELSE uses branch.event */
+    getBranchEventDetailsForDisplay(branch) {
+        const event = branch.event ?? (branch.type === 'if' ? this.config?.event : undefined);
+        if (!event || typeof event !== 'object')
+            return [];
+        return Object.entries(event)
+            .filter(([key]) => key !== 'customEvent')
+            .map(([key, value]) => ({
+            key,
+            value: value != null ? String(value) : ''
+        }));
+    }
     onToggleExpanded() {
         this.expanded = !this.expanded;
         this.toggleExpanded.emit({ config: this.config, expanded: this.expanded });
@@ -24128,13 +24149,13 @@ class TestCaseConditionStepComponent {
     }
 }
 TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- Condition Input and event key-value details (exclude customEvent) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n        <span *ngIf=\"condition\" [innerHTML]=\"condition\" (click)=\"onConditionActionClick($event)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-flex-wrap\">\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ config.createdDate | date:'d MMM yyyy' }}\n        </span>\n        <!-- Copy button (show on step row hover) -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Copy\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, condition, Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        </div>\n        <!-- Edit on first branch (IF TRUE) and ELSE IF; Delete on first = whole step, on ELSE IF/ELSE = that branch only -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch: END IF, END ELSE IF, or END ELSE -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty,.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- Condition Input and event key-value details (exclude customEvent) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n        <span *ngIf=\"condition\" [innerHTML]=\"condition\" (click)=\"onConditionActionClick($event)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-flex-wrap\">\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ config.createdDate | date:'d MMM yyyy' }}\n        </span>\n        <!-- Copy button (show on step row hover) -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Copy\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, condition, Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Edit on first branch (IF TRUE) and ELSE IF; Delete on first = whole step, on ELSE IF/ELSE = that branch only -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch: END IF, END ELSE IF, or END ELSE -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "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: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
                         STEP_ROW_ACTIONS_STYLES,
                         CONDITION_BRANCH_EMPTY_STYLES,
-                    ], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- Condition Input and event key-value details (exclude customEvent) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n        <span *ngIf=\"condition\" [innerHTML]=\"condition\" (click)=\"onConditionActionClick($event)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-flex-wrap\">\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ config.createdDate | date:'d MMM yyyy' }}\n        </span>\n        <!-- Copy button (show on step row hover) -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Copy\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, condition, Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        </div>\n        <!-- Edit on first branch (IF TRUE) and ELSE IF; Delete on first = whole step, on ELSE IF/ELSE = that branch only -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch: END IF, END ELSE IF, or END ELSE -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
+                    ], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- Condition Input and event key-value details (exclude customEvent) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n        <span *ngIf=\"condition\" [innerHTML]=\"condition\" (click)=\"onConditionActionClick($event)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n        <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto cqa-flex-wrap\">\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ config.createdDate | date:'d MMM yyyy' }}\n        </span>\n        <!-- Copy button (show on step row hover) -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Copy\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n          </button>\n        </div>\n      </div>\n    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, condition, Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span *ngIf=\"getBranchConditionDisplay(branch)\" [innerHTML]=\"getBranchConditionDisplay(branch)\" (click)=\"onConditionActionClick($event, branch)\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Edit on first branch (IF TRUE) and ELSE IF; Delete on first = whole step, on ELSE IF/ELSE = that branch only -->\n        <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px] cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n      <div *ngIf=\"branch.nestedSteps.length === 0\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch: END IF, END ELSE IF, or END ELSE -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -24530,7 +24551,7 @@ class TestCaseStepGroupComponent {
 /** Max length for start/end step number in summary; beyond this use local indices (1 to count). */
 TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH = 20;
 TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" [class]=\"'cqa-flex cqa-flex-col ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10' : 'cqa-pl-10')\">\n    <!-- START GROUP Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">START GROUP</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n    </div>\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">END GROUP</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" [class]=\"'cqa-flex cqa-flex-col ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10' : 'cqa-pl-10')\">\n    <!-- START GROUP Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">START GROUP</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n    </div>\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">END GROUP</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" [class]=\"'cqa-flex cqa-flex-col ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10' : 'cqa-pl-10')\">\n    <!-- START GROUP Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">START GROUP</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n    </div>\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered with decorative lines) -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-px-8 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase cqa-whitespace-nowrap\">END GROUP</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-60\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n  </div>\n</div>" }]
@@ -26226,7 +26247,7 @@ class AdvancedVariablesFormComponent {
     }
 }
 AdvancedVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AdvancedVariablesFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, 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 advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div *ngIf=\"formArray.length > 1\" class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", components: [{ type: i4$2.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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AdvancedVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: { advancedVariables: "advancedVariables", advancedVariableForm: "advancedVariableForm" }, outputs: { variableBooleanChange: "variableBooleanChange", variableValueChange: "variableValueChange" }, 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 advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div *ngIf=\"formArray.length > 1\" class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", components: [{ type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.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: AdvancedVariablesFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-advanced-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 advanced-variables-form cqa-mb-4\">\n  <ng-container *ngFor=\"let variable of advancedVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"isBooleanType(variable)\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: 100%\">\n        <mat-slide-toggle \n          [checked]=\"getBooleanValue(variable, i)\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" \n          color=\"primary\">\n        </mat-slide-toggle>\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label }}\n        </label>\n      </div>\n    </ng-container>\n\n    <!-- str_list variables with dynamic list -->\n    <ng-container *ngIf=\"isStrListType(variable)\">\n      <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label }}\n        </label>\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n          <ng-container *ngIf=\"getStrListFormArray(variable, i) as formArray\">\n            <div *ngFor=\"let control of formArray.controls; let itemIndex = index; trackBy: trackByControl\" class=\"cqa-flex cqa-gap-2 cqa-items-center\">\n              <cqa-custom-input \n                [placeholder]=\"'Enter locator'\" \n                [value]=\"control.value\" \n                [fullWidth]=\"true\"\n                (valueChange)=\"onStrListItemChange(variable, i, itemIndex, $event)\">\n              </cqa-custom-input>\n              <div *ngIf=\"formArray.length > 1\" class=\"cqa-cursor-pointer cqa-text-red-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"removeStrListItem(variable, i, itemIndex)\">\n                <mat-icon style=\"font-size: 24px;\">delete</mat-icon>\n              </div>\n              <div *ngIf=\"itemIndex === formArray.length - 1\" class=\"cqa-cursor-pointer cqa-text-blue-600 cqa-flex cqa-items-center cqa-justify-center\" (click)=\"addStrListItem(variable, i)\">\n                <mat-icon style=\"font-size: 24px;\">add</mat-icon>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n    </ng-container>\n  </ng-container>\n</div>\n\n", styles: [] }]
@@ -30421,7 +30442,7 @@ class TemplateVariablesFormComponent {
     }
 }
 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", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", 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<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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: i4$2.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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", isEditInDepth: "isEditInDepth", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", 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<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label }} Screen Name\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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-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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\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"] }]
@@ -32532,7 +32553,7 @@ 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", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", 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", searchElementsByScreenName: "searchElementsByScreenName", 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                (searchElementsByScreenName)=\"searchElementsByScreenName.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              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i4$2.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", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", 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", searchElementsByScreenName: "searchElementsByScreenName", 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                (searchElementsByScreenName)=\"searchElementsByScreenName.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              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchEnvironments", "loadMoreEnvironments", "cancelElementForm", "elementFormVisibilityChange"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i2.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      <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                (searchElementsByScreenName)=\"searchElementsByScreenName.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              \n              <!-- Advanced Settings Variables Form -->\n              <div *ngIf=\"getConditionAdvancedSettingsVariables(i).length > 0\" class=\"cqa-mt-4\">\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)=\"toggleConditionAdvanced(i)\">\n                    <span class=\"cqa-text-[10px]\">Advanced</span>\n                    <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"getConditionAdvancedExpanded(i)\">\n                      expand_more\n                    </mat-icon>\n                  </button>\n                  <div *ngIf=\"getConditionAdvancedExpanded(i)\" class=\"cqa-mt-2\">\n                    <cqa-advanced-variables-form \n                      [advancedVariables]=\"getConditionAdvancedSettingsVariables(i)\"\n                      [advancedVariableForm]=\"getConditionAdvancedVariablesForm(i)\"\n                      (variableBooleanChange)=\"onConditionAdvancedVariableBooleanChange(i, $event.name, $event.value)\"\n                      (variableValueChange)=\"onConditionAdvancedVariableValueChange(i, $event.name, $event.value)\">\n                    </cqa-advanced-variables-form>\n                  </div>\n                </div>\n              </div>\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: [] }]
@@ -33399,7 +33420,7 @@ class StepBuilderDatabaseComponent {
     }
 }
 StepBuilderDatabaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", editMode: "editMode", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], 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    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- DB Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n      DB Environment <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <div class=\"cqa-flex cqa-w-full cqa-flex-nowrap cqa-items-center cqa-justify-between cqa-gap-3\">\n      <div class=\"cqa-min-w-0\" style=\"width: 280px;\">\n        <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n        </cqa-dynamic-select>\n      </div>\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n    <p class=\"cqa-text-xs cqa-text-gray-500\">\n      Uses Database environments from Environments.\n    </p>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button 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]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9$1.MatCellDef, selector: "[matCellDef]" }, { type: i9$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+StepBuilderDatabaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDatabaseComponent, selector: "cqa-step-builder-database", inputs: { dbEnvironmentOptions: "dbEnvironmentOptions", queries: "queries", queryResults: "queryResults", isLoading: "isLoading", initialDbEnvironment: "initialDbEnvironment", editMode: "editMode", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", runQuery: "runQuery", addQuery: "addQuery", deleteQuery: "deleteQuery", assertionDataChange: "assertionDataChange", selectedQueryIndexChange: "selectedQueryIndexChange", activeTabChange: "activeTabChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "assertionsTable", first: true, predicate: ["assertionsTable"], descendants: true }], 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    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- DB Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n      DB Environment <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <div class=\"cqa-flex cqa-w-full cqa-flex-nowrap cqa-items-center cqa-justify-between cqa-gap-3\">\n      <div class=\"cqa-min-w-0\" style=\"width: 280px;\">\n        <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n        </cqa-dynamic-select>\n      </div>\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n    <p class=\"cqa-text-xs cqa-text-gray-500\">\n      Uses Database environments from Environments.\n    </p>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button 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]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\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: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent"] }, { type: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i10.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDatabaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-database', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Update Database Test Step' : 'Create Database Test Step' }}\n  </h2>\n\n  <!-- DB Environment Section (separator line only on bottom) -->\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-pb-[0.5rem] cqa-mb-4 cqa-border-0 cqa-border-b cqa-border-solid cqa-border-gray-200\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-block\">\n      DB Environment <span class=\"cqa-text-red-500\">*</span>\n    </label>\n    <div class=\"cqa-flex cqa-w-full cqa-flex-nowrap cqa-items-center cqa-justify-between cqa-gap-3\">\n      <div class=\"cqa-min-w-0\" style=\"width: 280px;\">\n        <cqa-dynamic-select [form]=\"databaseForm\" [config]=\"getDbEnvironmentConfig()\">\n        </cqa-dynamic-select>\n      </div>\n      <cqa-button variant=\"filled\" text=\"Run Query\" (clicked)=\"onRunQuery()\"\n        [disabled]=\"!databaseForm.get('dbEnvironment')?.value || isLoading\"\n        [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[24px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[37px] hover:!cqa-bg-[#1B1FEB] cqa-flex-shrink-0'\">\n      </cqa-button>\n    </div>\n    <p class=\"cqa-text-xs cqa-text-gray-500\">\n      Uses Database environments from Environments.\n    </p>\n  </div>\n\n  <!-- Main Content: Two Column Layout -->\n  <div class=\"cqa-flex cqa-gap-[12px] cqa-flex-1 cqa-overflow-hidden cqa-mb-6\">\n    <!-- Left Panel: Query List -->\n    <div\n      class=\"cqa-w-[175px] cqa-min-w-[175px] cqa-flex-shrink-0 cqa-flex cqa-flex-col cqa-border-0 cqa-border-r cqa-border-r-[1px] cqa-border-solid cqa-border-[#E0E0E0] cqa-bg-[#FAFAFA] cqa-overflow-hidden\">\n      <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-p-2\">\n        <div *ngFor=\"let query of queries; let i = index\"\n          class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-[10px] cqa-w-full cqa-pt-[14px] cqa-pb-[14px] cqa-pl-[16px] cqa-pr-[16px] cqa-rounded-[8px] cqa-cursor-pointer cqa-mb-1\"\n          [class.cqa-bg-blue-50]=\"selectedQueryIndex === i\"\n          [class.cqa-border]=\"selectedQueryIndex === i\"\n          [class.cqa-border-blue-500]=\"selectedQueryIndex === i\"\n          [class.cqa-bg-grey-400]=\"selectedQueryIndex !== i\"\n          (click)=\"onSelectQuery(i)\"\n          style=\"height: 49px; min-height: 49px;\">\n          <span class=\"cqa-text-sm cqa-font-medium cqa-text-gray-900\">Query {{ i + 1 }}</span>\n          <cqa-badge *ngIf=\"query.status\"\n            [label]=\"query.status === 'passed' ? 'Passed' : query.status === 'failed' ? 'Failed' : 'Pending'\"\n            [variant]=\"query.status === 'passed' ? 'success' : query.status === 'failed' ? 'error' : 'default'\"\n            size=\"small\">\n          </cqa-badge>\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Panel: Query Editor -->\n    <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-overflow-auto\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-gap-[10px] cqa-mb-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-[6px]\" style=\"width: 50%;\">\n          <div class=\"\">\n            <h3 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900 cqa-text-[14px]\">Query & Store Response<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span></h3>\n          </div>\n\n          <div class=\"cqa-flex cqa-justify-between\">\n            <!-- SQL Query Textarea -->\n            <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-min-w-0 cqa-w-full cqa-rounded-md cqa-bg-gray-50/50\">\n              <cqa-custom-textarea [placeholder]=\"'Enter your SQL query here...'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('query')?.value || ''\" [fullWidth]=\"true\" [rows]=\"8\"\n                [textareaInlineStyle]=\"'padding: 1rem;'\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('query')?.setValue($event)\">\n              </cqa-custom-textarea>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-flex cqa-flex-col cqa-gap-[10px] cqa-mb-[8px]\">\n\n\n          <!-- Variable Input -->\n          <div class=\"cqa-flex cqa-gap-4\">\n            <div class=\"cqa-flex-1\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5 cqa-block cqa-text-[14px] cqa-font-semibold\">\n                Variable<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n              </label>\n              <cqa-custom-input [placeholder]=\"'Variable name'\"\n                [value]=\"getCurrentQueryFormGroup()?.get('variable')?.value || ''\" [fullWidth]=\"true\"\n                (valueChange)=\"getCurrentQueryFormGroup()?.get('variable')?.setValue($event)\">\n              </cqa-custom-input>\n              <p class=\"cqa-text-xs cqa-text-gray-500 cqa-mt-1\">\n                Use letters, numbers, underscore. No spaces. Unique per step. Case sensitive.\n              </p>\n            </div>\n          </div>\n          <!-- Action Buttons (pinned to bottom) -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-mt-auto\">\n            <cqa-button variant=\"outlined\" text=\"Add Query\" icon=\"add\" (clicked)=\"addNewQuery()\"\n              [customClass]=\"'cqa-bg-white !cqa-border-[#414146] cqa-text-sm cqa-font-semibold cqa-text-[#414146] cqa-whitespace-nowrap !cqa-py-[10px] !cqa-px-[10px] !cqa-gap-[8px] cqa-rounded-lg hover:!cqa-border-[#414146] hover:cqa-bg-gray-50'\"\n              [iconColor]=\"'#414146'\">\n            </cqa-button>\n            <cqa-button type=\"button\" variant=\"text\"\n              [customClass]=\"'cqa-min-w-[40px] cqa-w-10 cqa-h-9 cqa-rounded cqa-bg-gray-100 cqa-flex cqa-items-center cqa-justify-center hover:cqa-bg-gray-200 cqa-p-0'\"\n              [tooltip]=\"'Delete query'\" (clicked)=\"deleteQueryById(getCurrentQuery()?.id || '')\"\n              [disabled]=\"queries.length <= 1\" [attr.aria-label]=\"'Delete query'\">\n              <svg class=\"cqa-flex-shrink-0\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                <path\n                  d=\"M10.6663 6V12.6667H5.33301V6H10.6663ZM9.66634 2H6.33301L5.66634 2.66667H3.33301V4H12.6663V2.66667H10.333L9.66634 2ZM11.9997 4.66667H3.99967V12.6667C3.99967 13.4 4.59967 14 5.33301 14H10.6663C11.3997 14 11.9997 13.4 11.9997 12.6667V4.66667Z\"\n                  fill=\"#6B7280\" />\n              </svg>\n            </cqa-button>\n            <cqa-button variant=\"filled\" text=\"Run\" icon=\"play_arrow\" (clicked)=\"onRunQuery()\"\n              [disabled]=\"!getCurrentQueryFormGroup()?.get('query')?.value || !databaseForm.get('dbEnvironment')?.value || isLoading\"\n              [customClass]=\"'!cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] cqa-text-sm cqa-font-semibold cqa-whitespace-nowrap !cqa-pt-[10px] !cqa-pb-[10px] !cqa-pl-[16px] !cqa-pr-[24px] !cqa-gap-[8px] cqa-rounded-lg cqa-min-h-[38px] hover:!cqa-bg-[#1B1FEB] !cqa-border-none'\"\n              [iconColor]=\"'#FBFCFF'\">\n            </cqa-button>\n          </div>\n        </div>\n      </div>\n      <!-- Results Section -->\n      <div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-mb-6\">\n        <!-- Tabs -->\n        <div class=\"cqa-flex cqa-items-center cqa-border-b cqa-border-gray-200 cqa-bg-gray-50\">\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'output'\" [class.cqa-border-blue-600]=\"selectedTab === 'output'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'output'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'output'\" (click)=\"onTabChange('output')\">\n            Output\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'verification'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'verification'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'verification'\" (click)=\"onTabChange('verification')\">\n            Verification\n          </button>\n          <button type=\"button\"\n            class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-font-medium cqa-transition-colors cqa-border-b-2\"\n            [class.cqa-text-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-border-blue-600]=\"selectedTab === 'advanced'\"\n            [class.cqa-text-gray-600]=\"selectedTab !== 'advanced'\"\n            [class.cqa-border-transparent]=\"selectedTab !== 'advanced'\" (click)=\"onTabChange('advanced')\">\n            Advanced\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"cqa-p-4\">\n          <!-- Output Tab -->\n          <div *ngIf=\"selectedTab === 'output'\">\n            <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-3\">\n              <h4 class=\"cqa-text-sm cqa-font-semibold cqa-text-gray-900\">Query Results</h4>\n              <cqa-button variant=\"text\" text=\"Copy\" icon=\"content_copy\" [customClass]=\"'cqa-text-blue-600'\"\n                (clicked)=\"onCopyResults()\">\n              </cqa-button>\n            </div>\n\n            <!-- Results Table -->\n            <div *ngIf=\"queryResults && queryResults.length > 0\" class=\"cqa-overflow-x-auto\">\n              <table class=\"cqa-w-full cqa-border-collapse\">\n                <thead>\n                  <tr class=\"cqa-bg-gray-50 cqa-border-b cqa-border-gray-200\">\n                    <th *ngFor=\"let key of getTableColumns()\"\n                      class=\"cqa-px-4 cqa-py-2 cqa-text-left cqa-text-xs cqa-font-semibold cqa-text-gray-700 cqa-uppercase\">\n                      {{ key }}\n                    </th>\n                  </tr>\n                </thead>\n                <tbody>\n                  <tr *ngFor=\"let row of queryResults\" class=\"cqa-border-b cqa-border-gray-200 hover:cqa-bg-gray-50\">\n                    <td *ngFor=\"let key of getTableColumns()\" class=\"cqa-px-4 cqa-py-2 cqa-text-sm cqa-text-gray-900\">\n                      {{ row[key] }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div *ngIf=\"!queryResults || queryResults.length === 0\"\n              class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-sm\">\n              No results yet. Run a query to see results.\n            </div>\n          </div>\n\n          <!-- Verification Tab -->\n          <div *ngIf=\"selectedTab === 'verification'\" class=\"assertions-container\">\n            <!-- Header Section -->\n            <div class=\"assertions-header\">\n              <div class=\"header-content\">\n                <h3 class=\"header-title\">Assertions</h3>\n                <p class=\"header-subtitle\">Use JSONPath to target values in the query output.</p>\n              </div>\n              <button \n                mat-stroked-button \n                color=\"primary\" \n                class=\"add-assertion-button\"\n                (click)=\"addAssertion()\">\n                <mat-icon>add</mat-icon>\n                Add Assertion\n              </button>\n            </div>\n\n            <!-- Table Section -->\n            <form *ngIf=\"getCurrentAssertionsForm()\" [formGroup]=\"getCurrentAssertionsForm()!\" class=\"assertions-form\">\n              <div formArrayName=\"assertions\">\n                <div class=\"table-scroll-container\">\n                  <table mat-table [dataSource]=\"assertionsDataSource\" class=\"assertions-table\" #assertionsTable>\n                    <!-- JSONPath Column -->\n                    <ng-container matColumnDef=\"jsonPath\">\n                      <th mat-header-cell *matHeaderCellDef>jsonPath</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"jsonPath\"\n                              placeholder=\"username\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'jsonPath')?.hasError('required') && \n                                              getFormControlAt(i, 'jsonPath')?.touched\">\n                              JSONPath is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Verification Type Column -->\n                    <ng-container matColumnDef=\"verificationType\">\n                      <th mat-header-cell *matHeaderCellDef>verificationType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select formControlName=\"verificationType\">\n                              <mat-option value=\"equals\">Equals</mat-option>\n                              <mat-option value=\"not_equals\">Not Equals</mat-option>\n                              <mat-option value=\"contains\">Contains</mat-option>\n                              <mat-option value=\"not_contains\">Not Contains</mat-option>\n                              <mat-option value=\"greater_than\">Greater Than</mat-option>\n                              <mat-option value=\"less_than\">Less Than</mat-option>\n                              <mat-option value=\"greater_than_or_equals\">Greater Than Or Equals</mat-option>\n                              <mat-option value=\"less_than_or_equals\">Less Than Or Equals</mat-option>\n                              <mat-option value=\"exists\">Exists</mat-option>\n                              <mat-option value=\"not_exists\">Not Exists</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Type Column -->\n                    <ng-container matColumnDef=\"expectedType\">\n                      <th mat-header-cell *matHeaderCellDef>expectedType</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <mat-form-field appearance=\"outline\" class=\"full-width-field\">\n                            <mat-select \n                              formControlName=\"expectedType\"\n                              (selectionChange)=\"onExpectedTypeChange(i, $event.value)\">\n                              <mat-option value=\"string\">String</mat-option>\n                              <mat-option value=\"number\">Number</mat-option>\n                              <mat-option value=\"boolean\">Boolean</mat-option>\n                              <mat-option value=\"object\">Object</mat-option>\n                              <mat-option value=\"array\">Array</mat-option>\n                              <mat-option value=\"null\">Null</mat-option>\n                            </mat-select>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Expected Value Column -->\n                    <ng-container matColumnDef=\"expectedValue\">\n                      <th mat-header-cell *matHeaderCellDef>expectedValue</th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <ng-container [formGroupName]=\"i\">\n                          <!-- String, Array, Object Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'string' || getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <textarea \n                              *ngIf=\"getExpectedType(i) === 'array' || getExpectedType(i) === 'object'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              rows=\"3\"\n                              required></textarea>\n                            <input \n                              *ngIf=\"getExpectedType(i) === 'string'\"\n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('invalidType')\">\n                              {{ getFormControlAt(i, 'expectedValue')?.errors?.message }}\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Null Type Display -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'null'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              formControlName=\"expectedValue\"\n                              [placeholder]=\"getExpectedValuePlaceholder(i)\"\n                              [disabled]=\"true\">\n                          </mat-form-field>\n\n                          <!-- Number Input -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'number'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <input \n                              matInput \n                              type=\"number\"\n                              formControlName=\"expectedValue\"\n                              placeholder=\"Expected Value in Number\"\n                              required>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n\n                          <!-- Boolean Select -->\n                          <mat-form-field \n                            *ngIf=\"getExpectedType(i) === 'boolean'\"\n                            appearance=\"outline\" \n                            class=\"full-width-field\">\n                            <mat-select formControlName=\"expectedValue\" required>\n                              <mat-option value=\"true\">true</mat-option>\n                              <mat-option value=\"false\">false</mat-option>\n                            </mat-select>\n                            <mat-error *ngIf=\"getFormControlAt(i, 'expectedValue')?.hasError('required') && \n                                              getFormControlAt(i, 'expectedValue')?.touched\">\n                              Expected value is required\n                            </mat-error>\n                          </mat-form-field>\n                        </ng-container>\n                      </td>\n                    </ng-container>\n\n                    <!-- Actions Column -->\n                    <ng-container matColumnDef=\"actions\">\n                      <th mat-header-cell *matHeaderCellDef></th>\n                      <td mat-cell *matCellDef=\"let assertion; let i = index\">\n                        <button \n                          mat-icon-button \n                          color=\"warn\"\n                          class=\"delete-button\"\n                          (click)=\"removeAssertion(i)\"\n                          [matTooltip]=\"'Delete assertion'\">\n                          <mat-icon>delete</mat-icon>\n                        </button>\n                      </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n                    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n                  </table>\n                </div>\n\n                <!-- Empty State -->\n                <div *ngIf=\"getAssertionsFormArray().length === 0\" class=\"empty-state\">\n                  <p>No assertions added. Click \"Add Assertion\" to create one.</p>\n                </div>\n              </div>\n            </form>\n          </div>\n\n          <div *ngIf=\"selectedTab === 'advanced'\">\n            <cqa-advanced-variables-form \n              [advancedVariables]=\"advancedSettingsVariables\"\n              [advancedVariableForm]=\"advancedVariablesForm\"\n              (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\"\n              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button 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]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
@@ -34105,7 +34126,7 @@ class StepBuilderCustomCodeComponent {
     }
 }
 StepBuilderCustomCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col 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    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Advanced Settings Variables Form -->\n    <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\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: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i4$2.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: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { 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"] }] });
+StepBuilderCustomCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderCustomCodeComponent, selector: "cqa-step-builder-custom-code", inputs: { languageOptions: "languageOptions", template: "template", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", initialCode: "initialCode", initialLanguage: "initialLanguage", initialMetadata: "initialMetadata", initialDescription: "initialDescription", isEditMode: "isEditMode" }, outputs: { createStep: "createStep", cancelled: "cancelled" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col 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    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Advanced Settings Variables Form -->\n    <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\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: CustomTextareaComponent, selector: "cqa-custom-textarea", inputs: ["label", "placeholder", "value", "enableMarkdown", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "rows", "cols", "resize", "textareaInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderCustomCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-step-builder-custom-code', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col 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    Custom Code Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-max-h-[500px] cqa-overflow-y-auto\">\n   \n\n    <!-- Language Dropdown -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Language<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"customCodeForm\" [config]=\"getLanguageConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Code Textarea -->\n    <div class=\"cqa-mb-3\">\n      <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n        Code<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n        class=\"cqa-step-builder-custom-code-textarea\"\n        [placeholder]=\"'// Write your code here...'\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        (valueChange)=\"customCodeForm.get('code')?.setValue($event)\">\n      </cqa-custom-textarea>\n    </div>\n\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n      <!-- Metadata Input -->\n      <div class=\"cqa-mb-2 cqa-w-1/2 cqa-pr-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Metadata\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('metadata')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('metadata')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n\n      <!-- Description Input -->\n      <div class=\"cqa-w-1/2 cqa-pl-2\">\n        <label class=\"cqa-leading-[100%] cqa-block cqa-text-[12px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n          Description\n        </label>\n        <cqa-custom-input\n          [placeholder]=\"'Text Input'\"\n          [value]=\"customCodeForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"customCodeForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n      </div>\n    </div>\n\n     <!-- Template Variables Section -->\n     <div *ngIf=\"templateVariables && templateVariables.length > 0\" class=\"cqa-mb-4\">\n      <!-- Template Variables Form Fields -->\n      <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-mb-4\">\n        <ng-container *ngFor=\"let variable of templateVariables\">\n          <!-- Boolean variables with mat-slide-toggle -->\n          <ng-container *ngIf=\"variable.type === 'boolean'\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\" style=\"width: calc(50% - 12px);\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700\">\n                {{ variable.label }}\n              </label>\n              <mat-slide-toggle\n                [checked]=\"variablesForm.get(variable.name)?.value || variable.value || false\"\n                (change)=\"onVariableBooleanChange(variable.name, $event.checked)\"\n                color=\"primary\">\n              </mat-slide-toggle>\n            </div>\n          </ng-container>\n          \n          <!-- Non-boolean, non-custom_code variables -->\n          <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean'\">\n            <ng-container *ngIf=\"(variable.name === 'type' || variable.name === 'scrollTo'); else defaultInput\">\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-dynamic-select [form]=\"variablesForm\" [config]=\"getSelectConfig(variable)\">\n                </cqa-dynamic-select>\n              </div>\n            </ng-container>\n            <ng-template #defaultInput>\n              <div class=\"cqa-flex cqa-flex-col\" style=\"width: calc(50% - 12px);\">\n                <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                  {{ variable.label }}\n                </label>\n                <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                  (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n                </cqa-custom-input>\n              </div>\n            </ng-template>\n          </ng-container>\n        </ng-container>\n      </div>\n    </div>\n\n    <!-- Advanced Settings Variables Form -->\n    <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-mb-4\">\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        <cqa-advanced-variables-form \n          [advancedVariables]=\"advancedSettingsVariables\"\n          [advancedVariableForm]=\"advancedVariablesForm\"\n          (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-auto cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button class=\"cqa-w-1/2 cqa-rounded-[10px]\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"isEditMode ? 'Save Changes' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!customCodeForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]