npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.353 → 1.1.355 - Mend

@cqa-lib/cqa-ui 1.1.353 → 1.1.355

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 (26) hide show

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

@@ -26671,7 +26671,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
             }] } });
 class TestCaseScrollStepComponent {
-    constructor() {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
         this.selector = '';
         this.selected = false;
         this.disabled = false;
@@ -26681,6 +26682,8 @@ class TestCaseScrollStepComponent {
         this.expanded = false;
         this.isReorder = false;
         this.editable = true;
+        /** Saved action HTML from API — when set, row shows same text as edit modal and badges are clickable */
+        this.action = '';
         this.edit = new EventEmitter();
         this.editInDepth = new EventEmitter();
         this.link = new EventEmitter();
@@ -26691,21 +26694,72 @@ class TestCaseScrollStepComponent {
         this.toggleExpanded = new EventEmitter();
         this.selectorChange = new EventEmitter();
         this.directionChange = new EventEmitter();
+        /** Same as normal-step: click on element/test_data badge opens popup */
+        this.clickAction = new EventEmitter();
     }
     ngOnInit() {
         if (this.config) {
             this.stepNumber = this.config.stepNumber;
             this.selector = this.config.selector;
             this.direction = this.config.direction;
+            if (this.config.action && !this.action) {
+                this.action = String(this.config.action);
+            }
             this.description = this.config.description;
             this.selected = this.config.selected || false;
             this.disabled = this.config.disabled || false;
             this.expanded = this.config.expanded || false;
         }
     }
+    /**
+     * Maps stored direction values to the same natural language used in template htmlGrammar
+     * (e.g. "Scroll one screen up") so the step row matches the edit modal.
+     */
+    /** Public for template: expanded panel shows same label as main row. */
+    getDirectionLabel() {
+        if (!this.direction)
+            return '';
+        return this.directionToNaturalPhrase(this.direction);
+    }
+    directionToNaturalPhrase(direction) {
+        // Align with template htmlGrammar in edit modal (e.g. "Scroll one screen up/bottom").
+        // Same step must show identical wording in the list row and Selected Template.
+        const map = {
+            up: 'one screen up',
+            down: 'one screen down',
+            top: 'one screen top',
+            bottom: 'one screen bottom',
+            // Horizontal directions: keep unless templates use "one screen left/right"
+            left: 'to the left',
+            right: 'to the right',
+        };
+        const phrase = map[direction.toLowerCase()];
+        return phrase !== null && phrase !== void 0 ? phrase : direction;
+    }
+    /** When action HTML exists, render it (mirrors normal-step / edit modal). */
+    hasActionHtml() {
+        return !!(this.action && String(this.action).trim());
+    }
+    getActionHtml() {
+        if (!this.action)
+            return '';
+        return this.sanitizer.bypassSecurityTrustHtml(this.action);
+    }
+    clickOnAction(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clickAction.emit(event);
+    }
     getDisplayText() {
-        const directionText = this.direction ? ` to ${this.direction}` : '';
-        return `Scroll${directionText} of ${this.selector}`;
+        if (!this.direction) {
+            return this.selector ? `Scroll ${this.selector}` : 'Scroll';
+        }
+        const phrase = this.directionToNaturalPhrase(this.direction);
+        // Match template wording: "Scroll one screen up" etc.; append selector when present.
+        if (this.selector && String(this.selector).trim() !== '') {
+            return `Scroll ${phrase} — ${this.selector}`;
+        }
+        return `Scroll ${phrase}`;
     }
     onToggleExpanded() {
         this.expanded = !this.expanded;
@@ -26743,12 +26797,12 @@ class TestCaseScrollStepComponent {
         this.directionChange.emit(value);
     }
 }
-TestCaseScrollStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\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 and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          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\" [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\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ direction }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          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></a>\n      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" 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]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "date": i2.DatePipe } });
+TestCaseScrollStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", action: "action" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange", clickAction: "clickAction" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\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 and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          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\" [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\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          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></a>\n      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" 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]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-scroll-step', 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  <div\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 and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          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\" [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\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ direction }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          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></a>\n      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" 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]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+            args: [{ selector: 'cqa-test-case-scroll-step', 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  <div\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 and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          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\" [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\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          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></a>\n      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" 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]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          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></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
                 type: Input
@@ -26776,6 +26830,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editable: [{
                 type: Input
+            }], action: [{
+                type: Input
             }], viewDetailsTrigger: [{
                 type: ViewChild,
                 args: ['viewDetailsTrigger', { static: false }]
@@ -26799,6 +26855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], directionChange: [{
                 type: Output
+            }], clickAction: [{
+                type: Output
             }] } });
 class TestCaseVerifyUrlStepComponent {
@@ -28000,6 +28058,8 @@ class ApiEditStepComponent {
     constructor(fb, cdr) {
         this.fb = fb;
         this.cdr = cdr;
+        /** True while parent is creating the step (API in progress); show loader on Create/Update button */
+        this.isCreatingStep = false;
         /** Emits the cURL string when user clicks Import (value from the textarea control). */
         this.importCurl = new EventEmitter();
         /** Emits when user cancels the Import cURL panel (clicks Cancel). */
@@ -29836,10 +29896,10 @@ ApiEditStepComponent.DEFAULT_STATUS_VERIFICATION_OPTIONS = [
     { id: 'greater-than', value: 'greater-than', name: 'Greater than', label: 'Greater than' },
 ];
 ApiEditStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [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              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { 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", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
+ApiEditStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ApiEditStepComponent, selector: "cqa-api-edit-step", inputs: { initialMethod: "initialMethod", initialEnvironment: "initialEnvironment", initialStep: "initialStep", initialUrl: "initialUrl", initialPayloadTab: "initialPayloadTab", initialPayloadType: "initialPayloadType", initialPayloadText: "initialPayloadText", initialHeaders: "initialHeaders", initialResponsePreview: "initialResponsePreview", initialVariableName: "initialVariableName", initialResponseBodyVerifications: "initialResponseBodyVerifications", initialStatusVerifications: "initialStatusVerifications", initialActiveResponseVerificationTab: "initialActiveResponseVerificationTab", editMode: "editMode", isCreatingStep: "isCreatingStep", httpMethodOptions: "httpMethodOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", urlOptions: "urlOptions", authTypeOptions: "authTypeOptions", initialAuthType: "initialAuthType", formatOptions: "formatOptions", initialFormat: "initialFormat", headerNameOptions: "headerNameOptions", verificationOptions: "verificationOptions", verificationDataTypeOptions: "verificationDataTypeOptions", statusVerificationOptions: "statusVerificationOptions", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { importCurl: "importCurl", importCurlCancel: "importCurlCancel", sendRequest: "sendRequest", back: "back", cancel: "cancel", next: "next", create: "create", headersChange: "headersChange", environmentChange: "environmentChange", environmentSearch: "environmentSearch", environmentLoadMore: "environmentLoadMore" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "payloadEditorWithLinesRef", first: true, predicate: ["payloadEditorWithLinesRef"], descendants: true }, { propertyName: "payloadTextareaRef", first: true, predicate: ["payloadTextareaRef"], descendants: true }, { propertyName: "responsePreviewRef", first: true, predicate: ["responsePreviewRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [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              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { 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", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { 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: SegmentControlComponent, selector: "cqa-segment-control", inputs: ["segments", "value", "disabled", "containerBgColor"], outputs: ["valueChange"] }, { 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: 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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ApiEditStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [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              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-api-edit-step', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"cqa-api-edit-step-container cqa-bg-[#ffffff] cqa-flex cqa-flex-col cqa-w-full cqa-h-full cqa-p-[16px] cqa-gap-[12px] cqa-overflow-y-auto cqa-overflow-x-hidden cqa-box-border\">\n\n  <h2 class=\"cqa-api-edit-step-title cqa-font-inter cqa-text-[12px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal cqa-text-[#000000] cqa-m-0\">\n    {{ editMode ? 'Update API Test Step' : 'Create API Test Step' }}\n  </h2>\n\n  <div class=\"cqa-api-edit-step-indicator cqa-flex cqa-items-center cqa-gap-0 cqa-max-[767px]:cqa-flex-wrap cqa-max-[767px]:cqa-gap-2 cqa-max-[767px]:cqa-justify-start\"\n    [class.cqa-justify-start]=\"stepLabels.length === 1\"\n    [class.cqa-justify-between]=\"stepLabels.length !== 1\">\n    <ng-container *ngFor=\"let step of stepLabels; let i = index\">\n      <cqa-button type=\"button\" variant=\"text\"\n        customClass=\"cqa-api-edit-step-indicator-item cqa-api-edit-step-indicator-item--clickable cqa-flex cqa-items-center cqa-gap-[10px] cqa-cursor-pointer cqa-border-none cqa-p-0 cqa-font-inherit cqa-text-inherit cqa-text-left !cqa-bg-transparent\"\n        [attr.aria-label]=\"'Step ' + step.index + ': ' + step.label\" [attr.aria-pressed]=\"step.index === currentStep\"\n        (clicked)=\"setStep(step.index)\">\n        <span class=\"cqa-api-edit-step-indicator-circle cqa-w-8 cqa-h-8 cqa-rounded-full cqa-inline-flex cqa-items-center cqa-justify-center cqa-text-sm cqa-font-medium cqa-leading-none cqa-border-none cqa-shrink-0\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-bg-[#4F46E5] cqa-text-white' : 'cqa-bg-[#E0E0E0] cqa-text-[#666666]'\">\n          {{ step.index }}\n        </span>\n        <span class=\"cqa-api-edit-step-indicator-label cqa-text-sm cqa-leading-[18px] cqa-font-normal cqa-max-[767px]:cqa-text-xs\"\n          [ngClass]=\"step.index === currentStep ? 'cqa-text-[#4F46E5]' : 'cqa-text-[#666666]'\">\n          {{ step.label }}\n        </span>\n        <div *ngIf=\"i < stepLabels.length - 1\" class=\"cqa-api-edit-step-indicator-line cqa-w-[96px] cqa-h-[2px] cqa-bg-[#E0E0E0] cqa-my-0 cqa-mx-[6px] cqa-shrink-0 cqa-self-center cqa-max-[767px]:cqa-w-[24px] cqa-max-[767px]:cqa-mx-1\" aria-hidden=\"true\"></div>\n      </cqa-button>\n    </ng-container>\n  </div>\n\n  <!-- Step content viewport: only the active step body is shown (*ngIf) -->\n  <div class=\"cqa-api-edit-step-viewport cqa-w-full\">\n    <!-- Step 1: Environment, request, body, response -->\n    <div *ngIf=\"currentStep === 1\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <!-- Environment row: label on top, select below (aligned right on desktop) -->\n        <div class=\"cqa-api-edit-step-environment-row cqa-flex cqa-flex-col cqa-gap-1.5 cqa-items-end cqa-max-[767px]:cqa-items-stretch\">\n          <span class=\"cqa-flex cqa-flex-col cqa-gap-1.5 cqa-max-[767px]:cqa-items-stretch\">\n          <label class=\"cqa-api-edit-step-environment-label cqa-m-0 cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal\">Environments</label>\n          <cqa-dynamic-select *ngIf=\"environmentForm\"\n            [form]=\"environmentForm\"\n            [config]=\"environmentSelectConfig\"\n            class=\"cqa-api-edit-step-environment-select cqa-shrink-0 cqa-w-auto cqa-min-w-[315px] cqa-max-w-[315px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full [&_.mat-form-field-wrapper]:cqa-pb-0\"\n            aria-label=\"Environment\"\n            (selectionChange)=\"onEnvironmentSelectionChange($event)\">\n          </cqa-dynamic-select>\n        </span>\n        </div>\n\n        <!-- Request row: method, URL, buttons -->\n        <div class=\"cqa-api-edit-step-request-row cqa-flex cqa-items-center cqa-gap-3 cqa-flex-wrap cqa-max-[767px]:cqa-flex-col cqa-max-[767px]:cqa-items-stretch cqa-max-[767px]:cqa-gap-2.5\">\n          <cqa-dynamic-select *ngIf=\"methodForm\" [form]=\"methodForm\" [config]=\"methodSelectConfig\"\n            class=\"cqa-api-edit-step-method-select cqa-shrink-0 cqa-w-auto cqa-min-w-[152px] cqa-max-w-[152px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-max-w-full cqa-max-[767px]:cqa-w-full\" aria-label=\"HTTP method\"\n            (selectionChange)=\"onMethodSelectionChange($event)\">\n          </cqa-dynamic-select>\n          <div class=\"cqa-api-edit-step-url-wrap cqa-flex-1 cqa-min-w-[200px] cqa-max-[767px]:cqa-min-w-0 cqa-max-[767px]:cqa-w-full\">\n            <cqa-autocomplete\n              [value]=\"url\"\n              (valueChange)=\"url = $event\"\n              [options]=\"urlOptions\"\n              [placeholder]=\"urlPlaceholder\"\n              ariaLabel=\"Enter URL or select Parameter\"\n              [fullWidth]=\"true\"\n              (optionSelect)=\"onUrlOptionSelect($event)\">\n            </cqa-autocomplete>\n            <div *ngIf=\"urlError\" class=\"cqa-text-red-600 cqa-text-sm cqa-mt-1\">\n              {{ urlError }}\n            </div>\n          </div>\n          <div class=\"cqa-api-edit-step-import-curl-trigger cqa-contents cqa-max-[767px]:cqa-w-full cqa-max-[767px]:!cqa-flex\" (click)=\"openImportCurlPanel()\">\n            <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Import API cURL\"\n              customClass=\"cqa-api-edit-step-btn-outline !cqa-bg-white !cqa-border !cqa-border-solid !cqa-border-[#6B7280] cqa-text-[#414146] cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal hover:!cqa-bg-[#F9FAFB] hover:!cqa-text-[#414146] cqa-max-[767px]:cqa-w-full\">\n            </cqa-button>\n          </div>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" text=\"Send Request\" (clicked)=\"onSendRequest()\"\n            [disabled]=\"!isUrlValid\"\n            customClass=\"cqa-api-edit-step-btn-primary cqa-font-inter cqa-text-[14px] cqa-font-semibold cqa-leading-[100%] cqa-tracking-normal !cqa-bg-[#3F43EE] cqa-text-[#FBFCFF] !cqa-border-none cqa-py-2.5 cqa-px-6 cqa-gap-2 cqa-rounded-lg cqa-min-h-[37px] cqa-box-border hover:!cqa-bg-[#1B1FEB] cqa-max-[767px]:cqa-w-full\"\n            [ngClass]=\"{'!cqa-opacity-50 !cqa-cursor-not-allowed': !isUrlValid}\">\n          </cqa-button>\n        </div>\n\n\n\n        <!-- Body content: header section (default) OR import cURL section -->\n        <ng-container *ngIf=\"bodyView === 'import-curl'\">\n          <div class=\"cqa-api-edit-step-import-curl-panel cqa-flex cqa-flex-col cqa-bg-white cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-shadow-[0_1px_3px_rgba(0,0,0,0.08)] cqa-overflow-hidden\">\n            <div class=\"cqa-api-edit-step-import-curl-header cqa-flex cqa-items-center cqa-justify-between cqa-py-3 cqa-px-5 cqa-border-b cqa-border-solid cqa-border-[#E2E8F0] cqa-bg-[#F9FAFB] cqa-rounded-t-lg cqa-max-[767px]:cqa-px-4\">\n              <h3 class=\"cqa-api-edit-step-import-curl-title cqa-m-0 cqa-text-xs cqa-font-bold cqa-leading-[18px] cqa-text-[#374151]\">Import API cURL</h3>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-separator cqa-h-px cqa-bg-[#E2E8F0] cqa-my-0 cqa-mx-5\"></div>\n            <div class=\"cqa-api-edit-step-import-curl-body\">\n              <cqa-custom-textarea [value]=\"importCurlControl.value\"\n                (valueChange)=\"importCurlControl.setValue($event)\"\n                placeholder=\"Paste your cURL command here (e.g., curl -X POST https://api.example.com/users)\"\n                [fullWidth]=\"true\" [rows]=\"8\" resize=\"vertical\" size=\"md\"\n                class=\"cqa-api-edit-step-import-curl-textarea\">\n              </cqa-custom-textarea>\n            </div>\n            <div class=\"cqa-api-edit-step-import-curl-footer\">\n              <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-cancel\" (clicked)=\"onCancelImportCurl()\"></cqa-button>\n              <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Import\"\n                customClass=\"cqa-api-edit-step-import-curl-btn-import\" (clicked)=\"onImportCurlConfirm()\"></cqa-button>\n            </div>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"bodyView === 'headers'\">\n          <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n            <div class=\"cqa-api-edit-step-tabs\">\n              <cqa-button *ngFor=\"let tab of payloadTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n                [customClass]=\"'cqa-api-edit-step-tab' + (activePayloadTab === tab.value ? ' cqa-api-edit-step-tab--active' : '') + (isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params') ? ' cqa-api-edit-step-tab--disabled' : '')\"\n                [disabled]=\"isMethodWithoutBody && (tab.value === 'body' || tab.value === 'params')\"\n                (clicked)=\"setPayloadTab(tab.value)\">\n              </cqa-button>\n            </div>\n\n            <!-- Payload content (Authorization) -->\n            <div *ngIf=\"activePayloadTab === 'authorization'\" class=\"cqa-api-edit-step-payload\"\n              [attr.style]=\"'padding: 20px; min-height: 200px;'\">\n              <div [attr.style]=\"'display: flex; flex-direction: column; gap: 20px;'\">\n                <div [attr.style]=\"'display: flex; flex-direction: column; gap: 8px; width: fit-content;'\">\n                  <span [attr.style]=\"'font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #6B7280; text-transform: uppercase; line-height: 1.25;'\">AUTH TYPE</span>\n                  <cqa-dynamic-select *ngIf=\"authTypeForm\" [form]=\"authTypeForm\" [config]=\"authTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-auth-type-select\" aria-label=\"Auth type\"\n                    [attr.style]=\"'min-width: 160px;'\">\n                  </cqa-dynamic-select>\n                </div>\n                <!-- No Auth: centered message -->\n                <div *ngIf=\"selectedAuthType === 'no-auth'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; text-align: center;'\">\n                  <div aria-hidden=\"true\"\n                    [attr.style]=\"'width: 48px; height: 48px; border-radius: 10px; background: #F3F4F6; display: flex; align-items: center; justify-content: center; flex-shrink: 0;'\">\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                      <rect x=\"5\" y=\"11\" width=\"14\" height=\"2\" rx=\"1\" fill=\"#9CA3AF\"/>\n                    </svg>\n                  </div>\n                  <span [attr.style]=\"'font-size: 16px; font-weight: 600; color: #374151; line-height: 1.25;'\">No Auth</span>\n                  <div [attr.style]=\"'display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;'\">\n                    <span [attr.style]=\"'font-size: 14px; font-weight: 400; color: #9CA3AF; line-height: 1.4;'\">This request does not use any authorization.</span>\n                    <span role=\"img\" aria-label=\"More information\" title=\"This request does not use any authorization.\"\n                      [attr.style]=\"'display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0;'\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"display: block;\">\n                        <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" fill=\"none\"/>\n                        <path d=\"M8 7v4M8 5v.5\" stroke=\"#9CA3AF\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                      </svg>\n                    </span>\n                  </div>\n                </div>\n                <!-- Bearer Token: Token label + textarea -->\n                <div *ngIf=\"selectedAuthType === 'bearer'\"\n                  [attr.style]=\"'flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0;'\">\n                  <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Token</span>\n                  <cqa-custom-textarea [(value)]=\"bearerToken\"\n                    placeholder=\"Enter bearer token\"\n                    [fullWidth]=\"true\" [rows]=\"6\" resize=\"vertical\" size=\"md\"\n                    class=\"cqa-api-edit-step-auth-token-textarea\" ariaLabel=\"Bearer token\">\n                  </cqa-custom-textarea>\n                </div>\n                <!-- OAuth 2.0: Grant Type, Access Token URL, Client ID, Client Secret, Scope, Client Authentication -->\n                <div *ngIf=\"selectedAuthType === 'oauth2' && oauth2Form\"\n                  class=\"cqa-api-edit-step-oauth2-grid\"\n                  [attr.style]=\"'display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; width: 100%;'\">\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Grant Type</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2GrantTypeSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"OAuth grant type\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth grant type</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Access Token URL</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('accessTokenUrl')?.value\"\n                      (valueChange)=\"oauth2Form.get('accessTokenUrl')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth token endpoint\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Access Token URL\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth token endpoint</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client ID</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientId')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientId')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter OAuth client identifier\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client ID\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client identifier</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Secret</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('clientSecret')?.value\"\n                      (valueChange)=\"oauth2Form.get('clientSecret')?.setValue($event)\"\n                      type=\"password\" [label]=\"''\" placeholder=\"Enter OAuth client secret\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Client Secret\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">OAuth client secret</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Scope</span>\n                    <cqa-custom-input [value]=\"oauth2Form.get('scope')?.value\"\n                      (valueChange)=\"oauth2Form.get('scope')?.setValue($event)\"\n                      [label]=\"''\" placeholder=\"Enter space-separated scopes\" [fullWidth]=\"true\" size=\"md\"\n                      ariaLabel=\"Scope\">\n                    </cqa-custom-input>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Space-separated scopes</span>\n                  </div>\n                  <div [attr.style]=\"'display: flex; flex-direction: column; gap: 6px; min-width: 0;'\">\n                    <span [attr.style]=\"'font-size: 12px; font-weight: 600; color: #374151; line-height: 1.25;'\">Client Authentication</span>\n                    <cqa-dynamic-select *ngIf=\"oauth2Form\" [form]=\"oauth2Form\" [config]=\"oauth2ClientAuthSelectConfig\"\n                      class=\"cqa-api-edit-step-auth-oauth-select\" aria-label=\"Client authentication method\"\n                      [attr.style]=\"'min-width: 0; width: 100%;'\">\n                    </cqa-dynamic-select>\n                    <span [attr.style]=\"'font-size: 11px; font-style: italic; color: #6B7280; line-height: 1.3;'\">Client authentication method</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payload content (Headers) -->\n            <div *ngIf=\"activePayloadTab === 'headers'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-headers-grid\">\n                <span class=\"cqa-api-edit-step-headers-label\">Header Name</span>\n                <span class=\"cqa-api-edit-step-headers-label\">Header Value</span>\n                <span class=\"cqa-api-edit-step-headers-label cqa-api-edit-step-headers-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of headerRows; let i = index; trackBy: trackByHeader\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-header-row\">\n                <cqa-dynamic-select [form]=\"row\" [config]=\"headerNameSelectConfig\"\n                  (addCustomValue)=\"onHeaderNameAddCustomValue($event, row)\"\n                  class=\"cqa-api-edit-step-header-type-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-header-value-input\" ariaLabel=\"Header value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-header-delete'\"\n                  [tooltip]=\"'Remove header'\" (clicked)=\"removeHeader(i)\">\n                  <svg class=\"cqa-api-edit-step-header-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-add-header-wrap\">\n                <cqa-button type=\"button\" variant=\"text\" text=\"+ Add Header\"\n                  [customClass]=\"'cqa-api-edit-step-add-header-link'\" (clicked)=\"addHeader()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Params): Key\u2013Value table with add/delete rows -->\n            <div *ngIf=\"activePayloadTab === 'params'\" class=\"cqa-api-edit-step-payload\">\n              <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of paramsRows; let i = index; trackBy: trackByParams\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-key-value-row\">\n                <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                  (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                </cqa-custom-input>\n                <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                  (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                  class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeParamsRow(i)\">\n                  <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n              <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                  customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addParamsRow()\">\n                </cqa-button>\n              </div>\n            </div>\n\n            <!-- Payload content (Body only): type, format, text area, Back/Next -->\n            <div *ngIf=\"activePayloadTab === 'body'\"\n              class=\"cqa-api-edit-step-payload cqa-api-edit-step-payload-editor\">\n              <div class=\"cqa-api-edit-step-payload-type-row\">\n                <span class=\"cqa-api-edit-step-payload-type-label\">Type</span>\n                <div class=\"cqa-api-edit-step-payload-type-radios\">\n                  <cqa-segment-control [value]=\"payloadType\" [segments]=\"payloadTypeSegments\"\n                    (valueChange)=\"onPayloadTypeChange($event)\"\n                    class=\"cqa-api-edit-step-payload-type-segment\">\n                  </cqa-segment-control>\n                </div>\n                <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-format-wrap\">\n                  <span class=\"cqa-api-edit-step-payload-format-label\">Format:</span>\n                  <cqa-dynamic-select *ngIf=\"payloadFormatForm\" [form]=\"payloadFormatForm\"\n                    [config]=\"payloadFormatSelectConfig\" class=\"cqa-api-edit-step-payload-format-select\"\n                    aria-label=\"Format\">\n                  </cqa-dynamic-select>\n                </div>\n              </div>\n              <!-- Raw: text area with line numbers (Postman-style payload body) -->\n              <div *ngIf=\"payloadType === 'raw'\" class=\"cqa-api-edit-step-payload-body\" #payloadEditorWithLinesRef>\n                <div class=\"cqa-api-edit-step-payload-editor-with-lines\">\n                  <div class=\"cqa-api-edit-step-payload-line-numbers\" aria-hidden=\"true\">\n                    <span *ngFor=\"let n of payloadLineNumbers\" class=\"cqa-api-edit-step-payload-line-num\">\n                      <span *ngIf=\"payloadJsonError && payloadJsonError.line === n\"\n                        class=\"cqa-api-edit-step-payload-line-error-icon\" [title]=\"payloadJsonErrorTooltip\"\n                        aria-label=\"Parse error on this line\">\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\">\n                          <circle cx=\"7\" cy=\"7\" r=\"6\" fill=\"#EF4444\"/>\n                          <path d=\"M4 4l6 6M10 4l-6 6\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                      </span>\n                      <span class=\"cqa-api-edit-step-payload-line-num-text\">{{ n }}</span>\n                    </span>\n                  </div>\n                  <div class=\"cqa-api-edit-step-payload-textarea-cell\">\n                    <div class=\"cqa-api-edit-step-payload-textarea cqa-w-full cqa-flex cqa-flex-col cqa-min-h-0\"\n                      [ngClass]=\"{'cqa-api-edit-step-payload-textarea--error': payloadJsonError}\">\n                      <textarea #payloadTextareaRef\n                        class=\"cqa-api-edit-step-payload-textarea-input cqa-w-full cqa-outline-none cqa-box-border\"\n                        [ngClass]=\"{'cqa-api-edit-step-payload-textarea-input--error': payloadJsonError}\"\n                        [value]=\"payloadText\"\n                        placeholder=\"\"\n                        [attr.aria-label]=\"'Payload'\"\n                        [attr.aria-invalid]=\"!!payloadJsonError\"\n                        (input)=\"onPayloadInput($event)\"\n                        (keydown)=\"onPayloadKeydown($event)\">\n                      </textarea>\n                    </div>\n                  </div>\n                </div>\n                <p *ngIf=\"payloadJsonError\" class=\"cqa-api-edit-step-payload-json-error-msg\">\n                  Invalid JSON format. Please check your syntax.\n                </p>\n              </div>\n\n              <!-- x-www-form-urlencoded: Key\u2013Value rows, add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'x-www-form-urlencoded'\" class=\"cqa-api-edit-step-key-value\">\n                <div class=\"cqa-api-edit-step-key-value-grid cqa-api-edit-step-key-value-header\">\n                  <span class=\"cqa-api-edit-step-key-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-value-label cqa-api-edit-step-key-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyValueRows; let i = index; trackBy: trackByKeyValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-value-add-btn\" (clicked)=\"addKeyValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n\n              <!-- Form Data: Key\u2013Type\u2013Value rows; Type is a dropdown (Text/File), add/remove dynamically -->\n              <div *ngIf=\"payloadType === 'form-data'\" class=\"cqa-api-edit-step-key-type-value\">\n                <div class=\"cqa-api-edit-step-key-type-value-header\">\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Key</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Type</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label\">Value</span>\n                  <span class=\"cqa-api-edit-step-key-type-value-label cqa-api-edit-step-key-type-value-label--empty\"\n                    aria-hidden=\"true\"></span>\n                </div>\n                <div *ngFor=\"let row of keyTypeValueRows; let i = index; trackBy: trackByKeyTypeValue\" [formGroup]=\"row\"\n                  class=\"cqa-api-edit-step-key-type-value-row\">\n                  <cqa-custom-input [value]=\"row.get('key')?.value ?? ''\"\n                    (valueChange)=\"row.get('key')?.setValue($event)\" placeholder=\"Key\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Key\">\n                  </cqa-custom-input>\n                  <cqa-dynamic-select [form]=\"row\" [config]=\"keyTypeValueTypeSelectConfig\"\n                    class=\"cqa-api-edit-step-key-type-value-type-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input [value]=\"row.get('value')?.value ?? ''\"\n                    (valueChange)=\"row.get('value')?.setValue($event)\" placeholder=\"Value\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-key-type-value-input\" ariaLabel=\"Value\">\n                  </cqa-custom-input>\n                  <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-key-type-value-delete'\"\n                    [tooltip]=\"'Remove row'\" (clicked)=\"removeKeyTypeValueRow(i)\">\n                    <svg class=\"cqa-api-edit-step-key-type-value-delete-icon\" 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=\"#F9BFBF\" />\n                    </svg>\n                  </cqa-button>\n                </div>\n                <div class=\"cqa-api-edit-step-key-type-value-add-wrap\">\n                  <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"+ Add Row\"\n                    customClass=\"cqa-api-edit-step-key-type-value-add-btn\" (clicked)=\"addKeyTypeValueRow()\">\n                  </cqa-button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Advanced settings (step-level) -->\n        <div class=\"cqa-mt-4\">\n          <button\n            type=\"button\"\n            class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n            (click)=\"advancedExpanded = !advancedExpanded\">\n            <span class=\"cqa-text-[10px]\">Advanced</span>\n            <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [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              (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n            </cqa-advanced-variables-form>\n          </div>\n        </div>\n\n    </div>\n    <!-- Step 2: Variable Name: input, validation, Back / Next -->\n    <div *ngIf=\"currentStep === 2\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-variable-section\">\n          <div class=\"cqa-api-edit-step-variable-input-wrap\">\n            <cqa-custom-input [(value)]=\"variableName\" [label]=\"''\" placeholder=\"Variable Name\" [fullWidth]=\"true\"\n              size=\"md\" (valueChange)=\"onVariableNameChange()\" aria-label=\"Variable Name\">\n            </cqa-custom-input>\n          </div>\n          <p *ngIf=\"variableNameError\" class=\"cqa-api-edit-step-variable-error\" role=\"alert\">{{ variableNameError }}</p>\n        </div>\n    </div>\n    <!-- Step 3: Response Body / Status tabs -->\n    <div *ngIf=\"currentStep === 3\" class=\"cqa-api-edit-step-panel cqa-flex cqa-flex-col cqa-gap-6 cqa-box-border cqa-w-full\">\n        <div class=\"cqa-api-edit-step-tabs-wrapper cqa-flex cqa-flex-col cqa-gap-3\">\n          <div class=\"cqa-api-edit-step-tabs\">\n            <cqa-button *ngFor=\"let tab of responseVerificationTabs\" type=\"button\" variant=\"text\" [text]=\"tab.label\"\n              [customClass]=\"'cqa-api-edit-step-tab' + (activeResponseVerificationTab === tab.value ? ' cqa-api-edit-step-tab--active' : '')\"\n              (clicked)=\"setResponseVerificationTab(tab.value)\">\n            </cqa-button>\n          </div>\n\n          <!-- Response Body tab content: verification grid -->\n          <div *ngIf=\"activeResponseVerificationTab === 'response-body'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-verification\">\n              <div class=\"cqa-api-edit-step-verification-grid cqa-api-edit-step-verification-grid-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">JSON Path</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Data Type</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of verificationRows; let i = index; trackBy: trackByVerification\" [formGroup]=\"row\"\n                class=\"cqa-api-edit-step-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-custom-input [value]=\"row.get('jsonPath')?.value ?? ''\"\n                  (valueChange)=\"row.get('jsonPath')?.setValue($event)\" placeholder=\"Json Path\" [fullWidth]=\"true\"\n                  size=\"sm\" class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"JSON Path\">\n                </cqa-custom-input>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"verificationDataTypeSelectConfig\"\n                  class=\"cqa-api-edit-step-verification-select cqa-w-full\"\n                  (selectionChange)=\"onVerificationDataTypeChange(row, $event)\">\n                </cqa-dynamic-select>\n                <!-- Expected Value: text for String/Array/Object, number for Number, dropdown for Boolean -->\n                <ng-container [ngSwitch]=\"row.get('dataType')?.value\">\n                  <cqa-dynamic-select *ngSwitchCase=\"'boolean'\" [form]=\"row\"\n                    [config]=\"verificationExpectedValueBooleanSelectConfig\"\n                    class=\"cqa-api-edit-step-verification-select cqa-api-edit-step-verification-expected-select cqa-w-full\">\n                  </cqa-dynamic-select>\n                  <cqa-custom-input *ngSwitchCase=\"'number'\" [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value (number)\"\n                    type=\"number\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input cqa-api-edit-step-verification-expected-number\"\n                    ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                  <cqa-custom-input *ngSwitchDefault [value]=\"row.get('expectedValue')?.value ?? ''\"\n                    (valueChange)=\"row.get('expectedValue')?.setValue($event)\"\n                    placeholder=\"Expected Value in String\" [fullWidth]=\"true\" size=\"sm\"\n                    class=\"cqa-api-edit-step-verification-input\" ariaLabel=\"Expected Value\">\n                  </cqa-custom-input>\n                </ng-container>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n\n          <!-- Status tab content: S.no, Verification dropdown, Expected Value, add/remove rows -->\n          <div *ngIf=\"activeResponseVerificationTab === 'status'\" class=\"cqa-api-edit-step-step3-content\">\n            <div class=\"cqa-api-edit-step-verification-header-row cqa-flex cqa-flex-row cqa-justify-end cqa-items-center cqa-pt-0 cqa-pr-0 cqa-pb-2 cqa-pl-0\">\n              <span></span>\n              <cqa-button type=\"button\" variant=\"text\" text=\"Add Verification\"\n                customClass=\"cqa-api-edit-step-verification-add-link\" (clicked)=\"addStatusVerificationRow()\">\n              </cqa-button>\n            </div>\n            <div class=\"cqa-api-edit-step-status-verification\">\n              <div class=\"cqa-api-edit-step-status-verification-header\">\n                <span class=\"cqa-api-edit-step-verification-label\">S.no</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Verification</span>\n                <span class=\"cqa-api-edit-step-verification-label\">Expected Value</span>\n                <span class=\"cqa-api-edit-step-verification-label cqa-api-edit-step-verification-label--empty\"\n                  aria-hidden=\"true\"></span>\n              </div>\n              <div *ngFor=\"let row of statusVerificationRows; let i = index; trackBy: trackByStatusVerification\"\n                [formGroup]=\"row\" class=\"cqa-api-edit-step-status-verification-row\">\n                <span class=\"cqa-api-edit-step-verification-sno\">{{ i + 1 }}</span>\n                <cqa-dynamic-select [form]=\"row\" [config]=\"statusVerificationSelectConfig\"\n                  class=\"cqa-api-edit-step-status-verification-select cqa-w-full\">\n                </cqa-dynamic-select>\n                <cqa-custom-input [value]=\"row.get('expectedValue')?.value ?? ''\"\n                  (valueChange)=\"row.get('expectedValue')?.setValue($event)\" placeholder=\"Expected Value\"\n                  type=\"number\" [fullWidth]=\"true\" size=\"sm\" class=\"cqa-api-edit-step-verification-input\"\n                  ariaLabel=\"Expected Value\">\n                </cqa-custom-input>\n                <cqa-button type=\"button\" variant=\"text\" [customClass]=\"'cqa-api-edit-step-verification-delete'\"\n                  [tooltip]=\"'Remove row'\" (clicked)=\"removeStatusVerificationRow(i)\">\n                  <svg class=\"cqa-api-edit-step-verification-delete-icon\" 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=\"#F9BFBF\" />\n                  </svg>\n                </cqa-button>\n              </div>\n            </div>\n          </div>\n        </div>\n    </div>\n  </div>\n\n  <!-- Response Preview -->\n  <div #responsePreviewRef class=\"cqa-api-edit-step-response\">\n    <h3 class=\"cqa-api-edit-step-response-title cqa-text-[14px] cqa-font-bold cqa-leading-[20px] cqa-text-[#111827] cqa-m-0 cqa-mb-[12px] cqa-shrink-0\">Response Preview</h3>\n    <pre class=\"cqa-api-edit-step-response-content\">{{ responsePreview }}</pre>\n  </div>\n\n  <!-- Step actions: one row, full width. Step 1: Cancel + Next; Step 2: Back + Next; Step 3: Back + Create -->\n  <div class=\"cqa-api-edit-step-actions\">\n    <ng-container [ngSwitch]=\"currentStep\">\n      <ng-container *ngSwitchCase=\"1\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Cancel\"\n          customClass=\"cqa-api-edit-step-actions-btn-cancel\" (clicked)=\"onCancel()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"2\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button type=\"button\" variant=\"filled\" btnSize=\"lg\" text=\"Next\"\n          customClass=\"cqa-api-edit-step-actions-btn-next\" (clicked)=\"onNext()\">\n        </cqa-button>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"3\">\n        <cqa-button type=\"button\" variant=\"outlined\" btnSize=\"lg\" text=\"Back\"\n          customClass=\"cqa-api-edit-step-actions-btn-back\" (clicked)=\"onBack()\">\n        </cqa-button>\n        <cqa-button *ngIf=\"!isCreatingStep\" type=\"button\" variant=\"filled\" btnSize=\"lg\" [text]=\"editMode ? 'Update' : 'Create'\"\n          customClass=\"cqa-api-edit-step-actions-btn-create\" (clicked)=\"onCreate()\">\n        </cqa-button>\n        <!-- Match cqa-button flex: actions row styles > cqa-button { flex: 1 1 0 } \u2014 loader div must grow same width as Create -->\n        <div *ngIf=\"isCreatingStep\" class=\"cqa-api-edit-step-actions-loader cqa-w-full cqa-min-h-[38px] cqa-rounded-[8px] cqa-flex cqa-items-center cqa-justify-center\">\n          <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n            [inlineStyles]=\"'min-height: 38px; height: 38px; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n            variant=\"info\" size=\"medium\"></cqa-badge>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { initialMethod: [{
                 type: Input
             }], initialEnvironment: [{
@@ -29868,6 +29928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editMode: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], importCurl: [{
                 type: Output
             }], importCurlCancel: [{
@@ -32393,6 +32455,8 @@ class StepBuilderActionComponent {
         this.hasMoreEnvironments = false;
         /** True while parent is loading environments (search or load more) */
         this.isLoadingEnvironments = false;
+        /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
+        this.isCreatingStep = false;
         this.templateChanged = new EventEmitter();
         this.loadMoreElements = new EventEmitter(); // Emit when load more is requested
         this.searchElements = new EventEmitter(); // Emit when user searches for elements
@@ -33141,10 +33205,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (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            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <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          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "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"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+StepBuilderActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: { showHeader: "showHeader", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", preventSelectTemplate: "preventSelectTemplate", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", isCreatingStep: "isCreatingStep" }, outputs: { templateChanged: "templateChanged", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", createStep: "createStep", cancelled: "cancelled", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { styleAttribute: "display: block;height: 100%;width: 100%;", classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "templateVariablesForm", first: true, predicate: TemplateVariablesFormComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (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            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <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          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge\n          label=\"Creating\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: SearchBarComponent, selector: "cqa-search-bar", inputs: ["placeholder", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "search", "cleared"] }, { type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "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: 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"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (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            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <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          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-action', host: { class: 'cqa-ui-root', style: 'display: block;height: 100%;width: 100%;' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-p-[16px]\" [ngClass]=\"{'cqa-px-4': showHeader, 'cqa-py-2': showHeader && !selectedTemplate}\">\n  <!-- Header -->\n  \n  <div *ngIf=\"showHeader\" class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-2\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit an action step' : 'Create an action step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && !selectedTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onCancelTemplateSelection()\">\n    </cqa-button>\n  </div>\n  <div *ngIf=\"!selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-h-full cqa-flex-1\"\n    [ngClass]=\"{'cqa-px-3': showHeader}\">\n\n    <!-- Search Bar -->\n    <div class=\"cqa-pb-1\">\n      <div class=\"cqa-pb-1\" *ngIf=\"showHeader\">\n        <p class=\"cqa-text-[12px] cqa-text-gray-500\">\n          Template library\n        </p>\n      </div>\n      <cqa-search-bar [placeholder]=\"searchPlaceholder\" [fullWidth]=\"true\" [value]=\"searchValue\"\n        (valueChange)=\"onSearchChange($event)\" (search)=\"onSearchSubmit($event)\" (cleared)=\"onSearchCleared()\">\n      </cqa-search-bar>\n    </div>\n\n    <!-- Template List -->\n    <div class=\"cqa-flex-1 cqa-overflow-y-auto cqa-px-2\">\n      <div class=\"cqa-py-2\">\n        <div *ngFor=\"let template of filteredTemplates; trackBy: trackByTemplate\"\n          class=\"cqa-action-format cqa-bg-white cqa-cursor-pointer cqa-transition-all hover:cqa-border-blue-500 hover:cqa-shadow-sm mb-6\"\n          (click)=\"selectTemplate(template)\">\n          <div class=\"cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n            [innerHTML]=\"template.htmlGrammar || template.naturalText || ''\">\n          </div>\n        </div>\n\n        <div *ngIf=\"filteredTemplates.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-gray-400 cqa-text-[12px]\">\n          No templates found\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"selectedTemplate\" class=\"cqa-flex cqa-flex-col cqa-overflow-y-auto\" style=\"flex: 1 1 0 !important;\">\n    <!-- Instruction Text with Element Buttons -->\n    <div class=\"cqa-mb-2 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700 cqa-py-2\">\n      <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n        [innerHTML]=\"updatedHtmlGrammar || selectedTemplate.htmlGrammar || selectedTemplate.naturalText || ''\">\n      </div>\n      \n      <div class=\"cqa-flex cqa-justify-end cqa-pt-2 cqa-gap-2\" *ngIf=\"!createElementVisible\">\n        <cqa-button \n          *ngIf=\"selectorVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Element\"\n          (clicked)=\"onShowElementForm()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"parameterVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Parameter\"\n          (clicked)=\"redirectToParameter.emit()\">\n        </cqa-button>\n        <cqa-button \n          *ngIf=\"environmentVariableAvailable\"\n          variant=\"outlined\" \n          btnSize=\"sm\"\n          icon=\"add\"\n          text=\"Create Environment\"\n          (clicked)=\"redirectToEnvironment.emit()\">\n        </cqa-button>\n      </div>\n    </div>\n\n    <!-- Form Fields in Two Columns -->\n    <div class=\"cqa-flex cqa-overflow-y-auto cqa-flex-1 cqa-pb-2\">\n      <div class=\"cqa-flex-1 cqa-flex cqa-flex-col cqa-gap-1\">\n        <div class=\"cqa-flex cqa-gap-x-6 cqa-flex-wrap cqa-pb-4\">\n          <!-- Template Variables Form Component -->\n          <cqa-template-variables-form\n            #templateVariablesForm\n            style=\"width: 100%;\"\n            [templateVariables]=\"templateVariables\"\n            [variablesForm]=\"variablesForm\"\n            [metadata]=\"metadata\"\n            [description]=\"description\"\n            [elementOptions]=\"elementOptions\"\n            [hasMoreElements]=\"hasMoreElements\"\n            [isLoadingElements]=\"isLoadingElements\"\n            [screenNameOptions]=\"screenNameOptions\"\n            [hasMoreScreenNames]=\"hasMoreScreenNames\"\n            [isLoadingScreenNames]=\"isLoadingScreenNames\"\n            [parameterOptions]=\"parameterOptions\"\n            [hasMoreParameters]=\"hasMoreParameters\"\n            [isLoadingParameters]=\"isLoadingParameters\"\n            [uploadOptions]=\"uploadOptions\"\n            [hasMoreUploads]=\"hasMoreUploads\"\n            [isLoadingUploads]=\"isLoadingUploads\"\n            [environmentOptions]=\"environmentOptions\"\n            [hasMoreEnvironments]=\"hasMoreEnvironments\"\n            [isLoadingEnvironments]=\"isLoadingEnvironments\"\n            [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n            [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n            [createElementVisible]=\"createElementVisible\"\n            (variableValueChange)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"metadata = $event\"\n            (descriptionChange)=\"description = $event\"\n            (loadMoreElements)=\"loadMoreElements.emit()\"\n            (searchElements)=\"searchElements.emit($event)\"\n            (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            (searchUploads)=\"searchUploads.emit($event)\"\n            (loadMoreUploads)=\"loadMoreUploads.emit()\"\n            (searchEnvironments)=\"searchEnvironments.emit($event)\"\n            (loadMoreEnvironments)=\"loadMoreEnvironments.emit()\"\n            (elementFormVisibilityChange)=\"onElementFormVisibilityChange($event)\">\n          </cqa-template-variables-form>\n        </div>\n\n        <!-- Advanced (Expandable) -->\n          <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n            <button type=\"button\"\n              class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between  cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n              (click)=\"toggleAdvanced()\">\n              <span class=\"cqa-text-[10px]\">Advanced</span>\n              <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n                expand_more\n              </mat-icon>\n            </button>\n            <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n              <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          \n        </div>\n      </div>\n\n\n    </div>\n\n    <!-- Action Buttons -->\n    <div *ngIf=\"!createElementVisible\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-border-t cqa-border-gray-200 cqa-pb-2\">\n      <cqa-button class=\"cqa-w-1/2\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n      <cqa-button *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"isEditMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n        [disabled]=\"!isFormValid()\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <!-- Loader slot: same size as Create Step button (lg: 38px height, full width, rounded-[8px]) -->\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge\n          label=\"Creating\u2026\"\n          icon=\"autorenew\"\n          [isLoading]=\"true\"\n          [fullWidth]=\"true\"\n          [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\"\n          size=\"medium\">\n        </cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], templates: [{
@@ -33199,6 +33263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], defaultTestDataStartIndex: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], templateChanged: [{
                 type: Output
             }], loadMoreElements: [{
@@ -33256,6 +33322,8 @@ class StepBuilderLoopComponent {
         this.hasMoreDataProfiles = false;
         /** Loading state for data profiles */
         this.isLoadingDataProfiles = false;
+        /** True while parent is creating the step (API in progress); show loader on Create Step button */
+        this.isCreatingStep = false;
         /** Function to handle variable processing or custom logic. Can be passed from parent component. */
         this.setWhileTemplateVariables = () => { return []; };
         /** Function to handle advanced settings variables. Can be passed from parent component. */
@@ -33756,10 +33824,10 @@ class StepBuilderLoopComponent {
     }
 }
 StepBuilderLoopComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\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          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (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      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+StepBuilderLoopComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderLoopComponent, selector: "cqa-step-builder-loop", inputs: { loopType: "loopType", selectOptions: "selectOptions", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", whileTemplates: "whileTemplates", whileSearchPlaceholder: "whileSearchPlaceholder", whileSearchValue: "whileSearchValue", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex" }, outputs: { createStep: "createStep", cancelled: "cancelled", loopTypeChange: "loopTypeChange", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", cancelElementForm: "cancelElementForm", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", redirectToParameter: "redirectToParameter", redirectToEnvironment: "redirectToEnvironment" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\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          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (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      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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: StepBuilderActionComponent, selector: "cqa-step-builder-action", inputs: ["showHeader", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isCreatingStep"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderLoopComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\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          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (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      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-loop', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Loop Test Step\n  </h2>\n\n  <!-- Loop Type Selection -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div class=\"cqa-w-full cqa-inline-flex cqa-items-center cqa-bg-gray-100 cqa-rounded-lg cqa-p-1 cqa-gap-0\" style=\"height: 30px; background-color: #F3F4F6;\">\n      <!-- For Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'for' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'for' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('for')\">\n        For\n      </button>\n      <!-- While Button -->\n      <button\n        type=\"button\"\n        class=\"cqa-w-1/2 cqa-text-[12px] cqa-rounded-md cqa-font-medium cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-min-w-[80px] cqa-text-center cqa-cursor-pointer\"\n        [style.background-color]=\"selectedLoopType === 'while' ? '#3F43EE' : 'transparent'\"\n        [style.color]=\"selectedLoopType === 'while' ? '#FFFFFF' : '#6B7280'\"\n        [style.border-radius]=\"'8px'\"\n        [style.height]=\"'22px'\"\n        (click)=\"onLoopTypeChange('while')\">\n        While\n      </button>\n    </div>\n  </div>\n\n  <!-- Form Fields -->\n   <ng-container *ngIf=\"selectedLoopType === 'for'\">\n  <div class=\"cqa-flex cqa-flex-col cqa-gap-4 cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Dropdown Fields Row -->\n    <div class=\"cqa-flex cqa-gap-4 cqa-flex-wrap\">\n      <!-- Select Option -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Select Option\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"selectOptionConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'dataProfile'\">\n      <!-- Data Profile -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Data Profile\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"dataProfileConfig\"\n          (searchChange)=\"onSearchDataProfiles($event.query)\"\n          (loadMore)=\"onLoadMoreDataProfiles($event)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop Start -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop Start\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopStartConfig\">\n        </cqa-dynamic-select>\n      </div>\n\n      <!-- Loop End -->\n      <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n          Loop End\n        </label>\n        <cqa-dynamic-select\n          [form]=\"loopForm\"\n          [config]=\"loopEndConfig\">\n        </cqa-dynamic-select>\n      </div>\n      </ng-container>\n      <ng-container *ngIf=\"loopForm.get('selectOption')?.value === 'runTime'\">\n        <!-- Run Time Input Field -->\n        <div class=\"cqa-flex cqa-flex-col cqa-flex-1\" style=\"min-width: calc(25% - 12px);\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1.5\">\n            Run Time\n          </label>\n          <cqa-custom-input\n            [placeholder]=\"'Enter Run Time'\"\n            [value]=\"loopForm.get('runTime')?.value\"\n            [fullWidth]=\"true\"\n            (valueChange)=\"loopForm.get('runTime')?.setValue($event)\">\n          </cqa-custom-input>\n        </div>\n      </ng-container>\n    </div>\n\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          (variableValueChange)=\"onAdvancedVariableValueChange($event.name, $event.value)\">\n        </cqa-advanced-variables-form>\n      </div>\n    </div> \n  </div>\n</ng-container>\n  <ng-container *ngIf=\"selectedLoopType === 'while'\">\n    <cqa-step-builder-action \n      [showHeader]=\"false\" \n      [templates]=\"whileTemplates\" \n      [setTemplateVariables]=\"setWhileTemplateVariables\" \n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [searchPlaceholder]=\"whileSearchPlaceholder\"\n      [elementOptions]=\"elementOptions\"\n      [hasMoreElements]=\"hasMoreElements\"\n      [isLoadingElements]=\"isLoadingElements\"\n      [screenNameOptions]=\"screenNameOptions\"\n      [hasMoreScreenNames]=\"hasMoreScreenNames\"\n      [isLoadingScreenNames]=\"isLoadingScreenNames\"\n      [parameterOptions]=\"parameterOptions\"\n      [hasMoreParameters]=\"hasMoreParameters\"\n      [isLoadingParameters]=\"isLoadingParameters\"\n      [environmentOptions]=\"environmentOptions\"\n      [hasMoreEnvironments]=\"hasMoreEnvironments\"\n      [isLoadingEnvironments]=\"isLoadingEnvironments\"\n      [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n      [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n      (templateChanged)=\"selectWhileTemplate($event)\" \n      (createStep)=\"createWhileStep($event)\"\n      (loadMoreElements)=\"loadMoreElements.emit()\"\n      (searchElements)=\"searchElements.emit($event)\"\n      (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      (redirectToParameter)=\"redirectToParameter.emit()\"\n      (redirectToEnvironment)=\"redirectToEnvironment.emit()\"\n      (cancelElementForm)=\"cancelElementForm.emit()\">\n    </cqa-step-builder-action>\n  </ng-container>\n\n  <!-- Action Buttons -->\n  <div *ngIf=\"selectedLoopType === 'for'\" class=\"cqa-flex cqa-w-full cqa-gap-2 cqa-mt-6 cqa-pt-4 cqa-border-t cqa-border-gray-200\">\n    <cqa-button\n      class=\"cqa-w-1/2\"\n      variant=\"outlined\"\n      text=\"Cancel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isCreatingStep\"\n      class=\"cqa-w-1/2\"\n      variant=\"filled\"\n      text=\"Create Step\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { loopType: [{
                 type: Input
             }], selectOptions: [{
@@ -33770,6 +33838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isLoadingDataProfiles: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], setWhileTemplateVariables: [{
                 type: Input
             }], setAdvancedSettingsVariables: [{
@@ -33884,6 +33954,8 @@ class StepBuilderConditionComponent {
         this.environmentOptions = [];
         this.hasMoreEnvironments = false;
         this.isLoadingEnvironments = false;
+        /** True while parent is creating the step (API in progress); show loader on Create Step button */
+        this.isCreatingStep = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -34593,10 +34665,10 @@ class StepBuilderConditionComponent {
     }
 }
 StepBuilderConditionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderConditionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderConditionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderConditionComponent, selector: "cqa-step-builder-condition", inputs: { operatorOptions: "operatorOptions", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", 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]=\"!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: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: ["templateVariables", "variablesForm", "metadata", "description", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "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 });
+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", isCreatingStep: "isCreatingStep" }, 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 *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\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", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "isEditInDepth", "createElementVisible"], outputs: ["variableValueChange", "variableBooleanChange", "metadataChange", "descriptionChange", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "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"] }, { 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"] }], 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]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-condition', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cqa-flex cqa-flex-col cqa-h-full cqa-bg-white cqa-px-4 cqa-py-2\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    Create Condition Step\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Condition Builder Section -->\n    <div class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-3\">\n      <h3 class=\"cqa-text-sm cqa-text-[12px] cqa-font-semibold cqa-text-gray-900\">\n        Condition Builder\n      </h3>\n      </div>\n\n      <!-- Condition Rows -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-3 cqa-mb-3\">\n        <ng-container *ngFor=\"let condition of conditionsFormArray.controls; let i = index; trackBy: trackByConditionIndex\">\n          <div\n            *ngIf=\"isConditionIf(i) || isConditionElseIf(i)\"\n            class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n            <!-- Condition Row -->\n            <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n              <!-- Condition Label -->\n              <div class=\"cqa-text-[12px] cqa-font-semibold\">\n                {{ getConditionLabel(i) }}\n              </div>\n\n              <!-- Operator Dropdown -->\n              <!-- <div class=\"cqa-flex-1 cqa-max-w-[100px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getOperatorConfig(i)\">\n                </cqa-dynamic-select>\n              </div> -->\n\n              <!-- Value Template Dropdown -->\n              <div class=\"cqa-flex-1 cqa-min-w-[150px] cqa-text-[10px]\">\n                <cqa-dynamic-select [form]=\"getConditionFormGroup(i)\" [config]=\"getValueConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n\n              <!-- Remove Button -->\n              <cqa-button\n                *ngIf=\"i >= 1\"\n                variant=\"text\"\n                icon=\"close\"\n                iconPosition=\"start\"\n                [customClass]=\"'cqa-w-full cqa-flex cqa-items-center cqa-justify-center'\"\n                (click)=\"removeCondition(i)\"\n                [attr.aria-label]=\"'Remove condition'\">\n              </cqa-button>\n              <!-- <button type=\"button\"\n                class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-rounded cqa-text-gray-500 hover:cqa-text-gray-700 hover:cqa-bg-gray-100 cqa-transition-colors\"\n                (click)=\"removeCondition(i)\" *ngIf=\"i >= 1\"\n                [attr.aria-label]=\"'Remove condition'\">\n                <mat-icon class=\"cqa-text-lg cqa-text-[24px]\">close</mat-icon>\n              </button> -->\n            </div>\n\n            <!-- Template Variables Section (shown when template is selected) -->\n            <div *ngIf=\"getSelectedTemplate(i)\" class=\"cqa-mt-2\">\n              <!-- Template Grammar Display -->\n              <div class=\"cqa-mb-4 cqa-flex cqa-items-center cqa-flex-wrap cqa-gap-1 cqa-text-sm cqa-text-gray-700\">\n                <div class=\"cqa-action-format cqa-text-[12px] cqa-leading-[23px] cqa-text-black-100\"\n                  [innerHTML]=\"getSelectedTemplate(i)?.htmlGrammar || getSelectedTemplate(i)?.naturalText || ''\">\n                </div>\n                \n              </div>\n              \n              <!-- Template Variables Form Component (includes Description and Metadata) -->\n              <cqa-template-variables-form\n                style=\"width: 100%;\"\n                [templateVariables]=\"getConditionTemplateVariables(i)\"\n                [variablesForm]=\"getConditionVariablesForm(i)\"\n                [metadata]=\"getConditionFormGroup(i).get('metadata')?.value || ''\"\n                [description]=\"getConditionFormGroup(i).get('description')?.value || ''\"\n                [elementOptions]=\"elementOptions\"\n                [hasMoreElements]=\"hasMoreElements\"\n                [isLoadingElements]=\"isLoadingElements\"\n                [screenNameOptions]=\"screenNameOptions\"\n                [hasMoreScreenNames]=\"hasMoreScreenNames\"\n                [isLoadingScreenNames]=\"isLoadingScreenNames\"\n                [parameterOptions]=\"parameterOptions\"\n                [hasMoreParameters]=\"hasMoreParameters\"\n                [isLoadingParameters]=\"isLoadingParameters\"\n                [environmentOptions]=\"environmentOptions\"\n                [hasMoreEnvironments]=\"hasMoreEnvironments\"\n                [isLoadingEnvironments]=\"isLoadingEnvironments\"\n                [defaultTestDataProfileId]=\"defaultTestDataProfileId\"\n                [defaultTestDataStartIndex]=\"defaultTestDataStartIndex\"\n                (variableValueChange)=\"onConditionVariableValueChange(i, $event.name, $event.value)\"\n                (variableBooleanChange)=\"onConditionVariableBooleanChange(i, $event.name, $event.value)\"\n                (metadataChange)=\"getConditionFormGroup(i).get('metadata')?.setValue($event)\"\n                (descriptionChange)=\"getConditionFormGroup(i).get('description')?.setValue($event)\"\n                (loadMoreElements)=\"loadMoreElements.emit()\"\n                (searchElements)=\"searchElements.emit($event)\"\n                (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 *ngIf=\"!isCreatingStep\" class=\"cqa-w-1/2\" variant=\"filled\" text=\"Create Step\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { operatorOptions: [{
                 type: Input
             }], conditionTemplates: [{
@@ -34633,6 +34705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], defaultTestDataStartIndex: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -34677,6 +34751,8 @@ class StepBuilderDatabaseComponent {
         this.queryResults = [];
         /** Loading state */
         this.isLoading = false;
+        /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
+        this.isCreatingStep = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -35467,10 +35543,10 @@ 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.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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.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: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.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", isCreatingStep: "isCreatingStep", 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 *ngIf=\"!isCreatingStep\" 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 *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\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$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.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: i6.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: [] }]
+            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 *ngIf=\"!isCreatingStep\" 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 *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { dbEnvironmentOptions: [{
                 type: Input
             }], queries: [{
@@ -35483,6 +35559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editMode: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -35524,6 +35602,8 @@ class StepBuilderAiAgentComponent {
         /** Options for other locators dropdown */
         this.otherLocatorsOptions = [];
         this.editMode = false;
+        /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
+        this.isCreatingStep = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -35886,10 +35966,10 @@ class StepBuilderAiAgentComponent {
     }
 }
 StepBuilderAiAgentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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 cqa-h-full cqa-overflow-y-auto\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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        <!-- Continue on Error -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Disabled -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Retry Count -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Iframe locator -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Other Locators -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\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]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ 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: 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: 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"] }] });
+StepBuilderAiAgentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderAiAgentComponent, selector: "cqa-step-builder-ai-agent", inputs: { typeOptions: "typeOptions", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", retryCountOptions: "retryCountOptions", iframeLocatorOptions: "iframeLocatorOptions", otherLocatorsOptions: "otherLocatorsOptions", initialQuery: "initialQuery", initialType: "initialType", initialDescription: "initialDescription", initialEnvironments: "initialEnvironments", initialMetadata: "initialMetadata", initialDisabled: "initialDisabled", initialContinueOnError: "initialContinueOnError", initialRetryCount: "initialRetryCount", initialIframeLocator: "initialIframeLocator", initialOtherLocators: "initialOtherLocators", editMode: "editMode", isCreatingStep: "isCreatingStep", advancedSettingsVariables: "advancedSettingsVariables" }, outputs: { createStep: "createStep", cancelled: "cancelled", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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 cqa-h-full cqa-overflow-y-auto\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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        <!-- Continue on Error -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Disabled -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Retry Count -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Iframe locator -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Other Locators -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\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 *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ 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: 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: 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"] }, { 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"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderAiAgentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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        <!-- Continue on Error -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Disabled -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Retry Count -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Iframe locator -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Other Locators -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\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]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-ai-agent', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full cqa-overflow-y-auto\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit AI Step' : 'Create AI Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 \">\n    <!-- What should the agent achieve? -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-text-[14px] cqa-font-medium cqa-text-gray-700 cqa-mb-1 cqa-block\">\n        What should the agent achieve?<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-custom-textarea\n       class=\"cqa-step-builder-ai-agent-textarea\"\n        [placeholder]=\"'What should the agent achieve?'\"\n        [value]=\"aiAgentForm.get('query')?.value\"\n        [fullWidth]=\"true\"\n        [rows]=\"4\"\n        [textareaInlineStyle]=\"'resize: vertical;max-height: 400px;'\"\n        (valueChange)=\"aiAgentForm.get('query')?.setValue($event)\">\n      </cqa-custom-textarea>\n      <p class=\"cqa-text-[12px] cqa-text-[#0A0A0A] \">\n        Tip: Use numbered steps or bullet points for complex tasks.\n      </p>\n    </div>\n    <div class=\"cqa-flex cqa-flex-wrap cqa-custom-form-fields\">\n    <!-- Type Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pr-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Type<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select class=\"cqa-w-full\" [form]=\"aiAgentForm\" [config]=\"getTypeConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Environments Dropdown -->\n    <div class=\"cqa-mb-6 cqa-w-1/2 cqa-pl-2\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Envioronments<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getEnvironmentConfig()\">\n      </cqa-dynamic-select>\n    </div>\n\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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Metadata\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('metadata')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.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-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Description\n      </label>\n      <cqa-custom-input\n        [placeholder]=\"'Text Input'\"\n        [value]=\"aiAgentForm.get('description')?.value\"\n        [fullWidth]=\"true\"\n        (valueChange)=\"aiAgentForm.get('description')?.setValue($event)\">\n      </cqa-custom-input>\n    </div>\n    </div>\n\n\n    <!-- Advanced Section -->\n    <div class=\"cqa-mb-2\">\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-between cqa-w-full cqa-text-left cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-py-2 cqa-border-b cqa-border-gray-200\"\n        (click)=\"toggleAdvanced()\">\n        <span class=\"cqa-text-[10px]\">Advanced</span>\n        <mat-icon class=\"cqa-text-lg cqa-transition-transform\" [class.cqa-rotate-180]=\"showAdvanced\">\n          expand_more\n        </mat-icon>\n      </button>\n      <div *ngIf=\"showAdvanced\" class=\" cqa-custom-form-fields cqa-flex cqa-flex-col\">\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        <!-- Continue on Error -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-text-[#737373]\">Continue on Error</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('continueOnError')?.value || false\"\n              (change)=\"aiAgentForm.get('continueOnError')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Don't fail the test if this step fails.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Disabled -->\n        <!-- <div class=\"cqa-mb-1\">\n          <div class=\"cqa-mb-2\">\n            <span class=\"cqa-text-[10px] cqa-font-medium cqa-text-[#737373]\">Disabled</span>\n          </div>\n          <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <mat-slide-toggle\n              class=\"cqa-step-builder-toggle-section\"\n              [checked]=\"aiAgentForm.get('disabled')?.value || false\"\n              (change)=\"aiAgentForm.get('disabled')?.setValue($event.checked)\"\n              color=\"primary\">\n            </mat-slide-toggle>\n            <label class=\"cqa-text-[12px] cqa-font-normal cqa-text-[#0A0A0A]\">\n              Skip this step during execution.\n            </label>\n          </div>\n        </div> -->\n\n        <!-- Retry Count -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Retry Count\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getRetryCountConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Iframe locator -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Iframe locator\n          </label>\n          <cqa-dynamic-select class=\"cqa-text-[#414146]\" [form]=\"aiAgentForm\" [config]=\"getIframeLocatorConfig()\">\n          </cqa-dynamic-select>\n        </div> -->\n\n        <!-- Other Locators -->\n        <!-- <div class=\"cqa-flex cqa-flex-col cqa-mb-1\">\n          <label class=\"cqa-leading-[100%] cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1 cqa-block\">\n            Other Locators\n          </label>\n          <cqa-dynamic-select [form]=\"aiAgentForm\" [config]=\"getOtherLocatorsConfig()\">\n          </cqa-dynamic-select>\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 *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Create Step'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!aiAgentForm.valid\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { typeOptions: [{
                 type: Input
             }], environmentOptions: [{
@@ -35926,6 +36006,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editMode: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -35950,6 +36032,8 @@ class StepBuilderCustomCodeComponent {
         /** Function to handle advanced settings variables. Can be passed from parent component. */
         this.setAdvancedSettingsVariables = () => { return []; };
         this.isEditMode = false;
+        /** True while parent is creating the step (API in progress); show loader on Create Step button */
+        this.isCreatingStep = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when cancelled */
@@ -36205,10 +36289,10 @@ 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 cqa-h-full\">\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 Editor -->\n    <div class=\"cqa-mb-3\">\n      <cqa-code-editor\n        [label]=\"'Code'\"\n        [required]=\"true\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n        [minHeight]=\"'220px'\"\n        [fullWidth]=\"true\"\n        [errors]=\"codeFieldErrors\"\n        (valueChange)=\"onCodeValueChange($event)\"\n        (validationChange)=\"onCodeValidationChange($event)\"\n        (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n      </cqa-code-editor>\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 || hasCodeSyntaxErrors\"\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: CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { 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"] }] });
+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", isCreatingStep: "isCreatingStep" }, 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 cqa-h-full\">\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 Editor -->\n    <div class=\"cqa-mb-3\">\n      <cqa-code-editor\n        [label]=\"'Code'\"\n        [required]=\"true\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n        [minHeight]=\"'220px'\"\n        [fullWidth]=\"true\"\n        [errors]=\"codeFieldErrors\"\n        (valueChange)=\"onCodeValueChange($event)\"\n        (validationChange)=\"onCodeValidationChange($event)\"\n        (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n      </cqa-code-editor>\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 *ngIf=\"!isCreatingStep\" 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 || hasCodeSyntaxErrors\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CodeEditorComponent, selector: "cqa-code-editor", inputs: ["value", "language", "label", "required", "placeholder", "fullWidth", "ariaLabel", "minHeight", "readOnly", "errors", "useFallback"], outputs: ["valueChange", "validationChange", "blur"] }, { 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"] }, { 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"] }], 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 cqa-h-full\">\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 Editor -->\n    <div class=\"cqa-mb-3\">\n      <cqa-code-editor\n        [label]=\"'Code'\"\n        [required]=\"true\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n        [minHeight]=\"'220px'\"\n        [fullWidth]=\"true\"\n        [errors]=\"codeFieldErrors\"\n        (valueChange)=\"onCodeValueChange($event)\"\n        (validationChange)=\"onCodeValidationChange($event)\"\n        (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n      </cqa-code-editor>\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 || hasCodeSyntaxErrors\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            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 cqa-h-full\">\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 Editor -->\n    <div class=\"cqa-mb-3\">\n      <cqa-code-editor\n        [label]=\"'Code'\"\n        [required]=\"true\"\n        [value]=\"customCodeForm.get('code')?.value\"\n        [language]=\"customCodeForm.get('language')?.value || 'javascript'\"\n        [minHeight]=\"'220px'\"\n        [fullWidth]=\"true\"\n        [errors]=\"codeFieldErrors\"\n        (valueChange)=\"onCodeValueChange($event)\"\n        (validationChange)=\"onCodeValidationChange($event)\"\n        (blur)=\"customCodeForm.get('code')?.markAsTouched()\">\n      </cqa-code-editor>\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 *ngIf=\"!isCreatingStep\" 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 || hasCodeSyntaxErrors\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { languageOptions: [{
                 type: Input
             }], template: [{
@@ -36227,6 +36311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isEditMode: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -36449,6 +36535,8 @@ class StepBuilderDocumentComponent {
         this.mapperHelpUrl = '';
         /** Tooltip text when hovering over "Need help?" (same as custom-edit-step) */
         this.mapperHelpTooltipText = 'Not sure what to do? Click to go to our detailed step creation documentation';
+        /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
+        this.isCreatingStep = false;
         /** Whether the help tooltip is visible */
         this.showHelpTooltip = false;
         /** Emit when step is created */
@@ -36847,10 +36935,10 @@ class StepBuilderDocumentComponent {
     }
 }
 StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\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  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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"] }] });
+StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\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  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\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: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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"] }, { 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"] }], 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: StepBuilderDocumentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\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  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n  <div\n    class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n    <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n  <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n  <h2\n    class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n    Document Generation Template Step\n  </h2>\n\n    <!-- File Name and Document Type Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Name <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Name\"\n          [value]=\"documentForm.get('fileName')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The name of the file to be generated\n        </p>\n      </div>\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Document Type <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDocumentTypeConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n    </div>\n\n    <!-- Output Variable and Conditional Fields Row -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Output Variable <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <cqa-custom-input\n          placeholder=\"Input\"\n          [value]=\"documentForm.get('outputVariable')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Stores the generated file so it can be used in later steps.\n        </p>\n      </div>\n      <!-- Seprator (shown when documentType is 'txt') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Seprator\n        </label>\n        <cqa-custom-input\n          placeholder=\"Seprator\"\n          [value]=\"documentForm.get('seprator')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          The seprator to be used to separate the values in the generated file\n        </p>\n      </div>\n      <!-- Delimeter Type (shown when documentType is 'csv') -->\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Delimeter Type\n        </label>\n        <div class=\"document-type-select\">\n          <cqa-dynamic-select\n            [form]=\"documentForm\"\n            [config]=\"getDelimeterConfig()\">\n          </cqa-dynamic-select>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Choose the delimeter type for the CSV file\n        </p>\n      </div>\n    </div>\n\n    <!-- File Format Header (shown when documentType is 'txt') -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          File Format Header\n        </label>\n        <cqa-custom-input\n          placeholder=\"File Format Header\"\n          [value]=\"documentForm.get('fileFormatHeader')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Header text for the generated txt file\n        </p>\n      </div>\n    </div>\n\n    <!-- Template Source Section: label left, tabs right on same row -->\n    <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      \n      <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n          Template Source\n        </label>\n        <cqa-segment-control\n          class=\"cqa-flex-shrink-0\"\n          [segments]=\"[\n            { label: 'Use Existing Template', value: 'existing' },\n            { label: 'Upload Template', value: 'upload' },\n            { label: 'Create New', value: 'createNew' }\n          ]\"\n          [value]=\"selectedTemplateSource\"\n          (valueChange)=\"onTemplateSourceChange($event)\">\n        </cqa-segment-control>\n      </div>\n      <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n        <cqa-dynamic-select\n          [form]=\"documentForm\"\n          [config]=\"getTemplateSelectConfig()\">\n        </cqa-dynamic-select>\n      </div>\n\n      <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n          Attachment <span class=\"cqa-text-red-500\">*</span>\n        </label>\n        <input\n          #fileInput\n          type=\"file\"\n          accept=\".pdf,.doc,.docx,.txt\"\n          class=\"cqa-hidden\"\n          (change)=\"onFileSelected($event)\">\n        <div\n          class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n          [class.cqa-ring-2]=\"isDragOver\"\n          [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n          [class.cqa-ring-inset]=\"isDragOver\"\n          (click)=\"fileInput.click()\"\n          (dragover)=\"onDragOver($event)\"\n          (dragleave)=\"onDragLeave($event)\"\n          (drop)=\"onDrop($event)\"\n          role=\"button\"\n          tabindex=\"0\"\n          (keydown.enter)=\"fileInput.click()\"\n          (keydown.space)=\"fileInput.click()\"\n          aria-label=\"Upload template file\">\n          <svg class=\"cqa-w-8 cqa-h-8  cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n            <polyline points=\"17 8 12 3 7 8\"/>\n            <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n          </svg>\n          <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n            Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n          </p>\n          <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n            PDF, DOC, or TXT files\n          </p>\n        </div>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n          Choose the file format you want to generate.\n        </p>\n      </div>\n      <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Name <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateName')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n          <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n              Template Description <span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-custom-input\n              placeholder=\"PDF Document (.pdf)\"\n              [value]=\"documentForm.get('templateDescription')?.value\"\n              [fullWidth]=\"true\"\n              (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n            </cqa-custom-input>\n          </div>\n        </div>\n        <div class=\"cqa-flex cqa-justify-end\">\n          <cqa-button\n            variant=\"filled\"\n            btnSize=\"lg\"\n            text=\"Create Template\"\n            [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n            (clicked)=\"onCreateTemplate()\">\n          </cqa-button>\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n      <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n        <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n          <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n            Document Mapper\n          </h3>\n          <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n            Map placeholders to dynamic values.\n          </p>\n        </div>\n        <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n             (mouseenter)=\"showHelpTooltip = true\"\n             (mouseleave)=\"showHelpTooltip = false\">\n          <a *ngIf=\"mapperHelpUrl\"\n             href=\"#\"\n             (click)=\"onMapperHelpClick($event)\"\n             class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </a>\n          <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n            <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n              <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n                <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </g>\n              <defs>\n                <clipPath id=\"help-icon-clip-doc-nolink\">\n                  <rect width=\"17\" height=\"16\" fill=\"white\"/>\n                </clipPath>\n              </defs>\n            </svg>\n            Need help ?\n          </span>\n          <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n            <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n              {{ mapperHelpTooltipText }}\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Table or empty state: same container, header always visible -->\n      <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n        <table class=\"cqa-w-full\">\n          <thead>\n            <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"allMappingsSelected\"\n                             [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n                             (change)=\"onSelectAllMappings($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Select all mappings\">\n                </mat-checkbox>\n              </th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n              <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n                <span class=\"cqa-sr-only\">Delete</span>\n              </th>\n            </tr>\n          </thead>\n          <tbody class=\"cqa-w-full\">\n            <!-- Empty state when no mappings -->\n            <tr *ngIf=\"mappingsFormArray.length === 0\">\n              <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n                  <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n                  <button\n                    type=\"button\"\n                    class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n                    (click)=\"addMapping()\">\n                    Add first mapping\n                  </button>\n                </div>\n              </td>\n            </tr>\n            <!-- Data rows when there are mappings -->\n            <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n                class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n                             (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n                             color=\"primary\"\n                             aria-label=\"Enable mapping\">\n                </mat-checkbox>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n                <cqa-custom-input\n                  [placeholder]=\"'Key'\"\n                  [value]=\"getMappingFormGroup(i).get('key')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <div class=\"document-type-select\">\n                <cqa-dynamic-select\n                  [form]=\"getMappingFormGroup(i)\"\n                  [config]=\"getValueTypeConfig(i)\">\n                </cqa-dynamic-select>\n              </div>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <cqa-custom-input\n                  [placeholder]=\"'Value'\"\n                  [value]=\"getMappingFormGroup(i).get('value')?.value\"\n                  [fullWidth]=\"true\"\n                  (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n                </cqa-custom-input>\n              </td>\n              <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n                <button\n                  type=\"button\"\n                  class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n                  (click)=\"removeMapping(i)\"\n                  [attr.aria-label]=\"'Delete mapping'\">\n                  <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n                    <path d=\"M10 11v6M14 11v6\"/>\n                  </svg>\n                </button>\n              </td>\n            </tr>\n          </tbody>\n          \n        </table>\n        <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n          <button\n            type=\"button\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n            (click)=\"addMapping()\">\n            + Add Mapping\n          </button>\n        </div>\n      </div>\n      <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n        <button\n          type=\"button\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n          (click)=\"addMapping()\">\n          + Add Mapping\n        </button>\n      </div> -->\n    </div>\n\n    <!-- Description (after Document Mapper) -->\n    <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n      <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n          Description\n        </label>\n        <cqa-custom-input\n          placeholder=\"Description\"\n          [value]=\"documentForm.get('description')?.value\"\n          [fullWidth]=\"true\"\n          (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n        </cqa-custom-input>\n        <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n          Optional description for this document generation step\n        </p>\n      </div>\n    </div>\n  </div>\n\n  <!-- Advanced Settings Variables Form -->\n  <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\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  \n\n  <!-- Divider above footer -->\n  <div class=\"cqa-flex-shrink-0\">\n    <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n  </div>\n\n  <!-- Action Buttons -->\n  <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button\n        variant=\"outlined\"\n        btnSize=\"lg\"\n        text=\"Cancel\"\n        [fullWidth]=\"true\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n        (clicked)=\"onCancel()\">\n      </cqa-button>\n    </div>\n    <div class=\"cqa-flex-1 cqa-min-w-0\">\n      <cqa-button *ngIf=\"!isCreatingStep\"\n        variant=\"filled\"\n        btnSize=\"lg\"\n        [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n        [fullWidth]=\"true\"\n        [disabled]=\"!isFormValid()\"\n        [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n        (clicked)=\"onCreateStep()\">\n      </cqa-button>\n      <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n        <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n          [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n          variant=\"info\" size=\"medium\"></cqa-badge>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
                 type: Input
             }], templateOptions: [{
@@ -36895,6 +36983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editMode: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], cancelled: [{
@@ -38327,6 +38417,8 @@ class StepBuilderGroupComponent {
         this.editMode = false;
         /** Loading state for runtime variables */
         this.isLoadingRuntimeVariables = false;
+        /** True while parent is creating the step (API in progress); show loader on Create/Update Step button */
+        this.isCreatingStep = false;
         /** Emit when step is created */
         this.createStep = new EventEmitter();
         /** Emit when step group is selected to fetch runtime variables */
@@ -38481,10 +38573,10 @@ class StepBuilderGroupComponent {
     }
 }
 StepBuilderGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderGroupComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, 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 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\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]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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"] }] });
+StepBuilderGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderGroupComponent, selector: "cqa-step-builder-group", inputs: { stepGroupOptions: "stepGroupOptions", hasMoreStepGroups: "hasMoreStepGroups", isLoadingStepGroups: "isLoadingStepGroups", initialStepGroupId: "initialStepGroupId", editMode: "editMode", runtimeVariables: "runtimeVariables", isLoadingRuntimeVariables: "isLoadingRuntimeVariables", existingRuntimeValues: "existingRuntimeValues", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", stepGroupSelected: "stepGroupSelected", cancelled: "cancelled", loadMoreStepGroups: "loadMoreStepGroups", searchStepGroups: "searchStepGroups" }, 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 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\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 *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: 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"] }], 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: StepBuilderGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\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]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n  </div>\n</div>\n\n", styles: [] }]
+            args: [{ selector: 'cqa-step-builder-group', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-flex cqa-flex-col cqa-bg-white cqa-px-4 cqa-py-2 cqa-h-full\">\n  <!-- Header -->\n  <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-mb-4\">\n    {{ editMode ? 'Edit Step Group Test Step' : 'Create Step Group Test Step' }}\n  </h2>\n\n  <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto\">\n    <!-- Step Group Selection -->\n    <div class=\"cqa-mb-6\">\n      <label class=\"cqa-leading-[100%] cqa-block cqa-text-[14px] cqa-font-medium cqa-text-[#161617] cqa-mb-1\">\n        Select Step Group<span class=\"cqa-text-[#EF4444] cqa-ml-0.5\">*</span>\n      </label>\n      <cqa-dynamic-select\n        [form]=\"stepGroupForm\"\n        [config]=\"stepGroupConfig\">\n      </cqa-dynamic-select>\n    </div>\n\n    <!-- Step Group Description -->\n    <!-- <div *ngIf=\"selectedStepGroup\" class=\"cqa-mb-6\">\n      <div class=\"cqa-mb-2\">\n        <span class=\"cqa-text-[12px] cqa-font-medium cqa-text-[#4b5563]\">Description:</span>\n      </div>\n      <div class=\"cqa-p-3 cqa-bg-[#f9fafb] cqa-rounded cqa-border cqa-border-[#e5e7eb]\">\n        <div class=\"cqa-text-[14px] cqa-text-[#374151]\" [innerHTML]=\"getStepGroupDescription()\">\n        </div>\n      </div>\n    </div> -->\n\n    <!-- Runtime Variables Section -->\n    <div *ngIf=\"selectedStepGroup\" class=\"cqa-mt-6 cqa-mb-4\">\n      <h3 class=\"cqa-text-[14px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n        Set Parameters Default Value\n      </h3>\n      <div class=\"cqa-border-t cqa-border-gray-200 cqa-pt-4\">\n        <!-- Loading State -->\n        <div *ngIf=\"isLoadingRuntimeVariables\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n          <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading runtime variables...</div>\n        </div>\n\n        <!-- Runtime Variables Tables -->\n        <div *ngIf=\"!isLoadingRuntimeVariables && runtimeVariables\" class=\"cqa-space-y-6\">\n          <div *ngFor=\"let childGroup of runtimeVariables; let i = index\" class=\"cqa-mb-6\">\n            <h4 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-mb-3\">\n              ( {{i + 1}} ) {{ childGroup.name }}\n            </h4>\n            <ng-container *ngIf=\"childGroup.variables && childGroup.variables.length > 0; else noVariables\">\n              <div class=\"cqa-border cqa-border-gray-200 cqa-rounded-lg cqa-overflow-hidden\">\n                <table class=\"cqa-w-full cqa-text-left\">\n                  <thead class=\"cqa-bg-gray-50\">\n                    <tr>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Name\n                      </th>\n                      <th class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-font-semibold cqa-text-[#161617] cqa-border-b cqa-border-gray-200\">\n                        Parameter Value\n                      </th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    <tr *ngFor=\"let variable of childGroup.variables; let j = index\" \n                        class=\"cqa-border-b cqa-border-gray-100 last:cqa-border-b-0\">\n                      <td class=\"cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-text-[#161617]\">\n                        {{ variable.name }}\n                      </td>\n                      <td class=\"cqa-px-4 cqa-py-2\">\n                        <cqa-custom-input \n                          [placeholder]=\"'Enter value'\"\n                          [value]=\"getRuntimeVariableValue(childGroup.id, variable.name)\"\n                          [fullWidth]=\"true\"\n                          (valueChange)=\"onRuntimeVariableChange(childGroup.id, variable.name, $event)\">\n                        </cqa-custom-input>\n                      </td>\n                    </tr>\n                  </tbody>\n                </table>\n              </div>\n            </ng-container>\n            <ng-template #noVariables>\n              <p class=\"cqa-text-[12px] cqa-text-[#EF4444] cqa-py-2\">Runtime variable not available</p>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- Loading State: only show when initially loading (no options yet). Load-more loading is shown inside the dropdown. -->\n    <div *ngIf=\"isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-flex cqa-justify-center cqa-items-center cqa-py-8\">\n      <div class=\"cqa-text-[14px] cqa-text-[#6b7280]\">Loading step groups...</div>\n    </div>\n\n    <!-- Empty State -->\n    <div *ngIf=\"!isLoadingStepGroups && stepGroupOptions.length === 0\" class=\"cqa-text-center cqa-py-8 cqa-text-[#9ca3af] cqa-text-[14px]\">\n      No step groups available\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 *ngIf=\"!isCreatingStep\" class=\"cqa-border-solid cqa-rounded-[9px] cqa-w-1/2 cqa-border cqa-border-[#3F43EE]\" variant=\"filled\" [text]=\"editMode ? 'Update Step' : 'Insert Step Group'\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onCreateStep()\">\n    </cqa-button>\n    <div *ngIf=\"isCreatingStep\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n        [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n        variant=\"info\" size=\"medium\"></cqa-badge>\n    </div>\n  </div>\n</div>\n\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { stepGroupOptions: [{
                 type: Input
             }], hasMoreStepGroups: [{
@@ -38501,6 +38593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], existingRuntimeValues: [{
                 type: Input
+            }], isCreatingStep: [{
+                type: Input
             }], createStep: [{
                 type: Output
             }], stepGroupSelected: [{