@cqa-lib/cqa-ui 1.1.486 → 1.1.488

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

@@ -19456,6 +19456,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }] } });
 
+const VAR_NAME_REGEX = /^[A-Za-z_][A-Za-z0-9_]*$/;
+const VAR_TOKEN_REGEX = /\$\{([A-Za-z_][A-Za-z0-9_]*)\}/g;
+class MixedVariableInputComponent {
+    constructor(cdr, hostRef) {
+        this.cdr = cdr;
+        this.hostRef = hostRef;
+        this.value = '';
+        this.placeholder = 'Text Input';
+        this.disabled = false;
+        this.valueChange = new EventEmitter();
+        this.showSuggestion = false;
+        this.pendingWord = '';
+        this.lastEmitted = '';
+    }
+    onDocumentMouseDown(event) {
+        if (!this.showSuggestion)
+            return;
+        const target = event.target;
+        if (this.hostRef.nativeElement.contains(target))
+            return;
+        this.hideSuggestion();
+    }
+    ngOnChanges(changes) {
+        if (changes['value'] && this.editorRef) {
+            const incoming = changes['value'].currentValue ?? '';
+            if (incoming !== this.lastEmitted) {
+                this.render(incoming);
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.render(this.value || '');
+    }
+    onInput() {
+        const str = this.serialize();
+        this.lastEmitted = str;
+        this.valueChange.emit(str);
+        this.autoChipify();
+        this.refreshSuggestion();
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Escape') {
+            if (this.showSuggestion) {
+                event.preventDefault();
+                this.hideSuggestion();
+            }
+            return;
+        }
+        if (event.key === 'Backspace') {
+            const node = this.getNodeBeforeCaret();
+            if (node && node.classList?.contains('cqa-var-chip')) {
+                event.preventDefault();
+                node.remove();
+                this.onInput();
+            }
+        }
+    }
+    onEditorBlur() {
+        // Small timeout so clicks on suggestion buttons register before hiding.
+        setTimeout(() => this.hideSuggestion(), 150);
+    }
+    addAsText() {
+        this.hideSuggestion();
+        this.editorRef.nativeElement.focus();
+    }
+    addAsVariable() {
+        const name = (this.pendingWord || '').trim();
+        if (!name || !VAR_NAME_REGEX.test(name)) {
+            this.hideSuggestion();
+            return;
+        }
+        this.insertChipReplacingCurrentWord(name);
+        this.hideSuggestion();
+        const str = this.serialize();
+        this.lastEmitted = str;
+        this.valueChange.emit(str);
+    }
+    refreshSuggestion() {
+        const word = this.getCurrentWord();
+        if (word && VAR_NAME_REGEX.test(word)) {
+            this.pendingWord = word;
+            this.showSuggestion = true;
+        }
+        else {
+            this.pendingWord = '';
+            this.showSuggestion = false;
+        }
+        this.cdr.markForCheck();
+    }
+    hideSuggestion() {
+        if (!this.showSuggestion && !this.pendingWord)
+            return;
+        this.showSuggestion = false;
+        this.pendingWord = '';
+        this.cdr.markForCheck();
+    }
+    autoChipify() {
+        const editor = this.editorRef.nativeElement;
+        const textNodes = [];
+        editor.childNodes.forEach((n) => {
+            if (n.nodeType === Node.TEXT_NODE)
+                textNodes.push(n);
+        });
+        for (const tn of textNodes) {
+            const text = tn.nodeValue || '';
+            VAR_TOKEN_REGEX.lastIndex = 0;
+            if (!VAR_TOKEN_REGEX.test(text))
+                continue;
+            VAR_TOKEN_REGEX.lastIndex = 0;
+            const parent = tn.parentNode;
+            if (!parent)
+                continue;
+            const frag = document.createDocumentFragment();
+            let lastIndex = 0;
+            let m;
+            while ((m = VAR_TOKEN_REGEX.exec(text)) !== null) {
+                if (m.index > lastIndex) {
+                    frag.appendChild(document.createTextNode(text.slice(lastIndex, m.index)));
+                }
+                frag.appendChild(this.buildChip(m[1]));
+                lastIndex = m.index + m[0].length;
+            }
+            if (lastIndex < text.length) {
+                frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+            }
+            parent.replaceChild(frag, tn);
+            this.placeCaretAtEnd();
+            const str = this.serialize();
+            this.lastEmitted = str;
+            this.valueChange.emit(str);
+            return;
+        }
+    }
+    render(value) {
+        const editor = this.editorRef.nativeElement;
+        editor.innerHTML = '';
+        if (!value)
+            return;
+        VAR_TOKEN_REGEX.lastIndex = 0;
+        let lastIndex = 0;
+        let m;
+        while ((m = VAR_TOKEN_REGEX.exec(value)) !== null) {
+            if (m.index > lastIndex) {
+                editor.appendChild(document.createTextNode(value.slice(lastIndex, m.index)));
+            }
+            editor.appendChild(this.buildChip(m[1]));
+            lastIndex = m.index + m[0].length;
+        }
+        if (lastIndex < value.length) {
+            editor.appendChild(document.createTextNode(value.slice(lastIndex)));
+        }
+    }
+    serialize() {
+        const editor = this.editorRef.nativeElement;
+        let out = '';
+        editor.childNodes.forEach((n) => {
+            if (n.nodeType === Node.TEXT_NODE) {
+                out += (n.nodeValue || '').replace(/\u00a0/g, ' ');
+            }
+            else if (n.nodeType === Node.ELEMENT_NODE) {
+                const el = n;
+                if (el.classList.contains('cqa-var-chip')) {
+                    const name = el.getAttribute('data-var') || '';
+                    if (name)
+                        out += '${' + name + '}';
+                }
+                else {
+                    out += el.textContent || '';
+                }
+            }
+        });
+        return out;
+    }
+    buildChip(name) {
+        const chip = document.createElement('span');
+        chip.className = 'cqa-var-chip';
+        chip.setAttribute('contenteditable', 'false');
+        chip.setAttribute('data-var', name);
+        const label = document.createElement('span');
+        label.className = 'cqa-var-chip__label';
+        label.textContent = '${' + name + '}';
+        const remove = document.createElement('span');
+        remove.className = 'cqa-var-chip__remove';
+        remove.textContent = '×';
+        remove.addEventListener('mousedown', (e) => e.preventDefault());
+        remove.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            chip.remove();
+            this.onInput();
+        });
+        chip.appendChild(label);
+        chip.appendChild(remove);
+        return chip;
+    }
+    getSelectionRange() {
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return null;
+        const range = sel.getRangeAt(0);
+        if (!this.editorRef.nativeElement.contains(range.startContainer))
+            return null;
+        return range;
+    }
+    getNodeBeforeCaret() {
+        const range = this.getSelectionRange();
+        if (!range || !range.collapsed)
+            return null;
+        const { startContainer, startOffset } = range;
+        if (startContainer.nodeType === Node.TEXT_NODE) {
+            if (startOffset > 0)
+                return null;
+            return startContainer.previousSibling;
+        }
+        return startContainer.childNodes[startOffset - 1] || null;
+    }
+    getCurrentWord() {
+        const range = this.getSelectionRange();
+        if (!range)
+            return '';
+        const node = range.startContainer;
+        if (node.nodeType !== Node.TEXT_NODE)
+            return '';
+        const text = node.nodeValue || '';
+        const before = text.slice(0, range.startOffset);
+        const match = before.match(/([A-Za-z_][A-Za-z0-9_]*)$/);
+        return match ? match[1] : '';
+    }
+    insertChipReplacingCurrentWord(name) {
+        const range = this.getSelectionRange();
+        const chip = this.buildChip(name);
+        if (!range) {
+            this.editorRef.nativeElement.appendChild(chip);
+            this.placeCaretAfter(chip);
+            return;
+        }
+        const node = range.startContainer;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node.nodeValue || '';
+            const before = text.slice(0, range.startOffset);
+            const after = text.slice(range.startOffset);
+            const wordMatch = before.match(/([A-Za-z_][A-Za-z0-9_]*)$/);
+            const beforeKept = wordMatch ? before.slice(0, before.length - wordMatch[1].length) : before;
+            const parent = node.parentNode;
+            const frag = document.createDocumentFragment();
+            if (beforeKept)
+                frag.appendChild(document.createTextNode(beforeKept));
+            frag.appendChild(chip);
+            if (after)
+                frag.appendChild(document.createTextNode(after));
+            parent.replaceChild(frag, node);
+        }
+        else {
+            range.insertNode(chip);
+        }
+        this.placeCaretAfter(chip);
+    }
+    placeCaretAfter(node) {
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        const range = document.createRange();
+        range.setStartAfter(node);
+        range.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    placeCaretAtEnd() {
+        const editor = this.editorRef.nativeElement;
+        const sel = window.getSelection();
+        if (!sel)
+            return;
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+MixedVariableInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MixedVariableInputComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MixedVariableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-mixed-var-wrapper\">\n  <div\n    #editor\n    class=\"cqa-mixed-var-editor\"\n    role=\"textbox\"\n    spellcheck=\"false\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onEditorBlur()\">\n  </div>\n\n  <div\n    *ngIf=\"showSuggestion\"\n    class=\"cqa-mixed-var-suggest\"\n    (mousedown)=\"$event.preventDefault()\">\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item\" (click)=\"addAsText()\">\n      Add as Text <span class=\"cqa-mixed-var-suggest__hint\">\"{{ pendingWord }}\"</span>\n    </button>\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item cqa-mixed-var-suggest__item--primary\" (click)=\"addAsVariable()\">\n      Add as local variable <span class=\"cqa-mixed-var-suggest__hint\">${{ '{' }}{{ pendingWord }}{{ '}' }}</span>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;position:relative}.cqa-mixed-var-wrapper{position:relative;width:100%}.cqa-mixed-var-editor{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:14px;color:#111827;background:#fff;line-height:22px;outline:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden;word-break:normal}.cqa-mixed-var-editor:focus{border-color:#6366f1;box-shadow:0 0 0 1px #6366f1}.cqa-mixed-var-editor:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}:host ::ng-deep .cqa-var-chip{display:inline-flex;align-items:center;gap:4px;margin:0 4px;padding:2px 4px 2px 8px;border-radius:6px;background-color:#eef0ff;border:1px solid #8a8cf4;color:#3730a3;font-size:12px;line-height:18px;-webkit-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}:host ::ng-deep .cqa-var-chip__label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}:host ::ng-deep .cqa-var-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;color:#6366f1;font-size:13px;line-height:1;cursor:pointer;transition:background-color .12s ease,color .12s ease}:host ::ng-deep .cqa-var-chip__remove:hover{background:#c7d2fe;color:#312e81}.cqa-mixed-var-suggest{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px #00000014;padding:4px;display:flex;flex-direction:column}.cqa-mixed-var-suggest__item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;padding:8px 10px;font-size:13px;color:#374151;background:#fff;border:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}.cqa-mixed-var-suggest__item:hover{background:#f3f4f6}.cqa-mixed-var-suggest__item--primary{color:#4338ca;font-weight:500}.cqa-mixed-var-suggest__hint{flex:1 1 auto;min-width:0;color:#9ca3af;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], directives: [{ 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: MixedVariableInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cqa-mixed-variable-input', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-mixed-var-wrapper\">\n  <div\n    #editor\n    class=\"cqa-mixed-var-editor\"\n    role=\"textbox\"\n    spellcheck=\"false\"\n    [attr.contenteditable]=\"!disabled\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (blur)=\"onEditorBlur()\">\n  </div>\n\n  <div\n    *ngIf=\"showSuggestion\"\n    class=\"cqa-mixed-var-suggest\"\n    (mousedown)=\"$event.preventDefault()\">\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item\" (click)=\"addAsText()\">\n      Add as Text <span class=\"cqa-mixed-var-suggest__hint\">\"{{ pendingWord }}\"</span>\n    </button>\n    <button type=\"button\" class=\"cqa-mixed-var-suggest__item cqa-mixed-var-suggest__item--primary\" (click)=\"addAsVariable()\">\n      Add as local variable <span class=\"cqa-mixed-var-suggest__hint\">${{ '{' }}{{ pendingWord }}{{ '}' }}</span>\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;position:relative}.cqa-mixed-var-wrapper{position:relative;width:100%}.cqa-mixed-var-editor{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #d1d5db;border-radius:8px;padding:8px 12px;font-size:14px;color:#111827;background:#fff;line-height:22px;outline:none;white-space:nowrap;overflow-x:auto;overflow-y:hidden;word-break:normal}.cqa-mixed-var-editor:focus{border-color:#6366f1;box-shadow:0 0 0 1px #6366f1}.cqa-mixed-var-editor:empty:before{content:attr(data-placeholder);color:#9ca3af;pointer-events:none}:host ::ng-deep .cqa-var-chip{display:inline-flex;align-items:center;gap:4px;margin:0 4px;padding:2px 4px 2px 8px;border-radius:6px;background-color:#eef0ff;border:1px solid #8a8cf4;color:#3730a3;font-size:12px;line-height:18px;-webkit-user-select:none;user-select:none;vertical-align:baseline;white-space:nowrap}:host ::ng-deep .cqa-var-chip__label{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}:host ::ng-deep .cqa-var-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:transparent;color:#6366f1;font-size:13px;line-height:1;cursor:pointer;transition:background-color .12s ease,color .12s ease}:host ::ng-deep .cqa-var-chip__remove:hover{background:#c7d2fe;color:#312e81}.cqa-mixed-var-suggest{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px #00000014;padding:4px;display:flex;flex-direction:column}.cqa-mixed-var-suggest__item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;padding:8px 10px;font-size:13px;color:#374151;background:#fff;border:none;border-radius:6px;cursor:pointer;text-align:left;white-space:nowrap}.cqa-mixed-var-suggest__item:hover{background:#f3f4f6}.cqa-mixed-var-suggest__item--primary{color:#4338ca;font-weight:500}.cqa-mixed-var-suggest__hint{flex:1 1 auto;min-width:0;color:#9ca3af;font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], editorRef: [{
+                type: ViewChild,
+                args: ['editor', { static: true }]
+            }], onDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
 class CustomTextareaComponent {
     constructor() {
         this.label = '';
@@ -23754,6 +24058,8 @@ class TestCaseDetailsRendererComponent {
         this.cdr = cdr;
         this.isNested = false;
         this.isInsideLoop = false;
+        /** True when this step is nested (at any depth) inside a FOR loop specifically. */
+        this.isInsideForLoop = false;
         /** When true, step is rendered inside a step-group; row actions (Edit/Duplicate/Delete) are hidden. */
         this.isInsideStepGroup = false;
         /** Visual indentation level for nested structures (loops/step-groups/conditions). */
@@ -23828,7 +24134,7 @@ class TestCaseDetailsRendererComponent {
         this.renderStep();
     }
     ngOnChanges(changes) {
-        const structuralChange = changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] ||
+        const structuralChange = changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] || changes['isInsideForLoop'] ||
             changes['isInsideStepGroup'] || changes['isReorder'] || changes['editable'];
         const optionsOnlyChange = (changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles'] ||
             changes['naturalTextActionsOptions'] || changes['setConditionTemplateVariables']) && !structuralChange;
@@ -23933,6 +24239,7 @@ class TestCaseDetailsRendererComponent {
         instance.index = this.index; // Correct edit-in-depth for all step types (stepNumber "10.3" parses wrong)
         instance.isNested = this.isNested;
         instance.isInsideLoop = this.isInsideLoop;
+        instance.isInsideForLoop = this.isInsideForLoop;
         instance.isInsideStepGroup = this.isInsideStepGroup;
         instance.isReorder = this.isReorder;
         instance.nestingLevel = this.nestingLevel;
@@ -23950,6 +24257,7 @@ class TestCaseDetailsRendererComponent {
         // Pass data profile inputs to step instances that can contain nested loop steps
         if (isLoopStepConfig(this.step) || isConditionStepConfig(this.step) || isStepGroupConfig(this.step)) {
             instance.currentTestCaseId = this.currentTestCaseId;
+            instance.testCaseTestDataId = this.testCaseTestDataId;
             instance.dataProfileOptions = this.dataProfileOptions;
             instance.hasMoreDataProfiles = this.hasMoreDataProfiles;
             instance.isLoadingDataProfiles = this.isLoadingDataProfiles;
@@ -24161,7 +24469,7 @@ class TestCaseDetailsRendererComponent {
     }
 }
 TestCaseDetailsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, deps: [{ token: TEST_CASE_STEP_COMPONENT_MAP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", nestingLevel: "nestingLevel", branch: "branch", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", currentTestCaseId: "currentTestCaseId", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", addStepForLoop: "addStepForLoop", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", isInsideStepGroup: "isInsideStepGroup", nestingLevel: "nestingLevel", branch: "branch", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", currentTestCaseId: "currentTestCaseId", testCaseTestDataId: "testCaseTestDataId", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", addStepForLoop: "addStepForLoop", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-details-renderer', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>" }]
@@ -24179,6 +24487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideLoop: [{
                 type: Input
+            }], isInsideForLoop: [{
+                type: Input
             }], isInsideStepGroup: [{
                 type: Input
             }], nestingLevel: [{
@@ -24201,6 +24511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], currentTestCaseId: [{
                 type: Input
+            }], testCaseTestDataId: [{
+                type: Input
             }], nestedStepChange: [{
                 type: Output
             }], addStep: [{
@@ -24320,6 +24632,10 @@ class TestCaseLoopStepComponent {
         this.expanded = true;
         this.isNested = false;
         this.isInsideLoop = false;
+        /** True when this step is nested (at any depth) inside another FOR loop. Used to keep
+         *  the test-data-profile dropdown enabled only for nested FOR loops; root-level FOR
+         *  loops auto-inherit the test case's default profile and are disabled. */
+        this.isInsideForLoop = false;
         this.isInsideStepGroup = false;
         this.isReorder = false;
         this.selected = false;
@@ -24454,7 +24770,8 @@ class TestCaseLoopStepComponent {
                 this.cdr.detectChanges();
             }
         }
-        if (changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles']) {
+        if (changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles'] ||
+            changes['isInsideForLoop'] || changes['testCaseTestDataId']) {
             this.updateTestDataProfileSelectConfig();
             // When data profiles load in edit mode, sync form value so dropdown shows selected (forLoopTestDataId or testDataProfile)
             if (this.loopType === 'for' && this.editForm && this.dataProfileOptions?.length) {
@@ -24787,7 +25104,20 @@ class TestCaseLoopStepComponent {
         let options = this.convertDataProfileOptionsToSelectOptions(this.dataProfileOptions);
         const cfg = this.config;
         const forLoopTestDataId = cfg?.forLoopTestDataId ?? cfg?.dataMapJson?.forLoopTestDataId ?? cfg?.dataMapBean?.for_loop?.testDataId;
-        const selectedVal = this.loopType === 'for' ? this.getTestDataProfileFormValue() : undefined;
+        let selectedVal = this.loopType === 'for' ? this.getTestDataProfileFormValue() : undefined;
+        // Root-level FOR loop (not nested inside another FOR loop): force-select the test case's
+        // default test data profile and disable the dropdown. Mirrors the create-flow behavior.
+        const isRootForLoop = this.loopType === 'for' && !this.isInsideForLoop;
+        const lockedToTestCaseProfile = isRootForLoop && this.testCaseTestDataId != null && String(this.testCaseTestDataId) !== '';
+        if (lockedToTestCaseProfile) {
+            const lockedId = this.testCaseTestDataId;
+            // Patch the form so the value is included on Apply, even though config marks the field disabled.
+            const ctrl = this.editForm?.get('testDataProfile');
+            if (ctrl && String(ctrl.value ?? '') !== String(lockedId)) {
+                ctrl.setValue(lockedId, { emitEvent: false });
+            }
+            selectedVal = lockedId;
+        }
         // Keep the selected profile visible by label even when server-search replaces the option list.
         const selectedProfileId = selectedVal ?? forLoopTestDataId;
         if (this.loopType === 'for' && selectedProfileId != null && selectedProfileId !== '') {
@@ -24806,6 +25136,7 @@ class TestCaseLoopStepComponent {
             initialFetchOnOpen: true,
             hasMore: this.hasMoreDataProfiles,
             isLoading: this.isLoadingDataProfiles,
+            disabled: lockedToTestCaseProfile,
             options,
             ...(selectedVal !== undefined && selectedVal !== '' && { selectedValue: selectedVal }),
             onChange: (value) => {
@@ -25561,14 +25892,14 @@ TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
 TestCaseLoopStepComponent.LOOP_INDEX_START = -1;
 TestCaseLoopStepComponent.LOOP_INDEX_END = -1;
 TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", index: "index", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", deleteBranch: "deleteBranch", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when not reordering) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\"\n          [class.cqa-border-[#3F43EE]]=\"selected\"\n          id=\"check-loop-step\" />\n        <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\"\n          [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n        <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n        <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      </div>\n      <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n        </span>\n      </div>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n      <!-- While condition text (separate block) -->\n      <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n      \n\n      <!-- While event details chips (separate block) -->\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n        <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n          <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n        </span>\n        <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n      <!-- Skip badge (from API) -->\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <div *ngIf=\"!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]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- Skip / Unskip icon (after Edit) -->\n        <button\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Steps Summary (after action icons) -->\n      <div\n        class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n    <div\n      *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n\n    <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n    <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n    <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"52\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n    </div>\n\n    <!-- At least one nested step: START marker, body, END marker -->\n    <ng-container *ngIf=\"nestedSteps.length > 0\">\n    <!-- START Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n    </div>\n    </ng-container>\n  </div>\n</div>", 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", ".loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n", ".for-loop-range-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.for-loop-range-row .for-loop-range-part+.for-loop-range-part{margin-left:.25rem}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", index: "index", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", testCaseTestDataId: "testCaseTestDataId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", deleteBranch: "deleteBranch", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when not reordering) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\"\n          [class.cqa-border-[#3F43EE]]=\"selected\"\n          id=\"check-loop-step\" />\n        <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\"\n          [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n        <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n        <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      </div>\n      <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n        </span>\n      </div>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n      <!-- While condition text (separate block) -->\n      <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n      \n\n      <!-- While event details chips (separate block) -->\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n        <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n          <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n        </span>\n        <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n      <!-- Skip badge (from API) -->\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <div *ngIf=\"!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]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- Skip / Unskip icon (after Edit) -->\n        <button\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Steps Summary (after action icons) -->\n      <div\n        class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n    <div\n      *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n\n    <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n    <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n    <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"52\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n    </div>\n\n    <!-- At least one nested step: START marker, body, END marker -->\n    <ng-container *ngIf=\"nestedSteps.length > 0\">\n    <!-- START Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideForLoop]=\"loopType === 'for' || isInsideForLoop\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        [testCaseTestDataId]=\"testCaseTestDataId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideForLoop]=\"loopType === 'for' || isInsideForLoop\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n    </div>\n    </ng-container>\n  </div>\n</div>", 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", ".loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n", ".for-loop-range-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.for-loop-range-row .for-loop-range-part+.for-loop-range-part{margin-left:.25rem}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideForLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "testCaseTestDataId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [
                         STEP_ROW_ACTIONS_STYLES,
                         LOOP_STEP_EMPTY_STYLES,
                         LOOP_STEP_FOR_DISPLAY_STYLES,
-                    ], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when not reordering) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\"\n          [class.cqa-border-[#3F43EE]]=\"selected\"\n          id=\"check-loop-step\" />\n        <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\"\n          [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n        <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n        <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      </div>\n      <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n        </span>\n      </div>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n      <!-- While condition text (separate block) -->\n      <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n      \n\n      <!-- While event details chips (separate block) -->\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n        <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n          <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n        </span>\n        <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n      <!-- Skip badge (from API) -->\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <div *ngIf=\"!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]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- Skip / Unskip icon (after Edit) -->\n        <button\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Steps Summary (after action icons) -->\n      <div\n        class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n    <div\n      *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n\n    <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n    <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n    <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"52\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n    </div>\n\n    <!-- At least one nested step: START marker, body, END marker -->\n    <ng-container *ngIf=\"nestedSteps.length > 0\">\n    <!-- START Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n    </div>\n    </ng-container>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n        <!-- Loop Type Label -->\n        <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getLoopTypeLabel() }}\n        </div>\n\n        <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n        <ng-container *ngIf=\"loopType === 'for'\">\n          <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n          <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        </ng-container>\n\n        <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n        <ng-container *ngIf=\"isWhileLoop()\">\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"whileConditionAutocompleteOptions\"\n            [value]=\"whileConditionDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n            (optionSelect)=\"onConditionSelect($event)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\">\n          </cqa-autocomplete>\n          <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n        </ng-container>\n\n        <!-- Edit In depth link -->\n      <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n        <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true) -->\n      <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when not reordering) -->\n      <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\"\n          [ngModel]=\"selected\"\n          (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\"\n          [class.cqa-border-[#3F43EE]]=\"selected\"\n          id=\"check-loop-step\" />\n        <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\"\n          [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n        <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n        <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n      </div>\n      <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n        <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n          <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n        </span>\n      </div>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n      <!-- While condition text (separate block) -->\n      <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n      \n\n      <!-- While event details chips (separate block) -->\n      <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n        <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n          <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n          <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n        </span>\n        <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n          <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n            <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n            <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n          </span>\n        </ng-container>\n      </div>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n      <!-- Skip badge (from API) -->\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <div *ngIf=\"!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]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <!-- Skip / Unskip icon (after Edit) -->\n        <button\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n              stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n          class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- Steps Summary (after action icons) -->\n      <div\n        class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n    <div\n      *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n\n    <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n    <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n      <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n        class=\"loop-step-empty-add\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n          <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n          <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n\n    <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n    <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"52\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n    </div>\n\n    <!-- At least one nested step: START marker, body, END marker -->\n    <ng-container *ngIf=\"nestedSteps.length > 0\">\n    <!-- START Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideForLoop]=\"loopType === 'for' || isInsideForLoop\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        [testCaseTestDataId]=\"testCaseTestDataId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideForLoop]=\"loopType === 'for' || isInsideForLoop\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n          (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker (centered label) -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n    </div>\n    </ng-container>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -25597,6 +25928,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideLoop: [{
                 type: Input
+            }], isInsideForLoop: [{
+                type: Input
             }], isInsideStepGroup: [{
                 type: Input
             }], isReorder: [{
@@ -25615,6 +25948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], currentTestCaseId: [{
                 type: Input
+            }], testCaseTestDataId: [{
+                type: Input
             }], setConditionTemplateVariables: [{
                 type: Input
             }], addStepBetweenAbove: [{
@@ -25734,6 +26069,7 @@ class TestCaseConditionStepComponent {
         this.expanded = true;
         this.isNested = false;
         this.isInsideLoop = false;
+        this.isInsideForLoop = false;
         this.isInsideStepGroup = false;
         this.isReorder = false;
         this.editable = true;
@@ -26981,13 +27317,13 @@ class TestCaseConditionStepComponent {
     }
 }
 TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <!-- Lock: inside step row (same background/border as row when in group) -->\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- First condition text as plain text (no HTML) -->\n      <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n        <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n        <button\n          *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <!-- 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    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n    <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span\n            *ngIf=\"getBranchConditionDisplay(branch)\"\n            [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n            (click)=\"onConditionActionClick($event, branch)\"\n            class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Right section: step-actions then date (same order as other step types) -->\n        <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n        <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n      </div>\n\n      <!-- Empty branch inside a step group: no START/END markers -->\n      <div\n        *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n        No steps added\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"isInsideStepGroup\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"(nestingLevel || 0) + 1\"\n          [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (delete)=\"onNestedStepDelete($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"onNestedClickAction($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isInsideStepGroup]=\"isInsideStepGroup\"\n            [isReorder]=\"isReorder\"\n            [nestingLevel]=\"(nestingLevel || 0) + 1\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            [currentTestCaseId]=\"currentTestCaseId\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (delete)=\"onNestedStepDelete($event)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onNestedOpenExternal($event)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"onNestedClickAction($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n           When rendered inside a step group or when reordering, hide this Add button entirely. -->\n      <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n      </div>\n    </div>\n\n    <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n    <ng-container *ngIf=\"isEditing\">\n      <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n        class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n            <!-- Remove ELSE IF button -->\n            <button\n              type=\"button\"\n              (click)=\"onRemoveElse(elseIfBranch.id)\"\n              class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n              Remove ELSE IF\n            </button>\n\n            <!-- ELSE IF autocomplete field -->\n            <cqa-autocomplete\n              *ngIf=\"elseIfBranch.form\"\n              [options]=\"conditionLeftAutocompleteOptions\"\n              [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n              (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n              (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n              placeholder=\"Select Condition\"\n              [fullWidth]=\"true\"\n              [compact]=\"true\"\n              class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n            <!-- ELSE IF Template Variables Section -->\n            <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n              <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n                <ng-container *ngIf=\"variable.type === 'boolean'\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <mat-slide-toggle\n                      [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                      (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                      color=\"primary\">\n                    </mat-slide-toggle>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                  <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-dynamic-select\n                        [form]=\"elseIfBranch.templateVariablesForm\"\n                        [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n                      </cqa-dynamic-select>\n                    </div>\n                  </ng-container>\n                  <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-custom-input\n                        [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                        (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                        [placeholder]=\"variable.label\">\n                      </cqa-custom-input>\n                    </div>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Edit In depth link -->\n            <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n              class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n              Edit In depth\n              <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n            </a>\n          </div>\n          <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n          <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n            <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    </ng-container><!-- end branch ng-container -->\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n    </div>\n  </div>\n</div>", 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", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
+TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", testCaseTestDataId: "testCaseTestDataId", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <!-- Lock: inside step row (same background/border as row when in group) -->\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- First condition text as plain text (no HTML) -->\n      <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n        <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n        <button\n          *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <!-- 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    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n    <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span\n            *ngIf=\"getBranchConditionDisplay(branch)\"\n            [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n            (click)=\"onConditionActionClick($event, branch)\"\n            class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Right section: step-actions then date (same order as other step types) -->\n        <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n        <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n      </div>\n\n      <!-- Empty branch inside a step group: no START/END markers -->\n      <div\n        *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n        No steps added\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isInsideForLoop]=\"isInsideForLoop\"\n          [isInsideStepGroup]=\"isInsideStepGroup\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"(nestingLevel || 0) + 1\"\n          [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (delete)=\"onNestedStepDelete($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"onNestedClickAction($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isInsideForLoop]=\"isInsideForLoop\"\n            [isInsideStepGroup]=\"isInsideStepGroup\"\n            [isReorder]=\"isReorder\"\n            [nestingLevel]=\"(nestingLevel || 0) + 1\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            [currentTestCaseId]=\"currentTestCaseId\"\n            [testCaseTestDataId]=\"testCaseTestDataId\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (delete)=\"onNestedStepDelete($event)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onNestedOpenExternal($event)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"onNestedClickAction($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n           When rendered inside a step group or when reordering, hide this Add button entirely. -->\n      <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n      </div>\n    </div>\n\n    <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n    <ng-container *ngIf=\"isEditing\">\n      <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n        class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n            <!-- Remove ELSE IF button -->\n            <button\n              type=\"button\"\n              (click)=\"onRemoveElse(elseIfBranch.id)\"\n              class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n              Remove ELSE IF\n            </button>\n\n            <!-- ELSE IF autocomplete field -->\n            <cqa-autocomplete\n              *ngIf=\"elseIfBranch.form\"\n              [options]=\"conditionLeftAutocompleteOptions\"\n              [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n              (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n              (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n              placeholder=\"Select Condition\"\n              [fullWidth]=\"true\"\n              [compact]=\"true\"\n              class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n            <!-- ELSE IF Template Variables Section -->\n            <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n              <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n                <ng-container *ngIf=\"variable.type === 'boolean'\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <mat-slide-toggle\n                      [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                      (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                      color=\"primary\">\n                    </mat-slide-toggle>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                  <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-dynamic-select\n                        [form]=\"elseIfBranch.templateVariablesForm\"\n                        [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n                      </cqa-dynamic-select>\n                    </div>\n                  </ng-container>\n                  <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-custom-input\n                        [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                        (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                        [placeholder]=\"variable.label\">\n                      </cqa-custom-input>\n                    </div>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Edit In depth link -->\n            <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n              class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n              Edit In depth\n              <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n            </a>\n          </div>\n          <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n          <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n            <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    </ng-container><!-- end branch ng-container -->\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n    </div>\n  </div>\n</div>", 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", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideForLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "testCaseTestDataId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
                         STEP_ROW_ACTIONS_STYLES,
                         CONDITION_BRANCH_EMPTY_STYLES,
-                    ], template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <!-- Lock: inside step row (same background/border as row when in group) -->\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- First condition text as plain text (no HTML) -->\n      <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n        <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n        <button\n          *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <!-- 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    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n    <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span\n            *ngIf=\"getBranchConditionDisplay(branch)\"\n            [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n            (click)=\"onConditionActionClick($event, branch)\"\n            class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Right section: step-actions then date (same order as other step types) -->\n        <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n        <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n      </div>\n\n      <!-- Empty branch inside a step group: no START/END markers -->\n      <div\n        *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n        No steps added\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"isInsideStepGroup\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"(nestingLevel || 0) + 1\"\n          [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (delete)=\"onNestedStepDelete($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"onNestedClickAction($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isInsideStepGroup]=\"isInsideStepGroup\"\n            [isReorder]=\"isReorder\"\n            [nestingLevel]=\"(nestingLevel || 0) + 1\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            [currentTestCaseId]=\"currentTestCaseId\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (delete)=\"onNestedStepDelete($event)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onNestedOpenExternal($event)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"onNestedClickAction($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n           When rendered inside a step group or when reordering, hide this Add button entirely. -->\n      <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n      </div>\n    </div>\n\n    <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n    <ng-container *ngIf=\"isEditing\">\n      <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n        class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n            <!-- Remove ELSE IF button -->\n            <button\n              type=\"button\"\n              (click)=\"onRemoveElse(elseIfBranch.id)\"\n              class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n              Remove ELSE IF\n            </button>\n\n            <!-- ELSE IF autocomplete field -->\n            <cqa-autocomplete\n              *ngIf=\"elseIfBranch.form\"\n              [options]=\"conditionLeftAutocompleteOptions\"\n              [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n              (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n              (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n              placeholder=\"Select Condition\"\n              [fullWidth]=\"true\"\n              [compact]=\"true\"\n              class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n            <!-- ELSE IF Template Variables Section -->\n            <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n              <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n                <ng-container *ngIf=\"variable.type === 'boolean'\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <mat-slide-toggle\n                      [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                      (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                      color=\"primary\">\n                    </mat-slide-toggle>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                  <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-dynamic-select\n                        [form]=\"elseIfBranch.templateVariablesForm\"\n                        [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n                      </cqa-dynamic-select>\n                    </div>\n                  </ng-container>\n                  <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-custom-input\n                        [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                        (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                        [placeholder]=\"variable.label\">\n                      </cqa-custom-input>\n                    </div>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Edit In depth link -->\n            <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n              class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n              Edit In depth\n              <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n            </a>\n          </div>\n          <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n          <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n            <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    </ng-container><!-- end branch ng-container -->\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n    </div>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n  <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n  <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - disabled when ELSE already exists -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          [disabled]=\"hasElseBranch\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n          [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n          [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n          [class.cqa-opacity-60]=\"hasElseBranch\">\n          Add ELSE\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n    style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <!-- Lock: inside step row (same background/border as row when in group) -->\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      CONDITION\n    </span>\n\n    <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n    <ng-container *ngIf=\"editContext !== 'stepRow'\">\n      <!-- First condition text as plain text (no HTML) -->\n      <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n      </div>\n\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 cqa-self-center\">\n        <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n        <button\n          *ngIf=\"editable && !isInsideStepGroup && !isReorder\"\n          type=\"button\"\n          (click)=\"onSkipToggle(); $event.stopPropagation()\"\n          [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\"\n          [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"\n        >\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        <!-- 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    </ng-container>\n\n    <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n    <ng-container *ngIf=\"editContext === 'stepRow'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"conditionLeftDisplayValue\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select Condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n        <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n    <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n        </div>\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n      <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n      <div\n        *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span\n            *ngIf=\"getBranchConditionDisplay(branch)\"\n            [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n            (click)=\"onConditionActionClick($event, branch)\"\n            class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n          <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n            <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n              <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n              <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n            </span>\n          </ng-container>\n        </div>\n        <!-- Right section: step-actions then date (same order as other step types) -->\n        <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n          <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </button>\n        </div>\n        <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n      </div>\n\n      <!-- Empty branch inside a step group: no START/END markers -->\n      <div\n        *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n        No steps added\n      </div>\n\n      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isInsideForLoop]=\"isInsideForLoop\"\n          [isInsideStepGroup]=\"isInsideStepGroup\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"(nestingLevel || 0) + 1\"\n          [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (delete)=\"onNestedStepDelete($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"onNestedClickAction($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isInsideForLoop]=\"isInsideForLoop\"\n            [isInsideStepGroup]=\"isInsideStepGroup\"\n            [isReorder]=\"isReorder\"\n            [nestingLevel]=\"(nestingLevel || 0) + 1\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n          [editable]=\"editable\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            [currentTestCaseId]=\"currentTestCaseId\"\n            [testCaseTestDataId]=\"testCaseTestDataId\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (delete)=\"onNestedStepDelete($event)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onNestedOpenExternal($event)\"\n            (edit)=\"onNestedEdit($event)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onNestedDuplicate($event, step)\"\n            (viewDetails)=\"viewDetails.emit($event)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"onNestedClickAction($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n\n      <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n           When rendered inside a step group or when reordering, hide this Add button entirely. -->\n      <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n        <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n          class=\"condition-branch-empty-add\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- END marker per branch - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n      </div>\n    </div>\n\n    <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n    <ng-container *ngIf=\"isEditing\">\n      <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n        class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n          <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n            <!-- Remove ELSE IF button -->\n            <button\n              type=\"button\"\n              (click)=\"onRemoveElse(elseIfBranch.id)\"\n              class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n              Remove ELSE IF\n            </button>\n\n            <!-- ELSE IF autocomplete field -->\n            <cqa-autocomplete\n              *ngIf=\"elseIfBranch.form\"\n              [options]=\"conditionLeftAutocompleteOptions\"\n              [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n              (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n              (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n              placeholder=\"Select Condition\"\n              [fullWidth]=\"true\"\n              [compact]=\"true\"\n              class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n            <!-- ELSE IF Template Variables Section -->\n            <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n              <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n                <ng-container *ngIf=\"variable.type === 'boolean'\">\n                  <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                    <mat-slide-toggle\n                      [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                      (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                      color=\"primary\">\n                    </mat-slide-toggle>\n                  </div>\n                </ng-container>\n                <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                  <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-dynamic-select\n                        [form]=\"elseIfBranch.templateVariablesForm\"\n                        [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n                      </cqa-dynamic-select>\n                    </div>\n                  </ng-container>\n                  <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                    <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                      <cqa-custom-input\n                        [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                        (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                        [placeholder]=\"variable.label\">\n                      </cqa-custom-input>\n                    </div>\n                  </ng-container>\n                </ng-container>\n              </ng-container>\n            </div>\n\n            <!-- Edit In depth link -->\n            <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n              class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n              Edit In depth\n              <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n            </a>\n          </div>\n          <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n          <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n            <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    </ng-container><!-- end branch ng-container -->\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -27006,6 +27342,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideLoop: [{
                 type: Input
+            }], isInsideForLoop: [{
+                type: Input
+            }], testCaseTestDataId: [{
+                type: Input
             }], isInsideStepGroup: [{
                 type: Input
             }], isReorder: [{
@@ -27093,6 +27433,7 @@ class TestCaseStepGroupComponent {
         this.expanded = true;
         this.isNested = false;
         this.isInsideLoop = false;
+        this.isInsideForLoop = false;
         this.isInsideStepGroup = false;
         this.isReorder = false;
         this.editable = true;
@@ -27452,10 +27793,10 @@ class TestCaseStepGroupComponent {
 /** Max length for start/end step number in summary; beyond this use local indices (1 to count). */
 TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH = 20;
 TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", isDuplicating: "isDuplicating", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange", deleteBranch: "deleteBranch" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"min-height: 50px; border-top: none;\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p\n          class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n          [style.font-weight]=\"'600'\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <!-- Action Icons - placed first -->\n      <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- External Link Icon -->\n      <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"!isInsideStepGroup && config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n    <div\n      *ngIf=\"shouldShowReusableNestedEditBanner()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n      [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n      <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n        </svg>\n      </span>\n      <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n        <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n          <span class=\"cqa-font-semibold\">Reusable step group:</span>\n          You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n          <span class=\"cqa-whitespace-nowrap\">step group&apos;s own test case</span>\n          so changes stay in one place and apply everywhere this group is referenced.\n        </p>\n        <button\n          type=\"button\"\n          (click)=\"onOpenExternal(); $event.stopPropagation()\"\n          class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n          Open step group test case to edit\n        </button>\n      </div>\n    </div>\n    <!-- START GROUP Marker (centered) - only when there are nested steps -->\n    <div\n      *ngIf=\"nestedSteps.length > 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n    </div>\n    <!-- Loading Indicator (only when there are no cached nested steps) -->\n    <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n\n    <!-- Nested step group inside another group: empty body (no START/END markers) -->\n    <div\n      *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n    \n    <!-- Nested Steps Content (keep visible even while refreshing) -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n      <div class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n    <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered) - only when there are nested steps -->\n      <div\n        *ngIf=\"nestedSteps.length > 0\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
+TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideForLoop: "isInsideForLoop", testCaseTestDataId: "testCaseTestDataId", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", isDuplicating: "isDuplicating", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange", deleteBranch: "deleteBranch" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"min-height: 50px; border-top: none;\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p\n          class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n          [style.font-weight]=\"'600'\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <!-- Action Icons - placed first -->\n      <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- External Link Icon -->\n      <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"!isInsideStepGroup && config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n    <div\n      *ngIf=\"shouldShowReusableNestedEditBanner()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n      [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n      <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n        </svg>\n      </span>\n      <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n        <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n          <span class=\"cqa-font-semibold\">Reusable step group:</span>\n          You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n          <span class=\"cqa-whitespace-nowrap\">step group&apos;s own test case</span>\n          so changes stay in one place and apply everywhere this group is referenced.\n        </p>\n        <button\n          type=\"button\"\n          (click)=\"onOpenExternal(); $event.stopPropagation()\"\n          class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n          Open step group test case to edit\n        </button>\n      </div>\n    </div>\n    <!-- START GROUP Marker (centered) - only when there are nested steps -->\n    <div\n      *ngIf=\"nestedSteps.length > 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n    </div>\n    <!-- Loading Indicator (only when there are no cached nested steps) -->\n    <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n\n    <!-- Nested step group inside another group: empty body (no START/END markers) -->\n    <div\n      *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n    \n    <!-- Nested Steps Content (keep visible even while refreshing) -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n      <div class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideForLoop]=\"isInsideForLoop\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        [testCaseTestDataId]=\"testCaseTestDataId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n    <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered) - only when there are nested steps -->\n      <div\n        *ngIf=\"nestedSteps.length > 0\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideForLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "testCaseTestDataId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"min-height: 50px; border-top: none;\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p\n          class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n          [style.font-weight]=\"'600'\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <!-- Action Icons - placed first -->\n      <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- External Link Icon -->\n      <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"!isInsideStepGroup && config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n    <div\n      *ngIf=\"shouldShowReusableNestedEditBanner()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n      [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n      <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n        </svg>\n      </span>\n      <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n        <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n          <span class=\"cqa-font-semibold\">Reusable step group:</span>\n          You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n          <span class=\"cqa-whitespace-nowrap\">step group&apos;s own test case</span>\n          so changes stay in one place and apply everywhere this group is referenced.\n        </p>\n        <button\n          type=\"button\"\n          (click)=\"onOpenExternal(); $event.stopPropagation()\"\n          class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n          Open step group test case to edit\n        </button>\n      </div>\n    </div>\n    <!-- START GROUP Marker (centered) - only when there are nested steps -->\n    <div\n      *ngIf=\"nestedSteps.length > 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n    </div>\n    <!-- Loading Indicator (only when there are no cached nested steps) -->\n    <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n\n    <!-- Nested step group inside another group: empty body (no START/END markers) -->\n    <div\n      *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n    \n    <!-- Nested Steps Content (keep visible even while refreshing) -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n      <div class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n    <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered) - only when there are nested steps -->\n      <div\n        *ngIf=\"nestedSteps.length > 0\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n      </div>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <!-- Step Group Header -->\n  <div\n    [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"min-height: 50px; border-top: none;\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p\n          class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n          [style.font-weight]=\"'600'\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n      <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n      <!-- Action Icons - placed first -->\n      <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n        <!-- Edit Icon -->\n        <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n        <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </button>\n\n        <!-- Link Icon -->\n        <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button> -->\n\n        <!-- Duplicate Icon -->\n        <button\n          type=\"button\"\n          (click)=\"onDuplicate(); $event.stopPropagation()\"\n          [disabled]=\"isDuplicating\"\n          [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n          class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n        >\n          <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n          <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n            <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n            <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n              <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n            </path>\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n\n      <!-- External Link Icon -->\n      <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"!isInsideStepGroup && config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- 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\n  <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n    <div\n      *ngIf=\"shouldShowReusableNestedEditBanner()\"\n      role=\"status\"\n      aria-live=\"polite\"\n      class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n      [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n      <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n        </svg>\n      </span>\n      <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n        <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n          <span class=\"cqa-font-semibold\">Reusable step group:</span>\n          You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n          <span class=\"cqa-whitespace-nowrap\">step group&apos;s own test case</span>\n          so changes stay in one place and apply everywhere this group is referenced.\n        </p>\n        <button\n          type=\"button\"\n          (click)=\"onOpenExternal(); $event.stopPropagation()\"\n          class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n          Open step group test case to edit\n        </button>\n      </div>\n    </div>\n    <!-- START GROUP Marker (centered) - only when there are nested steps -->\n    <div\n      *ngIf=\"nestedSteps.length > 0\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n      <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n    </div>\n    <!-- Loading Indicator (only when there are no cached nested steps) -->\n    <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n\n    <!-- Nested step group inside another group: empty body (no START/END markers) -->\n    <div\n      *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n      class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n      No steps added\n    </div>\n    \n    <!-- Nested Steps Content (keep visible even while refreshing) -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n      <div class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isInsideForLoop]=\"isInsideForLoop\"\n        [isInsideStepGroup]=\"true\"\n        [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        [currentTestCaseId]=\"currentTestCaseId\"\n        [testCaseTestDataId]=\"testCaseTestDataId\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedOpenExternal($event)\"\n        (edit)=\"onNestedEdit($event)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedDuplicate($event, step)\"\n        (delete)=\"onDeleteStep($event, i)\"\n        (viewDetails)=\"viewDetails.emit($event)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n    <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isInsideStepGroup]=\"true\"\n          [isReorder]=\"isReorder\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          [currentTestCaseId]=\"currentTestCaseId\"\n          [testCaseTestDataId]=\"testCaseTestDataId\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedOpenExternal($event)\"\n          (edit)=\"onNestedEdit($event)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedDuplicate($event, step)\"\n          (delete)=\"onDeleteStep($event, i)\"\n          (viewDetails)=\"viewDetails.emit($event)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        (addStepForLoop)=\"addStepForLoop.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker (centered) - only when there are nested steps -->\n      <div\n        *ngIf=\"nestedSteps.length > 0\"\n        class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n        <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -27478,6 +27819,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideLoop: [{
                 type: Input
+            }], isInsideForLoop: [{
+                type: Input
+            }], testCaseTestDataId: [{
+                type: Input
             }], isInsideStepGroup: [{
                 type: Input
             }], isReorder: [{
@@ -32113,6 +32458,8 @@ class TemplateVariablesFormComponent {
         this.isLoadingEnvironments = false;
         /** True when the edited step is inside a FOR loop. */
         this.isInsideForLoopStep = false;
+        /** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
+        this.hasTestDataProfile = false;
         this.isEditInDepth = false;
         this.isDebug = false;
         this.variableValueChange = new EventEmitter();
@@ -32205,7 +32552,11 @@ class TemplateVariablesFormComponent {
             changes['hasMoreElements'] || changes['isLoadingElements'] ||
             changes['parameterOptions'] || changes['hasMoreParameters'] || changes['isLoadingParameters'] ||
             changes['environmentOptions'] || changes['hasMoreEnvironments'] || changes['isLoadingEnvironments'] ||
-            changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex'] || changes['defaultTestDataEndIndex'] || changes['isInsideForLoopStep']) {
+            changes['defaultTestDataProfileId'] || changes['defaultTestDataStartIndex'] || changes['defaultTestDataEndIndex'] || changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
+            // Drop dataType option cache so dropdown options are re-filtered on input change.
+            if (changes['isInsideForLoopStep'] || changes['hasTestDataProfile']) {
+                this.dataTypeSelectConfigCache.clear();
+            }
             // Only clear caches for changed inputs, not all caches
             if (changes['templateVariables'] || changes['variablesForm']) {
                 // Clear all caches when template variables or form changes
@@ -32545,9 +32896,11 @@ class TemplateVariablesFormComponent {
                 // Preserve existing dataType if already set (e.g., from setTemplateVariables when loading saved step)
                 const existingDataType = variable.dataType;
                 const { dataType, rawValue } = this.parseTestDataValue(variable.value || '');
-                // Set properties directly on the variable object
-                // Use existing dataType if it was already set, otherwise use parsed dataType
-                variable.dataType = existingDataType || dataType;
+                // Auto-select 'parameter' when the test case has a default profile (testCase.testDataId or
+                // FOR-loop-derived) and the variable has no existing value/dataType. This keeps Edit-mode
+                // user selections intact (existingDataType set) and only kicks in for fresh fields.
+                const shouldDefaultToParameter = !existingDataType && dataType === 'plain-text' && (!variable.value || variable.value === '') && this.defaultTestDataProfileId != null;
+                variable.dataType = existingDataType || (shouldDefaultToParameter ? 'parameter' : dataType);
                 variable.rawValue = rawValue;
                 // Ensure form control exists for data type in the FormArray
                 const variableGroup = this.getVariableFormGroup(variable.name);
@@ -32619,11 +32972,29 @@ class TemplateVariablesFormComponent {
                                     if (this.defaultTestDataStartIndex != null && profileToUse.data.length > this.defaultTestDataStartIndex) {
                                         dataSetToUse = profileToUse.data[this.defaultTestDataStartIndex];
                                     }
-                                    else {
+                                    else if (profileToUse.data.length === 1) {
+                                        // Only auto-select the data set when exactly one option is available.
+                                        // With multiple data sets and no explicit start index, leave the choice to the user.
                                         dataSetToUse = profileToUse.data[0];
                                     }
                                 }
                             }
+                            // If a default profile resolved but no data set was auto-picked (multi-dataset case),
+                            // still select the profile so the user only needs to pick the data set.
+                            if (profileToUse && !dataSetToUse) {
+                                const profileName = profileToUse.name || profileToUse.testDataName;
+                                variable.selectedTestDataProfile = profileName;
+                                variable.selectedTestDataProfileId = profileToUse.id;
+                                this.selectedParameterProfileSnapshot.set(variable.name, profileToUse);
+                                const profileIdString = String(profileToUse.id);
+                                if (!variableGroup.get('selectedTestDataProfile')) {
+                                    variableGroup.addControl('selectedTestDataProfile', new FormControl(profileIdString));
+                                }
+                                else {
+                                    variableGroup.get('selectedTestDataProfile')?.setValue(profileIdString, { emitEvent: false });
+                                }
+                                this.testDataProfileSelectConfigCache.delete(`${variable.name}_testDataProfile`);
+                            }
                             // If we found a profile and data set, set the variable properties
                             if (profileToUse && dataSetToUse) {
                                 const profileName = profileToUse.name || profileToUse.testDataName;
@@ -33239,7 +33610,10 @@ class TemplateVariablesFormComponent {
         return result;
     }
     getDataTypeOptions() {
-        // Return cached static array
+        // Hide @|Parameter| when the step is not inside a FOR loop AND the test case has no test data profile.
+        if (!this.isInsideForLoopStep && !this.hasTestDataProfile) {
+            return this.dataTypeOptions.filter(opt => opt.value !== 'parameter');
+        }
         return this.dataTypeOptions;
     }
     getDataTypeSelectConfig(variable, index) {
@@ -33259,7 +33633,7 @@ class TemplateVariablesFormComponent {
             placeholder: 'Select Type',
             multiple: false,
             searchable: false,
-            options: this.dataTypeOptions,
+            options: this.getDataTypeOptions(),
             onChange: (value) => {
                 this.onDataTypeChange(variable.name, value);
             }
@@ -34656,10 +35030,10 @@ class TemplateVariablesFormComponent {
     }
 }
 TemplateVariablesFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TemplateVariablesFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TemplateVariablesFormComponent, selector: "cqa-template-variables-form", inputs: { templateVariables: "templateVariables", variablesForm: "variablesForm", metadata: "metadata", description: "description", elementOptions: "elementOptions", hasMoreElements: "hasMoreElements", isLoadingElements: "isLoadingElements", screenNameOptions: "screenNameOptions", hasMoreScreenNames: "hasMoreScreenNames", isLoadingScreenNames: "isLoadingScreenNames", parameterOptions: "parameterOptions", hasMoreParameters: "hasMoreParameters", isLoadingParameters: "isLoadingParameters", uploadOptions: "uploadOptions", hasMoreUploads: "hasMoreUploads", isLoadingUploads: "isLoadingUploads", environmentOptions: "environmentOptions", hasMoreEnvironments: "hasMoreEnvironments", isLoadingEnvironments: "isLoadingEnvironments", defaultTestDataProfileId: "defaultTestDataProfileId", defaultTestDataStartIndex: "defaultTestDataStartIndex", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isEditInDepth: "isEditInDepth", isDebug: "isDebug", createElementVisible: "createElementVisible" }, outputs: { variableValueChange: "variableValueChange", variableBooleanChange: "variableBooleanChange", metadataChange: "metadataChange", descriptionChange: "descriptionChange", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchUploads: "searchUploads", loadMoreUploads: "loadMoreUploads", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments", cancelElementForm: "cancelElementForm", elementFormVisibilityChange: "elementFormVisibilityChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"], components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: MixedVariableInputComponent, selector: "cqa-mixed-variable-input", inputs: ["value", "placeholder", "disabled"], outputs: ["valueChange"] }, { type: ElementFormComponent, selector: "cqa-element-form", inputs: ["elementId", "element", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "isElementLoading", "isEditMode", "isCreateMode", "isEditInDepthAvailable"], outputs: ["createElement", "updateElement", "createScreenNameRequest", "searchScreenName", "loadMoreScreenNames", "cancel", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "cqaCamelToTitle": CamelToTitlePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TemplateVariablesFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <!-- Show custom input for plain-text type -->\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n              (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
+            args: [{ selector: 'cqa-template-variables-form', host: { class: 'cqa-ui-root' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<style>\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n</style>\n<div class=\"cqa-flex cqa-gap-x-6 cqa-gap-y-4 cqa-flex-wrap template-variables-form\" [ngClass]=\"{'cqa-flex-col': isEditInDepth}\" *ngIf=\"!createElementVisible\">\n  \n  <!-- Metadata - Only show if element is available in form -->\n  <div *ngIf=\"selectorVariableAvailable\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Metadata\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"metadata\" [fullWidth]=\"true\"\n      (valueChange)=\"metadataChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n\n  <!-- Description -->\n  <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n    <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n      Description\n    </label>\n    <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"description\" [fullWidth]=\"true\"\n      (valueChange)=\"descriptionChange.emit($event)\">\n    </cqa-custom-input>\n  </div>\n  \n  <ng-container *ngFor=\"let variable of templateVariables; let i = index; trackBy: trackByVariable\">\n    <!-- Boolean variables with mat-slide-toggle -->\n    <ng-container *ngIf=\"variable.type === 'boolean'\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <mat-slide-toggle [checked]=\"variablesForm.at(i)?.get('value')?.value || variable.value || false\"\n          (change)=\"onVariableBooleanChange(variable.name, $event.checked)\" color=\"primary\">\n        </mat-slide-toggle>\n      </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"variable.type === 'dropdown'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n        </cqa-dynamic-select>\n      </div>\n    </ng-container>\n\n    <!-- Textarea variables -->\n    <ng-container *ngIf=\"variable.type === 'textarea'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <textarea class=\"cqa-w-full cqa-border cqa-border-gray-300 cqa-rounded-lg cqa-px-3 cqa-py-2 cqa-text-sm cqa-text-gray-900 cqa-resize-y focus:cqa-outline-none focus:cqa-ring-1 focus:cqa-ring-indigo-500 focus:cqa-border-indigo-500\"\n          [value]=\"variable.value || ''\"\n          rows=\"4\"\n          style=\"min-height: 42px;\"\n          (input)=\"onVariableValueChange(variable.name, $any($event.target).value)\"></textarea>\n      </div>\n    </ng-container>\n\n    <!-- Number variables with number input -->\n    <ng-container *ngIf=\"variable.type === 'number' && variable.dataKey !== 'element'\">\n      <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n        <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n          {{ variable.label | cqaCamelToTitle }}\n        </label>\n        <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n          (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n        </cqa-custom-input>\n      </div>\n    </ng-container>\n\n    <!-- Non-boolean, non-custom_code variables -->\n    <ng-container *ngIf=\"variable.name !== 'custom_code' && variable.type !== 'boolean' && variable.type !== 'dropdown' && variable.type !== 'textarea' && !(variable.type === 'number' && variable.dataKey !== 'element')\">\n      <!-- Element variables with cascading dropdowns (screen name + element) -->\n      <ng-container *ngIf=\"isElementType(variable)\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }} Screen Name<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getScreenNameSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <div *ngIf=\"hasSelectedScreenName(variable); else elementManualInput\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getElementSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n        <ng-template #elementManualInput>\n          <ng-container *ngIf=\"variable.type === 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-custom-input [type]=\"'number'\" [placeholder]=\"'Number Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n                (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"variable.type !== 'number'\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\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-container>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"!isElementType(variable)\">\n      <!-- Other dropdown variables (type, scrollTo, label) -->\n      <ng-container *ngIf=\"shouldShowDropdown(variable); else defaultInput\">\n        <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n          <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n            {{ variable.label | cqaCamelToTitle }}\n          </label>\n          <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getSelectConfig(variable, i)\">\n          </cqa-dynamic-select>\n        </div>\n      </ng-container>\n    </ng-container>\n      <ng-template #defaultInput>\n        <!-- Test-data, source-value, or target-value with data type dropdown -->\n        <ng-container *ngIf=\"needsDataTypeDropdown(variable); else regularInput\">\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }} Type<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataTypeSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <ng-container *ngIf=\"isEnvironmentType(variable)\">\n          <div *ngIf=\"isEnvironmentType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Name<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          <div *ngIf=\"hasSelectedEnvironment(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n              Environment Value<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getEnvironmentParameterSelectConfig(variable, i)\">\n            </cqa-dynamic-select>\n          </div>\n          </ng-container>\n          <ng-container *ngIf=\"isParameterType(variable)\">\n            <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Test Data Profile<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getTestDataProfileSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && !isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set Start<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'start')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedTestDataProfile(variable) && isInsideForLoopStep\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                Data Set End<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getDataSetRangeSelectConfig(variable, i, 'end')\">\n              </cqa-dynamic-select>\n            </div>\n            <div *ngIf=\"hasSelectedDataSet(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n              <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n                {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n              </label>\n              <cqa-dynamic-select [form]=\"getFormGroupAt(i)!\" [config]=\"getParameterSelectConfig(variable, i)\">\n              </cqa-dynamic-select>\n            </div> \n          </ng-container>\n          <div *ngIf=\"isPlainTextType(variable) || isRuntimeType(variable)\" class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1  capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}<span class=\"cqa-text-red-500\">*</span>\n            </label>\n            <ng-container *ngIf=\"isPlainTextType(variable); else runtimePlainInput\">\n              <cqa-mixed-variable-input\n                [placeholder]=\"'Text Input'\"\n                [value]=\"getRawValue(variable)\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-mixed-variable-input>\n            </ng-container>\n            <ng-template #runtimePlainInput>\n              <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"getRawValue(variable)\" [fullWidth]=\"true\"\n                (valueChange)=\"onTestDataValueChange(variable.name, $event)\">\n              </cqa-custom-input>\n            </ng-template>\n          </div>\n        </ng-container>\n        <ng-template #regularInput>\n          <div class=\"cqa-flex cqa-flex-col\" [style.width]=\"isEditInDepth ? null : 'calc(50% - 12px)'\" [ngClass]=\"{'cqa-w-full': isEditInDepth}\">\n            <label class=\"cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-mb-1 capitalize-first\">\n              {{ variable.label | cqaCamelToTitle }}\n            </label>\n            <cqa-custom-input [placeholder]=\"'Text Input'\" [value]=\"variable.value\" [fullWidth]=\"true\"\n              (valueChange)=\"onVariableValueChange(variable.name, $event)\">\n            </cqa-custom-input>\n          </div>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div *ngIf=\"createElementVisible\">\n  <cqa-element-form\n    [isCreateMode]=\"true\"\n    [screenNameOptions]=\"screenNameOptions\"\n    [hasMoreScreenNames]=\"hasMoreScreenNames\"\n    [isLoadingScreenNames]=\"isLoadingScreenNames\"\n    [isEditInDepthAvailable]=\"false\"\n    (createElement)=\"onCreateElement($event)\"\n    (cancel)=\"onCancelElementForm()\"\n    (searchScreenName)=\"searchScreenName.emit($event)\"\n    (loadMoreScreenNames)=\"loadMoreScreenNames.emit($event)\"\n    (createScreenNameRequest)=\"createScreenNameRequest.emit($event)\">\n  </cqa-element-form>\n</div>", styles: ["\n  .capitalize-first::first-letter {\n    text-transform: uppercase;\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { templateVariables: [{
                 type: Input
             }], variablesForm: [{
@@ -34706,6 +35080,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideForLoopStep: [{
                 type: Input
+            }], hasTestDataProfile: [{
+                type: Input
             }], isEditInDepth: [{
                 type: Input
             }], isDebug: [{
@@ -34801,6 +35177,8 @@ class StepBuilderActionComponent {
         this.isLoadingEnvironments = false;
         /** Whether current step creation is happening inside FOR loop context */
         this.isInsideForLoopStep = false;
+        /** True when the parent test case has a test data profile configured (testCase.testDataId is set). */
+        this.hasTestDataProfile = 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();
@@ -35619,10 +35997,10 @@ class StepBuilderActionComponent {
     }
 }
 StepBuilderActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderActionComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], 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", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", isCreatingStep: "isCreatingStep", elementScreenPrefill: "elementScreenPrefill" }, 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            [isDebug]=\"isDebug\"\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            [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n            [isInsideForLoopStep]=\"isInsideForLoopStep\"\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", "defaultTestDataEndIndex", "isInsideForLoopStep", "isEditInDepth", "isDebug", "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", "title"] }], 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", changeTemplateSignal: "changeTemplateSignal", cancelChangeTemplateSignal: "cancelChangeTemplateSignal", templates: "templates", initialTemplate: "initialTemplate", initialDescription: "initialDescription", initialMetadata: "initialMetadata", isDebug: "isDebug", editMode: "editMode", searchPlaceholder: "searchPlaceholder", setTemplateVariables: "setTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isCreatingStep: "isCreatingStep", elementScreenPrefill: "elementScreenPrefill" }, 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            [isDebug]=\"isDebug\"\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            [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n            [isInsideForLoopStep]=\"isInsideForLoopStep\"\n            [hasTestDataProfile]=\"hasTestDataProfile\"\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", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "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", "title"] }], 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            [isDebug]=\"isDebug\"\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            [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n            [isInsideForLoopStep]=\"isInsideForLoopStep\"\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: [] }]
+            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            [isDebug]=\"isDebug\"\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            [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n            [isInsideForLoopStep]=\"isInsideForLoopStep\"\n            [hasTestDataProfile]=\"hasTestDataProfile\"\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 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showHeader: [{
                 type: Input
             }], changeTemplateSignal: [{
@@ -35689,6 +36067,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideForLoopStep: [{
                 type: Input
+            }], hasTestDataProfile: [{
+                type: Input
             }], isCreatingStep: [{
                 type: Input
             }], elementScreenPrefill: [{
@@ -35786,6 +36166,7 @@ class StepBuilderLoopComponent {
         this.hasMoreEnvironments = false;
         this.isLoadingEnvironments = false;
         this.isInsideForLoopStep = false;
+        this.hasTestDataProfile = false;
         /** When true, header and button show edit/update wording (same as action step builder in debug). */
         this.isDebug = false;
         this.loadMoreElements = new EventEmitter();
@@ -35895,6 +36276,9 @@ class StepBuilderLoopComponent {
             this.patchFormFromTestStep();
             setTimeout(() => this.patchFormFromTestStep(), 0);
         }
+        else {
+            this.applyDefaultDataProfile();
+        }
     }
     ngOnChanges(changes) {
         if (changes['selectOptions']) {
@@ -35908,6 +36292,12 @@ class StepBuilderLoopComponent {
             if (currentProfileId) {
                 this.onDataProfileChange(currentProfileId);
             }
+            if (!this.isEditMode) {
+                this.applyDefaultDataProfile();
+            }
+        }
+        if ((changes['defaultTestDataProfileId'] || changes['isInsideForLoopStep']) && !this.isEditMode) {
+            this.applyDefaultDataProfile();
         }
         if (changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles']) {
             this.updateDataProfileConfig();
@@ -36077,6 +36467,41 @@ class StepBuilderLoopComponent {
             label: option.name
         }));
     }
+    /**
+     * When a default test data profile is provided (e.g., testCase.testDataId) and the user is
+     * creating a FOR loop at the root level, auto-select it and disable the dropdown.
+     */
+    applyDefaultDataProfile() {
+        if (this.isEditMode)
+            return;
+        // Only auto-select + disable when the new FOR loop is NOT nested inside another FOR loop.
+        // When nested, the user should be free to pick a different data profile.
+        if (this.isInsideForLoopStep) {
+            this.setDataProfileDisabled(false);
+            return;
+        }
+        if (this.defaultTestDataProfileId == null) {
+            this.setDataProfileDisabled(false);
+            return;
+        }
+        const profileExists = this.dataProfileOptions.some(p => String(p.id) === String(this.defaultTestDataProfileId));
+        if (!profileExists)
+            return;
+        const control = this.loopForm.get('dataProfile');
+        const currentValue = control?.value;
+        if (String(currentValue ?? '') !== String(this.defaultTestDataProfileId)) {
+            control?.setValue(this.defaultTestDataProfileId, { emitEvent: false });
+            this.onDataProfileChange(this.defaultTestDataProfileId);
+        }
+        this.setDataProfileDisabled(true);
+    }
+    setDataProfileDisabled(disabled) {
+        if (!this.dataProfileConfig || this.dataProfileConfig.disabled === disabled)
+            return;
+        // Only toggle the config-level disabled flag; keep the FormControl enabled so
+        // its value is included in form.value when the step is created.
+        this.dataProfileConfig = { ...this.dataProfileConfig, disabled };
+    }
     /**
      * Handle data profile selection and update loop start/end options
      */
@@ -36250,8 +36675,9 @@ class StepBuilderLoopComponent {
             return !!this.selectedWhileTemplate;
         }
         else {
-            // For 'for' loop type
-            const formValue = this.loopForm.value;
+            // For 'for' loop type — use getRawValue so disabled controls (e.g., auto-selected
+            // default data profile) are still included.
+            const formValue = this.loopForm.getRawValue();
             const selectOption = formValue.selectOption;
             if (!selectOption) {
                 return false;
@@ -36286,7 +36712,7 @@ class StepBuilderLoopComponent {
                 }
             }
         });
-        const formValue = this.loopForm.value;
+        const formValue = this.loopForm.getRawValue();
         if (this.selectedLoopType === 'while') {
             if (!this.selectedWhileTemplate) {
                 return;
@@ -36373,10 +36799,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", isCreatingStep: "isCreatingStep", setWhileTemplateVariables: "setWhileTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", isDebug: "isDebug", testStep: "testStep" }, 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" 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      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" 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      <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      <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      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\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      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\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: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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]=\"isEditMode ? 'Update Step' : '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: 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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { 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", "title"] }], 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", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", isDebug: "isDebug", testStep: "testStep" }, 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" 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      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" 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      <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      <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 *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\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      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\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      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\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: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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]=\"isEditMode ? 'Update Step' : '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: 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: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "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", "changeTemplateSignal", "cancelChangeTemplateSignal", "templates", "initialTemplate", "initialDescription", "initialMetadata", "isDebug", "editMode", "searchPlaceholder", "setTemplateVariables", "setAdvancedSettingsVariables", "computeHtmlGrammarFn", "preventSelectTemplate", "elementOptions", "hasMoreElements", "isLoadingElements", "screenNameOptions", "hasMoreScreenNames", "isLoadingScreenNames", "parameterOptions", "hasMoreParameters", "isLoadingParameters", "uploadOptions", "hasMoreUploads", "isLoadingUploads", "environmentOptions", "hasMoreEnvironments", "isLoadingEnvironments", "defaultTestDataProfileId", "defaultTestDataStartIndex", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isCreatingStep", "elementScreenPrefill"], outputs: ["templateChanged", "loadMoreElements", "searchElements", "searchElementsByScreenName", "createElement", "searchScreenName", "loadMoreScreenNames", "createScreenNameRequest", "searchParameters", "loadMoreParameters", "searchUploads", "loadMoreUploads", "searchEnvironments", "loadMoreEnvironments", "createStep", "cancelled", "redirectToParameter", "redirectToEnvironment"] }, { 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", "title"] }], 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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" 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      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" 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      <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      <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      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\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      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\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: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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]=\"isEditMode ? 'Update Step' : '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: [] }]
+            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 for-loop-builder\">\n  <!-- Header -->\n  <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-mb-4\">\n    <h2 class=\"cqa-text-[12px] cqa-font-semibold cqa-text-black-100 cqa-m-0\">\n      {{ isEditMode ? 'Edit loop step' : 'Create Loop Test Step' }}\n    </h2>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && !whileIsChangingTemplate\"\n      variant=\"outlined\"\n      btnSize=\"sm\"\n      icon=\"swap_horiz\"\n      text=\"Change Template\"\n      (clicked)=\"onWhileChangeTemplate()\">\n    </cqa-button>\n    <cqa-button\n      *ngIf=\"isEditMode && selectedLoopType === 'while' && whileIsChangingTemplate\"\n      variant=\"text\"\n      btnSize=\"sm\"\n      text=\"Cancel\"\n      (clicked)=\"onWhileCancelChangeTemplate()\">\n    </cqa-button>\n  </div>\n\n  <!-- Loop Type Selection: in edit mode show only the current type (For or While); in create mode show both -->\n  <div class=\"cqa-mb-4 cqa-w-full\">\n    <div *ngIf=\"isEditMode\" 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      <span class=\"cqa-text-[12px] cqa-font-medium cqa-px-3 cqa-text-[#111827]\">{{ selectedLoopType === 'while' ? 'While' : 'For' }}</span>\n    </div>\n    <div *ngIf=\"!isEditMode\" 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      <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      <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 *ngIf=\"dataProfileConfig?.disabled && loopForm.get('selectOption')?.value === 'dataProfile'\"\n         class=\"cqa-text-[12px] cqa-text-red-500 cqa-mb-2\">\n      Data Profile is disabled because it is set at the test case level configuration.\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      [computeHtmlGrammarFn]=\"computeHtmlGrammarFn\"\n      [changeTemplateSignal]=\"whileChangeTemplateSignal\"\n      [cancelChangeTemplateSignal]=\"whileCancelChangeTemplateSignal\"\n      [templates]=\"whileTemplates\"\n      [setTemplateVariables]=\"setWhileTemplateVariables\"\n      [setAdvancedSettingsVariables]=\"setAdvancedSettingsVariables\"\n      [editMode]=\"isEditMode\"\n      [isDebug]=\"isDebug\"\n      [initialTemplate]=\"selectedWhileTemplate\"\n      [initialDescription]=\"selectedWhileDescription\"\n      [initialMetadata]=\"selectedWhileMetadata\"\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      [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n      [isInsideForLoopStep]=\"isInsideForLoopStep\"\n      [hasTestDataProfile]=\"hasTestDataProfile\"\n      (templateChanged)=\"selectWhileTemplate($event)\"\n      (cancelled)=\"onCancel()\"\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: Apply only when isDebug + existing step (isEditMode), else Create Step -->\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]=\"isEditMode ? 'Update Step' : '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: [{
@@ -36443,6 +36869,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideForLoopStep: [{
                 type: Input
+            }], hasTestDataProfile: [{
+                type: Input
             }], isDebug: [{
                 type: Input
             }], testStep: [{
@@ -36514,6 +36942,7 @@ class StepBuilderConditionComponent {
         this.hasMoreEnvironments = false;
         this.isLoadingEnvironments = false;
         this.isInsideForLoopStep = false;
+        this.hasTestDataProfile = 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 */
@@ -37236,10 +37665,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", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", 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                [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n                [isInsideForLoopStep]=\"isInsideForLoopStep\"\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", "defaultTestDataEndIndex", "isInsideForLoopStep", "isEditInDepth", "isDebug", "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", "title"] }], 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", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", defaultTestDataEndIndex: "defaultTestDataEndIndex", isInsideForLoopStep: "isInsideForLoopStep", hasTestDataProfile: "hasTestDataProfile", 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                [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n                [isInsideForLoopStep]=\"isInsideForLoopStep\"\n                [hasTestDataProfile]=\"hasTestDataProfile\"\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", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "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", "title"] }], 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                [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n                [isInsideForLoopStep]=\"isInsideForLoopStep\"\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: [] }]
+            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                [defaultTestDataEndIndex]=\"defaultTestDataEndIndex\"\n                [isInsideForLoopStep]=\"isInsideForLoopStep\"\n                [hasTestDataProfile]=\"hasTestDataProfile\"\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: [{
@@ -37282,6 +37711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isInsideForLoopStep: [{
                 type: Input
+            }], hasTestDataProfile: [{
+                type: Input
             }], isCreatingStep: [{
                 type: Input
             }], createStep: [{
@@ -43042,7 +43473,7 @@ class ConditionBranchEditorComponent {
     }
 }
 ConditionBranchEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ConditionBranchEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionBranchEditorComponent, selector: "cqa-condition-branch-editor", inputs: { mode: "mode", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", initialConditionData: "initialConditionData", editTestStep: "editTestStep", branchLabel: "branchLabel", isSaving: "isSaving" }, outputs: { save: "save", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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    {{ title }}\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      <!-- Single Condition Row -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n        <!-- Condition Label + Template Dropdown -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <!-- Label -->\n          <div class=\"cqa-text-[12px] cqa-font-semibold\">\n            {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n            </cqa-dynamic-select>\n          </div>\n        </div>\n\n        <!-- Template Variables Section (shown when template is selected) -->\n        <div *ngIf=\"hasSelectedTemplate\" 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]=\"currentHtmlGrammar\">\n            </div>\n          </div>\n\n          <!-- Template Variables Form -->\n          <cqa-template-variables-form\n            style=\"width: 100%;\"\n            [templateVariables]=\"getTemplateVariables()\"\n            [variablesForm]=\"getVariablesForm()\"\n            [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n            [description]=\"conditionForm.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)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n            (descriptionChange)=\"conditionForm.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=\"getAdvancedVariables().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)=\"toggleAdvanced()\">\n                <span class=\"cqa-text-[10px]\">Advanced</span>\n                <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n                  expand_more\n                </mat-icon>\n              </button>\n              <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n                <cqa-advanced-variables-form\n                  [advancedVariables]=\"getAdvancedVariables()\"\n                  [advancedVariableForm]=\"getAdvancedVariablesForm()\"\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    </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\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onSave()\">\n    </cqa-button>\n    <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Saving\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", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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", "defaultTestDataEndIndex", "isInsideForLoopStep", "isEditInDepth", "isDebug", "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: 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", "title"] }], directives: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ConditionBranchEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ConditionBranchEditorComponent, selector: "cqa-condition-branch-editor", inputs: { mode: "mode", conditionTemplates: "conditionTemplates", setConditionTemplateVariables: "setConditionTemplateVariables", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", computeHtmlGrammarFn: "computeHtmlGrammarFn", 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", initialConditionData: "initialConditionData", editTestStep: "editTestStep", branchLabel: "branchLabel", isSaving: "isSaving" }, outputs: { save: "save", cancelled: "cancelled", loadMoreElements: "loadMoreElements", searchElements: "searchElements", searchElementsByScreenName: "searchElementsByScreenName", createElement: "createElement", searchScreenName: "searchScreenName", loadMoreScreenNames: "loadMoreScreenNames", createScreenNameRequest: "createScreenNameRequest", searchParameters: "searchParameters", loadMoreParameters: "loadMoreParameters", searchEnvironments: "searchEnvironments", loadMoreEnvironments: "loadMoreEnvironments" }, 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    {{ title }}\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      <!-- Single Condition Row -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n        <!-- Condition Label + Template Dropdown -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <!-- Label -->\n          <div class=\"cqa-text-[12px] cqa-font-semibold\">\n            {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n            </cqa-dynamic-select>\n          </div>\n        </div>\n\n        <!-- Template Variables Section (shown when template is selected) -->\n        <div *ngIf=\"hasSelectedTemplate\" 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]=\"currentHtmlGrammar\">\n            </div>\n          </div>\n\n          <!-- Template Variables Form -->\n          <cqa-template-variables-form\n            style=\"width: 100%;\"\n            [templateVariables]=\"getTemplateVariables()\"\n            [variablesForm]=\"getVariablesForm()\"\n            [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n            [description]=\"conditionForm.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)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n            (descriptionChange)=\"conditionForm.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=\"getAdvancedVariables().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)=\"toggleAdvanced()\">\n                <span class=\"cqa-text-[10px]\">Advanced</span>\n                <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n                  expand_more\n                </mat-icon>\n              </button>\n              <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n                <cqa-advanced-variables-form\n                  [advancedVariables]=\"getAdvancedVariables()\"\n                  [advancedVariableForm]=\"getAdvancedVariablesForm()\"\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    </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\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onSave()\">\n    </cqa-button>\n    <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Saving\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", components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { 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", "defaultTestDataEndIndex", "isInsideForLoopStep", "hasTestDataProfile", "isEditInDepth", "isDebug", "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: 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", "title"] }], directives: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ConditionBranchEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-condition-branch-editor', 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    {{ title }}\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      <!-- Single Condition Row -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\" [formGroup]=\"conditionForm\">\n        <!-- Condition Label + Template Dropdown -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <!-- Label -->\n          <div class=\"cqa-text-[12px] cqa-font-semibold\">\n            {{ conditionRowLabel }}\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]=\"conditionForm\" [config]=\"getValueConfig()\">\n            </cqa-dynamic-select>\n          </div>\n        </div>\n\n        <!-- Template Variables Section (shown when template is selected) -->\n        <div *ngIf=\"hasSelectedTemplate\" 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]=\"currentHtmlGrammar\">\n            </div>\n          </div>\n\n          <!-- Template Variables Form -->\n          <cqa-template-variables-form\n            style=\"width: 100%;\"\n            [templateVariables]=\"getTemplateVariables()\"\n            [variablesForm]=\"getVariablesForm()\"\n            [metadata]=\"conditionForm.get('metadata')?.value || ''\"\n            [description]=\"conditionForm.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)=\"onVariableValueChange($event.name, $event.value)\"\n            (variableBooleanChange)=\"onVariableBooleanChange($event.name, $event.value)\"\n            (metadataChange)=\"conditionForm.get('metadata')?.setValue($event)\"\n            (descriptionChange)=\"conditionForm.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=\"getAdvancedVariables().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)=\"toggleAdvanced()\">\n                <span class=\"cqa-text-[10px]\">Advanced</span>\n                <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"isAdvancedExpanded\">\n                  expand_more\n                </mat-icon>\n              </button>\n              <div *ngIf=\"isAdvancedExpanded\" class=\"cqa-mt-2\">\n                <cqa-advanced-variables-form\n                  [advancedVariables]=\"getAdvancedVariables()\"\n                  [advancedVariableForm]=\"getAdvancedVariablesForm()\"\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    </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\" variant=\"outlined\" text=\"Cancel\" [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      (clicked)=\"onCancel()\">\n    </cqa-button>\n    <cqa-button *ngIf=\"!isSaving\" class=\"cqa-w-1/2\" variant=\"filled\" [text]=\"saveButtonLabel\"\n      [customClass]=\"'cqa-flex-1 cqa-w-full'\"\n      [disabled]=\"!isFormValid()\"\n      (clicked)=\"onSave()\">\n    </cqa-button>\n    <div *ngIf=\"isSaving\" class=\"cqa-w-1/2 cqa-flex-1 cqa-min-h-[38px] cqa-rounded-[8px]\">\n      <cqa-badge label=\"Saving\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", styles: [] }]
@@ -43932,6 +44363,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         IterationsLoopComponent,
         FailedStepCardComponent,
         CustomInputComponent,
+        MixedVariableInputComponent,
         CustomTextareaComponent,
         CodeEditorComponent,
         CustomToggleComponent,
@@ -44102,6 +44534,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         IterationsLoopComponent,
         FailedStepCardComponent,
         CustomInputComponent,
+        MixedVariableInputComponent,
         CustomTextareaComponent,
         CodeEditorComponent,
         CustomToggleComponent,
@@ -44317,6 +44750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         IterationsLoopComponent,
                         FailedStepCardComponent,
                         CustomInputComponent,
+                        MixedVariableInputComponent,
                         CustomTextareaComponent,
                         CodeEditorComponent,
                         CustomToggleComponent,
@@ -44493,6 +44927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         IterationsLoopComponent,
                         FailedStepCardComponent,
                         CustomInputComponent,
+                        MixedVariableInputComponent,
                         CustomTextareaComponent,
                         CodeEditorComponent,
                         CustomToggleComponent,
@@ -45331,5 +45766,5 @@ function buildTestCaseDetailsFromApi(data, options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
+export { ADVANCED_SUBFIELDS_BY_TYPE, ADVANCED_TOGGLE_KEYS, AIActionStepComponent, AIAgentStepComponent, API_EDIT_STEP_LABELS, ActionMenuButtonComponent, AddPrerequisiteCasesSectionComponent, AdvancedVariablesFormComponent, AiDebugAlertComponent, AiLogsWithReasoningComponent, AiPromptCardComponent, AiReasoningComponent, ApiEditStepComponent, ApiStepComponent, AutocompleteComponent, BadgeComponent, BasicStepComponent, BreakpointsModalComponent, ButtonComponent, CUSTOM_EDIT_STEP_DATA, CUSTOM_EDIT_STEP_EDIT_IN_DEPTH, CUSTOM_EDIT_STEP_REF, CUSTOM_ELEMENT_POPUP_REF, ChangeHistoryComponent, ChartCardComponent, CodeEditorComponent, ColumnVisibilityComponent, CompareRunsComponent, ConditionBranchEditorComponent, ConditionDebugStepComponent, ConditionStepComponent, ConfigurationCardComponent, ConsoleAlertComponent, CoverageModuleCardComponent, CreateStepGroupComponent, CustomEditStepComponent, CustomEditStepRef, CustomEditStepService, CustomInputComponent, CustomTextareaComponent, CustomToggleComponent, DEFAULT_METADATA_COLOR, DEFAULT_PRIORITY_COLOR_CONFIG, DEFAULT_STATUS_COLOR_CONFIG, DIALOG_DATA, DIALOG_REF, DashboardHeaderComponent, DaterangepickerComponent, DaterangepickerDirective, DbQueryExecutionItemComponent, DbVerificationStepComponent, DeleteStepsComponent, DetailDrawerComponent, DetailDrawerTabComponent, DetailDrawerTabContentDirective, DetailSidePanelComponent, DialogComponent, DialogRef, DialogService, DocumentVerificationStepComponent, DropdownButtonComponent, DynamicCellContainerDirective, DynamicCellTemplateDirective, DynamicFilterComponent, DynamicHeaderTemplateDirective, DynamicSelectFieldComponent, DynamicTableComponent, ELEMENT_POPUP_DATA, ELEMENT_POPUP_EDIT_IN_DEPTH, EMPTY_STATE_IMAGES, EMPTY_STATE_PRESETS, ElementFormComponent, ElementListComponent, ElementPopupComponent, ElementPopupRef, ElementPopupService, EmptyStateComponent, ErrorModalComponent, ExecutionResultModalComponent, ExportCodeModalComponent, FailedStepCardComponent, FailedStepComponent, FailedTestCasesCardComponent, FileDownloadStepComponent, FileUploadComponent, FullTableLoaderComponent, HeatErrorMapCellComponent, InsightCardComponent, ItemListComponent, IterationsLoopComponent, JumpToStepModalComponent, LiveConversationComponent, LiveExecutionStepComponent, LoopStepComponent, MONACO_LANGUAGE_MAP, MainStepCollapseComponent, MetricsCardComponent, MixedVariableInputComponent, NetworkRequestComponent, NewVersionHistoryDetailComponent, OtherButtonComponent, PRIORITY_COLORS, PaginationComponent, ProgressIndicatorComponent, ProgressTextCardComponent, QuestionnaireListComponent, RESULT_COLORS, RadioCardGroupComponent, RecordingBannerComponent, ReviewRecordedStepsModalComponent, RunExecutionAlertComponent, RunHistoryCardComponent, STATUS_COLORS, STEP_DETAILS_DRAWER_DATA, STEP_DETAILS_DRAWER_REF, STEP_DETAILS_FIELDS_BY_TYPE, STEP_DETAILS_FIELD_META, STEP_DETAILS_MODAL_DATA, STEP_DETAILS_MODAL_REF, SearchBarComponent, SegmentControlComponent, SelectedFiltersComponent, SelfHealAnalysisComponent, SessionChangesModalComponent, SessionRestorationDialogComponent, SimulatorComponent, StepBuilderActionComponent, StepBuilderAiAgentComponent, StepBuilderConditionComponent, StepBuilderCustomCodeComponent, StepBuilderDatabaseComponent, StepBuilderDocumentComponent, StepBuilderDocumentGenerationTemplateStepComponent, StepBuilderGroupComponent, StepBuilderLoopComponent, StepBuilderRecordStepComponent, StepDetailsDrawerComponent, StepDetailsDrawerRef, StepDetailsDrawerService, StepDetailsModalComponent, StepDetailsModalRef, StepDetailsModalService, StepGroupComponent, StepProgressCardComponent, StepRendererComponent, StepStatusCardComponent, StepTypes, StepperComponent, TEST_CASE_DETAILS_FIELD_MAP, TEST_CASE_DETAILS_SELECT_KEYS, TEST_DATA_MODAL_DATA, TEST_DATA_MODAL_EDIT_IN_DEPTH, TEST_DATA_MODAL_REF, TableActionToolbarComponent, TableDataLoaderComponent, TableTemplateComponent, TailwindOverlayContainer, TemplateVariablesFormComponent, TestCaseAiAgentStepComponent, TestCaseAiVerifyStepComponent, TestCaseApiStepComponent, TestCaseConditionStepComponent, TestCaseCustomCodeStepComponent, TestCaseDatabaseStepComponent, TestCaseDetailsComponent, TestCaseDetailsEditComponent, TestCaseDetailsRendererComponent, TestCaseLoopStepComponent, TestCaseNormalStepComponent, TestCaseRestoreSessionStepComponent, TestCaseScreenshotStepComponent, TestCaseScrollStepComponent, TestCaseStepGroupComponent, TestCaseUploadStepComponent, TestCaseVerifyUrlStepComponent, TestDataModalComponent, TestDataModalRef, TestDataModalService, TestDistributionCardComponent, UiKitModule, UpdatedFailedStepComponent, VersionHistoryCompareComponent, VersionHistoryDetailComponent, VersionHistoryListComponent, VersionHistoryRestoreConfirmComponent, ViewMoreFailedStepButtonComponent, VisualComparisonComponent, VisualDifferenceModalComponent, WorkspaceSelectorComponent, buildTestCaseDetailsFromApi, getDynamicFieldsFromLegacyConfig, getEmptyStatePreset, getMetadataColor, getMetadataValueStyle, getStepDetailsStepType, humanizeVariableKey, isAiAgentStepConfig, isAiVerifyStepConfig, isApiStepConfig, isConditionStepConfig, isCustomCodeStepConfig, isDatabaseStepConfig, isLoopStepConfig, isNormalStepConfig, isRestoreSessionStepConfig, isScreenshotStepConfig, isScrollStepConfig, isStepGroupConfig, isUploadStepConfig, isVerifyUrlStepConfig, mapApiVariablesToDynamicFields };
 //# sourceMappingURL=cqa-lib-cqa-ui.mjs.map