npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.408 → 1.1.410 - Mend

@cqa-lib/cqa-ui 1.1.408 → 1.1.410

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

Files changed (27) hide show

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

@@ -3879,10 +3879,10 @@ class TableActionToolbarComponent {
 }
 TableActionToolbarComponent.ACTION_COOLDOWN_MS = 500;
 TableActionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableActionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TableActionToolbarComponent, selector: "cqa-table-action-toolbar", inputs: { selectedItems: "selectedItems", actions: "actions", showSelectAll: "showSelectAll", allSelected: "allSelected", showDismiss: "showDismiss" }, outputs: { actionClick: "actionClick", selectAllChange: "selectAllChange", dismiss: "dismiss" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TableActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [] }]
+            args: [{ selector: 'cqa-table-action-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-ui-root\">\n  <div\n    class=\"action-toolbar cqa-flex cqa-items-center cqa-justify-center xl:cqa-justify-between cqa-gap-2 cqa-flex-wrap cqa-py-[15.5px] sm:cqa-px-[34px] cqa-px-[20px] cqa-bg-primary cqa-text-white cqa-rounded-[7px] cqa-shadow-md\"\n    *ngIf=\"hasSelection\">\n    <div class=\"action-toolbar-left cqa-flex cqa-items-center cqa-gap-2 cqa-text-[14px] cqa-leading-[21px] cqa-font-medium\">\n      <ng-container *ngIf=\"showSelectAll\">\n        <label class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-cursor-pointer cqa-select-none\">\n          <input type=\"checkbox\" [checked]=\"allSelected\" (change)=\"onSelectAllChange($any($event.target).checked)\"\n            class=\"select-all cqa-w-4 cqa-h-4 cqa-rounded cqa-border cqa-border-white cqa-bg-transparent hover:cqa-bg-transparent cqa-accent-primary\" />\n          <span>Select all</span>\n        </label>\n        <span class=\"cqa-border-l cqa-border-white/50 cqa-pl-2 cqa-border-solid cqa-self-stretch cqa-flex cqa-items-center\">{{ selectionLabel }}</span>\n      </ng-container>\n      <span *ngIf=\"!showSelectAll\">{{ selectionLabel }}</span>\n    </div>\n    <div class=\"action-toolbar-right cqa-flex cqa-items-center cqa-gap-[7px]\">\n      <ng-container *ngFor=\"let action of visibleActions()\">\n        <div [attr.aria-disabled]=\"isDisabled(action)\" [class.cqa-opacity-50]=\"isDisabled(action)\" [class.cqa-cursor-not-allowed]=\"isDisabled(action)\" (click)=\"!isDisabled(action) && onAction(action)\"\n          class=\"cqa-flex cqa-items-center cqa-gap-[8.75px] cqa-py-[5px] cqa-px-[8.75px] cqa-cursor-pointer cqa-text-[12.3px] cqa-leading-[17.5px] cqa-font-medium hover:cqa-bg-white/10 cqa-rounded\">\n          <mat-icon class=\"!cqa-w-[16px] !cqa-h-[16px] !cqa-text-[16px]\">{{ action.icon }}</mat-icon>\n          <span class=\"md:cqa-flex cqa-hidden\">{{ action.label }}</span>\n        </div>\n      </ng-container>\n      <button *ngIf=\"showDismiss\" type=\"button\" (click)=\"onDismiss()\" class=\"cqa-p-1 cqa-rounded hover:cqa-bg-white/10 cqa-flex cqa-items-center cqa-justify-center\"\n        title=\"Dismiss\" aria-label=\"Dismiss\">\n        <mat-icon class=\"!cqa-w-[20px] !cqa-h-[20px] !cqa-text-[20px]\">close</mat-icon>\n      </button>\n    </div>\n  </div>\n</div>", styles: [] }]
         }], propDecorators: { selectedItems: [{
                 type: Input
             }], actions: [{
@@ -22542,6 +22542,19 @@ class TestCaseNormalStepComponent {
     getCurrentEventTypeConfig() {
         return this.eventTypeConfigs.find(etc => etc.type === this.eventType) || this.eventTypeConfigs[0];
     }
+    /**
+     * Convert escaped newline sequences to real newlines for AI Agent text rendering.
+     * Handles both JSON-escaped "\\n" and existing CR/LF variants.
+     */
+    normalizeAiAgentNewlinesForDisplay(html) {
+        if (!html)
+            return html;
+        return html
+            .replace(/\\r\\n/g, '\n')
+            .replace(/\\n/g, '\n')
+            .replace(/\r\n/g, '\n')
+            .replace(/\r/g, '\n');
+    }
     getActionDescription() {
         // const config = this.getCurrentEventTypeConfig();
         // switch (this.eventType) {
@@ -22569,7 +22582,10 @@ class TestCaseNormalStepComponent {
         //     return '';
         // }
         if (this.action) {
-            return this.action ? this.sanitizer.bypassSecurityTrustHtml(this.action) : '';
+            const html = this.eventType === 'ai-agent'
+                ? this.normalizeAiAgentNewlinesForDisplay(this.action)
+                : this.action;
+            return html ? this.sanitizer.bypassSecurityTrustHtml(html) : '';
         }
         return '';
     }
@@ -22864,10 +22880,17 @@ class TestCaseNormalStepComponent {
     }
 }
 TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [{ token: CustomEditStepService }, { token: ElementPopupService }, { token: TestDataModalService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", stepIndex: "stepIndex", isDuplicating: "isDuplicating", nestingLevel: "nestingLevel" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }, { propertyName: "clickElementTrigger", first: true, predicate: ["clickElementTrigger"], descendants: true }, { propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n  class=\"step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4\"\n  [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n  style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false, editable, 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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [attr.title]=\"getCurrentEventTypeConfig().label\"\n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n          <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n          <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n\n      <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n      <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n            <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n            <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'settings'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'check'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n  <div\n    *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n    class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n    <span\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n      [innerHTML]=\"getActionDescription()\"\n      (click)=\"clickOnAction($event)\">\n    </span>\n  </div>\n  <!-- Other step types: action HTML as before -->\n  <span\n    class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n    *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n    [innerHTML]=\"getActionDescription()\"\n    (click)=\"clickOnAction($event)\">\n  </span>\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span> -->\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n       #clickElementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button> -->\n      <button\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 d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <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\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\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>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i2.DatePipe } });
+TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", stepIndex: "stepIndex", isDuplicating: "isDuplicating", nestingLevel: "nestingLevel" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }, { propertyName: "clickElementTrigger", first: true, predicate: ["clickElementTrigger"], descendants: true }, { propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n  [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n  [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n  [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n  style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false, editable, 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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [attr.title]=\"getCurrentEventTypeConfig().label\"\n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n          <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n          <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n\n      <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n      <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n            <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n            <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'settings'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'check'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n  <div\n    *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n    class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n    <span\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n      [innerHTML]=\"getActionDescription()\"\n      (click)=\"clickOnAction($event)\">\n    </span>\n  </div>\n  <!-- Other step types: action HTML as before -->\n  <span\n    class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n    *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n    [innerHTML]=\"getActionDescription()\"\n    (click)=\"clickOnAction($event)\">\n  </span>\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span> -->\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n       #clickElementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button> -->\n      <button\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 d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <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\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\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>", 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", ":host ::ng-deep .cqa-ai-agent-unified-inner .element{white-space:pre-wrap}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div\n  class=\"step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4\"\n  [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n  style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false, editable, 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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [attr.title]=\"getCurrentEventTypeConfig().label\"\n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n          <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n          <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n\n      <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n      <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n            <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n            <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'settings'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'check'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n  <div\n    *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n    class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n    <span\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n      [innerHTML]=\"getActionDescription()\"\n      (click)=\"clickOnAction($event)\">\n    </span>\n  </div>\n  <!-- Other step types: action HTML as before -->\n  <span\n    class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n    *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n    [innerHTML]=\"getActionDescription()\"\n    (click)=\"clickOnAction($event)\">\n  </span>\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span> -->\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n       #clickElementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button> -->\n      <button\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 d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <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\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\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>" }]
+            args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [
+                        STEP_ROW_ACTIONS_STYLES,
+                        `
+    :host ::ng-deep .cqa-ai-agent-unified-inner .element {
+      white-space: pre-wrap;
+    }
+    `,
+                    ], template: "<div\n  [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n  [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n  [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n  style=\"border-bottom: 1px solid #E5E7EB;\">\n\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false, editable, 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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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\n  <!-- Step Number -->\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n    {{ stepNumber }}\n  </span>\n\n  <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n  <div class=\"cqa-relative\" #dropdownContainer>\n    <button type=\"button\" \n      [attr.title]=\"getCurrentEventTypeConfig().label\"\n      [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n      [style.color]=\"getCurrentEventTypeConfig().color\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n      <!-- Icon -->\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n            stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n            stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n          <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n          <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n      <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </span>\n\n      <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n      <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n        getCurrentEventTypeConfig().label }}</span>\n    </button>\n\n    <!-- Dropdown Menu -->\n    <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n      class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n      <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n        [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n        class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n        <span *ngIf=\"etc.icon === 'paper_plane'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n              stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'star'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'T'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'cursor-double'\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>  \n        </span>\n        <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n            <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n            <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'clock'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'settings'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span *ngIf=\"etc.icon === 'check'\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </span>\n        <span>{{ etc.label }}</span>\n      </button>\n    </div>\n  </div>\n\n  <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n  <div\n    *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n    class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n    <span\n      class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n      [innerHTML]=\"getActionDescription()\"\n      (click)=\"clickOnAction($event)\">\n    </span>\n  </div>\n  <!-- Other step types: action HTML as before -->\n  <span\n    class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n    *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n    [innerHTML]=\"getActionDescription()\"\n    (click)=\"clickOnAction($event)\">\n  </span>\n  <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n    {{ getActionDescription() }}\n  </span> -->\n\n  <!-- Parameters -->\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n    <!-- Navigate: URL as clickable trigger for Test Data modal -->\n    <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n      (click)=\"openTestDataModal($event)\"\n      class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\">\n      {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n    </span>\n    \n    <!-- Other event types: loop through parameters (navigate excluded) -->\n    <ng-container *ngFor=\"let param of parameters; let i = index\">\n      <!-- Skip navigate parameters in the loop (already shown above) -->\n      <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n      <!-- Type: First param (text value like {{username}}) -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Type: \"into\" text -->\n      <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        into\n      </span>\n\n      <!-- Type: Second param (selector) -->\n      <span *ngIf=\"eventType === 'type' && i === 1\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n       #clickElementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Click: Suffix text (like \"if Present\") -->\n      <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        {{ param.value }}\n      </span>\n\n      <!-- Double Click: Selector input/display -->\n      <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Press Enter: Selector input/display with HTML support -->\n      <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- Enter: Value display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"in the\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        in the\n      </span>\n\n      <!-- Enter: Label display with quotes (like click action) -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n\n      <!-- Enter: \"field\" text -->\n      <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        field\n      </span>\n\n      <!-- Wait: Duration input -->\n      <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n        (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n        class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n      <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        seconds\n      </span>\n\n      <!-- Wait: Element selector -->\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        for element\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n       #elementTrigger\n       (click)=\"openElementPopup($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-cursor-pointer cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n        to be visible\n      </span>\n\n      <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n      <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n        (click)=\"openStepDescriptionModal($event)\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC] cqa-cursor-pointer hover:cqa-opacity-90\"\n        [innerHTML]=\"param.displayValue || param.value\">\n      </span>\n\n      <!-- AI Agent: Instructions -->\n      <span *ngIf=\"eventType === 'ai-agent'\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ param.displayValue || param.value }}\n      </span>\n      </ng-container>\n    </ng-container>\n  </div>\n\n  <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" #editTrigger (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button> -->\n      <button\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 d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n        <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\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        </svg>\n      </button>\n    </div>\n\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>" }]
         }], ctorParameters: function () { return [{ type: CustomEditStepService }, { type: ElementPopupService }, { type: TestDataModalService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.DomSanitizer }]; }, propDecorators: { dropdownContainer: [{
                 type: ViewChild,
                 args: ['dropdownContainer', { static: false }]
@@ -23099,7 +23122,7 @@ class TestCaseDetailsRendererComponent {
         this.renderStep();
     }
     ngOnChanges(changes) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const structuralChange = changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] ||
             changes['isInsideStepGroup'] || changes['isReorder'] || changes['editable'];
         const optionsOnlyChange = (changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles'] ||
@@ -23121,6 +23144,11 @@ class TestCaseDetailsRendererComponent {
             this.componentRef.instance.isDuplicating = this.isDuplicating;
             this.cdr.detectChanges();
         }
+        else if (changes['currentTestCaseId'] && ((_d = this.componentRef) === null || _d === void 0 ? void 0 : _d.instance) != null &&
+            (isStepGroupConfig(this.step) || isLoopStepConfig(this.step) || isConditionStepConfig(this.step))) {
+            this.componentRef.instance.currentTestCaseId = this.currentTestCaseId;
+            this.cdr.detectChanges();
+        }
     }
     /** Update only data profile / options inputs on existing instance (avoids full recreate and losing isEditing). */
     updateOptionsInputs(instance) {
@@ -23216,6 +23244,7 @@ class TestCaseDetailsRendererComponent {
             instance.branches = this.step.branches;
         // 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.dataProfileOptions = this.dataProfileOptions;
             instance.hasMoreDataProfiles = this.hasMoreDataProfiles;
             instance.isLoadingDataProfiles = this.isLoadingDataProfiles;
@@ -23389,6 +23418,9 @@ class TestCaseDetailsRendererComponent {
                     if (v.isCreateMode) {
                         payload.isCreateMode = true;
                     }
+                    if (v.createModeBranchData != null) {
+                        payload.createModeBranchData = v.createModeBranchData;
+                    }
                     this.editInDepth.emit(payload);
                 }
                 else {
@@ -23427,7 +23459,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", 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", 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"] }] });
 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>" }]
@@ -23467,6 +23499,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], editable: [{
                 type: Input
+            }], currentTestCaseId: [{
+                type: Input
             }], nestedStepChange: [{
                 type: Output
             }], addStep: [{
@@ -23663,6 +23697,18 @@ class TestCaseLoopStepComponent {
     onLoopActionClick(event) {
         if (this.isInsideStepGroup)
             return;
+        // FOR loop: profile / start / end values are read-only badges — do not bubble to step-list (which opens test-data modal)
+        if (this.loopType === 'for') {
+            const node = event.target;
+            const el = node.nodeType === Node.ELEMENT_NODE
+                ? node
+                : node.parentElement;
+            if (el === null || el === void 0 ? void 0 : el.closest('.test_data, [data-key="test-data"]')) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+        }
         this.clickAction.emit({ event, step: this.config });
     }
     /** Forward clickAction from nested steps only when not inside a step-group (Element/Test Data modals disabled there). */
@@ -24211,6 +24257,28 @@ class TestCaseLoopStepComponent {
     getEndLabel() {
         return this.loopType === 'for' ? 'END FOR' : 'END WHILE';
     }
+    /** START loop body marker: first nested step's step number, or the loop row's step number if empty. */
+    getLoopMarkerStartStepDisplay() {
+        var _a, _b;
+        const first = (_a = this.nestedSteps) === null || _a === void 0 ? void 0 : _a[0];
+        if ((first === null || first === void 0 ? void 0 : first.stepNumber) != null && first.stepNumber !== '') {
+            return String(first.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
+    /** END loop body marker: last nested step's step number, or the loop row's step number if empty. */
+    getLoopMarkerEndStepDisplay() {
+        var _a, _b;
+        const steps = this.nestedSteps;
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+        }
+        const last = steps[steps.length - 1];
+        if ((last === null || last === void 0 ? void 0 : last.stepNumber) != null && last.stepNumber !== '') {
+            return String(last.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
     /** Resolve display start index: prefer forLoopStartIndex from step (or dataMapJson/dataMapBean), else startStep, else from nested steps */
     getDisplayStartIndex() {
         var _a, _b, _c, _d, _e, _f;
@@ -24338,10 +24406,10 @@ class TestCaseLoopStepComponent {
     /** Test Data profile part only - for vertical stack layout (row 1) */
     getForLoopProfileDisplay() {
         const cfg = this.config;
-        if (cfg === null || cfg === void 0 ? void 0 : cfg.forLoopDisplayHtml) {
-            const m = cfg.forLoopDisplayHtml.match(/Test Data profile:\s*(<[^>]+>[^<]*<\/[^>]+>)/);
-            if (m)
-                return `Test Data profile: ${m[1]}`;
+        // Always emit badges with data-event-key so portal preventPopup can suppress the test-data modal when needed
+        if ((cfg === null || cfg === void 0 ? void 0 : cfg.forLoopDisplayHtml) && this.hasTestDataProfile()) {
+            const name = this.getDisplayTestDataProfileName();
+            return `Test Data profile: <span data-key="test-data" data-event-key="testDataProfile" class="test_data">${this.escapeForLoopHtml(name)}</span>`;
         }
         if (!this.hasTestDataProfile())
             return '';
@@ -24365,10 +24433,12 @@ class TestCaseLoopStepComponent {
         if ((cfg === null || cfg === void 0 ? void 0 : cfg.forLoopDisplayHtml) && parts.length === 0) {
             const startMatch = cfg.forLoopDisplayHtml.match(/Start:\s*<[^>]*>([^<]*)</);
             const endMatch = cfg.forLoopDisplayHtml.match(/End:\s*<[^>]*>([^<]*)</);
-            if (startMatch)
-                parts.push(`<span class="for-loop-range-part">Start: <span class="test_data">${startMatch[1]}</span></span>`);
-            if (endMatch)
-                parts.push(`<span class="for-loop-range-part">End: <span class="test_data">${endMatch[1]}</span></span>`);
+            if (startMatch) {
+                parts.push(`<span class="for-loop-range-part">Start: <span data-key="test-data" data-event-key="forLoopStartIndex" class="test_data">${this.escapeForLoopHtml(startMatch[1])}</span></span>`);
+            }
+            if (endMatch) {
+                parts.push(`<span class="for-loop-range-part">End: <span data-key="test-data" data-event-key="forLoopEndIndex" class="test_data">${this.escapeForLoopHtml(endMatch[1])}</span></span>`);
+            }
         }
         return parts.join('');
     }
@@ -24781,14 +24851,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", 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'\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"!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-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: items flow on one row; only wrap to next line when there is not enough space -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-3 cqa-gap-y-1 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n      <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [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\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\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-ml-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      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\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        <!-- <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      <!-- 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    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (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          (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    <!-- Empty loop: show plus icon on hover when expanded and no steps.\n         When rendered inside a step group or when reordering, hide this Add button entirely. -->\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    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.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", "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", 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'\"\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      <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        <!-- <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 } });
 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'\"\n    [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n    style=\"border-bottom: 1px solid #E5E7EB;\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"!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-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Display: items flow on one row; only wrap to next line when there is not enough space -->\n    <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-3 cqa-gap-y-1 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n      <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [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\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\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-ml-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      <!-- Steps Summary -->\n      <div\n        class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline cqa-ml-auto\">View Details<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n\n      <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\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        <!-- <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      <!-- 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    <!-- START Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n        [nestingLevel]=\"nestingLevel + 1\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n        (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          (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    <!-- Empty loop: show plus icon on hover when expanded and no steps.\n         When rendered inside a step group or when reordering, hide this Add button entirely. -->\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    <!-- END Marker (centered with decorative lines) -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow 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'\"\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      <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        <!-- <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>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -24833,6 +24903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], naturalTextActionsOptions: [{
                 type: Input
+            }], currentTestCaseId: [{
+                type: Input
             }], setConditionTemplateVariables: [{
                 type: Input
             }], addStepBetweenAbove: [{
@@ -25157,7 +25229,7 @@ class TestCaseConditionStepComponent {
             this.templateVariablesForm = this.fb.group({});
         }
     }
-    buildElseIfBranch(index) {
+    buildElseIfBranch(index, triggerBranchIndex = 0) {
         // Initialize ELSE IF form with empty values or from existing ELSE IF branch if available
         // Use getAllBranchesFlat to include chained nextBranch ELSE IFs
         const elseIfBranches = this.getAllBranchesFlat().filter(b => b.type === 'else-if');
@@ -25171,13 +25243,22 @@ class TestCaseConditionStepComponent {
             conditionRight: [right],
         });
         const templateVariablesForm = this.fb.group({});
+        // Compute which branch ID this new ELSE IF should be inserted after
+        const triggerBranch = this.branches && this.branches.length > triggerBranchIndex
+            ? this.branches[triggerBranchIndex]
+            : null;
+        const insertAfterBranchId = (triggerBranch === null || triggerBranch === void 0 ? void 0 : triggerBranch.id) != null
+            ? String(triggerBranch.id)
+            : (this.config.id != null ? String(this.config.id) : undefined);
         return {
             id: `else-if-${Date.now()}-${Math.random()}`,
             form,
             selectedTemplate: null,
             templateVariables: [],
             templateVariablesForm,
-            snapshot: { conditionLeft: left, conditionOperator: operator, conditionRight: right }
+            snapshot: { conditionLeft: left, conditionOperator: operator, conditionRight: right },
+            triggerBranchIndex,
+            insertAfterBranchId,
         };
     }
     buildOperatorSelectConfig() {
@@ -25343,7 +25424,7 @@ class TestCaseConditionStepComponent {
         });
     }
     onElseConditionLeftSelect(option, branchId) {
-        var _a, _b;
+        var _a, _b, _c;
         const branch = this.elseIfBranches.find(b => b.id === branchId);
         if (!branch)
             return;
@@ -25382,8 +25463,9 @@ class TestCaseConditionStepComponent {
         const configBranch = this.getBranchById(branchId);
         const branchIndex = this.getBranchIndexById(branchId);
         const isNewBranch = typeof branchId === 'string' && branchId.startsWith('else-if-');
-        // Determine insertion point based on current edit context.
-        const insertAfterBranchId = this.getInsertAfterBranchId();
+        // Determine insertion point: use the branch-specific id stored when the form was created,
+        // falling back to the context-based helper for backward compatibility.
+        const insertAfterBranchId = (_c = branch.insertAfterBranchId) !== null && _c !== void 0 ? _c : this.getInsertAfterBranchId();
         setTimeout(() => this.onEditInDepth(fullTemplate, configBranch !== null && configBranch !== void 0 ? configBranch : undefined, branchIndex >= 0 ? branchIndex : undefined, isNewBranch, branch, insertAfterBranchId), 100);
     }
     buildElseTemplateVariablesForm(branch) {
@@ -25416,11 +25498,20 @@ class TestCaseConditionStepComponent {
             branch.templateVariablesForm.addControl(variable.name, new FormControl(defaultValue));
         });
     }
-    onAddElse() {
+    onAddElse(triggerBranchIndex = 0) {
         // Add a new ELSE IF branch (UI row only; APIs are called when user clicks Apply)
-        const newBranch = this.buildElseIfBranch();
+        const newBranch = this.buildElseIfBranch(undefined, triggerBranchIndex);
         this.elseIfBranches.push(newBranch);
     }
+    /** Returns the pending ELSE IF add-forms that belong after a specific branch row. */
+    getElseIfBranchesForBranchIndex(branchIndex) {
+        return this.elseIfBranches.filter(b => b.triggerBranchIndex === branchIndex);
+    }
+    /** True when the given elseIfBranch is the last pending one (determines where Cancel/Apply are shown). */
+    isLastElseIfBranch(branchId) {
+        return this.elseIfBranches.length > 0 &&
+            this.elseIfBranches[this.elseIfBranches.length - 1].id === branchId;
+    }
     onAddElseBranch() {
         // Emit so parent can call POST test_steps with conditionType CONDITION_ELSE
         if (this.config) {
@@ -25712,6 +25803,37 @@ class TestCaseConditionStepComponent {
     getEndBranchLabel(branch) {
         return branch.type === 'if' ? 'END IF' : branch.type === 'else-if' ? 'END ELSE IF' : 'END ELSE';
     }
+    /** START branch marker: first nested step's step number in this branch. */
+    getBranchMarkerStartStep(branch) {
+        var _a, _b;
+        const steps = branch.nestedSteps;
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+        }
+        const first = steps[0];
+        if ((first === null || first === void 0 ? void 0 : first.stepNumber) != null && first.stepNumber !== '') {
+            return String(first.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
+    /** END branch marker: last nested step's step number in this branch. */
+    getBranchMarkerEndStep(branch) {
+        var _a, _b;
+        const steps = branch.nestedSteps;
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+        }
+        const last = steps[steps.length - 1];
+        if ((last === null || last === void 0 ? void 0 : last.stepNumber) != null && last.stepNumber !== '') {
+            return String(last.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
+    /** END CONDITION marker: this condition step's display number. */
+    getEndConditionMarkerStepDisplay() {
+        var _a;
+        return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+    }
     /** Branch display number: full hierarchical number. IF = stepNumber (e.g. 2.1.50), ELSE IF = 2.1.51, ELSE = 2.1.52. */
     getBranchDisplayNumber(branchIndex) {
         if (branchIndex === 0) {
@@ -26142,13 +26264,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", 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] ' + (isNested ? ' cqa-pl-[24px]' : '')\" 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-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div 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    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-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        <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-1 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        <!-- 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()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            [compact]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link: branch.id is a temporary UI-only id (not in saved branches),\n               so pass isCreateMode=true with the branch object directly instead of looking it up -->\n          <a href=\"#\" (click)=\"onEditInDepth(branch.selectedTemplate || undefined, null, undefined, true, branch, getInsertAfterBranchId()); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(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-1 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(); $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      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || 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          (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            (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: END IF, END ELSE IF, or END ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.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: ["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", "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", 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        <!-- 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: ["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 } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
                         STEP_ROW_ACTIONS_STYLES,
                         CONDITION_BRANCH_EMPTY_STYLES,
-                    ], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\" 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-bottom: 1px solid #E5E7EB; min-height: 50px\">\n    <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n    <div 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    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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        <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n          <span *ngFor=\"let badge of getBranchTypeBadges()\"\n            [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n            {{ badge.label }}\n            <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n          </span>\n        </div>\n        <div\n          class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n          {{ getStepsSummary() }}\n        </div>\n        <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-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        <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-1 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        <!-- 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()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n        <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg></a>\n      </div>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </ng-container>\n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            [compact]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link: branch.id is a temporary UI-only id (not in saved branches),\n               so pass isCreateMode=true with the branch object directly instead of looking it up -->\n          <a href=\"#\" (click)=\"onEditInDepth(branch.selectedTemplate || undefined, null, undefined, true, branch, getInsertAfterBranchId()); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n  <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n      <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n      <div\n        *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n        (click)=\"$event.stopPropagation()\"\n        (mousedown)=\"$event.stopPropagation()\"\n        [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n          <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n          <span>{{ getBranchLabel(branch) }}</span>\n          <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n          <cqa-autocomplete\n            *ngIf=\"editForm\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"conditionLeftDisplayValue\"\n            (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n            (optionSelect)=\"onConditionLeftSelect($event)\"\n            placeholder=\"Select Condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n          <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n          <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n          <a href=\"#\" (click)=\"onEditInDepth(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-1 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(); $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      <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder || 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          (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            (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: END IF, END ELSE IF, or END ELSE - only when branch has nested steps -->\n      <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n    <!-- END CONDITION: final marker after all branches -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n    </div>\n  </div>\n</div>" }]
+                    ], template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" 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        <!-- 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>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -26185,6 +26307,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], naturalTextActionsOptions: [{
                 type: Input
+            }], currentTestCaseId: [{
+                type: Input
             }], setConditionTemplateVariables: [{
                 type: Input
             }], addStepBetweenAbove: [{
@@ -26309,6 +26433,24 @@ class TestCaseStepGroupComponent {
         const level = Number(this.nestingLevel) || 0;
         return 16 + (level * 24);
     }
+    /**
+     * When reusable, show a banner that nested steps must be edited in the step group's source test case—except when
+     * the user is already on that test case (currentTestCaseId === stepGroupId).
+     */
+    shouldShowReusableNestedEditBanner() {
+        var _a;
+        if (!this.reusable) {
+            return false;
+        }
+        const sgId = (_a = this.config) === null || _a === void 0 ? void 0 : _a.stepGroupId;
+        if (sgId == null) {
+            return true;
+        }
+        if (this.currentTestCaseId == null || this.currentTestCaseId === '') {
+            return true;
+        }
+        return String(this.currentTestCaseId) !== String(sgId);
+    }
     onDndDrop(event) {
         this.dndDropInZone.emit({ event, targetList: this.nestedSteps });
     }
@@ -26426,6 +26568,32 @@ class TestCaseStepGroupComponent {
         const end = tooLong ? count : endRaw;
         return `Steps ${start}-${end} (${count} step${count !== 1 ? 's' : ''})`;
     }
+    /** START GROUP marker: first nested step's display step number (matches row numbering). */
+    getStartGroupMarkerStepDisplay() {
+        var _a, _b;
+        const steps = this.nestedSteps;
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+        }
+        const first = steps[0];
+        if ((first === null || first === void 0 ? void 0 : first.stepNumber) != null && first.stepNumber !== '') {
+            return String(first.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
+    /** END GROUP marker: last nested step's display step number. */
+    getEndGroupMarkerStepDisplay() {
+        var _a, _b;
+        const steps = this.nestedSteps;
+        if (!(steps === null || steps === void 0 ? void 0 : steps.length)) {
+            return String((_a = this.stepNumber) !== null && _a !== void 0 ? _a : '');
+        }
+        const last = steps[steps.length - 1];
+        if ((last === null || last === void 0 ? void 0 : last.stepNumber) != null && last.stepNumber !== '') {
+            return String(last.stepNumber);
+        }
+        return String((_b = this.stepNumber) !== null && _b !== void 0 ? _b : '');
+    }
     onToggleExpanded() {
         this.expanded = !this.expanded;
         this.toggleExpanded.emit({ config: this.config, expanded: this.expanded });
@@ -26575,10 +26743,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", 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\">\n    <div 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 && !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-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $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 class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 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\" 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 type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-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    <!-- START GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">START GROUP</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></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 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        (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          (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 with decorative lines) - only when there are nested steps -->\n      <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END GROUP</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.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", "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", 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 } });
 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\">\n    <div 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 && !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-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    </div>\n    <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded(); $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 class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2 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\" 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 type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary (show loader when loading on expand) -->\n      <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n        Loading...\n      </span>\n      <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-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    <!-- START GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n    <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n      <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">START GROUP</span>\n      <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></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 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        (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          (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 with decorative lines) - only when there are nested steps -->\n      <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n        <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END GROUP</span>\n        <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></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        [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>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -26623,6 +26791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], naturalTextActionsOptions: [{
                 type: Input
+            }], currentTestCaseId: [{
+                type: Input
             }], addStepBetweenAbove: [{
                 type: Input
             }], addStepBetweenBelow: [{
@@ -26791,10 +26961,10 @@ class TestCaseApiStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$7.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseApiStepComponent, selector: "cqa-test-case-api-step", inputs: { config: "config", stepNumber: "stepNumber", method: "method", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n      </div>\n      <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n            <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n          </div>\n          <div\n            class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n              <span>{{ baseUrl || 'https://api.example.com' }}</span>\n            </div>\n            <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span>Headers: {{ headersCount ?? 0 }}</span>\n              <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n              <span>Save to: {{ saveTo || '\u2014' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"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      <!-- <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      <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n        {{ expanded ? 'Hide Details' : 'View Details' }}\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <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\"/>\n        </svg>\n      </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  </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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseApiStepComponent, selector: "cqa-test-case-api-step", inputs: { config: "config", stepNumber: "stepNumber", method: "method", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n      </div>\n      <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n            <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n          </div>\n          <div\n            class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n              <span>{{ baseUrl || 'https://api.example.com' }}</span>\n            </div>\n            <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span>Headers: {{ headersCount ?? 0 }}</span>\n              <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n              <span>Save to: {{ saveTo || '\u2014' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"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      <!-- <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      <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n        {{ expanded ? 'Hide Details' : 'View Details' }}\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <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\"/>\n        </svg>\n      </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  </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"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n      </div>\n      <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n            <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n          </div>\n          <div\n            class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n              <span>{{ baseUrl || 'https://api.example.com' }}</span>\n            </div>\n            <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span>Headers: {{ headersCount ?? 0 }}</span>\n              <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n              <span>Save to: {{ saveTo || '\u2014' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"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      <!-- <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      <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n        {{ expanded ? 'Hide Details' : 'View Details' }}\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <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\"/>\n        </svg>\n      </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  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"API\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n          stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n          stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n      </div>\n      <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n          <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n            <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n            <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n          </div>\n          <div\n            class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n              <span>{{ baseUrl || 'https://api.example.com' }}</span>\n            </div>\n            <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n            <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n              <span>Headers: {{ headersCount ?? 0 }}</span>\n              <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n              <span>Save to: {{ saveTo || '\u2014' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"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      <!-- <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      <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n        {{ expanded ? 'Hide Details' : 'View Details' }}\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <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\"/>\n        </svg>\n      </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  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$7.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
                 type: ViewChild,
                 args: ['editModalBackdrop']
@@ -26941,10 +27111,10 @@ class TestCaseDatabaseStepComponent {
     onQueryChange(value) { this.query = value; this.queryChange.emit(value); }
 }
 TestCaseDatabaseStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDatabaseStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDatabaseStepComponent, selector: "cqa-test-case-database-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"Database\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n        </span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n          expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n            viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg></a>\n      </div>\n      <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n          <span class=\"text-[#111827]\">{{connectionName}}</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n          <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button\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      ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg><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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
+TestCaseDatabaseStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDatabaseStepComponent, selector: "cqa-test-case-database-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"Database\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n        </span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n          expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n            viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg></a>\n      </div>\n      <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n          <span class=\"text-[#111827]\">{{connectionName}}</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n          <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button\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      ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg><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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-database-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"Database\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n        </span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n          expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n            viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg></a>\n      </div>\n      <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n          <span class=\"text-[#111827]\">{{connectionName}}</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n          <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button\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      ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg><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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-database-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"Database\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n        <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n        <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n        </span>\n        <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n          expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n            viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n              fill=\"#3F43EE\" />\n          </svg></a>\n      </div>\n      <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n          <span class=\"text-[#111827]\">{{connectionName}}</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n          <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n        </div>\n      </div>\n    </div>\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      <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button\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      ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg><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></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>" }]
         }], propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27066,10 +27236,10 @@ class TestCaseAiAgentStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseAiAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseAiAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiAgentStepComponent, selector: "cqa-test-case-ai-agent-step", inputs: { config: "config", stepNumber: "stepNumber", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-bottom: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
+TestCaseAiAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiAgentStepComponent, selector: "cqa-test-case-ai-agent-step", inputs: { config: "config", stepNumber: "stepNumber", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-ai-agent-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-bottom: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-ai-agent-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27191,10 +27361,10 @@ class TestCaseAiVerifyStepComponent {
     }
 }
 TestCaseAiVerifyStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <div class=\"cqa-min-w-0 cqa-flex-1\">\n    <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n  </div>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27312,10 +27482,10 @@ class TestCaseUploadStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseUploadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseUploadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseUploadStepComponent, selector: "cqa-test-case-upload-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseUploadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseUploadStepComponent, selector: "cqa-test-case-upload-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-upload-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-upload-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n  <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27442,10 +27612,10 @@ class TestCaseScreenshotStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseScreenshotStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseScreenshotStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScreenshotStepComponent, selector: "cqa-test-case-screenshot-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n  <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseScreenshotStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScreenshotStepComponent, selector: "cqa-test-case-screenshot-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n  <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-screenshot-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n  <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-screenshot-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n  <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27635,10 +27805,10 @@ class TestCaseScrollStepComponent {
     }
 }
 TestCaseScrollStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", action: "action" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-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 && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg></a>\n\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", action: "action" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-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 && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg></a>\n\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-scroll-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n    <div class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-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 && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg></a>\n\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-test-case-scroll-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n  <div\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n    [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n    [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n    <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n      <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n      <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        </svg>\n      </div>\n      <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n      <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n        <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n          class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n          [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n        <span\n          class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n          [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n          <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </label>\n    </div>\n    <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    <span title=\"Scroll\"\n      class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n      </svg>\n    </span>\n    <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n        <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n        <span *ngIf=\"hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n          [innerHTML]=\"getActionHtml()\"\n          (click)=\"clickOnAction($event)\">\n        </span>\n        <span *ngIf=\"!hasActionHtml()\"\n          class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n          {{ getDisplayText() }}\n        </span>\n      </div>\n      <!-- Expanded details: light blue panel with Selector, Direction -->\n      <div *ngIf=\"expanded\"\n        [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n        <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n          <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n          <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n          <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"cqa-flex cqa-items-center cqa-gap-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 && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"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]\"><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></button>\n      <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button> -->\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg></button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n          fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg></button>\n      </div>\n\n      <!-- View Details Link (show only if description is not empty) -->\n      <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n        expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n          viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg></a>\n\n      <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n      <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n        {{ config.createdDate | date:'d MMM yyyy' }}\n      </span>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27770,10 +27940,10 @@ class TestCaseVerifyUrlStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseVerifyUrlStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseVerifyUrlStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseVerifyUrlStepComponent, selector: "cqa-test-case-verify-url-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseVerifyUrlStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseVerifyUrlStepComponent, selector: "cqa-test-case-verify-url-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-verify-url-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-verify-url-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -27891,10 +28061,10 @@ class TestCaseRestoreSessionStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseRestoreSessionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseRestoreSessionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseRestoreSessionStepComponent, selector: "cqa-test-case-restore-session-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseRestoreSessionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseRestoreSessionStepComponent, selector: "cqa-test-case-restore-session-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-restore-session-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-restore-session-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n      </svg>\n    </div>\n    <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n    <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{
@@ -28013,10 +28183,10 @@ class TestCaseCustomCodeStepComponent {
     onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
 }
 TestCaseCustomCodeStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TestCaseCustomCodeStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseCustomCodeStepComponent, selector: "cqa-test-case-custom-code-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n      </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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
+TestCaseCustomCodeStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseCustomCodeStepComponent, selector: "cqa-test-case-custom-code-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n      </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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-custom-code-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n  <div class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n      </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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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  <span title=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
+            args: [{ selector: 'cqa-test-case-custom-code-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\n  <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n    <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n    <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n        <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n      </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        [disabled]=\"disabled\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n  </div>\n  <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  <span title=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n  </span>\n  <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n  <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\n  <div class=\"cqa-flex-grow\"></div>\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    <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n    <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></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]\"><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></button>\n    <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button> -->\n    <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n    <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n    </div>\n    <a *ngIf=\"description && 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</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
             }], stepNumber: [{